chore(accordion): re-create CanDisable and mixinDisabled in CDK (#8141)

Re-creates the disabled mixin in the CDK to expose the disabled property to Accordion Item

Closes #8141

Author: Louw Swart

.github/CODEOWNERS

@@ -59,6 +59,7 @@
 /src/cdk/collections/**                            @jelbourn @crisbeto @andrewseguin
 /src/cdk/keycodes/**                               @jelbourn
 /src/cdk/layout/**                                 @josephperrott
+/src/cdk/mixins/**                                 @josephperrott @jelbourn
 /src/cdk/observers/**                              @jelbourn @crisbeto
 /src/cdk/overlay/**                                @jelbourn @crisbeto
 /src/cdk/platform/**                               @jelbourn @devversion

src/cdk/accordion/accordion-item.ts

@@ -16,11 +16,20 @@ import {
   ChangeDetectorRef,
 } from '@angular/core';
 import {UniqueSelectionDispatcher} from '@angular/cdk/collections';
+import {CanDisable, mixinDisabled} from '@angular/cdk/mixins';
 import {CdkAccordion} from './accordion';
 
 /** Used to generate unique ID for each accordion item. */
 let nextId = 0;
 
+// Boilerplate for applying mixins to CdkAccordionItem.
+/** @docs-private */
+export class CdkAccordionItemBase {
+  constructor() {}
+}
+
+export const _CdkAccordionItemBase = mixinDisabled(CdkAccordionItemBase);
+
 /**
  * An basic directive expected to be extended and decorated as a component.  Sets up all
  * events and attributes needed to be managed by a CdkAccordion parent.
@@ -29,7 +38,8 @@ let nextId = 0;
   selector: 'cdk-accordion-item',
   exportAs: 'cdkAccordionItem',
 })
-export class CdkAccordionItem implements OnDestroy {
+export class CdkAccordionItem extends _CdkAccordionItemBase
+    implements OnDestroy, CanDisable {
   /** Event emitted every time the AccordionItem is closed. */
   @Output() closed = new EventEmitter<void>();
   /** Event emitted every time the AccordionItem is opened. */
@@ -71,6 +81,7 @@ export class CdkAccordionItem implements OnDestroy {
   constructor(@Optional() public accordion: CdkAccordion,
               private _changeDetectorRef: ChangeDetectorRef,
               protected _expansionDispatcher: UniqueSelectionDispatcher) {
+    super();
     this._removeUniqueSelectionListener =
       _expansionDispatcher.listen((id: string, accordionId: string) => {
         if (this.accordion && !this.accordion.multi &&

src/cdk/accordion/accordion.ts

@@ -23,7 +23,7 @@ export class CdkAccordion {
   /** A readonly id value to use for unique selection coordination. */
   readonly id = `cdk-accordion-${nextId++}`;
 
-  /** Whether the accordion should allow multiple expanded accordion items simulateously. */
+  /** Whether the accordion should allow multiple expanded accordion items simultaneously. */
   @Input() get multi(): boolean { return this._multi; }
   set multi(multi: boolean) { this._multi = coerceBooleanProperty(multi); }
   private  _multi: boolean = false;

src/cdk/accordion/public-api.ts

@@ -6,6 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
- export {CdkAccordionItem} from './accordion-item';
+export {CdkAccordionItem} from './accordion-item';
 export {CdkAccordion} from './accordion';
 export * from './accordion-module';

src/cdk/mixins/constructor.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+
+/** @docs-private */
+export type Constructor<T> = new(...args: any[]) => T;

src/cdk/mixins/disabled/disabled.spec.ts

@@ -0,0 +1,17 @@
+import {mixinDisabled} from './disabled';
+
+describe('MixinDisabled', () => {
+  it('should augment an existing class with a disabled property', () => {
+    class EmptyClass { }
+
+    let classWithDisabled = mixinDisabled(EmptyClass);
+    let instance = new classWithDisabled();
+
+    expect(instance.disabled)
+        .toBe(false, 'Expected the mixed-into class to have a disabled property');
+
+    instance.disabled = true;
+    expect(instance.disabled)
+        .toBe(true, 'Expected the mixed-into class to have an updated disabled property');
+  });
+});

src/cdk/mixins/disabled/disabled.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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 {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {Constructor} from '../constructor';
+
+/** @docs-private */
+export interface CanDisable {
+  disabled: boolean;
+}
+
+/** Mixin to augment a directive with a `disabled` property. */
+export function mixinDisabled<T extends Constructor<{}>>(base: T): Constructor<CanDisable> & T {
+  return class extends base {
+    private _disabled: boolean = false;
+
+    get disabled() { return this._disabled; }
+    set disabled(value: any) { this._disabled = coerceBooleanProperty(value); }
+
+    constructor(...args: any[]) { super(...args); }
+  };
+}

src/cdk/mixins/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+
+export * from './public-api';

src/cdk/mixins/mixins.md

@@ -0,0 +1,6 @@
+### Mixins
+
+Mixins that can augment directives when certain properties are present.
+
+#### disabled
+Augments a directive with a `disabled` property.

src/cdk/mixins/public-api.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+
+export * from './disabled/disabled';

src/cdk/mixins/tsconfig-build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig-build",
+  "files": [
+    "public-api.ts"
+  ],
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": true,
+    "flatModuleOutFile": "index.js",
+    "flatModuleId": "@angular/cdk/mixins",
+    "skipTemplateCodegen": true
+  }
+}

src/cdk/mixins/tsconfig-es5.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig-es5",
+  "files": [
+    "public-api.ts"
+  ],
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": true,
+    "flatModuleOutFile": "index.js",
+    "flatModuleId": "@angular/cdk/mixins",
+    "skipTemplateCodegen": true
+  }
+}

src/demo-app/system-config.ts

@@ -39,6 +39,7 @@ System.config({
     '@angular/cdk/collections': 'dist/packages/cdk/collections/index.js',
     '@angular/cdk/keycodes': 'dist/packages/cdk/keycodes/index.js',
     '@angular/cdk/layout': 'dist/packages/cdk/layout/index.js',
+    '@angular/cdk/mixins': 'dist/packages/cdk/mixins/index.js',
     '@angular/cdk/observers': 'dist/packages/cdk/observers/index.js',
     '@angular/cdk/overlay': 'dist/packages/cdk/overlay/index.js',
     '@angular/cdk/platform': 'dist/packages/cdk/platform/index.js',

src/e2e-app/system-config.ts

@@ -37,6 +37,7 @@ System.config({
     '@angular/cdk/collections': 'dist/bundles/cdk-collections.umd.js',
     '@angular/cdk/keycodes': 'dist/bundles/cdk-keycodes.umd.js',
     '@angular/cdk/layout': 'dist/bundles/cdk-layout.umd.js',
+    '@angular/cdk/mixins': 'dist/bundles/cdk-mixins.umd.js',
     '@angular/cdk/observers': 'dist/bundles/cdk-observers.umd.js',
     '@angular/cdk/overlay': 'dist/bundles/cdk-overlay.umd.js',
     '@angular/cdk/platform': 'dist/bundles/cdk-platform.umd.js',

src/lib/expansion/expansion-module.ts

@@ -14,8 +14,7 @@ import {A11yModule} from '@angular/cdk/a11y';
 import {MatAccordion} from './accordion';
 import {
   MatExpansionPanel,
-  MatExpansionPanelActionRow,
-  MatExpansionPanelBase
+  MatExpansionPanelActionRow
 } from './expansion-panel';
 import {
   MatExpansionPanelDescription,
@@ -35,7 +34,6 @@ import {
     MatExpansionPanelDescription
   ],
   declarations: [
-    MatExpansionPanelBase,
     MatAccordion,
     MatExpansionPanel,
     MatExpansionPanelActionRow,

src/lib/expansion/expansion-panel.ts

@@ -12,7 +12,6 @@ import {
   ChangeDetectorRef,
   Component,
   Directive,
-  forwardRef,
   Host,
   Input,
   OnChanges,
@@ -23,7 +22,6 @@ import {
 } from '@angular/core';
 import {CdkAccordionItem} from '@angular/cdk/accordion';
 import {UniqueSelectionDispatcher} from '@angular/cdk/collections';
-import {CanDisable, mixinDisabled} from '@angular/material/core';
 import {Subject} from 'rxjs/Subject';
 import {MatAccordion} from './accordion';
 
@@ -33,24 +31,6 @@ export const _CdkAccordionItem = CdkAccordionItem;
 /** Time and timing curve for expansion panel animations. */
 export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
 
-// Boilerplate for applying mixins to MatExpansionPanel.
-/** @docs-private */
-@Component({
-  template: '',
-  moduleId: module.id,
-  encapsulation: ViewEncapsulation.None,
-  preserveWhitespaces: false,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MatExpansionPanelBase extends _CdkAccordionItem {
-  constructor(accordion: MatAccordion,
-              _changeDetectorRef: ChangeDetectorRef,
-              _uniqueSelectionDispatcher: UniqueSelectionDispatcher) {
-    super(accordion, _changeDetectorRef, _uniqueSelectionDispatcher);
-  }
-}
-export const _MatExpansionPanelMixinBase = mixinDisabled(MatExpansionPanelBase);
-
 /** MatExpansionPanel's states. */
 export type MatExpansionPanelState = 'expanded' | 'collapsed';
 
@@ -77,9 +57,6 @@ export type MatExpansionPanelState = 'expanded' | 'collapsed';
     '[class.mat-expanded]': 'expanded',
     '[class.mat-expansion-panel-spacing]': '_hasSpacing()',
   },
-  providers: [
-    {provide: _MatExpansionPanelMixinBase, useExisting: forwardRef(() => MatExpansionPanel)}
-  ],
   animations: [
     trigger('bodyExpansion', [
       state('collapsed', style({height: '0px', visibility: 'hidden'})),
@@ -88,8 +65,7 @@ export type MatExpansionPanelState = 'expanded' | 'collapsed';
     ]),
   ],
 })
-export class MatExpansionPanel extends _MatExpansionPanelMixinBase
-    implements CanDisable, OnChanges, OnDestroy {
+export class MatExpansionPanel extends _CdkAccordionItem implements OnChanges, OnDestroy {
   /** Whether the toggle indicator should be hidden. */
   @Input() hideToggle: boolean = false;
 

test/karma-test-shim.js

@@ -58,6 +58,7 @@ System.config({
     '@angular/cdk/collections': 'dist/packages/cdk/collections/index.js',
     '@angular/cdk/keycodes': 'dist/packages/cdk/keycodes/index.js',
     '@angular/cdk/layout': 'dist/packages/cdk/layout/index.js',
+    '@angular/cdk/mixins': 'dist/packages/cdk/mixins/index.js',
     '@angular/cdk/observers': 'dist/packages/cdk/observers/index.js',
     '@angular/cdk/overlay': 'dist/packages/cdk/overlay/index.js',
     '@angular/cdk/platform': 'dist/packages/cdk/platform/index.js',