chore(package): Publish Angular MDC v0.2.5

Author: trimox

CHANGELOG.md

@@ -1,3 +1,27 @@
+<a name="0.0.0"></a>
+# [0.2.5](https://github.com/trimox/angular-mdc-web/compare/v0.2.4...v0.2.5) (2017-08-09)
+
+
+### Bug Fixes
+
+* **fab:** Remove duplicate HostBinding ([#74](https://github.com/trimox/angular-mdc-web/issues/74)) ([dd3637f](https://github.com/trimox/angular-mdc-web/commit/dd3637f))
+* **textfield:** Fix Text Field boxes NgModule value accessor ([36ce97a](https://github.com/trimox/angular-mdc-web/commit/36ce97a))
+* **textfield:** Pre-filled Text Field uses floating label correctly ([bda0f9f](https://github.com/trimox/angular-mdc-web/commit/bda0f9f))
+
+
+### Features
+
+* **dialog:** Implement MDC Dialog ([#70](https://github.com/trimox/angular-mdc-web/issues/70)) ([31a278a](https://github.com/trimox/angular-mdc-web/commit/31a278a))
+* **list:** Add component selector option to mdc-list-item-secondary ([4b3a5bf](https://github.com/trimox/angular-mdc-web/commit/4b3a5bf))
+* **list:** Add component selector option to mdc-list-item-text ([9df6a4d](https://github.com/trimox/angular-mdc-web/commit/9df6a4d))
+* **package:** Update MDC dependency to v0.17.0 ([f9bab7a](https://github.com/trimox/angular-mdc-web/commit/f9bab7a))
+* **textfield:** Add 'aria-hidden' HostBinding to Helptext directive ([6545321](https://github.com/trimox/angular-mdc-web/commit/6545321))
+* **textfield:** Add [mdc-textfield-bottom-line] directive for Text Field boxes ([5f76809](https://github.com/trimox/angular-mdc-web/commit/5f76809))
+* **textfield:** Add [mdc-textfield-label] directive ([483fd98](https://github.com/trimox/angular-mdc-web/commit/483fd98))
+* **textfield:** Auto generate [id] if none supplied ([3c70203](https://github.com/trimox/angular-mdc-web/commit/3c70203))
+
+
+
 <a name="0.0.0"></a>
 # [0.2.4](https://github.com/trimox/angular-mdc-web/compare/v0.2.3...v0.2.4) (2017-08-03)
 

src/demo-app/components/dialog-demo/dialog-demo.component.html

@@ -54,12 +54,37 @@ <h1 mdc-typography-display1>Dialog</h1>
         </tr>
       </tbody>
     </table>
+    <table>
+      <thead>
+        <tr>
+          <th>Directive</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>mdc-dialog-header</td>
+          <td>Defines the header content block.</td>
+        </tr>
+        <tr>
+          <td>mdc-dialog-header-title</td>
+          <td>A header title block.</td>
+        </tr>
+        <tr>
+          <td>mdc-dialog-body</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>mdc-dialog-footer</td>
+          <td></td>
+        </tr>
+      </tbody>
+    </table>
   </div>
   <div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start start" class="mdc-padding">
     <button mdc-button [primary]="true" [raised]="true" (click)="showDialog();">Show Dialog</button>
     <button mdc-button [primary]="true" [raised]="true" (click)="showDialogScroll();">Show Scrolling Dialog</button>
 
-<span mdc-typography-headline>Sample - Dialog</span>
+<span mdc-typography-headline>Dialog</span>
 <pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog</span> #<span style="color:#89bdff">dialog</span>></span>
   <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header</span>></span>
     <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header-title</span>></span>
@@ -70,13 +95,13 @@ <h1 mdc-typography-display1>Dialog</h1>
     Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
   <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-body</span>></span>
   <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-footer</span>></span>
-    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> <span style="color:#e0c589">mdc-dialog-button-cancel</span> (<span style="color:#e0c589">click</span>)=<span style="color:#65b042">"cancelDialog();"</span>></span>Decline<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
-    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> <span style="color:#e0c589">mdc-dialog-button-accept</span> (<span style="color:#e0c589">click</span>)=<span style="color:#65b042">"acceptDialog();"</span>></span>Accept<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> <span style="color:#e0c589">mdc-dialog-button-cancel</span>></span>Decline<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> <span style="color:#e0c589">mdc-dialog-button-accept</span>></span>Accept<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
   <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-footer</span>></span>
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog</span>></span>
 </pre>
 
-<span mdc-typography-headline>Sample - Scrolling Dialog</span>
+<span mdc-typography-headline>Scrolling Dialog</span>
 <pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog</span> #<span style="color:#89bdff">dialogscroll</span>></span>
   <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header</span>></span>
     <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-header-title</span>></span>
@@ -99,8 +124,8 @@ <h1 mdc-typography-display1>Dialog</h1>
     <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-list</span>></span>
   <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-body</span>></span>
   <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-footer</span>></span>
-    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> <span style="color:#e0c589">mdc-dialog-button-cancel</span> (<span style="color:#e0c589">click</span>)=<span style="color:#65b042">"cancelDialog();"</span>></span>Decline<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
-    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> <span style="color:#e0c589">mdc-dialog-button-accept</span> (<span style="color:#e0c589">click</span>)=<span style="color:#65b042">"acceptDialog();"</span>></span>Accept<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> <span style="color:#e0c589">mdc-dialog-button-cancel</span>></span>Decline<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
+    <span style="color:#e0c589">&lt;<span style="color:#e0c589">button</span> <span style="color:#e0c589">mdc-button</span> <span style="color:#e0c589">mdc-dialog-button-accept</span>></span>Accept<span style="color:#e0c589">&lt;/<span style="color:#e0c589">button</span>></span>
   <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog-footer</span>></span> 
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-dialog</span>></span>
 </pre>
@@ -114,8 +139,8 @@ <h1 mdc-typography-display1>Dialog</h1>
     Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
   </mdc-dialog-body>
   <mdc-dialog-footer>
-    <button mdc-button mdc-dialog-button-cancel (click)="cancelDialog();">Decline</button>
-    <button mdc-button mdc-dialog-button-accept (click)="acceptDialog();">Accept</button>
+    <button mdc-button mdc-dialog-button-cancel>Decline</button>
+    <button mdc-button mdc-dialog-button-accept>Accept</button>
   </mdc-dialog-footer>
 </mdc-dialog>
 
@@ -141,8 +166,8 @@ <h1 mdc-typography-display1>Dialog</h1>
     </mdc-list>
   </mdc-dialog-body>
   <mdc-dialog-footer>
-    <button mdc-button mdc-dialog-button-cancel (click)="cancelDialog();">Decline</button>
-    <button mdc-button mdc-dialog-button-accept (click)="acceptDialog();">Accept</button>
+    <button mdc-button mdc-dialog-button-cancel>Decline</button>
+    <button mdc-button mdc-dialog-button-accept>Accept</button>
   </mdc-dialog-footer> 
 </mdc-dialog>
   </div>

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

@@ -17,12 +17,4 @@ export class DialogDemoComponent {
   showDialogScroll() {
     this.dialogScroll.show();
   }
-
-  acceptDialog() {
-    this.dialog.accept();
-  }
-
-  cancelDialog() {
-    this.dialog.cancel();
-  }
 }

src/demo-app/components/tab-demo/tab-demo.component.html

@@ -145,8 +145,7 @@ <h1 mdc-typography-display1>Tabs</h1>
       </tbody>
     </table>
   </div>
-  <div fxLayout="column" fxLayoutGap="40px" fxLayoutAlign="start start" class="mdc-padding">
-    <div>
+  <div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start start" class="mdc-padding">
       <span mdc-typography-headline>Simple Tab Bar with text labels</span>
       <mdc-tab-bar>
         <a mdc-tab [active]="true" href="#/tab-demo">Home</a>
@@ -158,9 +157,8 @@ <h1 mdc-typography-display1>Tabs</h1>
   <span style="color:#e0c589">&lt;<span style="color:#e0c589">a</span> <span style="color:#e0c589">mdc-tab</span> <span style="color:#e0c589">href</span>=<span style="color:#65b042">"#/tab-demo"</span>></span>Merchandise<span style="color:#e0c589">&lt;/<span style="color:#e0c589">a</span>></span>
   <span style="color:#e0c589">&lt;<span style="color:#e0c589">a</span> <span style="color:#e0c589">mdc-tab</span> <span style="color:#e0c589">href</span>=<span style="color:#65b042">"#/tab-demo"</span>></span>About Us<span style="color:#e0c589">&lt;/<span style="color:#e0c589">a</span>></span>
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-tab-bar</span>></span>
-</pre>    </div>
+</pre>
 
-    <div>
       <span mdc-typography-headline>Tab Bar with icon labels</span>
       <mdc-tab-bar [primaryColor]="true">
         <mdc-tab [active]="true">
@@ -184,9 +182,8 @@ <h1 mdc-typography-display1>Tabs</h1>
     <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-tab-icon</span> <span style="color:#89bdff">material-icon</span>></span>person_pin<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-tab-icon</span>></span>
   <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-tab</span>></span>
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-tab-bar</span>></span>
-</pre>    </div>
+</pre>
 
-    <div>
       <span mdc-typography-headline>Tab Bar with icon and text labels</span>
       <mdc-tab-bar>
         <mdc-tab [active]="true">
@@ -217,9 +214,7 @@ <h1 mdc-typography-display1>Tabs</h1>
   <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-tab</span>></span>
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-tab-bar</span>></span>
 </pre>
-    </div>
 
-    <div>
       <span mdc-typography-headline>Accent Color Indicator</span>
       <mdc-tab-bar [accentColor]="true">
         <a mdc-tab [active]="true" href="#/tab-demo">
@@ -249,9 +244,8 @@ <h1 mdc-typography-display1>Tabs</h1>
     <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-tab-icon-text</span>></span>Nearby<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-tab-icon-text</span>></span>
   <span style="color:#e0c589">&lt;/<span style="color:#e0c589">a</span>></span>
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-tab-bar</span>></span>
-</pre>    </div>
+</pre>
 
-    <div>
       <span mdc-typography-headline>Dark Themed</span>
       <mdc-tab-bar [accentColor]="true" [mdc-theme-dark]="true">
         <a mdc-tab [active]="true" href="#/tab-demo">
@@ -281,9 +275,9 @@ <h1 mdc-typography-display1>Tabs</h1>
     <span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-tab-icon-text</span>></span>Nearby<span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-tab-icon-text</span>></span>
   <span style="color:#e0c589">&lt;/<span style="color:#e0c589">a</span>></span>
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-tab-bar</span>></span>
-</pre>    </div>
+</pre>
 
-    <div>
+      <div>
       <span mdc-typography-headline>Dynamic view switching</span>
       <mdc-tab-bar>
         <a mdc-tab *ngFor="let tabLink of tabLinks" [routerLink]="[{outlets: {taboutlet: tabLink.link}}]" [active]="tabLink.active">{{tabLink.label}}</a>
@@ -299,8 +293,7 @@ <h1 mdc-typography-display1>Tabs</h1>
    [<span style="color:#e0c589">routerLink</span>]=<span style="color:#65b042">"[<span style="color:#daefa3"><![CDATA[{outlets: {taboutlet: tabLink.link}}]]></span>]"</span>></span>tabLink.label<span style="color:#e0c589">&lt;/<span style="color:#e0c589">a</span>></span>
 <span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-tab-bar</span>></span>
 <span style="color:#89bdff">&lt;<span style="color:#89bdff">router</span><span style="color:#89bdff">-outlet</span> <span style="color:#89bdff">name</span>=<span style="color:#65b042">"taboutlet"</span>></span><span style="color:#89bdff">&lt;/<span style="color:#89bdff">router</span><span style="color:#89bdff">-outlet</span>></span>
-</pre>
-    </div>
+</pre></div>
 
     <div>
       <span mdc-typography-headline>Tab Bar Scoller</span>

src/demo-app/components/textfield-demo/textfield-demo.component.html

@@ -144,17 +144,16 @@ <h1 mdc-typography-display1>Text Field</h1>
   </div>
   <div fxLayout="column" class="mdc-padding">
     <div fxFlexAlign="start">
-      <mdc-textfield [(ngModel)]="username" id="username" label="Username" [required]="isRequired" [disabled]="isDisabled" [dense]="isDense">
-      </mdc-textfield>
+      <mdc-textfield [(ngModel)]="username" id="username" label="Username" [required]="isRequired" [disabled]="isDisabled" [dense]="isDense"></mdc-textfield>
       <p mdc-textfield-helptext [validation]="true" [persistent]="false">Username is required</p>
-    <mdc-form-field>
-      <mdc-checkbox [(ngModel)]="isDisabled"></mdc-checkbox>
-      <label>Disable</label>
-    </mdc-form-field>
     <mdc-form-field>
       <mdc-checkbox [(ngModel)]="isRequired"></mdc-checkbox>
       <label>Required</label>
     </mdc-form-field>
+    <mdc-form-field>
+      <mdc-checkbox [(ngModel)]="isDisabled"></mdc-checkbox>
+      <label>Disable</label>
+    </mdc-form-field>
     <mdc-form-field>
       <mdc-checkbox [(ngModel)]="isDense"></mdc-checkbox>
       <label>Dense</label>
@@ -174,7 +173,24 @@ <h1 mdc-typography-display1>Text Field</h1>
   [<span style="color:#89bdff">validation</span>]=<span style="color:#65b042">"true"</span>
   [<span style="color:#89bdff">persistent</span>]=<span style="color:#65b042">"false"</span>></span>Username is required<span style="color:#89bdff">&lt;/<span style="color:#89bdff">p</span>></span>
 </pre> </div>
-    <span mdc-typography-headline>Textfield box</span>
+
+    <div fxLayout="column" class="mdc-padding">
+<span mdc-typography-headline>Prefilled value</span>
+    <div fxFlexAlign="start">
+  <mdc-textfield [(ngModel)]="prefill" label="Username"></mdc-textfield>
+</div>
+</div>
+
+    <div fxLayout="column" class="mdc-padding">
+    <div fxFlexAlign="start">
+<mdc-textfield type="password" label="Password" [required]="true"></mdc-textfield>
+<pre style="background:#000;color:#f8f8f8"><span style="color:#89bdff">&lt;<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-textfield</span> <span style="color:#89bdff">type</span>=<span style="color:#65b042">"password"</span>
+  <span style="color:#89bdff">label</span>=<span style="color:#65b042">"Password"</span>
+  [<span style="color:#89bdff">required</span>]=<span style="color:#65b042">"true"</span>></span><span style="color:#89bdff">&lt;/<span style="color:#89bdff">mdc</span><span style="color:#89bdff">-textfield</span>></span>
+</pre></div>
+</div>
+    <span mdc-typography-headline>Text Field box</span>
+    <span mdc-typography-caption>Use mdc-textfield-box</span>
     <div fxFlexAlign="start" class="mdc-padding">
       <mdc-textfield-box
         [required]="true"

src/demo-app/components/textfield-demo/textfield-demo.component.ts

@@ -8,6 +8,7 @@ import {
 })
 export class TextfieldDemoComponent {
   username = null;
+  prefill = 'John Doe';
   password = null;
   comments = null;
   subject = null;

src/lib/package.json

@@ -7,7 +7,7 @@
     "type": "git",
     "url": "https://github.com/trimox/angular-mdc-web.git"
   },
-  "version": "0.2.4",
+  "version": "0.2.5",
   "license": "MIT",
   "keywords": [
     "angular-mdc",
@@ -21,7 +21,7 @@
   "typings": "./index.d.ts",
   "private": false,
   "dependencies": {
-    "material-components-web": "^0.16.0"
+    "material-components-web": "^0.17.0"
   },
   "peerDependencies": {
     "@angular/core": ">=4.0.0",