Skip to content

Commit c08ffdd

Browse files
mmalerbammalerba
committed
move autofill to cdk
1 parent 591d1f2 commit c08ffdd

21 files changed

+153
-64
lines changed

‎.github/CODEOWNERS‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
/src/cdk/bidi/** @jelbourn
6161
/src/cdk/coercion/** @jelbourn
6262
/src/cdk/collections/** @jelbourn @crisbeto @andrewseguin
63+
/src/cdk/input/** @mmalerba
6364
/src/cdk/keycodes/** @jelbourn
6465
/src/cdk/layout/** @josephperrott
6566
/src/cdk/observers/** @jelbourn @crisbeto

‎src/cdk/input/BUILD.bazel‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
package(default_visibility=["//visibility:public"])
2+
load("@angular//:index.bzl", "ng_module")
3+
load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
4+
5+
ng_module(
6+
name = "input",
7+
srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
8+
module_name = "@angular/cdk/input",
9+
deps = [
10+
"@rxjs",
11+
"//src/cdk/platform",
12+
],
13+
tsconfig = ":tsconfig-build.json",
14+
)
15+
16+
sass_library(
17+
name = "input_scss_lib",
18+
srcs = glob(["**/_*.scss"]),
19+
)
20+
21+
sass_binary(
22+
name = "autofill_prebuilt_scss",
23+
src = "autofill-prebuilt.scss",
24+
)
25+
26+
# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
27+
# Copy the output of the sass_binary such that the filename and path match what we expect.
28+
genrule(
29+
name = "autofill_prebuilt_css",
30+
srcs = [":autofill_prebuilt_scss"],
31+
outs = ["autofill-prebuilt.css"],
32+
cmd = "cat $(locations :autofill_prebuilt_scss) > $@",
33+
)

‎src/lib/input/_autofill.scss‎ renamed to ‎src/cdk/input/_autofill.scss‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
11
// Core styles that enable monitoring autofill state of inputs.
2-
@mixin mat-input-autofill {
2+
@mixin cdk-input-autofill {
33
// Keyframes that apply no styles, but allow us to monitor when an input becomes autofilled
44
// by watching for the animation events that are fired when they start.
55
// Based on: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
6-
@keyframes mat-input-autofill-start {}
7-
@keyframes mat-input-autofill-end {}
6+
@keyframes cdk-input-autofill-start {}
7+
@keyframes cdk-input-autofill-end {}
88

9-
.mat-input-autofill-monitored:-webkit-autofill {
10-
animation-name: mat-input-autofill-start;
9+
.cdk-input-autofill-monitored:-webkit-autofill {
10+
animation-name: cdk-input-autofill-start;
1111
}
1212

13-
.mat-input-autofill-monitored:not(:-webkit-autofill) {
14-
animation-name: mat-input-autofill-end;
13+
.cdk-input-autofill-monitored:not(:-webkit-autofill) {
14+
animation-name: cdk-input-autofill-end;
1515
}
1616
}
1717

1818
// Used to generate UIDs for keyframes used to change the input autofill styles.
19-
$mat-input-autofill-color-frame-count: 0;
19+
$cdk-input-autofill-color-frame-count: 0;
2020

2121
// Mixin used to apply custom background and foreground colors to an autofilled input. Based on:
2222
// https://stackoverflow.com/questions/2781549/
2323
// removing-input-background-colour-for-chrome-autocomplete#answer-37432260
24-
@mixin mat-input-autofill-color($background, $foreground:'') {
25-
@keyframes mat-input-autofill-color-#{$mat-input-autofill-color-frame-count} {
24+
@mixin cdk-input-autofill-color($background, $foreground:'') {
25+
@keyframes cdk-input-autofill-color-#{$cdk-input-autofill-color-frame-count} {
2626
to {
2727
background: $background;
2828
@if $foreground != '' { color: $foreground; }
2929
}
3030
}
3131

3232
&:-webkit-autofill {
33-
animation-name: mat-input-autofill-color-#{$mat-input-autofill-color-frame-count};
33+
animation-name: cdk-input-autofill-color-#{$cdk-input-autofill-color-frame-count};
3434
animation-fill-mode: both;
3535
}
3636

37-
&.mat-input-autofill-monitored:-webkit-autofill {
38-
animation-name: mat-input-autofill-start,
39-
mat-input-autofill-color-#{$mat-input-autofill-color-frame-count};
37+
&.cdk-input-autofill-monitored:-webkit-autofill {
38+
animation-name: cdk-input-autofill-start,
39+
cdk-input-autofill-color-#{$cdk-input-autofill-color-frame-count};
4040
}
4141

42-
$mat-input-autofill-color-frame-count: $mat-input-autofill-color-frame-count + 1 !global;
42+
$cdk-input-autofill-color-frame-count: $cdk-input-autofill-color-frame-count + 1 !global;
4343
}

‎src/cdk/input/autofill-prebuilt.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import 'autofill';
2+
3+
@include cdk-input-autofill();

‎src/lib/input/autofill.spec.ts‎ renamed to ‎src/cdk/input/autofill.spec.ts‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {Component, ElementRef, ViewChild} from '@angular/core';
1111
import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
1212
import {empty as observableEmpty} from 'rxjs/observable/empty';
1313
import {AutofillEvent, AutofillMonitor} from './autofill';
14-
import {MatInputModule} from './input-module';
14+
import {InputModule} from './input-module';
1515

1616

1717
const listenerOptions: any = supportsPassiveEventListeners() ? {passive: true} : false;
@@ -24,7 +24,7 @@ describe('AutofillMonitor', () => {
2424

2525
beforeEach(() => {
2626
TestBed.configureTestingModule({
27-
imports: [MatInputModule],
27+
imports: [InputModule],
2828
declarations: [Inputs],
2929
}).compileComponents();
3030
});
@@ -52,7 +52,7 @@ describe('AutofillMonitor', () => {
5252
expect(inputEl.addEventListener).not.toHaveBeenCalled();
5353

5454
autofillMonitor.monitor(inputEl);
55-
expect(inputEl.classList).toContain('mat-input-autofill-monitored');
55+
expect(inputEl.classList).toContain('cdk-input-autofill-monitored');
5656
expect(inputEl.addEventListener)
5757
.toHaveBeenCalledWith('animationstart', jasmine.any(Function), listenerOptions);
5858
});
@@ -69,11 +69,11 @@ describe('AutofillMonitor', () => {
6969
it('should remove monitored class and listener upon stop monitoring', () => {
7070
const inputEl = testComponent.input1.nativeElement;
7171
autofillMonitor.monitor(inputEl);
72-
expect(inputEl.classList).toContain('mat-input-autofill-monitored');
72+
expect(inputEl.classList).toContain('cdk-input-autofill-monitored');
7373
expect(inputEl.removeEventListener).not.toHaveBeenCalled();
7474

7575
autofillMonitor.stopMonitoring(inputEl);
76-
expect(inputEl.classList).not.toContain('mat-input-autofill-monitored');
76+
expect(inputEl.classList).not.toContain('cdk-input-autofill-monitored');
7777
expect(inputEl.removeEventListener)
7878
.toHaveBeenCalledWith('animationstart', jasmine.any(Function), listenerOptions);
7979
});
@@ -103,10 +103,10 @@ describe('AutofillMonitor', () => {
103103
const autofillStream = autofillMonitor.monitor(inputEl);
104104
autofillStream.subscribe(event => autofillStreamEvent = event);
105105
expect(autofillStreamEvent).toBeNull();
106-
expect(inputEl.classList).not.toContain('mat-input-autofilled');
106+
expect(inputEl.classList).not.toContain('cdk-input-autofilled');
107107

108-
animationStartCallback({animationName: 'mat-input-autofill-start', target: inputEl});
109-
expect(inputEl.classList).toContain('mat-input-autofilled');
108+
animationStartCallback({animationName: 'cdk-input-autofill-start', target: inputEl});
109+
expect(inputEl.classList).toContain('cdk-input-autofilled');
110110
expect(autofillStreamEvent).toEqual({target: inputEl, isAutofilled: true} as any);
111111
});
112112

@@ -117,12 +117,12 @@ describe('AutofillMonitor', () => {
117117
inputEl.addEventListener.and.callFake((_, cb) => animationStartCallback = cb);
118118
const autofillStream = autofillMonitor.monitor(inputEl);
119119
autofillStream.subscribe(event => autofillStreamEvent = event);
120-
animationStartCallback({animationName: 'mat-input-autofill-start', target: inputEl});
121-
expect(inputEl.classList).toContain('mat-input-autofilled');
120+
animationStartCallback({animationName: 'cdk-input-autofill-start', target: inputEl});
121+
expect(inputEl.classList).toContain('cdk-input-autofilled');
122122
expect(autofillStreamEvent).toEqual({target: inputEl, isAutofilled: true} as any);
123123

124-
animationStartCallback({animationName: 'mat-input-autofill-end', target: inputEl});
125-
expect(inputEl.classList).not.toContain('mat-input-autofilled');
124+
animationStartCallback({animationName: 'cdk-input-autofill-end', target: inputEl});
125+
expect(inputEl.classList).not.toContain('cdk-input-autofilled');
126126
expect(autofillStreamEvent).toEqual({target: inputEl, isAutofilled: false} as any);
127127
});
128128

@@ -131,31 +131,31 @@ describe('AutofillMonitor', () => {
131131
let animationStartCallback: Function = () => {};
132132
inputEl.addEventListener.and.callFake((_, cb) => animationStartCallback = cb);
133133
autofillMonitor.monitor(inputEl);
134-
animationStartCallback({animationName: 'mat-input-autofill-start', target: inputEl});
135-
expect(inputEl.classList).toContain('mat-input-autofilled');
134+
animationStartCallback({animationName: 'cdk-input-autofill-start', target: inputEl});
135+
expect(inputEl.classList).toContain('cdk-input-autofilled');
136136

137137
autofillMonitor.stopMonitoring(inputEl);
138-
expect(inputEl.classlist).not.toContain('mat-input-autofilled');
138+
expect(inputEl.classlist).not.toContain('cdk-input-autofilled');
139139
});
140140
});
141141

142-
describe('matAutofill', () => {
142+
describe('cdkAutofill', () => {
143143
let autofillMonitor: AutofillMonitor;
144-
let fixture: ComponentFixture<InputWithMatAutofilled>;
145-
let testComponent: InputWithMatAutofilled;
144+
let fixture: ComponentFixture<InputWithCdkAutofilled>;
145+
let testComponent: InputWithCdkAutofilled;
146146

147147
beforeEach(() => {
148148
TestBed.configureTestingModule({
149-
imports: [MatInputModule],
150-
declarations: [InputWithMatAutofilled],
149+
imports: [InputModule],
150+
declarations: [InputWithCdkAutofilled],
151151
}).compileComponents();
152152
});
153153

154154
beforeEach(inject([AutofillMonitor], (afm: AutofillMonitor) => {
155155
autofillMonitor = afm;
156156
spyOn(autofillMonitor, 'monitor').and.returnValue(observableEmpty());
157157
spyOn(autofillMonitor, 'stopMonitoring');
158-
fixture = TestBed.createComponent(InputWithMatAutofilled);
158+
fixture = TestBed.createComponent(InputWithCdkAutofilled);
159159
testComponent = fixture.componentInstance;
160160
fixture.detectChanges();
161161
}));
@@ -185,8 +185,8 @@ class Inputs {
185185
}
186186

187187
@Component({
188-
template: `<input #input matAutofill>`
188+
template: `<input #input cdkAutofill>`
189189
})
190-
class InputWithMatAutofilled {
190+
class InputWithCdkAutofilled {
191191
@ViewChild('input') input: ElementRef;
192192
}

‎src/lib/input/autofill.ts‎ renamed to ‎src/cdk/input/autofill.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -69,17 +69,17 @@ export class AutofillMonitor implements OnDestroy {
6969

7070
const result = new Subject<AutofillEvent>();
7171
const listener = (event: AnimationEvent) => {
72-
if (event.animationName === 'mat-input-autofill-start') {
73-
element.classList.add('mat-input-autofilled');
72+
if (event.animationName === 'cdk-input-autofill-start') {
73+
element.classList.add('cdk-input-autofilled');
7474
result.next({target: event.target as Element, isAutofilled: true});
75-
} else if (event.animationName === 'mat-input-autofill-end') {
76-
element.classList.remove('mat-input-autofilled');
75+
} else if (event.animationName === 'cdk-input-autofill-end') {
76+
element.classList.remove('cdk-input-autofilled');
7777
result.next({target: event.target as Element, isAutofilled: false});
7878
}
7979
};
8080

8181
element.addEventListener('animationstart', listener, listenerOptions);
82-
element.classList.add('mat-input-autofill-monitored');
82+
element.classList.add('cdk-input-autofill-monitored');
8383

8484
this._monitoredElements.set(element, {
8585
subject: result,
@@ -99,8 +99,8 @@ export class AutofillMonitor implements OnDestroy {
9999
const info = this._monitoredElements.get(element);
100100
if (info) {
101101
info.unlisten();
102-
element.classList.remove('mat-input-autofill-monitored');
103-
element.classList.remove('mat-input-autofilled');
102+
element.classList.remove('cdk-input-autofill-monitored');
103+
element.classList.remove('cdk-input-autofilled');
104104
this._monitoredElements.delete(element);
105105
}
106106
}
@@ -116,16 +116,16 @@ export class AutofillMonitor implements OnDestroy {
116116

117117
/** A directive that can be used to monitor the autofill state of an input. */
118118
@Directive({
119-
selector: '[matAutofill]',
119+
selector: '[cdkAutofill]',
120120
})
121-
export class MatAutofill implements OnDestroy, OnInit {
122-
@Output() matAutofill = new EventEmitter<AutofillEvent>();
121+
export class CdkAutofill implements OnDestroy, OnInit {
122+
@Output() cdkAutofill = new EventEmitter<AutofillEvent>();
123123

124124
constructor(private _elementRef: ElementRef, private _autofillMonitor: AutofillMonitor) {}
125125

126126
ngOnInit() {
127127
this._autofillMonitor.monitor(this._elementRef.nativeElement)
128-
.subscribe(event => this.matAutofill.emit(event));
128+
.subscribe(event => this.cdkAutofill.emit(event));
129129
}
130130

131131
ngOnDestroy() {

‎src/cdk/input/index.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
export * from './public-api';

‎src/cdk/input/input-module.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {PlatformModule} from '@angular/cdk/platform';
10+
import {NgModule} from '@angular/core';
11+
import {AutofillMonitor, CdkAutofill} from './autofill';
12+
13+
14+
@NgModule({
15+
declarations: [CdkAutofill],
16+
imports: [PlatformModule],
17+
exports: [CdkAutofill],
18+
providers: [AutofillMonitor],
19+
})
20+
export class InputModule {}

‎src/cdk/input/public-api.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
export * from './autofill';
10+
export * from './input-module';

‎src/cdk/input/tsconfig-build.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"extends": "../tsconfig-build",
3+
"files": [
4+
"public-api.ts"
5+
],
6+
"angularCompilerOptions": {
7+
"annotateForClosureCompiler": true,
8+
"strictMetadataEmit": true,
9+
"flatModuleOutFile": "index.js",
10+
"flatModuleId": "@angular/cdk/input",
11+
"skipTemplateCodegen": true,
12+
"fullTemplateTypeCheck": true
13+
}
14+
}

0 commit comments

Comments
 (0)