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.

Author: devversion

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';
 

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'];

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'];

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'];

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',

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.

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({

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'];

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'];

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.
  */