move everything from cdk to MatInputModule

Author: mmalerba

.github/CODEOWNERS

@@ -59,7 +59,6 @@
 /src/cdk/bidi/**                                   @jelbourn
 /src/cdk/coercion/**                               @jelbourn
 /src/cdk/collections/**                            @jelbourn @crisbeto @andrewseguin
-/src/cdk/input/**                                  @mmalerba
 /src/cdk/keycodes/**                               @jelbourn
 /src/cdk/layout/**                                 @josephperrott
 /src/cdk/observers/**                              @jelbourn @crisbeto

src/cdk/input/BUILD.bazel

@@ -9,7 +9,6 @@
 import {A11yModule} from '@angular/cdk/a11y';
 import {CdkAccordionModule} from '@angular/cdk/accordion';
 import {BidiModule} from '@angular/cdk/bidi';
-import {InputModule} from '@angular/cdk/input';
 import {ObserversModule} from '@angular/cdk/observers';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {PlatformModule} from '@angular/cdk/platform';
@@ -94,7 +93,6 @@ import {
     A11yModule,
     BidiModule,
     CdkAccordionModule,
-    InputModule,
     ObserversModule,
     OverlayModule,
     PlatformModule,

src/cdk/input/_autofill.scss

@@ -641,7 +641,7 @@ <h3>&lt;textarea&gt; with ngModel</h3>
       </mat-checkbox>
       <mat-form-field>
         <mat-label>Autofill monitored</mat-label>
-        <input matInput (cdkAutofill)="isAutofilled = $event.isAutofilled" name="autofill"
+        <input matInput (matAutofill)="isAutofilled = $event.isAutofilled" name="autofill"
                [class.demo-custom-autofill-style]="customAutofillStyle">
       </mat-form-field>
       <button color="primary" mat-raised-button>Submit</button>

src/cdk/input/autofill-prebuilt.scss

@@ -1,4 +1,4 @@
-@import '../../../dist/packages/cdk/input/autofill';
+@import '../../../dist/packages/material/input/autofill';
 
 .demo-basic {
   padding: 0;
@@ -31,5 +31,5 @@
 }
 
 .demo-custom-autofill-style {
-  @include cdk-input-autofill-color(transparent, red);
+  @include mat-input-autofill-color(transparent, red);
 }

src/cdk/input/index.ts

@@ -48,7 +48,6 @@ System.config({
     '@angular/cdk/bidi': 'dist/packages/cdk/bidi/index.js',
     '@angular/cdk/coercion': 'dist/packages/cdk/coercion/index.js',
     '@angular/cdk/collections': 'dist/packages/cdk/collections/index.js',
-    '@angular/cdk/input': 'dist/packages/cdk/input/index.js',
     '@angular/cdk/keycodes': 'dist/packages/cdk/keycodes/index.js',
     '@angular/cdk/layout': 'dist/packages/cdk/layout/index.js',
     '@angular/cdk/observers': 'dist/packages/cdk/observers/index.js',

src/cdk/input/input-module.ts

@@ -38,7 +38,6 @@ System.config({
     '@angular/cdk/bidi': 'dist/bundles/cdk-bidi.umd.js',
     '@angular/cdk/coercion': 'dist/bundles/cdk-coercion.umd.js',
     '@angular/cdk/collections': 'dist/bundles/cdk-collections.umd.js',
-    '@angular/cdk/input': 'dist/bundles/cdk-input.umd.js',
     '@angular/cdk/keycodes': 'dist/bundles/cdk-keycodes.umd.js',
     '@angular/cdk/layout': 'dist/bundles/cdk-layout.umd.js',
     '@angular/cdk/observers': 'dist/bundles/cdk-observers.umd.js',

src/cdk/input/public-api.ts

@@ -2,7 +2,7 @@
 // up into a single flat scss file for material.
 @import '../../cdk/overlay/overlay';
 @import '../../cdk/a11y/a11y';
-@import '../../cdk/input/autofill';
+@import '../input/autofill';
 
 // Core styles that can be used to apply material design treatments to any element.
 @import 'style/elevation';
@@ -27,7 +27,7 @@
   @include mat-ripple();
   @include cdk-a11y();
   @include cdk-overlay();
-  @include cdk-input-autofill();
+  @include mat-input-autofill();
 }
 
 // Mixin that renders all of the core styles that depend on the theme.

src/cdk/input/tsconfig-build.json

@@ -8,6 +8,7 @@ ng_module(
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/input",
   deps = [
+    "@rxjs",
     "//src/lib/core",
     "//src/lib/form-field",
     "//src/cdk/coercion",

src/demo-app/demo-material-module.ts

@@ -0,0 +1,41 @@
+// Core styles that enable monitoring autofill state of inputs.
+@mixin mat-input-autofill {
+  // Keyframes that do nothing, but allow us to monitor when an input becomes autofilled.
+  @keyframes mat-input-autofill-start {}
+  @keyframes mat-input-autofill-end {}
+
+  .mat-input-autofill-monitored:-webkit-autofill {
+    animation-name: mat-input-autofill-start;
+  }
+
+  .mat-input-autofill-monitored:not(:-webkit-autofill) {
+    animation-name: mat-input-autofill-end;
+  }
+}
+
+// Used to generate UIDs for keyframes used to change the input autofill styles.
+$mat-input-autofill-color-frame-count: 0;
+
+// Mixin used to apply custom background and foreground colors to an autofilled input. Based on:
+// https://stackoverflow.com/questions/2781549/
+// removing-input-background-colour-for-chrome-autocomplete#answer-37432260
+@mixin mat-input-autofill-color($background, $foreground:'') {
+  @keyframes mat-input-autofill-color-#{$mat-input-autofill-color-frame-count} {
+    to {
+      background: $background;
+      @if $foreground != '' { color: $foreground; }
+    }
+  }
+
+  &:-webkit-autofill {
+    animation-name: mat-input-autofill-color-#{$mat-input-autofill-color-frame-count};
+    animation-fill-mode: both;
+  }
+
+  &.mat-input-autofill-monitored:-webkit-autofill {
+    animation-name: mat-input-autofill-start,
+                    mat-input-autofill-color-#{$mat-input-autofill-color-frame-count};
+  }
+
+  $mat-input-autofill-color-frame-count: $mat-input-autofill-color-frame-count + 1 !global;
+}

src/demo-app/input/input-demo.html

@@ -0,0 +1,3 @@
+@import 'autofill';
+
+@include mat-input-autofill();

src/demo-app/input/input-demo.scss

@@ -9,7 +9,7 @@
 import {Component, ElementRef, ViewChild} from '@angular/core';
 import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
 import {AutofillEvent, AutofillMonitor} from './autofill';
-import {InputModule} from './input-module';
+import {MatInputModule} from './input-module';
 import {empty as observableEmpty} from 'rxjs/observable/empty';
 
 describe('AutofillMonitor', () => {
@@ -19,7 +19,7 @@ describe('AutofillMonitor', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [InputModule],
+      imports: [MatInputModule],
       declarations: [Inputs],
     }).compileComponents();
   });
@@ -47,7 +47,7 @@ describe('AutofillMonitor', () => {
     expect(inputEl.addEventListener).not.toHaveBeenCalled();
 
     autofillMonitor.monitor(inputEl);
-    expect(inputEl.classList).toContain('cdk-input-autofill-monitored');
+    expect(inputEl.classList).toContain('mat-input-autofill-monitored');
     expect(inputEl.addEventListener).toHaveBeenCalledWith('animationstart', jasmine.any(Function));
   });
 
@@ -63,11 +63,11 @@ describe('AutofillMonitor', () => {
   it('should remove monitored class and listener upon stop monitoring', () => {
     const inputEl = testComponent.input1.nativeElement;
     autofillMonitor.monitor(inputEl);
-    expect(inputEl.classList).toContain('cdk-input-autofill-monitored');
+    expect(inputEl.classList).toContain('mat-input-autofill-monitored');
     expect(inputEl.removeEventListener).not.toHaveBeenCalled();
 
     autofillMonitor.stopMonitoring(inputEl);
-    expect(inputEl.classList).not.toContain('cdk-input-autofill-monitored');
+    expect(inputEl.classList).not.toContain('mat-input-autofill-monitored');
     expect(inputEl.removeEventListener)
         .toHaveBeenCalledWith('animationstart', jasmine.any(Function));
   });
@@ -97,10 +97,10 @@ describe('AutofillMonitor', () => {
     const autofillStream = autofillMonitor.monitor(inputEl);
     autofillStream.subscribe(event => autofillStreamEvent = event);
     expect(autofillStreamEvent).toBeNull();
-    expect(inputEl.classList).not.toContain('cdk-input-autofilled');
+    expect(inputEl.classList).not.toContain('mat-input-autofilled');
 
-    animationStartCallback({animationName: 'cdk-input-autofill-start', target: inputEl});
-    expect(inputEl.classList).toContain('cdk-input-autofilled');
+    animationStartCallback({animationName: 'mat-input-autofill-start', target: inputEl});
+    expect(inputEl.classList).toContain('mat-input-autofilled');
     expect(autofillStreamEvent).toEqual({target: inputEl, isAutofilled: true} as any);
   });
 
@@ -111,12 +111,12 @@ describe('AutofillMonitor', () => {
     inputEl.addEventListener.and.callFake((_, cb) => animationStartCallback = cb);
     const autofillStream = autofillMonitor.monitor(inputEl);
     autofillStream.subscribe(event => autofillStreamEvent = event);
-    animationStartCallback({animationName: 'cdk-input-autofill-start', target: inputEl});
-    expect(inputEl.classList).toContain('cdk-input-autofilled');
+    animationStartCallback({animationName: 'mat-input-autofill-start', target: inputEl});
+    expect(inputEl.classList).toContain('mat-input-autofilled');
     expect(autofillStreamEvent).toEqual({target: inputEl, isAutofilled: true} as any);
 
-    animationStartCallback({animationName: 'cdk-input-autofill-end', target: inputEl});
-    expect(inputEl.classList).not.toContain('cdk-input-autofilled');
+    animationStartCallback({animationName: 'mat-input-autofill-end', target: inputEl});
+    expect(inputEl.classList).not.toContain('mat-input-autofilled');
     expect(autofillStreamEvent).toEqual({target: inputEl, isAutofilled: false} as any);
   });
 
@@ -125,31 +125,31 @@ describe('AutofillMonitor', () => {
     let animationStartCallback: Function = () => {};
     inputEl.addEventListener.and.callFake((_, cb) => animationStartCallback = cb);
     autofillMonitor.monitor(inputEl);
-    animationStartCallback({animationName: 'cdk-input-autofill-start', target: inputEl});
-    expect(inputEl.classList).toContain('cdk-input-autofilled');
+    animationStartCallback({animationName: 'mat-input-autofill-start', target: inputEl});
+    expect(inputEl.classList).toContain('mat-input-autofilled');
 
     autofillMonitor.stopMonitoring(inputEl);
-    expect(inputEl.classlist).not.toContain('cdk-input-autofilled');
+    expect(inputEl.classlist).not.toContain('mat-input-autofilled');
   });
 });
 
-describe('cdkAutofill', () => {
+describe('matAutofill', () => {
   let autofillMonitor: AutofillMonitor;
-  let fixture: ComponentFixture<InputWithCdkAutofilled>;
-  let testComponent: InputWithCdkAutofilled;
+  let fixture: ComponentFixture<InputWithMatAutofilled>;
+  let testComponent: InputWithMatAutofilled;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [InputModule],
-      declarations: [InputWithCdkAutofilled],
+      imports: [MatInputModule],
+      declarations: [InputWithMatAutofilled],
     }).compileComponents();
   });
 
   beforeEach(inject([AutofillMonitor], (afm: AutofillMonitor) => {
     autofillMonitor = afm;
     spyOn(autofillMonitor, 'monitor').and.returnValue(observableEmpty());
     spyOn(autofillMonitor, 'stopMonitoring');
-    fixture = TestBed.createComponent(InputWithCdkAutofilled);
+    fixture = TestBed.createComponent(InputWithMatAutofilled);
     testComponent = fixture.componentInstance;
     fixture.detectChanges();
   }));
@@ -179,8 +179,8 @@ class Inputs {
 }
 
 @Component({
-  template: `<input #input cdkAutofill>`
+  template: `<input #input matAutofill>`
 })
-class InputWithCdkAutofilled {
+class InputWithMatAutofilled {
   @ViewChild('input') input: ElementRef;
 }