rename input to text-field

Author: mmalerba

.github/CODEOWNERS

@@ -61,7 +61,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
@@ -72,6 +71,7 @@
 /src/cdk/stepper/**                                @mmalerba
 /src/cdk/table/**                                  @andrewseguin
 /src/cdk/testing/**                                @devversion
+/src/cdk/text-field/**                             @mmalerba
 
 # Moment adapter package
 /src/material-moment-adapter/**                    @mmalerba

src/cdk/input/_input.scss

@@ -3,9 +3,9 @@ load("@angular//:index.bzl", "ng_module")
 load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
 
 ng_module(
-  name = "input",
+  name = "text-field",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
-  module_name = "@angular/cdk/input",
+  module_name = "@angular/cdk/text-field",
   deps = [
     "@rxjs",
     "//src/cdk/platform",
@@ -14,21 +14,21 @@ ng_module(
 )
 
 sass_library(
-  name = "input_scss_lib",
+  name = "text_field_scss_lib",
   srcs = glob(["**/_*.scss"]),
 )
 
 sass_binary(
-  name = "input_prebuilt_scss",
-  src = "input-prebuilt.scss",
-  deps = [":input_scss_lib"],
+  name = "text_field_prebuilt_scss",
+  src = "text-field-prebuilt.scss",
+  deps = [":text_field_scss_lib"],
 )
 
 # TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
 # Copy the output of the sass_binary such that the filename and path match what we expect.
 genrule(
-  name = "input_prebuilt_css",
-  srcs = [":input_prebuilt_scss"],
-  outs = ["input-prebuilt.css"],
-  cmd = "cat $(locations :input_prebuilt_scss) > $@",
+  name = "text_field_prebuilt_css",
+  srcs = [":text_field_prebuilt_scss"],
+  outs = ["text-field-prebuilt.css"],
+  cmd = "cat $(locations :text_field_prebuilt_scss) > $@",
 )

src/cdk/input/input-prebuilt.scss

@@ -0,0 +1,50 @@
+// Core styles that enable monitoring autofill state of text fields.
+@mixin cdk-text-field {
+  // Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled
+  // by watching for the animation events that are fired when they start.
+  // Based on: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
+  @keyframes cdk-text-field-autofill-start {}
+  @keyframes cdk-text-field-autofill-end {}
+
+  .cdk-text-field-autofill-monitored:-webkit-autofill {
+    animation-name: cdk-text-field-autofill-start;
+  }
+
+  .cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
+    animation-name: cdk-text-field-autofill-end;
+  }
+
+  // Remove the resize handle on autosizing textareas, because whatever height
+  // the user resized to will be overwritten once they start typing again.
+  textarea.cdk-textarea-autosize {
+    resize: none;
+  }
+}
+
+// Used to generate UIDs for keyframes used to change the text field autofill styles.
+$cdk-text-field-autofill-color-frame-count: 0;
+
+// Mixin used to apply custom background and foreground colors to an autofilled text field.
+// Based on: https://stackoverflow.com/questions/2781549/
+// removing-input-background-colour-for-chrome-autocomplete#answer-37432260
+@mixin cdk-text-field-autofill-color($background, $foreground:'') {
+  @keyframes cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} {
+    to {
+      background: $background;
+      @if $foreground != '' { color: $foreground; }
+    }
+  }
+
+  &:-webkit-autofill {
+    animation-name: cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count};
+    animation-fill-mode: both;
+  }
+
+  &.cdk-text-field-autofill-monitored:-webkit-autofill {
+    animation-name: cdk-text-field-autofill-start,
+                    cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count};
+  }
+
+  $cdk-text-field-autofill-color-frame-count:
+      $cdk-text-field-autofill-color-frame-count + 1 !global;
+}

src/cdk/input/BUILD.bazel renamed to src/cdk/text-field/BUILD.bazel

@@ -11,7 +11,7 @@ import {Component, ElementRef, ViewChild} from '@angular/core';
 import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
 import {empty as observableEmpty} from 'rxjs/observable/empty';
 import {AutofillEvent, AutofillMonitor} from './autofill';
-import {InputModule} from './input-module';
+import {TextFieldModule} from './text-field-module';
 
 
 const listenerOptions: any = supportsPassiveEventListeners() ? {passive: true} : false;
@@ -24,7 +24,7 @@ describe('AutofillMonitor', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [InputModule],
+      imports: [TextFieldModule],
       declarations: [Inputs],
     }).compileComponents();
   });
@@ -52,7 +52,7 @@ describe('AutofillMonitor', () => {
     expect(inputEl.addEventListener).not.toHaveBeenCalled();
 
     autofillMonitor.monitor(inputEl);
-    expect(inputEl.classList).toContain('cdk-input-autofill-monitored');
+    expect(inputEl.classList).toContain('cdk-text-field-autofill-monitored');
     expect(inputEl.addEventListener)
         .toHaveBeenCalledWith('animationstart', jasmine.any(Function), listenerOptions);
   });
@@ -69,11 +69,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('cdk-text-field-autofill-monitored');
     expect(inputEl.removeEventListener).not.toHaveBeenCalled();
 
     autofillMonitor.stopMonitoring(inputEl);
-    expect(inputEl.classList).not.toContain('cdk-input-autofill-monitored');
+    expect(inputEl.classList).not.toContain('cdk-text-field-autofill-monitored');
     expect(inputEl.removeEventListener)
         .toHaveBeenCalledWith('animationstart', jasmine.any(Function), listenerOptions);
   });
@@ -103,10 +103,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('cdk-text-field-autofilled');
 
-    animationStartCallback({animationName: 'cdk-input-autofill-start', target: inputEl});
-    expect(inputEl.classList).toContain('cdk-input-autofilled');
+    animationStartCallback({animationName: 'cdk-text-field-autofill-start', target: inputEl});
+    expect(inputEl.classList).toContain('cdk-text-field-autofilled');
     expect(autofillStreamEvent).toEqual({target: inputEl, isAutofilled: true} as any);
   });
 
@@ -117,12 +117,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: 'cdk-text-field-autofill-start', target: inputEl});
+    expect(inputEl.classList).toContain('cdk-text-field-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: 'cdk-text-field-autofill-end', target: inputEl});
+    expect(inputEl.classList).not.toContain('cdk-text-field-autofilled');
     expect(autofillStreamEvent).toEqual({target: inputEl, isAutofilled: false} as any);
   });
 
@@ -131,11 +131,11 @@ 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: 'cdk-text-field-autofill-start', target: inputEl});
+    expect(inputEl.classList).toContain('cdk-text-field-autofilled');
 
     autofillMonitor.stopMonitoring(inputEl);
-    expect(inputEl.classlist).not.toContain('cdk-input-autofilled');
+    expect(inputEl.classlist).not.toContain('cdk-text-field-autofilled');
   });
 
   it('should complete the stream when monitoring is stopped', () => {
@@ -159,7 +159,7 @@ describe('cdkAutofill', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [InputModule],
+      imports: [TextFieldModule],
       declarations: [InputWithCdkAutofilled],
     }).compileComponents();
   });

src/cdk/text-field/_text-field.scss

@@ -69,17 +69,17 @@ export class AutofillMonitor implements OnDestroy {
 
     const result = new Subject<AutofillEvent>();
     const listener = (event: AnimationEvent) => {
-      if (event.animationName === 'cdk-input-autofill-start') {
-        element.classList.add('cdk-input-autofilled');
+      if (event.animationName === 'cdk-text-field-autofill-start') {
+        element.classList.add('cdk-text-field-autofilled');
         result.next({target: event.target as Element, isAutofilled: true});
-      } else if (event.animationName === 'cdk-input-autofill-end') {
-        element.classList.remove('cdk-input-autofilled');
+      } else if (event.animationName === 'cdk-text-field-autofill-end') {
+        element.classList.remove('cdk-text-field-autofilled');
         result.next({target: event.target as Element, isAutofilled: false});
       }
     };
 
     element.addEventListener('animationstart', listener, listenerOptions);
-    element.classList.add('cdk-input-autofill-monitored');
+    element.classList.add('cdk-text-field-autofill-monitored');
 
     this._monitoredElements.set(element, {
       subject: result,
@@ -101,8 +101,8 @@ export class AutofillMonitor implements OnDestroy {
     if (info) {
       info.unlisten();
       info.subject.complete();
-      element.classList.remove('cdk-input-autofill-monitored');
-      element.classList.remove('cdk-input-autofilled');
+      element.classList.remove('cdk-text-field-autofill-monitored');
+      element.classList.remove('cdk-text-field-autofilled');
       this._monitoredElements.delete(element);
     }
   }

src/cdk/input/autofill.spec.ts renamed to src/cdk/text-field/autofill.spec.ts

@@ -5,7 +5,7 @@ import {FormsModule} from '@angular/forms';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {CdkTextareaAutosize} from './autosize';
-import {InputModule} from './input-module';
+import {TextFieldModule} from './text-field-module';
 
 
 describe('CdkTextareaAutosize', () => {
@@ -17,7 +17,7 @@ describe('CdkTextareaAutosize', () => {
     TestBed.configureTestingModule({
       imports: [
         FormsModule,
-        InputModule,
+        TextFieldModule,
         NoopAnimationsModule,
       ],
       declarations: [

src/cdk/input/autofill.ts renamed to src/cdk/text-field/autofill.ts

@@ -8,4 +8,4 @@
 
 export * from './autofill';
 export * from './autosize';
-export * from './input-module';
+export * from './text-field-module';

src/cdk/input/autosize.spec.ts renamed to src/cdk/text-field/autosize.spec.ts

@@ -18,4 +18,4 @@ import {CdkTextareaAutosize} from './autosize';
   exports: [CdkAutofill, CdkTextareaAutosize],
   providers: [AutofillMonitor],
 })
-export class InputModule {}
+export class TextFieldModule {}

src/cdk/input/autosize.ts renamed to src/cdk/text-field/autosize.ts

@@ -0,0 +1,3 @@
+@import 'text-field';
+
+@include cdk-text-field();

src/cdk/input/index.ts renamed to src/cdk/text-field/index.ts

@@ -7,7 +7,7 @@
     "annotateForClosureCompiler": true,
     "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
-    "flatModuleId": "@angular/cdk/input",
+    "flatModuleId": "@angular/cdk/text-field",
     "skipTemplateCodegen": true,
     "fullTemplateTypeCheck": true
   }

src/cdk/input/public-api.ts renamed to src/cdk/text-field/public-api.ts

@@ -9,7 +9,7 @@
 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 {TextFieldModule} from '@angular/cdk/text-field';
 import {ObserversModule} from '@angular/cdk/observers';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {PlatformModule} from '@angular/cdk/platform';
@@ -98,7 +98,7 @@ import {
     A11yModule,
     BidiModule,
     CdkAccordionModule,
-    InputModule,
+    TextFieldModule,
     ObserversModule,
     OverlayModule,
     PlatformModule,

src/cdk/input/input-module.ts renamed to src/cdk/text-field/text-field-module.ts

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

src/cdk/text-field/text-field-prebuilt.scss

@@ -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',
@@ -58,6 +57,7 @@ System.config({
     '@angular/cdk/scrolling': 'dist/packages/cdk/scrolling/index.js',
     '@angular/cdk/stepper': 'dist/packages/cdk/stepper/index.js',
     '@angular/cdk/table': 'dist/packages/cdk/table/index.js',
+    '@angular/cdk/text-field': 'dist/packages/cdk/text-field/index.js',
 
     '@angular/material/autocomplete': 'dist/packages/material/autocomplete/index.js',
     '@angular/material/bottom-sheet': 'dist/packages/material/bottom-sheet/index.js',

src/cdk/input/tsconfig-build.json renamed to src/cdk/text-field/tsconfig-build.json

@@ -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',
@@ -50,6 +49,7 @@ System.config({
     '@angular/cdk/table': 'dist/bundles/cdk-table.umd.js',
     '@angular/cdk/testing': 'dist/bundles/cdk-testing.umd.js',
     '@angular/material-examples': 'dist/bundles/material-examples.umd.js',
+    '@angular/cdk/text-field': 'dist/bundles/cdk-text-field.umd.js',
 
     '@angular/material/autocomplete': 'dist/bundles/material-autocomplete.umd.js',
     '@angular/material/bottom-sheet': 'dist/bundles/material-bottom-sheet.umd.js',