refactor: Library improvements + refactoring (#329)

Closes #328

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.ts

@@ -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/snackbar-demo/snackbar-demo.html

@@ -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.ts

@@ -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/docs/getting-started.html

@@ -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/home/home.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>

src/demo-app/home/home.ts

@@ -4,5 +4,4 @@
   selector: 'home',
   templateUrl: './home.html'
 })
-export class Home {
-}
+export class Home { }

src/demo-app/navigation/app-toolbar.ts

@@ -1,7 +1,6 @@
 import { Component, ViewChild } from '@angular/core';
 
 import { navigationLinks } from './index';
-import { MdcTemporaryDrawerComponent } from '../../lib/public_api';
 
 @Component({
   selector: 'app-toolbar',
@@ -10,7 +9,7 @@ import { MdcTemporaryDrawerComponent } from '../../lib/public_api';
 export class AppToolbar {
   navLinks = navigationLinks;
   isFixed: boolean = true;
-  @ViewChild('drawer') drawer: MdcTemporaryDrawerComponent;
+  @ViewChild('drawer') drawer: any;
 
   toggleDrawer() {
     this.drawer.open();

src/lib/button/button.ts

@@ -7,7 +7,7 @@ import {
   HostListener,
   Input,
   Renderer2,
-  ViewEncapsulation
+  ViewEncapsulation,
 } from '@angular/core';
 import { MdcIcon } from '../icon/icon';
 import { MdcRipple } from '../core/ripple/ripple.service';
@@ -21,12 +21,13 @@ import {
   selector: 'button[mdc-button], a[mdc-button]',
   template: '<ng-content></ng-content>',
   host: {
-    '[attr.aria-disabled]': 'disabled.toString()',
+    '[attr.aria-disabled]': 'disabled.toString()'
   },
   providers: [MdcRipple],
+  encapsulation: ViewEncapsulation.None,
 })
 export class MdcButton implements AfterViewInit {
-  private disabled_: boolean = false;
+  private _disabled: boolean = false;
 
   @Input() raised: boolean = false;
   @Input() primary: boolean = false;
@@ -36,18 +37,18 @@ export class MdcButton implements AfterViewInit {
   @Input() unelevated: boolean = false;
   @Input() stroked: boolean = false;
   @Input()
-  get disabled(): boolean { return this.disabled_; }
-  set disabled(value) {
-    this.disabled_ = toBoolean(value);
-    if (this.disabled_) {
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value: boolean) {
+    this._disabled = toBoolean(value);
+    if (this._disabled) {
       this.renderer.setAttribute(this.elementRef.nativeElement, "disabled", 'true');
     } else {
       this.renderer.removeAttribute(this.elementRef.nativeElement, "disabled");
     }
   }
   @Input()
   get disableRipple(): boolean { return this.ripple.disabled; }
-  set disableRipple(value) {
+  set disableRipple(value: boolean) {
     this.ripple.disabled = toBoolean(value);
   }
   @HostBinding('tabindex') get tabindex(): number {
@@ -76,13 +77,13 @@ export class MdcButton implements AfterViewInit {
     return this.stroked ? 'mdc-button--stroked' : '';
   }
   @HostListener('click', ['$event']) onclick(evt: Event) {
-    this.handleClick_(evt);
+    this._onClick(evt);
   }
   @HostListener('keypress', ['$event']) onkeypress(evt: KeyboardEvent) {
-    this.handleKeyPress_(evt);
+    this._onKeyPress(evt);
   }
   @HostListener('blur', ['$event']) blur(evt: FocusEvent) {
-    this.handleBlur_(evt);
+    this._onBlur(evt);
   }
   @ContentChild(MdcIcon) buttonIcon: MdcIcon;
 
@@ -91,7 +92,7 @@ export class MdcButton implements AfterViewInit {
     public elementRef: ElementRef,
     public ripple: MdcRipple) { }
 
-  ngAfterViewInit() {
+  ngAfterViewInit(): void {
     if (this.buttonIcon) {
       this.renderer.addClass(this.buttonIcon.elementRef.nativeElement, 'mdc-button__icon');
     }
@@ -100,25 +101,25 @@ export class MdcButton implements AfterViewInit {
     }
   }
 
-  private handleClick_(event: Event) {
+  private _onClick(event: Event): void {
     // A disabled button shouldn't apply any actions
     if (this.disabled) {
       event.preventDefault();
       event.stopImmediatePropagation();
     }
   }
 
-  private handleKeyPress_(keyboardEvent: KeyboardEvent) {
-    let keyCode = keyboardEvent.keyCode;
-    if (keyCode == KeyCodes.ENTER || isSpaceKey(keyboardEvent)) {
+  private _onKeyPress(event: KeyboardEvent): void {
+    let keyCode = event.keyCode;
+    if (keyCode == KeyCodes.ENTER || isSpaceKey(event)) {
       this.ripple.active = true;
       if (keyCode != KeyCodes.ENTER) {
-        keyboardEvent.preventDefault();
+        event.preventDefault();
       }
     }
   }
 
-  private handleBlur_(focusEvent: FocusEvent) {
+  private _onBlur(event: FocusEvent): void {
     this.ripple.active = false;
   }
 }

src/lib/button/index.ts

@@ -1,11 +1,13 @@
 import { NgModule } from '@angular/core';
 
 import { MdcIconModule } from '../icon/index';
+import { MdcRippleModule } from '../core/ripple/index';
 import { MdcButton } from './button';
 
 @NgModule({
   imports: [
     MdcIconModule,
+    MdcRippleModule,
   ],
   exports: [
     MdcIconModule,