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: material not working with ES2015 (#13709)

Browse Source 
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.
This commit is contained in:
Paul Gschwendtner
2018-10-23 22:48:03 +02:00
committed by mmalerba
parent d5f0f0f5fa
commit 985774a4ea
13 changed files with 60 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/expansion/expansion-panel.ts
-3
View File
@@ -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';
src/lib/input/autosize.ts
+5 -4
View File
@@ -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'];
src/lib/stepper/step-label.ts
+4 -4
View File
@@ -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'];
src/lib/stepper/stepper-button.ts
+7 -6
View File
@@ -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'];
src/lib/stepper/stepper.ts
+4 -4
View File
@@ -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',
src/lib/table/cell.ts
+8 -8
View File
@@ -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.
src/lib/table/row.ts
+8 -8
View File
@@ -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({
src/lib/table/table.ts
+4 -4
View File
@@ -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'];
src/lib/tabs/tab-label.ts
+4 -4
View File
@@ -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'];
src/lib/tree/node.ts
+4 -4
View File
@@ -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.
*/
src/lib/tree/padding.ts
+5 -4
View File
@@ -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'];
src/lib/tree/toggle.ts
+4 -4
View File
@@ -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'];
src/lib/tree/tree.ts
+3 -4
View File
@@ -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'];