From 985774a4eaa14d1dcbf1ad96ab176043d38f433e Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner <paulgschwendtner@gmail.com> Date: Tue, 23 Oct 2018 22:48:03 +0200 Subject: [PATCH] fix: material not working with ES2015 (#13709) Fixes that Angular Material cannot be used with ES2015. See #12760 for detailed information. We already had a workaround applied, but this improves the workaround because it only partially worked for classes where no attributes were defined. Fixes #13695. --- src/lib/expansion/expansion-panel.ts | 3 --- src/lib/input/autosize.ts | 9 +++++---- src/lib/stepper/step-label.ts | 8 ++++---- src/lib/stepper/stepper-button.ts | 13 +++++++------ src/lib/stepper/stepper.ts | 8 ++++---- src/lib/table/cell.ts | 16 ++++++++-------- src/lib/table/row.ts | 16 ++++++++-------- src/lib/table/table.ts | 8 ++++---- src/lib/tabs/tab-label.ts | 8 ++++---- src/lib/tree/node.ts | 8 ++++---- src/lib/tree/padding.ts | 9 +++++---- src/lib/tree/toggle.ts | 8 ++++---- src/lib/tree/tree.ts | 7 +++---- 13 files changed, 60 insertions(+), 61 deletions(-) diff --git a/src/lib/expansion/expansion-panel.ts b/src/lib/expansion/expansion-panel.ts index 8c860d37602f..68d9a7e3d890 100644 --- a/src/lib/expansion/expansion-panel.ts +++ b/src/lib/expansion/expansion-panel.ts @@ -40,9 +40,6 @@ import {matExpansionAnimations} from './expansion-animations'; import {MatExpansionPanelContent} from './expansion-panel-content'; import {MAT_ACCORDION, MatAccordionBase} from './accordion-base'; -// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -export const _CdkAccordionItem = CdkAccordionItem; - /** MatExpansionPanel's states. */ export type MatExpansionPanelState = 'expanded' | 'collapsed'; diff --git a/src/lib/input/autosize.ts b/src/lib/input/autosize.ts index b12ad6cb97a0..b262091a576a 100644 --- a/src/lib/input/autosize.ts +++ b/src/lib/input/autosize.ts @@ -9,9 +9,6 @@ import {CdkTextareaAutosize} from '@angular/cdk/text-field'; import {Directive, Input} from '@angular/core'; -// TODO(devversion): Workaround for https://github.com/angular/material2/issues/12760 -export const _CdkTextareaAutosize = CdkTextareaAutosize; - /** * Directive to automatically resize a textarea to fit its content. * @deprecated Use `cdkTextareaAutosize` from `@angular/cdk/text-field` instead. @@ -29,7 +26,7 @@ export const _CdkTextareaAutosize = CdkTextareaAutosize; '(input)': '_noopInputHandler()', }, }) -export class MatTextareaAutosize extends _CdkTextareaAutosize { +export class MatTextareaAutosize extends CdkTextareaAutosize { @Input() get matAutosizeMinRows(): number { return this.minRows; } set matAutosizeMinRows(value: number) { this.minRows = value; } @@ -46,3 +43,7 @@ export class MatTextareaAutosize extends _CdkTextareaAutosize { get matTextareaAutosize(): boolean { return this.enabled; } set matTextareaAutosize(value: boolean) { this.enabled = value; } } + +// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 +(MatTextareaAutosize as any)['ctorParameters'] = () => + (CdkTextareaAutosize as any)['ctorParameters']; diff --git a/src/lib/stepper/step-label.ts b/src/lib/stepper/step-label.ts index 4b5981476f67..44f7edb1dca0 100644 --- a/src/lib/stepper/step-label.ts +++ b/src/lib/stepper/step-label.ts @@ -9,10 +9,10 @@ import {Directive} from '@angular/core'; import {CdkStepLabel} from '@angular/cdk/stepper'; -// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -export const _CdkStepLabel = CdkStepLabel; - @Directive({ selector: '[matStepLabel]', }) -export class MatStepLabel extends _CdkStepLabel {} +export class MatStepLabel extends CdkStepLabel {} + +// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 +(MatStepLabel as any)['ctorParameters'] = () => (CdkStepLabel as any)['ctorParameters']; diff --git a/src/lib/stepper/stepper-button.ts b/src/lib/stepper/stepper-button.ts index 5593c6f5be5a..fa1454f97f1b 100644 --- a/src/lib/stepper/stepper-button.ts +++ b/src/lib/stepper/stepper-button.ts @@ -10,10 +10,6 @@ import {Directive} from '@angular/core'; import {CdkStepper, CdkStepperNext, CdkStepperPrevious} from '@angular/cdk/stepper'; import {MatStepper} from './stepper'; -// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -export const _CdkStepperNext = CdkStepperNext; -export const _CdkStepperPrevious = CdkStepperPrevious; - /** Button that moves to the next step in a stepper workflow. */ @Directive({ selector: 'button[matStepperNext]', @@ -24,7 +20,7 @@ export const _CdkStepperPrevious = CdkStepperPrevious; inputs: ['type'], providers: [{provide: CdkStepper, useExisting: MatStepper}] }) -export class MatStepperNext extends _CdkStepperNext {} +export class MatStepperNext extends CdkStepperNext {} /** Button that moves to the previous step in a stepper workflow. */ @Directive({ @@ -36,4 +32,9 @@ export class MatStepperNext extends _CdkStepperNext {} inputs: ['type'], providers: [{provide: CdkStepper, useExisting: MatStepper}] }) -export class MatStepperPrevious extends _CdkStepperPrevious {} +export class MatStepperPrevious extends CdkStepperPrevious {} + +// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 +(MatStepperNext as any)['ctorParameters'] = () => (CdkStepperNext as any)['ctorParameters']; +(MatStepperPrevious as any)['ctorParameters'] = () => + (CdkStepperPrevious as any)['ctorParameters']; diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts index 2dab42ab0628..f91699f30611 100644 --- a/src/lib/stepper/stepper.ts +++ b/src/lib/stepper/stepper.ts @@ -47,9 +47,6 @@ import {MatStepLabel} from './step-label'; import {matStepperAnimations} from './stepper-animations'; import {MatStepperIcon, MatStepperIconContext} from './stepper-icon'; -// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -export const _CdkStepper = CdkStepper; - @Component({ moduleId: module.id, selector: 'mat-step', @@ -87,7 +84,7 @@ export class MatStep extends CdkStep implements ErrorStateMatcher { @Directive({ selector: '[matStepper]' }) -export class MatStepper extends _CdkStepper implements AfterContentInit { +export class MatStepper extends CdkStepper implements AfterContentInit { /** The list of step headers of the steps in the stepper. */ @ViewChildren(MatStepHeader) _stepHeader: QueryList<MatStepHeader>; @@ -126,6 +123,9 @@ export class MatStepper extends _CdkStepper implements AfterContentInit { } } +// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 +(MatStepper as any)['ctorParameters'] = () => (CdkStepper as any)['ctorParameters']; + @Component({ moduleId: module.id, selector: 'mat-horizontal-stepper', diff --git a/src/lib/table/cell.ts b/src/lib/table/cell.ts index e43707a0c7d4..26b942f74b75 100644 --- a/src/lib/table/cell.ts +++ b/src/lib/table/cell.ts @@ -15,11 +15,6 @@ import { CdkHeaderCellDef, } from '@angular/cdk/table'; -// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -export const _CdkCellDef = CdkCellDef; -export const _CdkHeaderCellDef = CdkHeaderCellDef; -export const _CdkFooterCellDef = CdkFooterCellDef; - /** * Cell definition for the mat-table. * Captures the template of a column's data row cell as well as cell-specific properties. @@ -28,7 +23,7 @@ export const _CdkFooterCellDef = CdkFooterCellDef; selector: '[matCellDef]', providers: [{provide: CdkCellDef, useExisting: MatCellDef}] }) -export class MatCellDef extends _CdkCellDef {} +export class MatCellDef extends CdkCellDef {} /** * Header cell definition for the mat-table. @@ -38,7 +33,7 @@ export class MatCellDef extends _CdkCellDef {} selector: '[matHeaderCellDef]', providers: [{provide: CdkHeaderCellDef, useExisting: MatHeaderCellDef}] }) -export class MatHeaderCellDef extends _CdkHeaderCellDef {} +export class MatHeaderCellDef extends CdkHeaderCellDef {} /** * Footer cell definition for the mat-table. @@ -48,7 +43,12 @@ export class MatHeaderCellDef extends _CdkHeaderCellDef {} selector: '[matFooterCellDef]', providers: [{provide: CdkFooterCellDef, useExisting: MatFooterCellDef}] }) -export class MatFooterCellDef extends _CdkFooterCellDef {} +export class MatFooterCellDef extends CdkFooterCellDef {} + +// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 +(MatCellDef as any)['ctorParameters'] = () => (CdkCellDef as any)['ctorParameters']; +(MatHeaderCellDef as any)['ctorParameters'] = () => (CdkHeaderCellDef as any)['ctorParameters']; +(MatFooterCellDef as any)['ctorParameters'] = () => (MatFooterCellDef as any)['ctorParameters']; /** * Column definition for the mat-table. diff --git a/src/lib/table/row.ts b/src/lib/table/row.ts index 7142d8028382..6160f5afb424 100644 --- a/src/lib/table/row.ts +++ b/src/lib/table/row.ts @@ -20,11 +20,6 @@ import { CdkRowDef, } from '@angular/cdk/table'; -// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -export const _CdkHeaderRowDef = CdkHeaderRowDef; -export const _CdkFooterRowDef = CdkFooterRowDef; -export const _CdkRowDef = CdkRowDef; - /** * Header row definition for the mat-table. * Captures the header row's template and other header properties such as the columns to display. @@ -34,7 +29,7 @@ export const _CdkRowDef = CdkRowDef; providers: [{provide: CdkHeaderRowDef, useExisting: MatHeaderRowDef}], inputs: ['columns: matHeaderRowDef', 'sticky: matHeaderRowDefSticky'], }) -export class MatHeaderRowDef extends _CdkHeaderRowDef {} +export class MatHeaderRowDef extends CdkHeaderRowDef {} /** * Footer row definition for the mat-table. @@ -45,7 +40,7 @@ export class MatHeaderRowDef extends _CdkHeaderRowDef {} providers: [{provide: CdkFooterRowDef, useExisting: MatFooterRowDef}], inputs: ['columns: matFooterRowDef', 'sticky: matFooterRowDefSticky'], }) -export class MatFooterRowDef extends _CdkFooterRowDef {} +export class MatFooterRowDef extends CdkFooterRowDef {} /** * Data row definition for the mat-table. @@ -57,7 +52,12 @@ export class MatFooterRowDef extends _CdkFooterRowDef {} providers: [{provide: CdkRowDef, useExisting: MatRowDef}], inputs: ['columns: matRowDefColumns', 'when: matRowDefWhen'], }) -export class MatRowDef<T> extends _CdkRowDef<T> {} +export class MatRowDef<T> extends CdkRowDef<T> {} + +// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 +(MatHeaderRowDef as any)['ctorParameters'] = () => (CdkHeaderRowDef as any)['ctorParameters']; +(MatFooterRowDef as any)['ctorParameters'] = () => (CdkFooterRowDef as any)['ctorParameters']; +(MatRowDef as any)['ctorParameters'] = () => (CdkRowDef as any)['ctorParameters']; /** Footer template container that contains the cell outlet. Adds the right class and role. */ @Component({ diff --git a/src/lib/table/table.ts b/src/lib/table/table.ts index 3209ed907b1d..6b53f02275c0 100644 --- a/src/lib/table/table.ts +++ b/src/lib/table/table.ts @@ -9,9 +9,6 @@ import {CDK_TABLE_TEMPLATE, CdkTable} from '@angular/cdk/table'; import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; -// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -export const _CdkTable = CdkTable; - /** * Wrapper for the CdkTable with Material design styles. */ @@ -27,7 +24,10 @@ export const _CdkTable = CdkTable; encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class MatTable<T> extends _CdkTable<T> { +export class MatTable<T> extends CdkTable<T> { /** Overrides the sticky CSS class set by the `CdkTable`. */ protected stickyCssClass = 'mat-table-sticky'; } + +// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 +(MatTable as any)['ctorParameters'] = () => (CdkTable as any)['ctorParameters']; diff --git a/src/lib/tabs/tab-label.ts b/src/lib/tabs/tab-label.ts index 01283151127c..b74d7338d1b1 100644 --- a/src/lib/tabs/tab-label.ts +++ b/src/lib/tabs/tab-label.ts @@ -9,11 +9,11 @@ import {Directive} from '@angular/core'; import {CdkPortal} from '@angular/cdk/portal'; -// TODO(devversion): Workaround for https://github.com/angular/material2/issues/12760 -export const _CdkPortal = CdkPortal; - /** Used to flag tab labels for use with the portal directive */ @Directive({ selector: '[mat-tab-label], [matTabLabel]', }) -export class MatTabLabel extends _CdkPortal {} +export class MatTabLabel extends CdkPortal {} + +// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 +(MatTabLabel as any)['ctorParameters'] = () => (CdkPortal as any)['ctorParameters']; diff --git a/src/lib/tree/node.ts b/src/lib/tree/node.ts index eba690fca66b..cac435e56191 100644 --- a/src/lib/tree/node.ts +++ b/src/lib/tree/node.ts @@ -27,9 +27,6 @@ import { } 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: HasTabIndexCtor & CanDisableCtor & typeof CdkTreeNode = mixinTabIndex(mixinDisabled(CdkTreeNode)); @@ -75,10 +72,13 @@ export class MatTreeNode<T> extends _MatTreeNodeMixinBase<T> ], providers: [{provide: CdkTreeNodeDef, useExisting: MatTreeNodeDef}] }) -export class MatTreeNodeDef<T> extends _CdkTreeNodeDef<T> { +export class MatTreeNodeDef<T> extends CdkTreeNodeDef<T> { @Input('matTreeNode') data: T; } +// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 +(MatTreeNodeDef as any)['ctorParameters'] = () => (CdkTreeNodeDef as any)['ctorParameters']; + /** * Wrapper for the CdkTree nested node with Material design styles. */ diff --git a/src/lib/tree/padding.ts b/src/lib/tree/padding.ts index 81daabef7ebc..682e33d05d97 100644 --- a/src/lib/tree/padding.ts +++ b/src/lib/tree/padding.ts @@ -8,9 +8,6 @@ import {CdkTreeNodePadding} from '@angular/cdk/tree'; import {Directive, Input} from '@angular/core'; -// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -export const _CdkTreeNodePadding = CdkTreeNodePadding; - /** * Wrapper for the CdkTree padding with Material design styles. */ @@ -18,7 +15,7 @@ export const _CdkTreeNodePadding = CdkTreeNodePadding; selector: '[matTreeNodePadding]', providers: [{provide: CdkTreeNodePadding, useExisting: MatTreeNodePadding}] }) -export class MatTreeNodePadding<T> extends _CdkTreeNodePadding<T> { +export class MatTreeNodePadding<T> extends CdkTreeNodePadding<T> { /** The level of depth of the tree node. The padding will be `level * indent` pixels. */ @Input('matTreeNodePadding') level: number; @@ -26,3 +23,7 @@ export class MatTreeNodePadding<T> extends _CdkTreeNodePadding<T> { /** The indent for each level. Default number 40px from material design menu sub-menu spec. */ @Input('matTreeNodePaddingIndent') indent: number; } + +// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 +(MatTreeNodePadding as any)['ctorParameters'] = () => + (CdkTreeNodePadding as any)['ctorParameters']; diff --git a/src/lib/tree/toggle.ts b/src/lib/tree/toggle.ts index 9167115727c8..06e85cfa6dfb 100644 --- a/src/lib/tree/toggle.ts +++ b/src/lib/tree/toggle.ts @@ -9,9 +9,6 @@ import {CdkTreeNodeToggle} from '@angular/cdk/tree'; import {Directive, Input} from '@angular/core'; -// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -export const _CdkTreeNodeToggle = CdkTreeNodeToggle; - /** * Wrapper for the CdkTree's toggle with Material design styles. */ @@ -22,6 +19,9 @@ export const _CdkTreeNodeToggle = CdkTreeNodeToggle; }, providers: [{provide: CdkTreeNodeToggle, useExisting: MatTreeNodeToggle}] }) -export class MatTreeNodeToggle<T> extends _CdkTreeNodeToggle<T> { +export class MatTreeNodeToggle<T> extends CdkTreeNodeToggle<T> { @Input('matTreeNodeToggleRecursive') recursive: boolean = false; } + +// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 +(MatTreeNodeToggle as any)['ctorParameters'] = () => (CdkTreeNodeToggle as any)['ctorParameters']; diff --git a/src/lib/tree/tree.ts b/src/lib/tree/tree.ts index d450a2d1fb2b..509c248eb782 100644 --- a/src/lib/tree/tree.ts +++ b/src/lib/tree/tree.ts @@ -10,9 +10,6 @@ import {CdkTree} from '@angular/cdk/tree'; import {ChangeDetectionStrategy, Component, ViewChild, ViewEncapsulation} from '@angular/core'; import {MatTreeNodeOutlet} from './outlet'; -// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 -export const _CdkTree = CdkTree; - /** * Wrapper for the CdkTable with Material design styles. */ @@ -30,8 +27,10 @@ export const _CdkTree = CdkTree; changeDetection: ChangeDetectionStrategy.OnPush, providers: [{provide: CdkTree, useExisting: MatTree}] }) -export class MatTree<T> extends _CdkTree<T> { +export class MatTree<T> extends CdkTree<T> { // Outlets within the tree's template where the dataNodes will be inserted. @ViewChild(MatTreeNodeOutlet) _nodeOutlet: MatTreeNodeOutlet; } +// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760 +(MatTree as any)['ctorParameters'] = () => (CdkTree as any)['ctorParameters'];