From bff79f1f6c4966a475eaeb5cf21f9cb2509702e9 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sun, 29 Sep 2019 16:08:12 +0200 Subject: [PATCH] fix(tabs): avoid template type checking errors with Ivy Along the same lines as #17022. Adds annotations to the various base classes that declare inputs, because the Ivy template type checker doesn't handle base defs at the moment. Fixes #17121. --- src/material/tabs/paginated-tab-header.ts | 10 +++++++++- src/material/tabs/public-api.ts | 2 +- src/material/tabs/tab-body.ts | 9 ++++++++- src/material/tabs/tab-group.ts | 10 +++++++++- src/material/tabs/tab-header.ts | 10 +++++++++- src/material/tabs/tab-nav-bar/tab-nav-bar.ts | 9 ++++++++- src/material/tabs/tabs-module.ts | 18 +++++++++++++----- 7 files changed, 57 insertions(+), 11 deletions(-) diff --git a/src/material/tabs/paginated-tab-header.ts b/src/material/tabs/paginated-tab-header.ts index 1b1200443513..8e7928320fb5 100644 --- a/src/material/tabs/paginated-tab-header.ts +++ b/src/material/tabs/paginated-tab-header.ts @@ -17,6 +17,8 @@ import { AfterContentInit, AfterViewInit, OnDestroy, + Directive, + Inject, } from '@angular/core'; import {Direction, Directionality} from '@angular/cdk/bidi'; import {coerceNumberProperty} from '@angular/cdk/coercion'; @@ -26,6 +28,7 @@ import {END, ENTER, HOME, SPACE, hasModifierKey} from '@angular/cdk/keycodes'; import {merge, of as observableOf, Subject, timer, fromEvent} from 'rxjs'; import {takeUntil} from 'rxjs/operators'; import {Platform, normalizePassiveListenerOptions} from '@angular/cdk/platform'; +import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; /** Config used to bind passive event listeners */ @@ -62,7 +65,12 @@ export type MatPaginatedTabHeaderItem = FocusableOption & {elementRef: ElementRe /** * Base class for a tab header that supported pagination. + * @docs-private */ +@Directive({ + // TODO(crisbeto): this selector can be removed when we update to Angular 9.0. + selector: 'do-not-use-abstract-mat-paginated-tab-header' +}) export abstract class MatPaginatedTabHeader implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy { abstract _items: QueryList; @@ -140,7 +148,7 @@ export abstract class MatPaginatedTabHeader implements AfterContentChecked, Afte * parameters to become required. */ private _platform?: Platform, - public _animationMode?: string) { + @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) { // Bind the `mouseleave` event on the outside since it doesn't change anything in the view. _ngZone.runOutsideAngular(() => { diff --git a/src/material/tabs/public-api.ts b/src/material/tabs/public-api.ts index cfa2f2a09080..9679eaf65501 100644 --- a/src/material/tabs/public-api.ts +++ b/src/material/tabs/public-api.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -export * from './tabs-module'; +export {MatTabsModule} from './tabs-module'; export * from './tab-group'; export {MatInkBar, _MatInkBarPositioner, _MAT_INK_BAR_POSITIONER} from './ink-bar'; export { diff --git a/src/material/tabs/tab-body.ts b/src/material/tabs/tab-body.ts index 4ec1bb65089c..52f9734dce64 100644 --- a/src/material/tabs/tab-body.ts +++ b/src/material/tabs/tab-body.ts @@ -98,7 +98,14 @@ export class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestr } } -/** Base class with all of the `MatTabBody` functionality. */ +/** + * Base class with all of the `MatTabBody` functionality. + * @docs-private + */ +@Directive({ + // TODO(crisbeto): this selector can be removed when we update to Angular 9.0. + selector: 'do-not-use-abstract-mat-tab-body-base' +}) // tslint:disable-next-line:class-name export abstract class _MatTabBodyBase implements OnInit, OnDestroy { /** Current position of the tab-body in the tab-group. Zero means that the tab is visible. */ diff --git a/src/material/tabs/tab-group.ts b/src/material/tabs/tab-group.ts index 38978cd0b64b..72ca3d972df1 100644 --- a/src/material/tabs/tab-group.ts +++ b/src/material/tabs/tab-group.ts @@ -25,6 +25,7 @@ import { Optional, Inject, InjectionToken, + Directive, } from '@angular/core'; import { CanColor, @@ -76,7 +77,14 @@ interface MatTabGroupBaseHeader { focusIndex: number; } -/** Base class with all of the `MatTabGroupBase` functionality. */ +/** + * Base class with all of the `MatTabGroupBase` functionality. + * @docs-private + */ +@Directive({ + // TODO(crisbeto): this selector can be removed when we update to Angular 9.0. + selector: 'do-not-use-abstract-mat-tab-group-base' +}) // tslint:disable-next-line:class-name export abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements AfterContentInit, AfterContentChecked, OnDestroy, CanColor, CanDisableRipple { diff --git a/src/material/tabs/tab-header.ts b/src/material/tabs/tab-header.ts index 3ea9725325e7..464913d1eab3 100644 --- a/src/material/tabs/tab-header.ts +++ b/src/material/tabs/tab-header.ts @@ -25,6 +25,7 @@ import { AfterViewInit, Input, Inject, + Directive, } from '@angular/core'; import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; @@ -33,7 +34,14 @@ import {MatTabLabelWrapper} from './tab-label-wrapper'; import {Platform} from '@angular/cdk/platform'; import {MatPaginatedTabHeader} from './paginated-tab-header'; -/** Base class with all of the `MatTabHeader` functionality. */ +/** + * Base class with all of the `MatTabHeader` functionality. + * @docs-private + */ +@Directive({ + // TODO(crisbeto): this selector can be removed when we update to Angular 9.0. + selector: 'do-not-use-abstract-mat-tab-header-base' +}) // tslint:disable-next-line:class-name export abstract class _MatTabHeaderBase extends MatPaginatedTabHeader implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy { diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts index 7f9d89c66d17..10a40f548f31 100644 --- a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts +++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts @@ -48,7 +48,14 @@ import {MatInkBar} from '../ink-bar'; import {MatPaginatedTabHeader, MatPaginatedTabHeaderItem} from '../paginated-tab-header'; import {startWith, takeUntil} from 'rxjs/operators'; -/** Base class with all of the `MatTabNav` functionality. */ +/** + * Base class with all of the `MatTabNav` functionality. + * @docs-private + */ +@Directive({ + // TODO(crisbeto): this selector can be removed when we update to Angular 9.0. + selector: 'do-not-use-abstract-mat-tab-nav-base' +}) // tslint:disable-next-line:class-name export abstract class _MatTabNavBase extends MatPaginatedTabHeader implements AfterContentChecked, AfterContentInit, OnDestroy { diff --git a/src/material/tabs/tabs-module.ts b/src/material/tabs/tabs-module.ts index e90b7fba63a0..18689555bd26 100644 --- a/src/material/tabs/tabs-module.ts +++ b/src/material/tabs/tabs-module.ts @@ -10,17 +10,18 @@ import {ObserversModule} from '@angular/cdk/observers'; import {PortalModule} from '@angular/cdk/portal'; import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; +import {A11yModule} from '@angular/cdk/a11y'; import {MatCommonModule, MatRippleModule} from '@angular/material/core'; import {MatInkBar} from './ink-bar'; import {MatTab} from './tab'; -import {MatTabBody, MatTabBodyPortal} from './tab-body'; +import {MatTabBody, MatTabBodyPortal, _MatTabBodyBase} from './tab-body'; import {MatTabContent} from './tab-content'; -import {MatTabGroup} from './tab-group'; -import {MatTabHeader} from './tab-header'; +import {MatTabGroup, _MatTabGroupBase} from './tab-group'; +import {MatTabHeader, _MatTabHeaderBase} from './tab-header'; import {MatTabLabel} from './tab-label'; import {MatTabLabelWrapper} from './tab-label-wrapper'; -import {MatTabLink, MatTabNav} from './tab-nav-bar/tab-nav-bar'; -import {A11yModule} from '@angular/cdk/a11y'; +import {MatTabLink, MatTabNav, _MatTabNavBase} from './tab-nav-bar/tab-nav-bar'; +import {MatPaginatedTabHeader} from './paginated-tab-header'; @NgModule({ @@ -54,6 +55,13 @@ import {A11yModule} from '@angular/cdk/a11y'; MatTabBodyPortal, MatTabHeader, MatTabContent, + + // TODO(crisbeto): these can be removed once they're turned into selector-less directives. + MatPaginatedTabHeader as any, + _MatTabGroupBase as any, + _MatTabNavBase as any, + _MatTabBodyBase as any, + _MatTabHeaderBase as any, ], }) export class MatTabsModule {}