refactor: Library improvements + refactoring (#329)

Closes #328

Author: trimox

package.json

@@ -36,6 +36,7 @@
     "lint": "npm run lint:ts && npm run lint:css",
     "lint:ts": "tslint 'src/**/*.ts test/**/*.ts'",
     "lint:css": "stylelint src/**/*.scss --config .stylelint-config.yaml",
+    "fix:css": "stylelint --fix src/**/*.scss --config .stylelint-config.yaml",
     "test": "npm run test:unit",
     "test:unit": "karma start --single-run",
     "test:watch": "karma start --auto-watch",

src/demo-app/components/buttons/fab-demo/fab-demo.ts

@@ -1,13 +1,14 @@
 import { Component, ViewChild } from '@angular/core';
 
-import { MdcFabComponent } from '../../../../lib/public_api';
+// import { MdcFab } from '@angular-mdc/web';
+import { MdcFab } from '../../../../lib/public_api';
 
 @Component({
   selector: 'fab-demo',
   templateUrl: './fab-demo.html'
 })
 export class FabDemo {
-  @ViewChild('fab') fab: MdcFabComponent;
+  @ViewChild('fab') fab: MdcFab;
   isMini: boolean = false;
   isExited: boolean = false;
   isRippleDisabled: boolean = false;

src/demo-app/components/buttons/icon-toggle-demo/icon-toggle-demo.ts

@@ -6,8 +6,8 @@ import { Component } from '@angular/core';
 })
 export class IconToggleDemo {
   isOn: boolean = false;
-  isDisabled: boolean;
-  isPrimary: boolean;
-  isAccent: boolean;
-  isDarkTheme: boolean;
+  isDisabled: boolean = false;
+  isPrimary: boolean = false;
+  isAccent: boolean = false;
+  isDarkTheme: boolean = false;
 }

src/demo-app/components/dialog-demo/dialog-demo.ts

@@ -1,7 +1,8 @@
 import { Component, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 
-import { MdcDialogComponent, MdcTextfield } from '../../../lib/public_api';
+// import { MdcDialog, MdcTextfield } from '@angular-mdc/web';
+import { MdcDialog, MdcTextfield } from '../../../lib/public_api';
 
 @Component({
   selector: 'dialog-demo',
@@ -11,11 +12,11 @@ export class DialogDemo {
   userForm: FormGroup;
 
   @ViewChild('input') input: MdcTextfield;
-  @ViewChild('dialog') dialog: MdcDialogComponent;
-  @ViewChild('dialogscroll') dialogScroll: MdcDialogComponent;
-  @ViewChild('dialogalert') dialogAlert: MdcDialogComponent;
-  @ViewChild('dialoggmail') dialogGmail: MdcDialogComponent;
-  @ViewChild('dialogform') dialogForm: MdcDialogComponent;
+  @ViewChild('dialog') dialog: MdcDialog;
+  @ViewChild('dialogscroll') dialogScroll: MdcDialog;
+  @ViewChild('dialogalert') dialogAlert: MdcDialog;
+  @ViewChild('dialoggmail') dialogGmail: MdcDialog;
+  @ViewChild('dialogform') dialogForm: MdcDialog;
 
   ngOnInit() {
     this.userForm = new FormGroup({

src/demo-app/components/drawer-demo/drawer-demo.html

@@ -3,18 +3,16 @@ import {
   ViewChild
 } from '@angular/core';
 
-import {
-  MdcTemporaryDrawerComponent,
-  MdcPersistentDrawerComponent
-} from '../../../lib/public_api';
+// import { MdcTemporaryDrawer, MdcPersistentDrawer } from '@angular-mdc/web';
+import { MdcTemporaryDrawer, MdcPersistentDrawer } from '../../../lib/public_api';
 
 @Component({
   selector: 'drawer-demo',
   templateUrl: './drawer-demo.html'
 })
 export class DrawerDemo {
-  @ViewChild('temporary') temporaryDrawer: MdcTemporaryDrawerComponent;
-  @ViewChild('persistent') persistentDrawer: MdcPersistentDrawerComponent;
+  @ViewChild('temporary') temporaryDrawer: MdcTemporaryDrawer;
+  @ViewChild('persistent') persistentDrawer: MdcPersistentDrawer;
 
   handleTemporary() {
     this.temporaryDrawer.open();

src/demo-app/components/drawer-demo/drawer-demo.ts

@@ -123,7 +123,6 @@ <h1 mdc-typography-display1>Snackbar</h1>
 @Component({
   selector: 'snackbar-demo',
   templateUrl: './snackbar-demo.component.html',
-  providers: [MdcSnackbar],
 })
 export class SnackbarDemoComponent {
   message = 'Message deleted';

src/demo-app/components/snackbar-demo/snackbar-demo.html

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 
+// import { MdcSnackbar } from '@angular-mdc/web';
 import { MdcSnackbar } from '../../../lib/public_api';
 
 @Component({
   selector: 'snackbar-demo',
   templateUrl: './snackbar-demo.html',
-  providers: [MdcSnackbar],
 })
 export class SnackbarDemo {
   message = 'Message deleted';

src/demo-app/components/snackbar-demo/snackbar-demo.ts

@@ -1,43 +1,16 @@
 <div class="mdc-padding">
 <h1 id="angularmdcgettingstarted">Angular MDC - Getting started</h1>
 
-<ul>
-<li><a href="#step1">Step 1 - Install Angular MDC</a></li>
-
-<li><a href="#step2">Step 2 - Import Components</a></li>
-
-<li><a href="#step3">Step 3 - Import Theme</a></li>
-
-<li><a href="#step4">Step 4 - Include Material Design Icons</a></li>
-
-<li><a href="#step5">Step 5 - Include Roboto Font</a></li>
-</ul>
-
 <h2 id="usingangularcli">Using Angular CLI?</h2>
 
 <p>If you intend to use Angular CLI, please reference <a href="https://github.com/trimox/angular-mdc-web/blob/master/docs/guide-angular-cli.md">Angular CLI - Getting Started guide</a>.</p>
 
 <h2 id="anamestep1astep1installangularmdc"><a name="step1"></a> Step 1: Install Angular MDC</h2>
 
-<pre><code>npm i @angular-mdc/web
-</code></pre>
+<pre>npm i @angular-mdc/web</pre>
 
 <h2 id="anamestep2astep2importcomponents"><a name="step2"></a> Step 2: Import Components</h2>
-
-<h3 id="allcomponents">All components</h3>
-
-<pre><![CDATA[import { MaterialModule } from '@angular-mdc/web';
-
-@NgModule({
-  ...
-  imports: [MaterialModule],
-  ...
-})
-export class ExampleModule { }
-]]></pre>
-
-<h3 id="orindividualcomponents">Or individual components</h3>
-
+Add an import of MdcCoreModule to provide ripple, typography, and elevation functionality. Now just import the NgModule for each component you want to use.
 <pre><![CDATA[import {
   MdcCoreModule, // required
   MdcFabModule,
@@ -61,25 +34,23 @@ <h2 id="anamestep3astep3importangularmdctheme"><a name="step3"></a> Step 3: Impo
 
 <p>Import the Angular MDC theme into your project Sass:</p>
 
-<pre><code class="sass language-sass">$mdc-theme-primary: #1565c0; // change primary color example
+<pre>$mdc-theme-primary: #1565c0; // change primary color example
 $mdc-theme-secondary: #388e3c; // change secondary color example
 
 @import "~@angular-mdc/theme/material";
-</code></pre>
+</pre>
 
 <h2 id="anamestep4astep4includematerialdesignicons"><a name="step4"></a> Step 4: Include Material Design Icons</h2>
 
 <p>Add the <a href="https://material.io/icons/">Material Design Icons</a> collection to your <code>index.html</code>.</p>
 
-<pre><code class="html language-html">&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
-</code></pre>
+<pre>&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;</pre>
 
 <h2 id="anamestep5astep5includerobotofont"><a name="step5"></a> Step 5: Include Roboto Font</h2>
 
 <p>Add the Roboto font with 300, 400 and 500 weights to your <code>index.html</code>.</p>
 
-<pre><code class="html language-html">&lt;link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"&gt;
-</code></pre>
+<pre>&lt;link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"&gt;</pre>
 
-<h3 id="alldone">All done!</h3>
+<h3 id="alldone">All set!</h3>
 </div>

src/demo-app/docs/getting-started.html

@@ -11,7 +11,7 @@ <h2 mdc-typography-display2 mdc-typography-adjust-margin fxShow fxHide.xs="true"
     <button fxFlexOffset="25px" [raised]="true" [secondary]="true" mdc-button [routerLink]="['getting-started']">Get Started</button>
   </mdc-card>
   <div mdc-typography-caption fxFlexOffset="40px" fxLayout="column" fxLayoutAlign="center center">
-    <span>angular-mdc-web v0.5.5</span>
+    <span>angular-mdc-web v0.5.6</span>
     <span>material-components-web v0.23.0</span>
   </div>
 </div>