feat(typography): MdcTypography moved to MdcCoreModule (#244)

* feat(typography): MdcTypography moved to MdcCoreModule

Reference issue #243

BREAKING CHANGE: Remove `MdcTypographyModule` from your code, and if necessary add an import of `MdcCoreModule`.

config/webpack/webpack.dev.js

@@ -78,13 +78,6 @@ module.exports = [{
       }, {
           test: /\.html$/,
           loader: 'html-loader'
-      }, {
-        test: /\.(png|jpg|svg)$/,
-        loader: "file-loader",
-        options: {
-          name: '[path][name].[ext]',
-          publicPath: 'assets/'
-        }
       }, {
           test: /\.scss$/,
           use: ExtractTextPlugin.extract({

package.json

@@ -74,7 +74,6 @@
     "css-loader": "^0.28.7",
     "cz-conventional-changelog": "2.0.0",
     "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^1.1.4",
     "focus-trap": "^2.3.0",
     "glob": "^7.1.2",
     "html-loader": "^0.5.1",
@@ -136,12 +135,14 @@
           "button",
           "card",
           "checkbox",
+          "core",
           "dialog",
           "drawer",
           "elevation",
           "fab",
           "form-field",
           "grid-list",
+          "icon",
           "icon-toggle",
           "layout-grid",
           "linear-progress",

src/demo-app/demo-material.module.ts

@@ -11,7 +11,7 @@ import {
   MdcIconToggleModule,
   MdcLinearProgressModule,
   MdcListModule,
-  MdcMaterialIconModule,
+  MdcCoreModule,
   MdcMenuModule,
   MdcRadioModule,
   MdcSliderModule,
@@ -21,10 +21,9 @@ import {
   MdcTextfieldModule,
   MdcThemeModule,
   MdcToolbarModule,
-  MdcTypographyModule,
   MdcRippleModule,
-} from '@angular-mdc/web';
-// } from '../lib/public_api';
+// } from '@angular-mdc/web';
+} from '../lib/public_api';
 
 @NgModule({
   exports: [
@@ -39,7 +38,7 @@ import {
     MdcIconToggleModule,
     MdcLinearProgressModule,
     MdcListModule,
-    MdcMaterialIconModule,
+    MdcCoreModule,
     MdcMenuModule,
     MdcRadioModule,
     MdcSliderModule,
@@ -49,7 +48,6 @@ import {
     MdcTextfieldModule,
     MdcThemeModule,
     MdcToolbarModule,
-    MdcTypographyModule,
     MdcRippleModule,
   ]
 })

src/lib/core/index.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+
+import { MdcMaterialIconModule } from './material-icon/index';
+import { MdcTypographyModule } from './typography/index';
+
+@NgModule({
+  imports: [MdcMaterialIconModule, MdcTypographyModule],
+  exports: [MdcMaterialIconModule, MdcTypographyModule],
+})
+export class MdcCoreModule { }
+
+export * from './public_api';

src/lib/core/material-icon/index.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+
+import { MdcMaterialIcon } from './material-icon.directive';
+
+@NgModule({
+  exports: [MdcMaterialIcon],
+  declarations: [MdcMaterialIcon],
+})
+export class MdcMaterialIconModule { }
+
+export * from './material-icon.directive';

src/lib/core/material-icon/material-icon.directive.ts

@@ -0,0 +1,11 @@
+import {
+  Directive,
+  HostBinding,
+} from '@angular/core';
+
+@Directive({
+  selector: '[material-icon]'
+})
+export class MdcMaterialIcon {
+  @HostBinding('class.material-icons') isHostClass = true;
+}

src/lib/core/public_api.ts

@@ -0,0 +1,2 @@
+export * from './material-icon/index';
+export * from './typography/index';

src/lib/core/typography/index.ts

@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core';
+
+import {
+  MdcAdjustMarginDirective,
+  MdcBody1Directive,
+  MdcBody2Directive,
+  MdcButtonDirective,
+  MdcCaptionDirective,
+  MdcDisplay1Directive,
+  MdcDisplay2Directive,
+  MdcDisplay3Directive,
+  MdcDisplay4Directive,
+  MdcHeadlineDirective,
+  MdcSubheading1Directive,
+  MdcSubheading2Directive,
+  MdcTitleDirective,
+  MdcTypography,
+} from './typography.directive';
+
+const TYPOGRAPHY_DIRECTIVES = [
+  MdcAdjustMarginDirective,
+  MdcBody1Directive,
+  MdcBody2Directive,
+  MdcButtonDirective,
+  MdcCaptionDirective,
+  MdcDisplay1Directive,
+  MdcDisplay2Directive,
+  MdcDisplay3Directive,
+  MdcDisplay4Directive,
+  MdcHeadlineDirective,
+  MdcSubheading1Directive,
+  MdcSubheading2Directive,
+  MdcTitleDirective,
+  MdcTypography,
+];
+
+@NgModule({
+  exports: [TYPOGRAPHY_DIRECTIVES],
+  declarations: [TYPOGRAPHY_DIRECTIVES],
+})
+export class MdcTypographyModule { }
+
+export * from './typography.directive';

src/lib/core/typography/typography.directive.ts

@@ -0,0 +1,102 @@
+import {
+  Directive,
+  HostBinding,
+} from '@angular/core';
+
+@Directive({
+  selector: '[mdc-typography]'
+})
+export class MdcTypography {
+  @HostBinding('class.mdc-typography') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-adjust-margin]'
+})
+export class MdcAdjustMarginDirective {
+  @HostBinding('class.mdc-typography--adjust-margin') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-display4]'
+})
+export class MdcDisplay4Directive {
+  @HostBinding('class.mdc-typography--display4') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-display3]'
+})
+export class MdcDisplay3Directive {
+  @HostBinding('class.mdc-typography--display3') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-display2]'
+})
+export class MdcDisplay2Directive {
+  @HostBinding('class.mdc-typography--display2') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-display1]'
+})
+export class MdcDisplay1Directive {
+  @HostBinding('class.mdc-typography--display1') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-headline]'
+})
+export class MdcHeadlineDirective {
+  @HostBinding('class.mdc-typography--headline') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-title]'
+})
+export class MdcTitleDirective {
+  @HostBinding('class.mdc-typography--title') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-subheading2]'
+})
+export class MdcSubheading2Directive {
+  @HostBinding('class.mdc-typography--subheading2') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-subheading1]'
+})
+export class MdcSubheading1Directive {
+  @HostBinding('class.mdc-typography--subheading1') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-body2]'
+})
+export class MdcBody2Directive {
+  @HostBinding('class.mdc-typography--body2') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-body1]'
+})
+export class MdcBody1Directive {
+  @HostBinding('class.mdc-typography--body1') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-caption]'
+})
+export class MdcCaptionDirective {
+  @HostBinding('class.mdc-typography--caption') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-button]'
+})
+export class MdcButtonDirective {
+  @HostBinding('class.mdc-typography--button') isHostClass = true;
+}

src/lib/module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 
 import { MdcButtonModule } from './button/index';
+import { MdcCoreModule } from './core/index';
 import { MdcCardModule } from './card/index';
 import { MdcCheckboxModule } from './checkbox/index';
 import { MdcDialogModule } from './dialog/index';
@@ -11,7 +12,6 @@ import { MdcFormFieldModule } from './form-field/index';
 import { MdcIconToggleModule } from './icon-toggle/index';
 import { MdcLinearProgressModule } from './linear-progress/index';
 import { MdcListModule } from './list/index';
-import { MdcMaterialIconModule } from './material-icon/index';
 import { MdcMenuModule } from './menu/index';
 import { MdcRadioModule } from './radio/index';
 import { MdcSliderModule } from './slider/index';
@@ -21,11 +21,11 @@ import { MdcTabModule } from './tabs/index';
 import { MdcTextfieldModule } from './textfield/index';
 import { MdcThemeModule } from './theme/index';
 import { MdcToolbarModule } from './toolbar/index';
-import { MdcTypographyModule } from './typography/index';
 
 const MATERIAL_MODULES = [
   MdcButtonModule,
   MdcCardModule,
+  MdcCoreModule,
   MdcCheckboxModule,
   MdcDialogModule,
   MdcDrawerModule,
@@ -35,7 +35,6 @@ const MATERIAL_MODULES = [
   MdcIconToggleModule,
   MdcLinearProgressModule,
   MdcListModule,
-  MdcMaterialIconModule,
   MdcMenuModule,
   MdcRadioModule,
   MdcSliderModule,
@@ -45,7 +44,6 @@ const MATERIAL_MODULES = [
   MdcTextfieldModule,
   MdcThemeModule,
   MdcToolbarModule,
-  MdcTypographyModule,
 ];
 
 /** @deprecated Use public_api */

src/lib/public_api.ts

@@ -1,5 +1,4 @@
-export * from './module';
-
+export * from './core/index';
 export * from './button/index';
 export * from './card/index';
 export * from './checkbox/index';
@@ -13,7 +12,6 @@ export * from './form-field/index';
 export * from './icon-toggle/index';
 export * from './linear-progress/index';
 export * from './list/index';
-export * from './material-icon/index';
 export * from './menu/index';
 export * from './radio/index';
 export * from './ripple/index';
@@ -24,7 +22,6 @@ export * from './tabs/index';
 export * from './textfield/index';
 export * from './theme/index';
 export * from './toolbar/index';
-export * from './typography/index';
 
 export * from './cdk/overlay/index';
 export * from './cdk/portal/index';

test/unit/typography/typography.test.ts

@@ -74,6 +74,7 @@ describe('MdcTypography', () => {
   <h1 mdc-typography-body1></h1>
   <h1 mdc-typography-caption></h1>
   <h1 mdc-typography-button></h1>
+  <p mdc-typography-adjust-margin></p>
   </div>
   `,
 })