fix(text-field): Replace MutationObserver + fix validations (#1494)

* Fixed form validation detection
* Replaced MutationObserver for SSR support

Closes #1486 Closes #1493

Author: trimox

demos/app.module.ts

@@ -10,6 +10,7 @@ import { DialogExampleModule } from './components/dialog-demo/dialog-example.mod
 
 import { AppComponent } from './app.component';
 import { AppLayout } from './app-layout';
+import { HighlightModule } from 'ngx-highlightjs';
 
 import { APP_ROUTES, DEMO_ROUTES } from './routes';
 
@@ -21,10 +22,12 @@ import { APP_ROUTES, DEMO_ROUTES } from './routes';
     ReactiveFormsModule,
     DemoMaterialModule,
     DialogExampleModule,
+    HighlightModule.forRoot({
+      path: 'assets/highlightjs',
+      theme: 'github'
+    }),
     RouterModule.forRoot(APP_ROUTES, {
-      useHash: true,
-      enableTracing: false,
-      scrollPositionRestoration: 'enabled'
+      useHash: true
     })
   ],
   declarations: [

demos/assets/highlightjs/highlight.pack.js

@@ -0,0 +1,99 @@
+/*
+
+github.com style (c) Vasily Polovnyov <[email protected]>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #333;
+  background: #f8f8f8;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #998;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: #333;
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+  color: #008080;
+}
+
+.hljs-string,
+.hljs-doctag {
+  color: #d14;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  color: #900;
+  font-weight: bold;
+}
+
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+  color: #458;
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: #000080;
+  font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #009926;
+}
+
+.hljs-symbol,
+.hljs-bullet {
+  color: #990073;
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #0086b3;
+}
+
+.hljs-meta {
+  color: #999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}

demos/assets/highlightjs/styles/github.css

@@ -35,9 +35,10 @@ <h2>Design & API Documentation</h2>
         <tbody>
           <tr>
             <td>
-    <pre>open(myDialogComponent)
+    open(myDialogComponent)
 
-open(myDialogComponent, {{"{
+<pre><code highlight code="
+open(myDialogComponent, {
   id?: string,
   ariaDescribedBy?: string,
   ariaLabel?: string,
@@ -46,7 +47,7 @@ <h2>Design & API Documentation</h2>
   scrollable?: boolean,
   buttonsStacked?: boolean,
   data?: any
-}"}})></pre></td>
+})"></code></pre></td>
             <td>Opens the dialog with optional configuration.</td>
           </tr>
           <tr>
@@ -246,83 +247,79 @@ <h3 class="demo-content__headline">Dialog service</h3>
   <div class="demo-content">
     <h3 class="demo-content__headline">Usage</h3>
     A dialog is opened by calling the <code class="docs-markdown-code">open</code> method with a component to be loaded and an optional config object. The <code class="docs-markdown-code">open</code> method will return an instance of <code class="docs-markdown-code">MdcDialogRef</code>:
-    <pre>
-  let dialogRef = dialog.open(UserProfileComponent, {{"{
-    clickOutsideToClose: 'true',
-    escapeToClose: 'true',
-  }"}});
-  </pre>
+
+  <pre><code highlight code="let dialogRef = dialog.open(UserProfileComponent, {
+  clickOutsideToClose: 'true',
+  escapeToClose: 'true',
+});"></code></pre>
 
   The <code class="docs-markdown-code">MdcDialogRef</code> provides a handle on the opened dialog. It can be used to close the dialog and to receive notification when the dialog has been closed.
-  <pre>
-  dialogRef.afterClosed().subscribe(result => {{"{
-    console.log(`Dialog result: ${result}`); // Pizza!
-  }"}});
 
-  dialogRef.close('Pizza!');
-  </pre>
+  <pre><code highlight code="dialogRef.afterClosed().subscribe(result => {
+  console.log(`Dialog result: ${result}`);
+});
+
+dialogRef.close('Pizza!');"></code>
+</pre>
 
   <p>Components created via <code class="docs-markdown-code">MdcDialog</code> can inject <code class="docs-markdown-code">MdcDialogRef</code> and use it to close the dialog in which they are contained. When closing, an optional result value can be provided. This result value is forwarded as the result of the <code class="docs-markdown-code">afterClosed</code> promise.</p>
-  <pre>
-  @Component({{"{/* ... */}"}})
-  export class YourDialog {{"{
-    constructor(public dialogRef: MdcDialogRef<![CDATA[<YourDialog>]]>) { }
 
-    closeDialog() {
-      this.dialogRef.close('Pizza!');
-    }
-  }"}}
-  </pre>
+  <pre><code highlight code="
+@Component({/* ... */})
+export class YourDialog {
+  constructor(
+   dialogRef: MdcDialogRef<YourDialog>) { }
+
+  closeDialog() {
+    this.dialogRef.close('Pizza!');
+  }
+}"></code></pre>
 
     <h3 class="demo-content__headline">Sharing data with the Dialog component</h3>
     If you want to share data with your dialog, you can use the <code class="docs-markdown-code">data</code> option to pass information to the dialog component.
-  <pre>
-  let dialogRef = dialog.open(YourDialog, {{"{
-    data: {name: this.name, animal: this.animal}
-  }"}});
-  </pre>
+
+<pre>
+let dialogRef = dialog.open(YourDialog, {{"{
+  data: {name: this.name, animal: this.animal}
+}"}});
+</pre>
 
   To access the data in your dialog component.
-  <pre>
-  <![CDATA[
-  import { Component, Inject } from '@angular/core';
-  import { MdcDialogRef, MDC_DIALOG_DATA } from '@angular-mdc/web';
-  @Component({
-    // ...
-  })
-  export class YourDialog {
-    constructor(public dialogRef: MdcDialogRef<YourDialog>,
-      @Inject(MDC_DIALOG_DATA) public data: DialogData) {
-      userName: string = data.name;
-    }
-  }]]>
-  </pre>
 
+<pre><code highlight code="import { Component, Inject } from '@angular/core';
+import { 
+  MdcDialogRef,
+  MDC_DIALOG_DATA
+} from '@angular-mdc/web';
+
+@Component({
+  // ...
+})
+export class YourDialog {
+  constructor(
+    public dialogRef: MdcDialogRef<YourDialog>,
+    @Inject(MDC_DIALOG_DATA) data: DialogData) {
+    userName: string = data.name;
+  }
+}"></code></pre>
       <h3 class="demo-content__headline">Configuring dialog content via entryComponents</h3>
       <p mdcBody2>Because <code class="docs-markdown-code">MdcDialog</code> instantiates components at run-time, the Angular compiler needs extra information to create the necessary
         ComponentFactory for your dialog content component.</p>
       <p mdcBody2>For any component loaded into a dialog, you must include your component
         class in the list of <code class="docs-markdown-code">entryComponents</code> in your NgModule definition so that the Angular compiler knows to create the ComponentFactory.</p>
-  <pre>
-  <![CDATA[
-  @NgModule({
+  <pre><code highlight code="@NgModule({
     imports: [
       // ...
       MdcDialogModule
     ],
-
     declarations: [
       AppComponent,
       ExampleDialogComponent
     ],
-
     entryComponents: [
       ExampleDialogComponent
     ],
-
-    providers: [],
     bootstrap: [AppComponent]
   })
-  export class AppModule {}]]>
-  </pre>
+  export class AppModule {}"></code></pre>
 </div>

demos/components/dialog-demo/dialog-demo.html

@@ -133,6 +133,7 @@ <h3 class="demo-content__headline">Continuous Slider - ngModel</h3>
     <p>Value from input event: {{continuousInputEventValue}}</p>
     <p>Value from change event: {{continuousChangeEventValue}}</p>
   </div>
+
   <div class="demo-content">
     <h3 class="demo-content__headline">Discrete Slider</h3>
     <mdc-slider #demodiscrete [min]="discreteMin" [max]="discreteMax" [discrete]="true" [value]="50"
@@ -149,7 +150,7 @@ <h3 class="demo-content__headline">Discrete Slider</h3>
   <div class="demo-content">
     <h3 class="demo-content__headline">Discrete Slider with markers</h3>
       <mdc-slider #demomarkers [min]="dmMin" [max]="dmMax" [step]="dmStep" ngModel #demoMarkerModel="ngModel"
-       [discrete]="true" [markers]="true" [value]="20"
+       discrete markers [value]="20"
        (input)="markersInputEventValue = $event.value" (change)="markersChangeEventValue = $event.value"></mdc-slider>
     <mdc-text-field [(ngModel)]="dmMin" label="Min" type="number"></mdc-text-field>
     <mdc-text-field [(ngModel)]="dmMax" label="Max" type="number"></mdc-text-field>
@@ -164,6 +165,6 @@ <h3 class="demo-content__headline">Discrete Slider with markers</h3>
 
   <div class="demo-content">
     <h3 class="demo-content__headline">Custom colors</h3>
-    <mdc-slider [discrete]="true" [markers]="true" class="demo-slider--custom"></mdc-slider>
+    <mdc-slider discrete markers class="demo-slider--custom"></mdc-slider>
   </div>
 </div>

demos/components/slider-demo/slider-demo.html

@@ -245,9 +245,10 @@ <h3 class="demo-content__headline">Text Field - FormControl</h3>
       <button mdc-button (click)="alternateColors(demoformInput)">Alternate Colors</button>
     </div>
     <form [formGroup]="demoForm" id="demoForm" (ngSubmit)="submitForm()">
-      <mdc-text-field #demoformInput formControlName="userName" label="Username" maxlength="10" outlined [helperText]="demoformHelper" required></mdc-text-field>
+      <mdc-text-field #demoformInput formControlName="userName" label="Username" minlength="3" maxlength="10" outlined [helperText]="demoformHelper" required></mdc-text-field>
       <mdc-text-field-helper-text #demoformHelper="mdcHelperText" validation>
-        <span *ngIf="demoForm.errors?.required">Username is required</span>
+        <span *ngIf="demoForm.controls['userName'].errors?.required">Username is required</span>
+        <span *ngIf="demoForm.controls['userName'].errors?.minlength">Username is not long enough</span>
       </mdc-text-field-helper-text>
     </form>
     <div class="demo-layout__row">

demos/components/textfield-demo/textfield-demo.html

@@ -18,6 +18,7 @@ export class TextFieldDemo {
 
   submitForm() {
     if (!this.demoForm.valid) {
+      this.demoForm.controls['userName'].updateValueAndValidity();
       return;
     }
   }

demos/components/textfield-demo/textfield-demo.ts

@@ -5,37 +5,37 @@ <h2>Step 1: Install Angular CLI</h2>
     Already have @angular/cli installed? Skip to Step 2.
 
     <h4>npm</h4>
-    <pre>npm i -g @angular/cli</pre>
-
+    <pre><code highlight lang="bash">npm i -g @angular/cli</code></pre>
     <h4>yarn</h4>
-    <pre>yarn global add @angular/cli</pre>
+    <pre><code highlight lang="bash">yarn global add @angular/cli</code></pre>
 
     <h2>Step 2: Create Project</h2>
-    If generating a new project, you need to set default CSS preprocessor to scss:
-    <pre>ng new PROJECT-NAME --style=scss
-  cd PROJECT-NAME</pre>
+    If generating a new project, you need to set default CSS preprocessor to SCSS:
+    <pre><code highlight lang="bash">ng new your-project-name
+  cd PROJECT-NAME</code></pre>
 
     On existing projects, you need to set default CSS preprocessor to scss:
     <pre>ng config schematics.@schematics/angular:component.styleext scss</pre>
 
     <h2>Step 3: Install Angular MDC</h2>
     <h4>npm</h4>
-    <pre>npm i @angular-mdc/web</pre>
+    <pre><code highlight lang="bash">npm i @angular-mdc/web</code></pre>
 
     <h4>yarn</h4>
-    <h4><pre>yarn add @angular-mdc/web</pre></h4>
+    <pre><code highlight lang="bash">yarn add @angular-mdc/web</code></pre>
 
     <h2>Step 4: Import Angular MDC Sass</h2>
     Edit src/styles.sass, and insert:
-    <pre><![CDATA[
+    <pre><code highlight lang="scss">
 $mdc-theme-primary: #1565c0; // primary color
 $mdc-theme-secondary: #388e3c; // secondary color
 
-@import "~@angular-mdc/theme/material";]]></pre>
+@import "~@angular-mdc/theme/material"
+</code></pre>
 
     <h2>Step 5: Import Components</h2>
     Now just import the NgModule for each component you want to use.
-    <pre><![CDATA[import {
+    <pre><code highlight code="import {
   MdcFabModule,
   MdcIconModule,
   MdcMenuModule
@@ -51,14 +51,14 @@ <h2>Step 5: Import Components</h2>
   ],
   ...
   })
-  export class ExampleModule { }]]></pre>
+  export class ExampleModule { }"></code></pre>
 
     Open app.component.html and add the following markup:
-    <pre><![CDATA[<button mdc-button [primary]="true" [raised]="true">My Button</button>
+    <pre><code highlight code="<button mdc-button raised>My Button</button>
 
 <button mdc-fab>
   <mdc-icon>edit</mdc-icon>
-</button>]]></pre>
+</button>"></code></pre>
 
     Run `ng serve` to run your application in develop mode, and navigate to http://localhost:4200
   </div>

demos/getting-started/cli-guide.html

@@ -7,5 +7,5 @@ <h4 class="demo-landing__label">for Angular</h4>
 <div class="demo-layout__column demo-layout--center demo-landing__secondary">
   <p class="demo-landing__subtitle">A faithful and accurate representation of Material Design.</p>
   <button raised secondary mdc-button [routerLink]="['/getting-started']">Get Started</button>
-  <span class="demo-landing__version">v0.40.2</span>
+  <span class="demo-landing__version">v0.41.0-pre.0</span>
 </div>