change to suggested API

angular · Jun 29, 2017 · 8d823d6 · 8d823d6
1 parent 33c85c8
commit 8d823d6
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 100 deletions.
diff --git a/src/demo-app/datepicker/datepicker-demo.html b/src/demo-app/datepicker/datepicker-demo.html
@@ -7,35 +7,27 @@ <h2>Options</h2>
 <p>
   <md-input-container>
     <input mdInput [mdDatepicker]="minDatePicker" [(ngModel)]="minDate" placeholder="Min date">
-    <button md-icon-button mdSuffix [mdDatepickerToggle]="minDatePicker">
-      <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
-    </button>
+    <md-datepicker-toggle mdSuffix [for]="minDatePicker"></md-datepicker-toggle>
   </md-input-container>
   <md-datepicker #minDatePicker [touchUi]="touch"></md-datepicker>
   <md-input-container>
     <input mdInput [mdDatepicker]="maxDatePicker" [(ngModel)]="maxDate" placeholder="Max date">
-    <button md-icon-button mdSuffix [mdDatepickerToggle]="maxDatePicker">
-      <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
-    </button>
+    <md-datepicker-toggle mdSuffix [for]="maxDatePicker"></md-datepicker-toggle>
   </md-input-container>
   <md-datepicker #maxDatePicker [touchUi]="touch"></md-datepicker>
 </p>
 <p>
   <md-input-container>
     <input mdInput [mdDatepicker]="startAtPicker" [(ngModel)]="startAt" placeholder="Start at date">
-    <button md-icon-button mdSuffix [mdDatepickerToggle]="startAtPicker">
-      <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
-    </button>
+    <md-datepicker-toggle mdSuffix [for]="startAtPicker"></md-datepicker-toggle>
   </md-input-container>
   <md-datepicker #startAtPicker [touchUi]="touch"></md-datepicker>
 </p>
 
 <h2>Result</h2>
 
 <p>
-  <button md-icon-button [mdDatepickerToggle]="resultPicker">
-    <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
-  </button>
+  <md-datepicker-toggle [for]="resultPicker"></md-datepicker-toggle>
   <md-input-container>
     <input mdInput
            #resultPickerModel="ngModel"
@@ -63,9 +55,7 @@ <h2>Result</h2>
          [max]="maxDate"
          [mdDatepickerFilter]="filterOdd ? dateFilter : null"
          placeholder="Pick a date">
-  <button md-icon-button [mdDatepickerToggle]="resultPicker2">
-    <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
-  </button>
+  <md-datepicker-toggle [for]="resultPicker2"></md-datepicker-toggle>
   <md-datepicker
       #resultPicker2
       [touchUi]="touch"

diff --git a/src/lib/datepicker/datepicker-toggle.html b/src/lib/datepicker/datepicker-toggle.html
@@ -1,5 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%"
-     fill="currentColor" style="vertical-align: top">
-  <path d="M0 0h24v24H0z" fill="none"/>
-  <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
-</svg>
+<button md-icon-button type="button" [attr.aria-label]="_intl.openCalendarLabel"
+        (click)="_open($event)">
+  <md-icon>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%"
+         fill="currentColor" style="vertical-align: top">
+      <path d="M0 0h24v24H0z" fill="none"/>
+      <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
+    </svg>
+  </md-icon>
+</button>
diff --git a/src/lib/datepicker/datepicker-toggle.scss b/src/lib/datepicker/datepicker-toggle.scss
diff --git a/src/lib/datepicker/datepicker-toggle.ts b/src/lib/datepicker/datepicker-toggle.ts
@@ -6,40 +6,26 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Directive,
-  ElementRef,
-  Input,
-  ViewEncapsulation
-} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@angular/core';
 import {MdDatepicker} from './datepicker';
 import {MdDatepickerIntl} from './datepicker-intl';
 
 
-@Directive({
-  selector: '[mdDatepickerToggle], [matDatepickerToggle]',
+@Component({
+  moduleId: module.id,
+  selector: 'md-datepicker-toggle, mat-datepicker-toggle',
+  templateUrl: 'datepicker-toggle.html',
   host: {
-    '[type]': '_isButton ? "button" : undefined',
-    '[attr.aria-label]': '_intl.openCalendarLabel',
-    '(click)': '_open($event)',
+    'class': 'mat-datepicker-toggle',
   },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdDatepickerToggle<D> {
   /** Datepicker instance that the button will toggle. */
-  @Input('mdDatepickerToggle') datepicker: MdDatepicker<D>;
+  @Input('for') datepicker: MdDatepicker<D>;
 
-  @Input('matDatepickerToggle')
-  get _datepicker() { return this.datepicker; }
-  set _datepicker(v: MdDatepicker<D>) { this.datepicker = v; }
-
-  /** Whether the host element is an HTML button. */
-  _isButton = false;
-
-  constructor(elementRef: ElementRef, public _intl: MdDatepickerIntl) {
-    this._isButton = elementRef.nativeElement.tagName.toLowerCase() === 'button';
-  }
+  constructor(public _intl: MdDatepickerIntl) {}
 
   _open(event: Event): void {
     if (this.datepicker) {
@@ -48,17 +34,3 @@ export class MdDatepickerToggle<D> {
     }
   }
 }
-
-
-@Component({
-  moduleId: module.id,
-  selector: 'md-datepicker-toggle-icon, mat-datepicker-toggle-icon',
-  templateUrl: 'datepicker-toggle.html',
-  styleUrls: ['datepicker-toggle.css'],
-  host: {
-    'class': 'mat-datepicker-toggle-icon',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MdDatepickerToggleIcon {}
diff --git a/src/lib/datepicker/datepicker.md b/src/lib/datepicker/datepicker.md
@@ -25,9 +25,7 @@ An optional datepicker toggle button is available. A toggle can be added to the
 
 ```html
 <input [mdDatepicker]="myDatepicker">
-<button md-icon-button [mdDatepickerToggle]="myDatepicker">
-  <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
-</button>
+<md-datepicker-toggle [for]="myDatepicker"></md-datepicker-toggle>
 <md-datepicker #myDatepicker></md-datepicker>
 ```
 
@@ -37,9 +35,7 @@ can easily be used as a prefix or suffix on the material input:
 ```html
 <md-input-container>
   <input mdInput [mdDatepicker]="myDatepicker">
-  <button md-icon-button mdSuffix [mdDatepickerToggle]="myDatepicker">
-    <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
-  </button>
+  <md-datepicker-toggle mdSuffix [for]="myDatepicker"></md-datepicker-toggle>
 </md-input-container>
 <md-datepicker #myDatepicker></md-datepicker>
 ```

diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts
@@ -812,9 +812,7 @@ class DatepickerWithFormControl {
 @Component({
   template: `
     <input [mdDatepicker]="d">
-    <button [mdDatepickerToggle]="d">
-      <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
-    </button>
+    <md-datepicker-toggle [for]="d"></md-datepicker-toggle>
     <md-datepicker #d [touchUi]="touchUI"></md-datepicker>
   `,
 })
@@ -841,9 +839,7 @@ class InputContainerDatepicker {
 @Component({
   template: `
     <input [mdDatepicker]="d" [(ngModel)]="date" [min]="minDate" [max]="maxDate">
-    <button [mdDatepickerToggle]="d">
-      <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
-    </button>
+    <md-datepicker-toggle [for]="d"></md-datepicker-toggle>
     <md-datepicker #d></md-datepicker>
   `,
 })
@@ -858,9 +854,7 @@ class DatepickerWithMinAndMaxValidation {
 @Component({
   template: `
     <input [mdDatepicker]="d" [(ngModel)]="date" [mdDatepickerFilter]="filter">
-    <button [mdDatepickerToggle]="d">
-      <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
-    </button>
+    <md-datepicker-toggle [for]="d"></md-datepicker-toggle>
     <md-datepicker #d [touchUi]="true"></md-datepicker>
   `,
 })

diff --git a/src/lib/datepicker/index.ts b/src/lib/datepicker/index.ts
@@ -16,9 +16,10 @@ import {MdDatepicker, MdDatepickerContent} from './datepicker';
 import {MdDatepickerInput} from './datepicker-input';
 import {MdDialogModule} from '../dialog/index';
 import {MdCalendar} from './calendar';
-import {MdDatepickerToggle, MdDatepickerToggleIcon} from './datepicker-toggle';
+import {MdDatepickerToggle} from './datepicker-toggle';
 import {MdButtonModule} from '../button/index';
 import {MdDatepickerIntl} from './datepicker-intl';
+import {MdIconModule} from '../icon/index';
 
 
 export * from './calendar';
@@ -36,6 +37,7 @@ export * from './year-view';
     CommonModule,
     MdButtonModule,
     MdDialogModule,
+    MdIconModule,
     OverlayModule,
     StyleModule,
     A11yModule,
@@ -45,7 +47,6 @@ export * from './year-view';
     MdDatepickerContent,
     MdDatepickerInput,
     MdDatepickerToggle,
-    MdDatepickerToggleIcon,
   ],
   declarations: [
     MdCalendar,
@@ -54,7 +55,6 @@ export * from './year-view';
     MdDatepickerContent,
     MdDatepickerInput,
     MdDatepickerToggle,
-    MdDatepickerToggleIcon,
     MdMonthView,
     MdYearView,
   ],

diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss
@@ -150,8 +150,7 @@
   .mat-input-prefix,
   .mat-input-suffix {
     // Allow icons in a prefix or suffix to adapt to the correct size.
-    .mat-icon,
-    .mat-datepicker-toggle-icon {
+    .mat-icon {
       font-size: $prefix-suffix-icon-font-size;
       line-height: $line-height;
     }
@@ -161,8 +160,7 @@
       height: $prefix-suffix-icon-font-scale * 1em;
       width: $prefix-suffix-icon-font-scale * 1em;
 
-      .mat-icon,
-      .mat-datepicker-toggle-icon {
+      .mat-icon {
         height: $line-height * 1em;
         line-height: $line-height;
       }

diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss
@@ -41,8 +41,7 @@ $mat-input-underline-height: 1px !default;
   flex: none;
 
   // Allow icons in a prefix or suffix to adapt to the correct size.
-  .mat-icon,
-  .mat-datepicker-toggle-icon {
+  .mat-icon {
     width: 1em;
   }
 
@@ -51,8 +50,7 @@ $mat-input-underline-height: 1px !default;
     font: inherit;
     vertical-align: baseline;
 
-    .mat-icon,
-    .mat-datepicker-toggle-icon {
+    .mat-icon {
       font-size: inherit;
     }
   }
@@ -230,8 +228,7 @@ textarea.mat-input-element {
 // Scale down icons in the placeholder and hint to be the same size as the text.
 .mat-input-subscript-wrapper,
 .mat-input-placeholder-wrapper {
-  .mat-icon,
-  .mat-datepicker-toggle-icon {
+  .mat-icon {
     width: 1em;
     height: 1em;
     font-size: inherit;

diff --git a/src/material-examples/datepicker-overview/datepicker-overview-example.html b/src/material-examples/datepicker-overview/datepicker-overview-example.html
@@ -1,7 +1,5 @@
 <md-input-container>
   <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
-  <button md-icon-button mdSuffix [mdDatepickerToggle]="picker">
-    <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
-  </button>
+  <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
 </md-input-container>
 <md-datepicker #picker></md-datepicker>
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html
@@ -87,9 +87,7 @@ <h2>Datepicker</h2>
 
 <md-input-container>
   <input type="text" mdInput [mdDatepicker]="birthday" placeholder="Birthday">
-  <button md-icon-button mdSuffix [mdDatepickerToggle]="birthday">
-    <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
-  </button>
+  <md-datepicker-toggle mdSuffix [for]="birthday"></md-datepicker-toggle>
   <md-datepicker #birthday></md-datepicker>
 </md-input-container>