skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: explictly declare types for mixin base classes (#12876)

Browse Source 
As of TypeScript 2.9, tsc will inline imports for inferred types with
the `import("...")` syntax. However, this inlining happens *after*
`paths` are resolved. This means that in places where we import from
`@angular/material/core` in source end up having relative paths (e.g.
`../core/common-behaviors/index`) in the generated d.ts files. These
relative import paths become incorrect when moved into our package
structure, breaking downstream apps.
This commit is contained in:
Jeremy Elbourn
2018-08-29 10:14:37 -07:00
committed by GitHub
parent 73d54a428b
commit 515912b23f
45 changed files with 398 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+67 -49
View File
@@ -35,17 +35,17 @@
}
},
"@angular/animations": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-6.1.0.tgz",
"integrity": "sha512-9IJs1czyoOlgcaY3QUyQI0XeTFX45Qr/o5qlPrce240gi7TXbdJs3WIbLzxx7BhMf20GholCaOvSS3BZrNlFSA==",
"version": "7.0.0-beta.3",
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-7.0.0-beta.3.tgz",
"integrity": "sha512-mZswGKBYbdiyw4knCO2tlZXuZaUDAh4gX8+FtPL568JXozc4w/ju2nJ/X4oOEmLZIWwDX5ubqOWe88uR5blLHQ==",
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/bazel": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@angular/bazel/-/bazel-6.1.0.tgz",
"integrity": "sha512-NmAqcj9RK98jauCgpNp3gE8jPjs2Oexszj1pyKyh8lg1VUYhFHFp3SVos0JEYtgu1I2MvX4H/veDCEepD5u8vg==",
"version": "7.0.0-beta.3",
"resolved": "https://registry.npmjs.org/@angular/bazel/-/bazel-7.0.0-beta.3.tgz",
"integrity": "sha512-e+vYniNRuz/1NTpCWmzSI8wvUSqZ6+bnYe5fVMpo3wdkU5q9P49+3+HRCR7oaQAVlldFoF5gdF7qhszHKECHmQ==",
"dev": true,
"requires": {
"@bazel/typescript": "^0.15.0",
@@ -62,31 +62,34 @@
}
},
"@angular/common": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-6.1.0.tgz",
"integrity": "sha512-uxdjxbuTYiCsOcrfO9EumGrfXo+7nB7HlS9F4wraKcnR22oJYNUh36meFKZwpoj5pDIBLnZQu75boI16o3W+SQ==",
"version": "7.0.0-beta.3",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-7.0.0-beta.3.tgz",
"integrity": "sha512-PuTcwCtgVJpXrUoUJIs1azzgbAMtU5zEdkGHiaMZyO6PmHXV1cq30zlkqIIvFclb9K9Vc2ZC4KIlrMzIWeaAtA==",
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/compiler": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-6.1.0.tgz",
"integrity": "sha512-5c8ZYCFv0xccy0F12zBRIJX0pJd9BgCThJuhVJAuaRFFOqPZl8FKEO3SFqKJNywT0UktZD9JpYFKxhUVxuSHDg==",
"version": "7.0.0-beta.3",
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-7.0.0-beta.3.tgz",
"integrity": "sha512-lQmJuqQrLvyEMylATy3fPVYSuj1Y8WDb8YVdp2kkf+dpopFEI1bMNTV7t8HHuaUcYuGRku0wyzLnTioQo8ineg==",
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/compiler-cli": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-6.1.0.tgz",
"integrity": "sha512-g4fXQwAYnxtr08BK3CiodJsUXz3fIBCVfZaWIcLMdOlyarFDEvB3TA9qfPkQtlndm87WpXjZ6Xd9OAkmG8t8dw==",
"version": "7.0.0-beta.3",
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-7.0.0-beta.3.tgz",
"integrity": "sha512-CUXkntV2sZQBkK5i3v/ggnlFznfwmaqkddpawcXHfd+xDllRsFz7VrpO5hveqrg6y54jJqIuDm4iBXRrYqhiHw==",
"dev": true,
"requires": {
"chokidar": "^1.4.2",
"convert-source-map": "^1.5.1",
"magic-string": "^0.25.0",
"minimist": "^1.2.0",
"reflect-metadata": "^0.1.2",
"tsickle": "^0.30.0"
"source-map": "^0.6.1",
"tsickle": "^0.32.1"
},
"dependencies": {
"anymatch": {
@@ -193,6 +196,15 @@
"is-buffer": "^1.1.5"
}
},
"magic-string": {
"version": "0.25.0",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.0.tgz",
"integrity": "sha512-Msbwa9oNYNPjwVh9ury5X2BHbTFWoirTlzuf4X+pIoSOQVKNRJHXTx1WmKYuXzRM4QZFv8dGXyZvhDMmWhGLPw==",
"dev": true,
"requires": {
"sourcemap-codec": "^1.4.1"
}
},
"micromatch": {
"version": "2.3.11",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
@@ -215,9 +227,9 @@
}
},
"tsickle": {
"version": "0.30.0",
"resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.30.0.tgz",
"integrity": "sha512-A4ALnEDQNrECn5xhgHmoXKM5qERCM395pKIfqcV57ex3zEInVogu/A191Btv8OPEINkr3xQ3Q2XRywyqkge3Qg==",
"version": "0.32.1",
"resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.32.1.tgz",
"integrity": "sha512-JW9j+W0SaMSZGejIFZBk0AiPfnhljK3oLx5SaqxrJhjlvzFyPml5zqG1/PuScUj6yTe1muEqwk5CnDK0cOZmKw==",
"dev": true,
"requires": {
"jasmine-diff": "^0.1.3",
@@ -230,59 +242,59 @@
}
},
"@angular/core": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-6.1.0.tgz",
"integrity": "sha512-gWu9Q7q2+fhFC5dl/BvGW7Ha7NUJtK9wQLYQlfIMim4lKTOiM1/S0MYBVMrEq58ldMr9DnA35f5jGno3x6/v+g==",
"version": "7.0.0-beta.3",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-7.0.0-beta.3.tgz",
"integrity": "sha512-G+gZPLDvN68O+C9XtYJTn5VSISyH6yDs1ZbbOfRpCTTNFAscjbKfrs+MjCoxJkPNIBbpVfoSTFopHMWQmfgfvA==",
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/elements": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@angular/elements/-/elements-6.1.0.tgz",
"integrity": "sha512-9X6ZeiPduQSfesg5kDeDWeqEmsLLF5YbCxOT8tzzvo1Zdw3uAYupmDSpzxPaVxD3JduCYlGjhLRGngdCtiXcVw==",
"version": "7.0.0-beta.3",
"resolved": "https://registry.npmjs.org/@angular/elements/-/elements-7.0.0-beta.3.tgz",
"integrity": "sha512-RUe/zpfvZQTy57n+ZBXAMA3r+oBUNgzwDbYuX9adC9kzWbK46+j8uhLPKAO8fa2VR0vAL07q5Rdg6gnMz2HwwA==",
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/forms": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.1.0.tgz",
"integrity": "sha512-6InfsKWEL9w2RvTXjy5R3F8GRjENT9d444o95aSvf+ZK7KsYOeIwcYgN2pw+LjfNu2O3EbAqps8APQ6oD/Fn3A==",
"version": "7.0.0-beta.3",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-7.0.0-beta.3.tgz",
"integrity": "sha512-aSt7qdgfa7bRRDkKq9DjeP/SCLe1NHLksZBNlv/8CAZ3c0yPsZ9m+4P1ouHwVwUwokjPB+IcLV+PRhKGtdt49Q==",
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/http": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@angular/http/-/http-6.1.0.tgz",
"integrity": "sha512-Tky6T93xX22m7zeXSdxALXglKh00QerubV9+exKLUethDGE/xvdRKKdsiMo72w+4yj/1bXAd4fXw+SDneUco7Q==",
"version": "7.0.0-beta.3",
"resolved": "https://registry.npmjs.org/@angular/http/-/http-7.0.0-beta.3.tgz",
"integrity": "sha512-JoqnwsRB01B+AFJVvle3iLb4CePr6lhkRrCst8Yz9Ci8Vk8R+zhkIUECZXtTviepBi/W2xF4pSFhLadic3yI8w==",
"dev": true,
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/platform-browser": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.1.0.tgz",
"integrity": "sha512-LcpcHLpy+fjN+gKcnTkWuTTuF+uYT350mje1kNr4Advoco76tXYBjAda/EehG+vmQmDTd5E+uxJhKJr/1POVEw==",
"version": "7.0.0-beta.3",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-7.0.0-beta.3.tgz",
"integrity": "sha512-BdjaumdkdVRZmdwcZ4VNT0aHEa9MEeFAXsYue29RI+QCes1v+FP996+uqFBB8eSLQm0qlnrOg9AYu9YqkS8jwQ==",
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/platform-browser-dynamic": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.1.0.tgz",
"integrity": "sha512-gjOJ38ciuIgdAuG8bEs/sdJmkfm/oICLrCcQexz+EUCZAiqbKDb0HvFTDaKaLtR7iDbTXVMQhoYMOyTY40FwLQ==",
"version": "7.0.0-beta.3",
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-7.0.0-beta.3.tgz",
"integrity": "sha512-F/ZK5G49oyfl/4sOPWKzae5gxbYbPzB8Zhe4s3thfniLbt5a0gXgz5QquSfyOpyTF7Cv2/nxjnJDNUxBvuI7QQ==",
"dev": true,
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/platform-server": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-6.1.0.tgz",
"integrity": "sha512-hlE2/K+93ihMLXphlusdvRET4PR3Wo6vOUHb0SKVWYUo/pw7EpPIdeRs49xjsiW08TNwFI5UGYUQn+pd9ATIjA==",
"version": "7.0.0-beta.3",
"resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-7.0.0-beta.3.tgz",
"integrity": "sha512-F5gXoWIpJgVmKHG6eR2GfV7Pc6HorJwAfRlMK5CWiFjrbNbTwkanBo4h2HV5lCNexhM2vQmkTEoxTHaeqLxoFQ==",
"dev": true,
"requires": {
"domino": "^2.0.1",
@@ -291,18 +303,18 @@
}
},
"@angular/router": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-6.1.0.tgz",
"integrity": "sha512-tIcHLuat19cnoQBbOfe/8zAHVqf/9S17YgwSO6VUPTuXLRe9ZBgYT50BzqRhcm8ODOqVmLBQYlzP7zRcNRkHDA==",
"version": "7.0.0-beta.3",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-7.0.0-beta.3.tgz",
"integrity": "sha512-5hT204P+1vJ2tB8DDaeouWxm9naO+uZOZUaO1TeuZ7GmuG7dr+pa9lgUXTa4lCf1l+2vWJu9QBRC9I7GASpyAg==",
"dev": true,
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/upgrade": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@angular/upgrade/-/upgrade-6.1.0.tgz",
"integrity": "sha512-HWpXisVY1uyIhWXz41KciweCWAD7oHajkhnDXlNBvDaIbnYkUSSr2D5DOCR8jIooV1HqJMkXCqRR0nwm3WEjJg==",
"version": "7.0.0-beta.3",
"resolved": "https://registry.npmjs.org/@angular/upgrade/-/upgrade-7.0.0-beta.3.tgz",
"integrity": "sha512-WSM4t3kGc9CJUB+uflZ/Xg3oU+cULQ/Dp5+gN8+9eD9x6eBRI2Qdd/4FGKLCAtOveaPjTwM9HQVH5oz5/TDFzw==",
"dev": true,
"requires": {
"tslib": "^1.9.0"
@@ -3388,6 +3400,12 @@
"trim-off-newlines": "^1.0.0"
}
},
"convert-source-map": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.5.1.tgz",
"integrity": "sha1-uCeAl7m8IpNl3lxiz1/K7YtVmeU=",
"dev": true
},
"cookie": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
@@ -4088,9 +4106,9 @@
}
},
"domino": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/domino/-/domino-2.0.3.tgz",
"integrity": "sha512-QkW2THVtKJw9FmV6awFQbcpaJPIqQtF+F1PMO5EXIdULVit9IaU3w+ZQgBjrR6hSHgP97TKyo/tcFqkgwfYenA==",
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/domino/-/domino-2.1.0.tgz",
"integrity": "sha512-xINSODvrnuQcm3eXJN4IkBR+JxqLrJN8Ge4fd00y1b7HsY0A4huKN5BflSS/oo8quBWmocTfWdFvrw2H8TjGqQ==",
"dev": true
},
"domutils": {
package.json
+14 -14
View File
@@ -27,13 +27,13 @@
"version": "6.4.6",
"requiredAngularVersion": ">=6.0.0 <7.0.0",
"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/elements": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/animations": "7.0.0-beta.3",
"@angular/common": "7.0.0-beta.3",
"@angular/compiler": "7.0.0-beta.3",
"@angular/core": "7.0.0-beta.3",
"@angular/elements": "7.0.0-beta.3",
"@angular/forms": "7.0.0-beta.3",
"@angular/platform-browser": "7.0.0-beta.3",
"@webcomponents/custom-elements": "^1.1.0",
"core-js": "^2.4.1",
"rxjs": "^6.2.0",
@@ -45,13 +45,13 @@
"devDependencies": {
"@angular-devkit/core": "^0.7.1",
"@angular-devkit/schematics": "^0.7.1",
"@angular/bazel": "^6.1.0",
"@angular/compiler-cli": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/platform-server": "^6.1.0",
"@angular/router": "^6.1.0",
"@angular/upgrade": "^6.1.0",
"@angular/bazel": "7.0.0-beta.3",
"@angular/compiler-cli": "7.0.0-beta.3",
"@angular/http": "7.0.0-beta.3",
"@angular/platform-browser-dynamic": "7.0.0-beta.3",
"@angular/platform-server": "7.0.0-beta.3",
"@angular/router": "7.0.0-beta.3",
"@angular/upgrade": "7.0.0-beta.3",
"@bazel/ibazel": "0.3.1",
"@google-cloud/storage": "^1.1.1",
"@octokit/rest": "^15.9.4",
src/cdk/table/can-stick.ts
+4 -2
View File
@@ -31,14 +31,16 @@ export interface CanStick {
resetStickyChanged(): void;
}
/** @docs-private */
export type CanStickCtor = Constructor<CanStick>;
/**
* Mixin to provide a directive with a function that checks if the sticky input has been
* changed since the last time the function was called. Essentially adds a dirty-check to the
* sticky value.
* @docs-private
*/
export function mixinHasStickyInput<T extends Constructor<{}>>(base: T):
Constructor<CanStick> & T {
export function mixinHasStickyInput<T extends Constructor<{}>>(base: T): CanStickCtor & T {
return class extends base {
/** Whether sticky positioning should be applied. */
get sticky(): boolean { return this._sticky; }
src/cdk/table/cell.ts
+5 -3
View File
@@ -6,9 +6,10 @@
* found in the LICENSE file at https://angular.io/license
*/
import {ContentChild, Directive, ElementRef, Input, TemplateRef} from '@angular/core';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {CanStick, mixinHasStickyInput} from './can-stick';
import {ContentChild, Directive, ElementRef, Input, TemplateRef} from '@angular/core';
import {CanStick, CanStickCtor, mixinHasStickyInput} from './can-stick';
/** Base interface for a cell definition. Captures a column's cell template definition. */
export interface CellDef {
@@ -45,7 +46,8 @@ export class CdkFooterCellDef implements CellDef {
// Boilerplate for applying mixins to CdkColumnDef.
/** @docs-private */
export class CdkColumnDefBase {}
export const _CdkColumnDefBase = mixinHasStickyInput(CdkColumnDefBase);
export const _CdkColumnDefBase: CanStickCtor & typeof CdkColumnDefBase =
mixinHasStickyInput(CdkColumnDefBase);
/**
* Column definition for the CDK table.
src/cdk/table/row.ts
+5 -3
View File
@@ -20,8 +20,8 @@ import {
ViewContainerRef,
ViewEncapsulation,
} from '@angular/core';
import {CanStick, CanStickCtor, mixinHasStickyInput} from './can-stick';
import {CdkCellDef, CdkColumnDef} from './cell';
import {CanStick, mixinHasStickyInput} from './can-stick';
/**
* The row template that can be used by the mat-table. Should not be used outside of the
@@ -76,7 +76,8 @@ export abstract class BaseRowDef implements OnChanges {
// Boilerplate for applying mixins to CdkHeaderRowDef.
/** @docs-private */
export class CdkHeaderRowDefBase extends BaseRowDef {}
export const _CdkHeaderRowDefBase = mixinHasStickyInput(CdkHeaderRowDefBase);
export const _CdkHeaderRowDefBase: CanStickCtor & typeof CdkHeaderRowDefBase =
mixinHasStickyInput(CdkHeaderRowDefBase);
/**
* Header row definition for the CDK table.
@@ -101,7 +102,8 @@ export class CdkHeaderRowDef extends _CdkHeaderRowDefBase implements CanStick, O
// Boilerplate for applying mixins to CdkFooterRowDef.
/** @docs-private */
export class CdkFooterRowDefBase extends BaseRowDef {}
export const _CdkFooterRowDefBase = mixinHasStickyInput(CdkFooterRowDefBase);
export const _CdkFooterRowDefBase: CanStickCtor & typeof CdkFooterRowDefBase =
mixinHasStickyInput(CdkFooterRowDefBase);
/**
* Footer row definition for the CDK table.
src/lib/autocomplete/autocomplete.ts
+17 -13
View File
@@ -5,32 +5,34 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {ActiveDescendantKeyManager} from '@angular/cdk/a11y';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {
AfterContentInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ContentChildren,
ElementRef,
EventEmitter,
Inject,
InjectionToken,
Input,
Output,
QueryList,
TemplateRef,
ViewChild,
ViewEncapsulation,
ChangeDetectorRef,
ChangeDetectionStrategy,
EventEmitter,
Output,
InjectionToken,
Inject,
} from '@angular/core';
import {
MatOption,
MatOptgroup,
MAT_OPTION_PARENT_COMPONENT,
mixinDisableRipple,
CanDisableRipple,
CanDisableRippleCtor,
MAT_OPTION_PARENT_COMPONENT,
MatOptgroup,
MatOption,
mixinDisableRipple,
} from '@angular/material/core';
import {ActiveDescendantKeyManager} from '@angular/cdk/a11y';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
/**
@@ -48,10 +50,12 @@ export class MatAutocompleteSelectedEvent {
public option: MatOption) { }
}
// Boilerplate for applying mixins to MatAutocomplete.
/** @docs-private */
export class MatAutocompleteBase {}
export const _MatAutocompleteMixinBase = mixinDisableRipple(MatAutocompleteBase);
export const _MatAutocompleteMixinBase: CanDisableRippleCtor & typeof MatAutocompleteBase =
mixinDisableRipple(MatAutocompleteBase);
/** Default `mat-autocomplete` options that can be overridden. */
export interface MatAutocompleteDefaultOptions {
src/lib/button-toggle/button-toggle.ts
+10 -5
View File
@@ -8,8 +8,10 @@
import {FocusMonitor} from '@angular/cdk/a11y';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {SelectionModel} from '@angular/cdk/collections';
import {
AfterContentInit,
Attribute,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
@@ -26,16 +28,17 @@ import {
QueryList,
ViewChild,
ViewEncapsulation,
Attribute,
} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
import {
CanDisable,
CanDisableCtor,
CanDisableRipple,
CanDisableRippleCtor,
mixinDisabled,
mixinDisableRipple
mixinDisableRipple,
} from '@angular/material/core';
import {SelectionModel} from '@angular/cdk/collections';
/** Acceptable types for a button toggle. */
export type ToggleType = 'checkbox' | 'radio';
@@ -43,7 +46,8 @@ export type ToggleType = 'checkbox' | 'radio';
// Boilerplate for applying mixins to MatButtonToggleGroup and MatButtonToggleGroupMultiple
/** @docs-private */
export class MatButtonToggleGroupBase {}
export const _MatButtonToggleGroupMixinBase = mixinDisabled(MatButtonToggleGroupBase);
export const _MatButtonToggleGroupMixinBase: CanDisableCtor & typeof MatButtonToggleGroupBase =
mixinDisabled(MatButtonToggleGroupBase);
/**
* Provider Expression that allows mat-button-toggle-group to register as a ControlValueAccessor.
@@ -315,7 +319,8 @@ export class MatButtonToggleGroup extends _MatButtonToggleGroupMixinBase impleme
// Boilerplate for applying mixins to the MatButtonToggle class.
/** @docs-private */
export class MatButtonToggleBase {}
export const _MatButtonToggleMixinBase = mixinDisableRipple(MatButtonToggleBase);
export const _MatButtonToggleMixinBase: CanDisableRippleCtor & typeof MatButtonToggleBase =
mixinDisableRipple(MatButtonToggleBase);
/** Single button inside of a toggle group. */
@Component({
src/lib/button/button.ts
+7 -2
View File
@@ -23,10 +23,13 @@ import {
CanColor,
CanDisable,
CanDisableRipple,
CanColorCtor,
CanDisableCtor,
CanDisableRippleCtor,
MatRipple,
mixinColor,
mixinDisabled,
mixinDisableRipple
mixinDisableRipple,
} from '@angular/material/core';
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
@@ -52,8 +55,10 @@ const BUTTON_HOST_ATTRIBUTES = [
export class MatButtonBase {
constructor(public _elementRef: ElementRef) {}
}
export const _MatButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(MatButtonBase)));
export const _MatButtonMixinBase:
CanDisableRippleCtor & CanDisableCtor & CanColorCtor & typeof MatButtonBase =
mixinColor(mixinDisabled(mixinDisableRipple(MatButtonBase)));
/**
* Material design button.
src/lib/checkbox/checkbox.ts
+12 -3
View File
@@ -29,9 +29,13 @@ import {
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
import {
CanColor,
CanColorCtor,
CanDisable,
CanDisableCtor,
CanDisableRipple,
CanDisableRippleCtor,
HasTabIndex,
HasTabIndexCtor,
MatRipple,
mixinColor,
mixinDisabled,
@@ -39,8 +43,8 @@ import {
mixinTabIndex,
RippleRef,
} from '@angular/material/core';
import {MAT_CHECKBOX_CLICK_ACTION, MatCheckboxClickAction} from './checkbox-config';
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
import {MAT_CHECKBOX_CLICK_ACTION, MatCheckboxClickAction} from './checkbox-config';
// Increasing integer for generating unique ids for checkbox components.
@@ -85,8 +89,13 @@ export class MatCheckboxChange {
export class MatCheckboxBase {
constructor(public _elementRef: ElementRef) {}
}
export const _MatCheckboxMixinBase =
mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatCheckboxBase)), 'accent'));
export const _MatCheckboxMixinBase:
HasTabIndexCtor &
CanColorCtor &
CanDisableRippleCtor &
CanDisableCtor &
typeof MatCheckboxBase =
mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatCheckboxBase)), 'accent'));
/**
src/lib/chips/chip-list.ts
+9 -3
View File
@@ -10,7 +10,7 @@ import {FocusKeyManager} from '@angular/cdk/a11y';
import {Directionality} from '@angular/cdk/bidi';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {SelectionModel} from '@angular/cdk/collections';
import {BACKSPACE, HOME, END} from '@angular/cdk/keycodes';
import {BACKSPACE, END, HOME} from '@angular/cdk/keycodes';
import {
AfterContentInit,
ChangeDetectionStrategy,
@@ -30,7 +30,12 @@ import {
ViewEncapsulation,
} from '@angular/core';
import {ControlValueAccessor, FormGroupDirective, NgControl, NgForm} from '@angular/forms';
import {CanUpdateErrorState, ErrorStateMatcher, mixinErrorState} from '@angular/material/core';
import {
CanUpdateErrorState,
CanUpdateErrorStateCtor,
ErrorStateMatcher,
mixinErrorState,
} from '@angular/material/core';
import {MatFormFieldControl} from '@angular/material/form-field';
import {merge, Observable, Subject, Subscription} from 'rxjs';
import {startWith, takeUntil} from 'rxjs/operators';
@@ -47,7 +52,8 @@ export class MatChipListBase {
/** @docs-private */
public ngControl: NgControl) {}
}
export const _MatChipListMixinBase = mixinErrorState(MatChipListBase);
export const _MatChipListMixinBase: CanUpdateErrorStateCtor & typeof MatChipListBase =
mixinErrorState(MatChipListBase);
// Increasing integer for generating unique ids for chip-list components.
src/lib/chips/chip.ts
+7 -3
View File
@@ -25,8 +25,11 @@ import {
} from '@angular/core';
import {
CanColor,
CanColorCtor,
CanDisable,
CanDisableCtor,
CanDisableRipple,
CanDisableRippleCtor,
MAT_RIPPLE_GLOBAL_OPTIONS,
mixinColor,
mixinDisabled,
@@ -34,7 +37,7 @@ import {
RippleConfig,
RippleGlobalOptions,
RippleRenderer,
RippleTarget
RippleTarget,
} from '@angular/material/core';
import {Subject} from 'rxjs';
import {take} from 'rxjs/operators';
@@ -64,8 +67,9 @@ export class MatChipBase {
constructor(public _elementRef: ElementRef) {}
}
export const _MatChipMixinBase =
mixinColor(mixinDisableRipple(mixinDisabled(MatChipBase)), 'primary');
export const _MatChipMixinBase:
CanColorCtor & CanDisableRippleCtor & CanDisableCtor & typeof MatChipBase =
mixinColor(mixinDisableRipple(mixinDisabled(MatChipBase)), 'primary');
const CHIP_ATTRIBUTE_NAMES = ['mat-basic-chip'];
src/lib/core/common-behaviors/color.ts
+5 -2
View File
@@ -15,6 +15,9 @@ export interface CanColor {
color: ThemePalette;
}
/** @docs-private */
export type CanColorCtor = Constructor<CanColor>;
/** @docs-private */
export interface HasElementRef {
_elementRef: ElementRef;
@@ -24,8 +27,8 @@ export interface HasElementRef {
export type ThemePalette = 'primary' | 'accent' | 'warn' | undefined;
/** Mixin to augment a directive with a `color` property. */
export function mixinColor<T extends Constructor<HasElementRef>>(base: T,
defaultColor?: ThemePalette): Constructor<CanColor> & T {
export function mixinColor<T extends Constructor<HasElementRef>>(
base: T, defaultColor?: ThemePalette): CanColorCtor & T {
return class extends base {
private _color: ThemePalette;
src/lib/core/common-behaviors/disable-ripple.ts
+4 -2
View File
@@ -15,9 +15,11 @@ export interface CanDisableRipple {
disableRipple: boolean;
}
/** @docs-private */
export type CanDisableRippleCtor = Constructor<CanDisableRipple>;
/** Mixin to augment a directive with a `disableRipple` property. */
export function mixinDisableRipple<T extends Constructor<{}>>(base: T)
: Constructor<CanDisableRipple> & T {
export function mixinDisableRipple<T extends Constructor<{}>>(base: T): CanDisableRippleCtor & T {
return class extends base {
private _disableRipple: boolean = false;
src/lib/core/common-behaviors/disabled.ts
+4 -1
View File
@@ -15,8 +15,11 @@ export interface CanDisable {
disabled: boolean;
}
/** @docs-private */
export type CanDisableCtor = Constructor<CanDisable>;
/** Mixin to augment a directive with a `disabled` property. */
export function mixinDisabled<T extends Constructor<{}>>(base: T): Constructor<CanDisable> & T {
export function mixinDisabled<T extends Constructor<{}>>(base: T): CanDisableCtor & T {
return class extends base {
private _disabled: boolean = false;
src/lib/core/common-behaviors/error-state.ts
+7 -3
View File
@@ -6,10 +6,11 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Constructor} from './constructor';
import {ErrorStateMatcher} from '../error/error-options';
import {FormControl, FormGroupDirective, NgControl, NgForm} from '@angular/forms';
import {Subject} from 'rxjs';
import {ErrorStateMatcher} from '../error/error-options';
import {Constructor} from './constructor';
/** @docs-private */
export interface CanUpdateErrorState {
@@ -19,6 +20,9 @@ export interface CanUpdateErrorState {
errorStateMatcher: ErrorStateMatcher;
}
/** @docs-private */
export type CanUpdateErrorStateCtor = Constructor<CanUpdateErrorState>;
/** @docs-private */
export interface HasErrorState {
_parentFormGroup: FormGroupDirective;
@@ -32,7 +36,7 @@ export interface HasErrorState {
* For component with `errorState` and need to update `errorState`.
*/
export function mixinErrorState<T extends Constructor<HasErrorState>>(base: T)
: Constructor<CanUpdateErrorState> & T {
: CanUpdateErrorStateCtor & T {
return class extends base {
/** Whether the component is in an error state. */
errorState: boolean = false;
src/lib/core/common-behaviors/index.ts
+6 -6
View File
@@ -7,9 +7,9 @@
*/
export {MatCommonModule, MATERIAL_SANITY_CHECKS} from './common-module';
export {CanDisable, mixinDisabled} from './disabled';
export {CanColor, mixinColor, ThemePalette} from './color';
export {CanDisableRipple, mixinDisableRipple} from './disable-ripple';
export {HasTabIndex, mixinTabIndex} from './tabindex';
export {CanUpdateErrorState, mixinErrorState} from './error-state';
export {HasInitialized, mixinInitialized} from './initialized';
export {CanDisable, CanDisableCtor, mixinDisabled} from './disabled';
export {CanColor, CanColorCtor, mixinColor, ThemePalette} from './color';
export {CanDisableRipple, CanDisableRippleCtor, mixinDisableRipple} from './disable-ripple';
export {HasTabIndex, HasTabIndexCtor, mixinTabIndex} from './tabindex';
export {CanUpdateErrorState, CanUpdateErrorStateCtor, mixinErrorState} from './error-state';
export {HasInitialized, HasInitializedCtor, mixinInitialized} from './initialized';
src/lib/core/common-behaviors/initialized.ts
+4 -1
View File
@@ -29,9 +29,12 @@ export interface HasInitialized {
_markInitialized: () => void;
}
/** @docs-private */
export type HasInitializedCtor = Constructor<HasInitialized>;
/** Mixin to augment a directive with an initialized property that will emits when ngOnInit ends. */
export function mixinInitialized<T extends Constructor<{}>>(base: T):
Constructor<HasInitialized> & T {
HasInitializedCtor & T {
return class extends base {
/** Whether this directive has been marked as initialized. */
_isInitialized = false;
src/lib/core/common-behaviors/tabindex.ts
+5 -1
View File
@@ -9,15 +9,19 @@
import {Constructor} from './constructor';
import {CanDisable} from './disabled';
/** @docs-private */
export interface HasTabIndex {
/** Tabindex of the component. */
tabIndex: number;
}
/** @docs-private */
export type HasTabIndexCtor = Constructor<HasTabIndex>;
/** Mixin to augment a directive with a `tabIndex` property. */
export function mixinTabIndex<T extends Constructor<CanDisable>>(base: T, defaultTabIndex = 0)
: Constructor<HasTabIndex> & T {
: HasTabIndexCtor & T {
return class extends base {
private _tabIndex: number = defaultTabIndex;
src/lib/core/option/optgroup.ts
+5 -3
View File
@@ -6,13 +6,15 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Component, ViewEncapsulation, Input, ChangeDetectionStrategy} from '@angular/core';
import {mixinDisabled, CanDisable} from '../common-behaviors/disabled';
import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@angular/core';
import {CanDisable, CanDisableCtor, mixinDisabled} from '../common-behaviors/disabled';
// Boilerplate for applying mixins to MatOptgroup.
/** @docs-private */
export class MatOptgroupBase { }
export const _MatOptgroupMixinBase = mixinDisabled(MatOptgroupBase);
export const _MatOptgroupMixinBase: CanDisableCtor & typeof MatOptgroupBase =
mixinDisabled(MatOptgroupBase);
// Counter for unique group ids.
let _uniqueOptgroupIdCounter = 0;
src/lib/datepicker/datepicker-input.ts
+3 -3
View File
@@ -27,9 +27,9 @@ import {
ValidationErrors,
Validator,
ValidatorFn,
Validators
Validators,
} from '@angular/forms';
import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats, ThemePalette} from '@angular/material/core';
import {MatFormField} from '@angular/material/form-field';
import {MAT_INPUT_VALUE_ACCESSOR} from '@angular/material/input';
import {Subscription} from 'rxjs';
@@ -335,7 +335,7 @@ export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, V
}
/** Returns the palette used by the input's form field, if any. */
_getThemePalette() {
_getThemePalette(): ThemePalette {
return this._formField ? this._formField.color : undefined;
}
src/lib/datepicker/datepicker.ts
+13 -6
View File
@@ -18,7 +18,6 @@ import {
} from '@angular/cdk/overlay';
import {ComponentPortal, ComponentType} from '@angular/cdk/portal';
import {DOCUMENT} from '@angular/common';
import {take, filter} from 'rxjs/operators';
import {
AfterViewInit,
ChangeDetectionStrategy,
@@ -30,20 +29,27 @@ import {
InjectionToken,
Input,
NgZone,
OnDestroy,
Optional,
Output,
ViewChild,
ViewContainerRef,
ViewEncapsulation,
OnDestroy,
} from '@angular/core';
import {CanColor, DateAdapter, mixinColor, ThemePalette} from '@angular/material/core';
import {
CanColor,
CanColorCtor,
DateAdapter,
mixinColor,
ThemePalette,
} from '@angular/material/core';
import {MatDialog, MatDialogRef} from '@angular/material/dialog';
import {merge, Subject, Subscription} from 'rxjs';
import {createMissingDateImplError} from './datepicker-errors';
import {MatDatepickerInput} from './datepicker-input';
import {filter, take} from 'rxjs/operators';
import {MatCalendar} from './calendar';
import {matDatepickerAnimations} from './datepicker-animations';
import {createMissingDateImplError} from './datepicker-errors';
import {MatDatepickerInput} from './datepicker-input';
/** Used to generate a unique ID for each datepicker instance. */
let datepickerUid = 0;
@@ -69,7 +75,8 @@ export const MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
export class MatDatepickerContentBase {
constructor(public _elementRef: ElementRef) { }
}
export const _MatDatepickerContentMixinBase = mixinColor(MatDatepickerContentBase);
export const _MatDatepickerContentMixinBase: CanColorCtor & typeof MatDatepickerContentBase =
mixinColor(MatDatepickerContentBase);
/**
* Component used as the content for the datepicker dialog and popup. We use this instead of using
src/lib/form-field/form-field.ts
+3 -2
View File
@@ -28,7 +28,7 @@ import {
ViewEncapsulation,
} from '@angular/core';
import {
CanColor,
CanColor, CanColorCtor,
FloatLabelType,
LabelOptions,
MAT_LABEL_GLOBAL_OPTIONS,
@@ -70,7 +70,8 @@ export class MatFormFieldBase {
* Base class to which we're applying the form field mixins.
* @docs-private
*/
export const _MatFormFieldMixinBase = mixinColor(MatFormFieldBase, 'primary');
export const _MatFormFieldMixinBase: CanColorCtor & typeof MatFormFieldBase =
mixinColor(MatFormFieldBase, 'primary');
/** Possible appearance styles for the form field. */
export type MatFormFieldAppearance = 'legacy' | 'standard' | 'fill' | 'outline';
src/lib/icon/icon.ts
+3 -2
View File
@@ -18,7 +18,7 @@ import {
SimpleChanges,
ViewEncapsulation,
} from '@angular/core';
import {CanColor, mixinColor} from '@angular/material/core';
import {CanColor, CanColorCtor, mixinColor} from '@angular/material/core';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {MatIconRegistry} from './icon-registry';
@@ -28,7 +28,8 @@ import {MatIconRegistry} from './icon-registry';
export class MatIconBase {
constructor(public _elementRef: ElementRef) {}
}
export const _MatIconMixinBase = mixinColor(MatIconBase);
export const _MatIconMixinBase: CanColorCtor & typeof MatIconBase =
mixinColor(MatIconBase);
/**
src/lib/input/input.ts
+10 -4
View File
@@ -8,24 +8,29 @@
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {getSupportedInputTypes, Platform} from '@angular/cdk/platform';
import {AutofillMonitor} from '@angular/cdk/text-field';
import {
Directive,
DoCheck,
ElementRef,
Inject,
Input,
NgZone,
OnChanges,
OnDestroy,
OnInit,
Optional,
Self,
NgZone,
} from '@angular/core';
import {FormGroupDirective, NgControl, NgForm} from '@angular/forms';
import {CanUpdateErrorState, ErrorStateMatcher, mixinErrorState} from '@angular/material/core';
import {
CanUpdateErrorState,
CanUpdateErrorStateCtor,
ErrorStateMatcher,
mixinErrorState,
} from '@angular/material/core';
import {MatFormFieldControl} from '@angular/material/form-field';
import {Subject} from 'rxjs';
import {AutofillMonitor} from '@angular/cdk/text-field';
import {getMatInputUnsupportedTypeError} from './input-errors';
import {MAT_INPUT_VALUE_ACCESSOR} from './input-value-accessor';
@@ -54,7 +59,8 @@ export class MatInputBase {
/** @docs-private */
public ngControl: NgControl) {}
}
export const _MatInputMixinBase = mixinErrorState(MatInputBase);
export const _MatInputMixinBase: CanUpdateErrorStateCtor & typeof MatInputBase =
mixinErrorState(MatInputBase);
/** Directive that allows a native input to work inside a `MatFormField`. */
@Directive({
src/lib/list/list.ts
+11 -3
View File
@@ -18,17 +18,25 @@ import {
QueryList,
ViewEncapsulation,
} from '@angular/core';
import {CanDisableRipple, MatLine, MatLineSetter, mixinDisableRipple} from '@angular/material/core';
import {
CanDisableRipple,
CanDisableRippleCtor,
MatLine,
MatLineSetter,
mixinDisableRipple,
} from '@angular/material/core';
// Boilerplate for applying mixins to MatList.
/** @docs-private */
export class MatListBase {}
export const _MatListMixinBase = mixinDisableRipple(MatListBase);
export const _MatListMixinBase: CanDisableRippleCtor & typeof MatListBase =
mixinDisableRipple(MatListBase);
// Boilerplate for applying mixins to MatListItem.
/** @docs-private */
export class MatListItemBase {}
export const _MatListItemMixinBase = mixinDisableRipple(MatListItemBase);
export const _MatListItemMixinBase: CanDisableRippleCtor & typeof MatListItemBase =
mixinDisableRipple(MatListItemBase);
@Component({
moduleId: module.id,
src/lib/list/selection-list.ts
+5 -3
View File
@@ -31,7 +31,7 @@ import {
ViewEncapsulation,
} from '@angular/core';
import {
CanDisableRipple,
CanDisableRipple, CanDisableRippleCtor,
MatLine,
MatLineSetter,
mixinDisableRipple,
@@ -43,11 +43,13 @@ import {MatListAvatarCssMatStyler} from './list';
/** @docs-private */
export class MatSelectionListBase {}
export const _MatSelectionListMixinBase = mixinDisableRipple(MatSelectionListBase);
export const _MatSelectionListMixinBase: CanDisableRippleCtor & typeof MatSelectionListBase =
mixinDisableRipple(MatSelectionListBase);
/** @docs-private */
export class MatListOptionBase {}
export const _MatListOptionMixinBase = mixinDisableRipple(MatListOptionBase);
export const _MatListOptionMixinBase: CanDisableRippleCtor & typeof MatListOptionBase =
mixinDisableRipple(MatListOptionBase);
/** @docs-private */
export const MAT_SELECTION_LIST_VALUE_ACCESSOR: any = {
src/lib/menu/menu-item.ts
+5 -4
View File
@@ -17,10 +17,10 @@ import {
Optional,
} from '@angular/core';
import {
CanDisable,
CanDisableRipple,
CanDisable, CanDisableCtor,
CanDisableRipple, CanDisableRippleCtor,
mixinDisabled,
mixinDisableRipple
mixinDisableRipple,
} from '@angular/material/core';
import {Subject} from 'rxjs';
import {DOCUMENT} from '@angular/common';
@@ -29,7 +29,8 @@ import {MAT_MENU_PANEL, MatMenuPanel} from './menu-panel';
// Boilerplate for applying mixins to MatMenuItem.
/** @docs-private */
export class MatMenuItemBase {}
export const _MatMenuItemMixinBase = mixinDisableRipple(mixinDisabled(MatMenuItemBase));
export const _MatMenuItemMixinBase: CanDisableRippleCtor & CanDisableCtor & typeof MatMenuItemBase =
mixinDisableRipple(mixinDisabled(MatMenuItemBase));
/**
* This directive is intended to be used inside an mat-menu tag.
src/lib/paginator/paginator.ts
+8 -2
View File
@@ -20,7 +20,12 @@ import {
} from '@angular/core';
import {Subscription} from 'rxjs';
import {MatPaginatorIntl} from './paginator-intl';
import {HasInitialized, mixinInitialized, ThemePalette} from '@angular/material/core';
import {
HasInitialized,
HasInitializedCtor,
mixinInitialized,
ThemePalette,
} from '@angular/material/core';
/** The default page size if there is no page size and there are no provided page size options. */
const DEFAULT_PAGE_SIZE = 50;
@@ -49,7 +54,8 @@ export class PageEvent {
// Boilerplate for applying mixins to MatPaginator.
/** @docs-private */
export class MatPaginatorBase {}
export const _MatPaginatorBase = mixinInitialized(MatPaginatorBase);
export const _MatPaginatorBase: HasInitializedCtor & typeof MatPaginatorBase =
mixinInitialized(MatPaginatorBase);
/**
* Component to provide navigation between paged information. Displays the size of the current
src/lib/progress-bar/progress-bar.ts
+3 -2
View File
@@ -25,7 +25,7 @@ import {
import {fromEvent, Subscription} from 'rxjs';
import {filter} from 'rxjs/operators';
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
import {CanColor, mixinColor} from '@angular/material/core';
import {CanColor, CanColorCtor, mixinColor} from '@angular/material/core';
import {DOCUMENT} from '@angular/common';
// TODO(josephperrott): Benchpress tests.
@@ -42,7 +42,8 @@ export interface ProgressAnimationEnd {
value: number;
}
export const _MatProgressBarMixinBase = mixinColor(MatProgressBarBase, 'primary');
export const _MatProgressBarMixinBase: CanColorCtor & typeof MatProgressBarBase =
mixinColor(MatProgressBarBase, 'primary');
/**
* Injection token used to provide the current location to `MatProgressBar`.
src/lib/progress-spinner/progress-spinner.ts
+16 -14
View File
@@ -6,21 +6,22 @@
* found in the LICENSE file at https://angular.io/license
*/
import {
Component,
ChangeDetectionStrategy,
Inject,
Input,
ElementRef,
ViewEncapsulation,
Optional,
InjectionToken,
} from '@angular/core';
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
import {CanColor, mixinColor} from '@angular/material/core';
import {coerceNumberProperty} from '@angular/cdk/coercion';
import {Platform} from '@angular/cdk/platform';
import {DOCUMENT} from '@angular/common';
import {coerceNumberProperty} from '@angular/cdk/coercion';
import {
ChangeDetectionStrategy,
Component,
ElementRef,
Inject,
InjectionToken,
Input,
Optional,
ViewEncapsulation,
} from '@angular/core';
import {CanColor, CanColorCtor, mixinColor} from '@angular/material/core';
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
/** Possible mode for a progress spinner. */
export type ProgressSpinnerMode = 'determinate' | 'indeterminate';
@@ -42,7 +43,8 @@ const BASE_STROKE_WIDTH = 10;
export class MatProgressSpinnerBase {
constructor(public _elementRef: ElementRef) {}
}
export const _MatProgressSpinnerMixinBase = mixinColor(MatProgressSpinnerBase, 'primary');
export const _MatProgressSpinnerMixinBase: CanColorCtor & typeof MatProgressSpinnerBase =
mixinColor(MatProgressSpinnerBase, 'primary');
/** Default `mat-progress-spinner` options that can be overridden. */
export interface MatProgressSpinnerDefaultOptions {
src/lib/radio/radio.ts
+10 -4
View File
@@ -20,6 +20,7 @@ import {
ElementRef,
EventEmitter,
forwardRef,
Inject,
Input,
OnDestroy,
OnInit,
@@ -28,14 +29,17 @@ import {
QueryList,
ViewChild,
ViewEncapsulation,
Inject,
} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
import {
CanColor,
CanColorCtor,
CanDisable,
CanDisableCtor,
CanDisableRipple,
CanDisableRippleCtor,
HasTabIndex,
HasTabIndexCtor,
mixinColor,
mixinDisabled,
mixinDisableRipple,
@@ -71,7 +75,8 @@ export class MatRadioChange {
// Boilerplate for applying mixins to MatRadioGroup.
/** @docs-private */
export class MatRadioGroupBase { }
export const _MatRadioGroupMixinBase = mixinDisabled(MatRadioGroupBase);
export const _MatRadioGroupMixinBase: CanDisableCtor & typeof MatRadioGroupBase =
mixinDisabled(MatRadioGroupBase);
/**
* A group of radio buttons. May contain one or more `<mat-radio-button>` elements.
@@ -311,8 +316,9 @@ export class MatRadioButtonBase {
}
// As per Material design specifications the selection control radio should use the accent color
// palette by default. https://material.io/guidelines/components/selection-controls.html
export const _MatRadioButtonMixinBase =
mixinColor(mixinDisableRipple(mixinTabIndex(MatRadioButtonBase)), 'accent');
export const _MatRadioButtonMixinBase:
CanColorCtor & CanDisableRippleCtor & HasTabIndexCtor & typeof MatRadioButtonBase =
mixinColor(mixinDisableRipple(mixinTabIndex(MatRadioButtonBase)), 'accent');
/**
* A Material design radio-button. Typically placed inside of `<mat-radio-group>` elements.
src/lib/schematics/update/material/typescript-specifiers.ts
-4
View File
@@ -27,10 +27,6 @@ export function isMaterialExportDeclaration(node: ts.Node) {
/** Whether the declaration is part of Angular Material. */
function isMaterialDeclaration(declaration: ts.ImportDeclaration | ts.ExportDeclaration) {
if (!declaration.moduleSpecifier) {
return false;
}
const moduleSpecifier = declaration.moduleSpecifier.getText();
return moduleSpecifier.indexOf(materialModuleSpecifier) !== -1 ||
moduleSpecifier.indexOf(cdkModuleSpecifier) !== -1;
src/lib/schematics/update/rules/checkImportMiscRule.ts
+14 -31
View File
@@ -12,43 +12,26 @@ import * as ts from 'typescript';
import {isMaterialImportDeclaration} from '../material/typescript-specifiers';
/**
* Rule that detects import declarations that refer to outdated identifiers from Angular Material
* or the CDK which cannot be updated automatically.
* Rule that walks through every identifier that is part of Angular Material and replaces the
* outdated name with the new one.
*/
export class Rule extends Rules.TypedRule {
applyWithProgram(sourceFile: ts.SourceFile, program: ts.Program): RuleFailure[] {
return this.applyWithWalker(new Walker(sourceFile, this.getOptions(), program));
return this.applyWithWalker(new CheckImportMiscWalker(sourceFile, this.getOptions(), program));
}
}
export class Walker extends ProgramAwareRuleWalker {
visitImportDeclaration(node: ts.ImportDeclaration) {
if (!isMaterialImportDeclaration(node) ||
!node.importClause ||
!node.importClause.namedBindings) {
return;
export class CheckImportMiscWalker extends ProgramAwareRuleWalker {
visitImportDeclaration(declaration: ts.ImportDeclaration) {
if (isMaterialImportDeclaration(declaration)) {
declaration.importClause.namedBindings.forEachChild(n => {
let importName = n.getFirstToken() && n.getFirstToken().getText();
if (importName === 'SHOW_ANIMATION' || importName === 'HIDE_ANIMATION') {
this.addFailureAtNode(
n,
`Found deprecated symbol "${red(importName)}" which has been removed`);
}
});
}
const namedBindings = node.importClause.namedBindings;
if (ts.isNamedImports(namedBindings)) {
this._checkAnimationConstants(namedBindings);
}
}
/**
* Checks for named imports that refer to the deleted animation constants.
* https://github.com/angular/material2/commit/9f3bf274c4f15f0b0fbd8ab7dbf1a453076e66d9
*/
private _checkAnimationConstants(namedImports: ts.NamedImports) {
namedImports.elements.filter(element => ts.isIdentifier(element.name)).forEach(element => {
const importName = element.name.text;
if (importName === 'SHOW_ANIMATION' || importName === 'HIDE_ANIMATION') {
this.addFailureAtNode(element,
`Found deprecated symbol "${red(importName)}" which has been removed`);
}
});
}
}
src/lib/select/select.ts
+13 -4
View File
@@ -11,6 +11,7 @@ import {Directionality} from '@angular/cdk/bidi';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {SelectionModel} from '@angular/cdk/collections';
import {
A,
DOWN_ARROW,
END,
ENTER,
@@ -19,7 +20,6 @@ import {
RIGHT_ARROW,
SPACE,
UP_ARROW,
A,
} from '@angular/cdk/keycodes';
import {
CdkConnectedOverlay,
@@ -61,10 +61,14 @@ import {
_countGroupLabelsBeforeOption,
_getOptionScrollPosition,
CanDisable,
CanDisableCtor,
CanDisableRipple,
CanDisableRippleCtor,
CanUpdateErrorState,
CanUpdateErrorStateCtor,
ErrorStateMatcher,
HasTabIndex,
HasTabIndexCtor,
MAT_OPTION_PARENT_COMPONENT,
MatOptgroup,
MatOption,
@@ -77,13 +81,13 @@ import {
import {MatFormField, MatFormFieldControl} from '@angular/material/form-field';
import {defer, merge, Observable, Subject} from 'rxjs';
import {
distinctUntilChanged,
filter,
map,
startWith,
switchMap,
take,
takeUntil,
distinctUntilChanged,
} from 'rxjs/operators';
import {matSelectAnimations} from './select-animations';
import {
@@ -164,8 +168,13 @@ export class MatSelectBase {
public _parentFormGroup: FormGroupDirective,
public ngControl: NgControl) {}
}
export const _MatSelectMixinBase = mixinDisableRipple(
mixinTabIndex(mixinDisabled(mixinErrorState(MatSelectBase))));
export const _MatSelectMixinBase:
CanDisableCtor &
HasTabIndexCtor &
CanDisableRippleCtor &
CanUpdateErrorStateCtor &
typeof MatSelectBase =
mixinDisableRipple(mixinTabIndex(mixinDisabled(mixinErrorState(MatSelectBase))));
/**
src/lib/slide-toggle/slide-toggle.ts
+11 -6
View File
@@ -30,11 +30,11 @@ import {
} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
import {
CanColor,
CanDisable,
CanDisableRipple,
CanColor, CanColorCtor,
CanDisable, CanDisableCtor,
CanDisableRipple, CanDisableRippleCtor,
HammerInput,
HasTabIndex,
HasTabIndex, HasTabIndexCtor,
mixinColor,
mixinDisabled,
mixinDisableRipple,
@@ -69,8 +69,13 @@ export class MatSlideToggleChange {
export class MatSlideToggleBase {
constructor(public _elementRef: ElementRef) {}
}
export const _MatSlideToggleMixinBase =
mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatSlideToggleBase)), 'accent'));
export const _MatSlideToggleMixinBase:
HasTabIndexCtor &
CanColorCtor &
CanDisableRippleCtor &
CanDisableCtor &
typeof MatSlideToggleBase =
mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatSlideToggleBase)), 'accent'));
/** Represents a slidable "switch" toggle that can be moved between on and off. */
@Component({
src/lib/slider/slider.ts
+11 -4
View File
@@ -27,6 +27,7 @@ import {
ElementRef,
EventEmitter,
forwardRef,
Inject,
Input,
OnDestroy,
OnInit,
@@ -34,20 +35,22 @@ import {
Output,
ViewChild,
ViewEncapsulation,
Inject,
} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
import {
CanColor,
CanColorCtor,
CanDisable,
CanDisableCtor,
HammerInput,
HasTabIndex,
HasTabIndexCtor,
mixinColor,
mixinDisabled,
mixinTabIndex,
} from '@angular/material/core';
import {Subscription} from 'rxjs';
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
import {Subscription} from 'rxjs';
/**
* Visually, a 30px separation between tick marks looks best. This is very subjective but it is
@@ -89,8 +92,12 @@ export class MatSliderChange {
export class MatSliderBase {
constructor(public _elementRef: ElementRef) {}
}
export const _MatSliderMixinBase =
mixinTabIndex(mixinColor(mixinDisabled(MatSliderBase), 'accent'));
export const _MatSliderMixinBase:
HasTabIndexCtor &
CanColorCtor &
CanDisableCtor &
typeof MatSliderBase =
mixinTabIndex(mixinColor(mixinDisabled(MatSliderBase), 'accent'));
/**
* Allows users to select from a range of values by moving the slider thumb. It is similar in
src/lib/sort/sort-header.ts
+4 -3
View File
@@ -16,9 +16,9 @@ import {
OnDestroy,
OnInit,
Optional,
ViewEncapsulation
ViewEncapsulation,
} from '@angular/core';
import {CanDisable, mixinDisabled} from '@angular/material/core';
import {CanDisable, CanDisableCtor, mixinDisabled} from '@angular/material/core';
import {merge, Subscription} from 'rxjs';
import {MatSort, MatSortable} from './sort';
import {matSortAnimations} from './sort-animations';
@@ -30,7 +30,8 @@ import {MatSortHeaderIntl} from './sort-header-intl';
// Boilerplate for applying mixins to the sort header.
/** @docs-private */
export class MatSortHeaderBase {}
export const _MatSortHeaderMixinBase = mixinDisabled(MatSortHeaderBase);
export const _MatSortHeaderMixinBase: CanDisableCtor & typeof MatSortHeaderBase =
mixinDisabled(MatSortHeaderBase);
/**
* Valid positions for the arrow to be in for its opacity and translation. If the state is a
src/lib/sort/sort.ts
+13 -5
View File
@@ -6,6 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {
Directive,
EventEmitter,
@@ -16,15 +17,21 @@ import {
OnInit,
Output,
} from '@angular/core';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {CanDisable, HasInitialized, mixinDisabled, mixinInitialized} from '@angular/material/core';
import {
CanDisable,
CanDisableCtor,
HasInitialized,
HasInitializedCtor,
mixinDisabled,
mixinInitialized,
} from '@angular/material/core';
import {Subject} from 'rxjs';
import {SortDirection} from './sort-direction';
import {
getSortDuplicateSortableIdError,
getSortHeaderMissingIdError,
getSortInvalidDirectionError
getSortInvalidDirectionError,
} from './sort-errors';
import {Subject} from 'rxjs';
/** Interface for a directive that holds sorting state consumed by `MatSortHeader`. */
export interface MatSortable {
@@ -50,7 +57,8 @@ export interface Sort {
// Boilerplate for applying mixins to MatSort.
/** @docs-private */
export class MatSortBase {}
export const _MatSortMixinBase = mixinInitialized(mixinDisabled(MatSortBase));
export const _MatSortMixinBase: HasInitializedCtor & CanDisableCtor & typeof MatSortBase =
mixinInitialized(mixinDisabled(MatSortBase));
/** Container for MatSortables to manage the sort state and provide default sort parameters. */
@Directive({
src/lib/tabs/tab-group.ts
+5 -2
View File
@@ -25,10 +25,12 @@ import {
} from '@angular/core';
import {
CanColor,
CanColorCtor,
CanDisableRipple,
CanDisableRippleCtor,
mixinColor,
mixinDisableRipple,
ThemePalette
ThemePalette,
} from '@angular/material/core';
import {merge, Subscription} from 'rxjs';
import {MatTab} from './tab';
@@ -54,7 +56,8 @@ export type MatTabHeaderPosition = 'above' | 'below';
export class MatTabGroupBase {
constructor(public _elementRef: ElementRef) {}
}
export const _MatTabGroupMixinBase = mixinColor(mixinDisableRipple(MatTabGroupBase), 'primary');
export const _MatTabGroupMixinBase: CanColorCtor & CanDisableRippleCtor & typeof MatTabGroupBase =
mixinColor(mixinDisableRipple(MatTabGroupBase), 'primary');
/**
* Material design tab-group component. Supports basic tab pairs (label + content) and includes
src/lib/tabs/tab-header.ts
+3 -2
View File
@@ -27,7 +27,7 @@ import {
ViewChild,
ViewEncapsulation,
} from '@angular/core';
import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core';
import {CanDisableRipple, CanDisableRippleCtor, mixinDisableRipple} from '@angular/material/core';
import {merge, of as observableOf, Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
import {MatInkBar} from './ink-bar';
@@ -51,7 +51,8 @@ const EXAGGERATED_OVERSCROLL = 60;
// Boilerplate for applying mixins to MatTabHeader.
/** @docs-private */
export class MatTabHeaderBase {}
export const _MatTabHeaderMixinBase = mixinDisableRipple(MatTabHeaderBase);
export const _MatTabHeaderMixinBase: CanDisableRippleCtor & typeof MatTabHeaderBase =
mixinDisableRipple(MatTabHeaderBase);
/**
* The header of the tab group which displays a list of all the tabs in the tab group. Includes
src/lib/tabs/tab-label-wrapper.ts
+4 -2
View File
@@ -7,12 +7,14 @@
*/
import {Directive, ElementRef} from '@angular/core';
import {CanDisable, mixinDisabled} from '@angular/material/core';
import {CanDisable, CanDisableCtor, mixinDisabled} from '@angular/material/core';
// Boilerplate for applying mixins to MatTabLabelWrapper.
/** @docs-private */
export class MatTabLabelWrapperBase {}
export const _MatTabLabelWrapperMixinBase = mixinDisabled(MatTabLabelWrapperBase);
export const _MatTabLabelWrapperMixinBase: CanDisableCtor & typeof MatTabLabelWrapperBase =
mixinDisabled(MatTabLabelWrapperBase);
/**
* Used in the `mat-tab-group` view to display tab labels.
src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
+9 -7
View File
@@ -29,10 +29,10 @@ import {
ViewEncapsulation,
} from '@angular/core';
import {
CanColor,
CanDisable,
CanDisableRipple,
HasTabIndex,
CanColor, CanColorCtor,
CanDisable, CanDisableCtor,
CanDisableRipple, CanDisableRippleCtor,
HasTabIndex, HasTabIndexCtor,
MAT_RIPPLE_GLOBAL_OPTIONS,
mixinColor,
mixinDisabled,
@@ -54,7 +54,8 @@ import {FocusMonitor} from '@angular/cdk/a11y';
export class MatTabNavBase {
constructor(public _elementRef: ElementRef) {}
}
export const _MatTabNavMixinBase = mixinDisableRipple(mixinColor(MatTabNavBase, 'primary'));
export const _MatTabNavMixinBase: CanDisableRippleCtor & CanColorCtor & typeof MatTabNavBase =
mixinDisableRipple(mixinColor(MatTabNavBase, 'primary'));
/**
* Navigation component matching the styles of the tab group header.
@@ -161,8 +162,9 @@ export class MatTabNav extends _MatTabNavMixinBase
// Boilerplate for applying mixins to MatTabLink.
export class MatTabLinkBase {}
export const _MatTabLinkMixinBase =
mixinTabIndex(mixinDisableRipple(mixinDisabled(MatTabLinkBase)));
export const _MatTabLinkMixinBase:
HasTabIndexCtor & CanDisableRippleCtor & CanDisableCtor & typeof MatTabLinkBase =
mixinTabIndex(mixinDisableRipple(mixinDisabled(MatTabLinkBase)));
/**
* Link inside of a `mat-tab-nav-bar`.
src/lib/tabs/tab.ts
+4 -3
View File
@@ -21,16 +21,17 @@ import {
ViewContainerRef,
ViewEncapsulation,
} from '@angular/core';
import {CanDisable, mixinDisabled} from '@angular/material/core';
import {CanDisable, CanDisableCtor, mixinDisabled} from '@angular/material/core';
import {Subject} from 'rxjs';
import {MatTabLabel} from './tab-label';
import {MatTabContent} from './tab-content';
import {MatTabLabel} from './tab-label';
// Boilerplate for applying mixins to MatTab.
/** @docs-private */
export class MatTabBase {}
export const _MatTabMixinBase = mixinDisabled(MatTabBase);
export const _MatTabMixinBase: CanDisableCtor & typeof MatTabBase =
mixinDisabled(MatTabBase);
@Component({
moduleId: module.id,
src/lib/toolbar/toolbar.ts
+7 -5
View File
@@ -6,6 +6,8 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Platform} from '@angular/cdk/platform';
import {DOCUMENT} from '@angular/common';
import {
AfterViewInit,
ChangeDetectionStrategy,
@@ -13,21 +15,21 @@ import {
ContentChildren,
Directive,
ElementRef,
Inject,
isDevMode,
QueryList,
ViewEncapsulation,
Inject,
} from '@angular/core';
import {CanColor, mixinColor} from '@angular/material/core';
import {Platform} from '@angular/cdk/platform';
import {DOCUMENT} from '@angular/common';
import {CanColor, CanColorCtor, mixinColor} from '@angular/material/core';
// Boilerplate for applying mixins to MatToolbar.
/** @docs-private */
export class MatToolbarBase {
constructor(public _elementRef: ElementRef) {}
}
export const _MatToolbarMixinBase = mixinColor(MatToolbarBase);
export const _MatToolbarMixinBase: CanColorCtor & typeof MatToolbarBase =
mixinColor(MatToolbarBase);
@Directive({
selector: 'mat-toolbar-row',
src/lib/tree/node.ts
+13 -3
View File
@@ -18,14 +18,24 @@ import {
OnDestroy,
QueryList,
} from '@angular/core';
import {CanDisable, HasTabIndex, mixinDisabled, mixinTabIndex} from '@angular/material/core';
import {
CanDisable, CanDisableCtor,
HasTabIndex,
HasTabIndexCtor,
mixinDisabled,
mixinTabIndex,
} from '@angular/material/core';
import {MatTreeNodeOutlet} from './outlet';
// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
export const _CdkTreeNodeDef = CdkTreeNodeDef;
export const _MatTreeNodeMixinBase = mixinTabIndex(mixinDisabled(CdkTreeNode));
export const _MatNestedTreeNodeMixinBase = mixinTabIndex(mixinDisabled(CdkNestedTreeNode));
export const _MatTreeNodeMixinBase: HasTabIndexCtor & CanDisableCtor & typeof CdkTreeNode =
mixinTabIndex(mixinDisabled(CdkTreeNode));
export const _MatNestedTreeNodeMixinBase:
HasTabIndexCtor & CanDisableCtor & typeof CdkNestedTreeNode =
mixinTabIndex(mixinDisabled(CdkNestedTreeNode));
/**
* Wrapper for the CdkTree node with Material design styles.