chore(accordion): move CdkAccordion to @angular/cdk (#7530)

* Move UniqueSelectionDispatcher to CDK.

BREAKING CHANGE: UniqueSelectionDispatcher, UniqueSelectionDispatcherListener and UNIQUE_SELECTION_DISPATCHER_PROVIDER are no longer
available from @angular/material and instead must be imported from @angular/cdk/collections

* Move UniqueSelectionDispatcher to CDK.

BREAKING CHANGE: UniqueSelectionDispatcher, UniqueSelectionDispatcherListener and UNIQUE_SELECTION_DISPATCHER_PROVIDER are no longer
available from @angular/material and instead must be imported from @angular/cdk/collections

* Move CdkAccordion to @angular/cdk/accordion

BREAKING CHANGE:
  - CdkAccordion is now in @angular/cdk/accordion
  - AccordionChild is renamed to CdkAccordionChild
  - CdkAccordion no longer has displayMode and hideToggle @inputs
  - CdkAccordionItem is now a @directive
  - CdkAccordion is now exportedAs CdkAccordion for template referencing
  - CdkAccordionItem is now exported as CdkAccordionItem for template referencing

Author: josephperrott

src/cdk/accordion/accordion-item.spec.ts

@@ -0,0 +1,155 @@
+import {async, TestBed, ComponentFixture} from '@angular/core/testing';
+import {Component} from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {CdkAccordionModule, CdkAccordionItem} from './public-api';
+
+describe('CdkAccordionItem', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        BrowserAnimationsModule,
+        CdkAccordionModule
+      ],
+      declarations: [
+        SingleItem,
+        ItemGroupWithoutAccordion,
+        ItemGroupWithAccordion
+      ],
+    });
+    TestBed.compileComponents();
+  }));
+
+  describe('single item', () => {
+    let fixture: ComponentFixture<SingleItem>;
+    let item: CdkAccordionItem;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SingleItem);
+      item = fixture.debugElement
+        .query(By.directive(CdkAccordionItem))
+        .injector.get(CdkAccordionItem);
+    });
+
+    it('should toggle its expanded state', () => {
+      expect(item.expanded).toBeFalsy();
+      item.toggle();
+      expect(item.expanded).toBeTruthy();
+      item.toggle();
+      expect(item.expanded).toBeFalsy();
+    });
+
+    it('should set its expanded state to expanded', () => {
+      item.expanded = false;
+      item.open();
+      expect(item.expanded).toBeTruthy();
+    });
+
+    it('should set its expanded state to closed', () => {
+      item.expanded = true;
+      item.close();
+      expect(item.expanded).toBeFalsy();
+    });
+
+    it('should emit a closed event', () => {
+      spyOn(item.closed, 'emit');
+      item.close();
+      fixture.detectChanges();
+      expect(item.closed.emit).toHaveBeenCalledWith();
+    });
+
+    it('should emit an opened event', () => {
+      spyOn(item.opened, 'emit');
+      item.open();
+      fixture.detectChanges();
+      expect(item.opened.emit).toHaveBeenCalledWith();
+    });
+
+    it('should emit an destroyed event', () => {
+      spyOn(item.destroyed, 'emit');
+      item.ngOnDestroy();
+      fixture.detectChanges();
+      expect(item.destroyed.emit).toHaveBeenCalledWith();
+    });
+  });
+
+  describe('items without accordion', () => {
+    let fixture: ComponentFixture<SingleItem>;
+    let firstItem: CdkAccordionItem;
+    let secondItem: CdkAccordionItem;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(ItemGroupWithoutAccordion);
+      [firstItem, secondItem] = fixture.debugElement
+        .queryAll(By.directive(CdkAccordionItem))
+        .map(el => {
+          return el.injector.get(CdkAccordionItem) as CdkAccordionItem;
+        });
+    });
+
+    it('should not change expanded state based on unrelated items', () => {
+      expect(firstItem.expanded).toBeFalsy();
+      expect(secondItem.expanded).toBeFalsy();
+      firstItem.open();
+      fixture.detectChanges();
+      expect(firstItem.expanded).toBeTruthy();
+      expect(secondItem.expanded).toBeFalsy();
+      secondItem.open();
+      fixture.detectChanges();
+      expect(firstItem.expanded).toBeTruthy();
+      expect(secondItem.expanded).toBeTruthy();
+    });
+  });
+
+
+  describe('items in accordion', () => {
+    let fixture: ComponentFixture<SingleItem>;
+    let firstItem: CdkAccordionItem;
+    let secondItem: CdkAccordionItem;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(ItemGroupWithAccordion);
+      [firstItem, secondItem] = fixture.debugElement
+        .queryAll(By.directive(CdkAccordionItem))
+        .map(el => {
+          return el.injector.get(CdkAccordionItem) as CdkAccordionItem;
+        });
+    });
+
+    it('should change expanded state based on related items', () => {
+      expect(firstItem.expanded).toBeFalsy();
+      expect(secondItem.expanded).toBeFalsy();
+      firstItem.open();
+      fixture.detectChanges();
+      expect(firstItem.expanded).toBeTruthy();
+      expect(secondItem.expanded).toBeFalsy();
+      secondItem.open();
+      fixture.detectChanges();
+      expect(firstItem.expanded).toBeFalsy();
+      expect(secondItem.expanded).toBeTruthy();
+    });
+  });
+});
+
+@Component({
+  template: `<cdk-accordion-item #item1></cdk-accordion-item>`
+})
+class SingleItem {}
+
+@Component({
+  template: `
+    <cdk-accordion-item #item1></cdk-accordion-item>
+    <cdk-accordion-item #item2></cdk-accordion-item>
+  `
+})
+class ItemGroupWithoutAccordion {}
+
+@Component({
+  template: `
+    <cdk-accordion>
+      <cdk-accordion-item #item1></cdk-accordion-item>
+      <cdk-accordion-item #item2></cdk-accordion-item>
+    </cdk-accordion>
+  `
+})
+class ItemGroupWithAccordion {}

src/lib/expansion/accordion-item.ts renamed to src/cdk/accordion/accordion-item.ts

@@ -8,25 +8,28 @@
 
 import {
   Output,
+  Directive,
   EventEmitter,
   Input,
-  Injectable,
   OnDestroy,
   Optional,
   ChangeDetectorRef,
 } from '@angular/core';
 import {UniqueSelectionDispatcher} from '@angular/cdk/collections';
 import {CdkAccordion} from './accordion';
 
-/** Used to generate unique ID for each expansion panel. */
+/** Used to generate unique ID for each accordion item. */
 let nextId = 0;
 
 /**
- * An abstract class to be extended and decorated as a component.  Sets up all
+ * 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.
  */
-@Injectable()
-export class AccordionItem implements OnDestroy {
+@Directive({
+  selector: 'cdk-accordion-item',
+  exportAs: 'cdkAccordionItem',
+})
+export class CdkAccordionItem implements OnDestroy {
   /** Event emitted every time the AccordionItem is closed. */
   @Output() closed = new EventEmitter<void>();
   /** Event emitted every time the AccordionItem is opened. */
@@ -62,7 +65,7 @@ export class AccordionItem implements OnDestroy {
   }
   private _expanded: boolean;
 
-  /** Unregister function for _expansionDispatcher **/
+  /** Unregister function for _expansionDispatcher. */
   private _removeUniqueSelectionListener: () => void = () => {};
 
   constructor(@Optional() public accordion: CdkAccordion,

src/cdk/accordion/accordion-module.ts

@@ -0,0 +1,19 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {UNIQUE_SELECTION_DISPATCHER_PROVIDER} from '@angular/cdk/collections';
+import {CdkAccordion} from './accordion';
+import {CdkAccordionItem} from './accordion-item';
+
+@NgModule({
+  exports: [CdkAccordion, CdkAccordionItem],
+  declarations: [CdkAccordion, CdkAccordionItem],
+  providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER],
+})
+export class CdkAccordionModule {}

src/cdk/accordion/accordion.spec.ts

@@ -0,0 +1,67 @@
+import {async, TestBed} from '@angular/core/testing';
+import {Component, ViewChild} from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {CdkAccordionModule, CdkAccordionItem} from './public-api';
+
+describe('CdkAccordion', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        BrowserAnimationsModule,
+        CdkAccordionModule
+      ],
+      declarations: [
+        SetOfItems
+      ],
+    });
+    TestBed.compileComponents();
+  }));
+
+  it('should ensure only one item is expanded at a time', () => {
+    const fixture = TestBed.createComponent(SetOfItems);
+    const [firstPanel, secondPanel] = fixture.debugElement
+      .queryAll(By.directive(CdkAccordionItem))
+      .map(el => {
+        return el.injector.get(CdkAccordionItem) as CdkAccordionItem;
+      });
+
+    firstPanel.open();
+    fixture.detectChanges();
+    expect(firstPanel.expanded).toBeTruthy();
+    expect(secondPanel.expanded).toBeFalsy();
+
+    secondPanel.open();
+    fixture.detectChanges();
+    expect(firstPanel.expanded).toBeFalsy();
+    expect(secondPanel.expanded).toBeTruthy();
+  });
+
+  it('should allow multiple items to be expanded simultaneously', () => {
+    const fixture = TestBed.createComponent(SetOfItems);
+    const [firstPanel, secondPanel] = fixture.debugElement
+      .queryAll(By.directive(CdkAccordionItem))
+      .map(el => {
+        return el.injector.get(CdkAccordionItem) as CdkAccordionItem;
+      });
+
+    fixture.componentInstance.multi = true;
+    fixture.detectChanges();
+    firstPanel.expanded = true;
+    secondPanel.expanded = true;
+    fixture.detectChanges();
+    expect(firstPanel.expanded).toBeTruthy();
+    expect(secondPanel.expanded).toBeTruthy();
+  });
+});
+
+@Component({template: `
+  <cdk-accordion [multi]="multi">
+    <cdk-accordion-item #item1></cdk-accordion-item>
+    <cdk-accordion-item #item2></cdk-accordion-item>
+  </cdk-accordion>`})
+class SetOfItems {
+  @ViewChild('item1') item1;
+  @ViewChild('item2') item2;
+  multi: boolean = false;
+}

src/cdk/accordion/accordion.ts

@@ -0,0 +1,30 @@
+/**
+ * @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 {Directive, Input} from '@angular/core';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+
+/** Used to generate unique ID for each accordion. */
+let nextId = 0;
+
+/**
+ * Directive whose purpose is to manage the expanded state of CdkAccordionItem children.
+ */
+@Directive({
+  selector: 'cdk-accordion, [cdk-accordion]',
+  exportAs: 'cdkAccordion',
+})
+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. */
+  @Input() get multi(): boolean { return this._multi; }
+  set multi(multi: boolean) { this._multi = coerceBooleanProperty(multi); }
+  private  _multi: boolean = false;
+}

src/cdk/accordion/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/accordion/public-api.ts

@@ -0,0 +1,11 @@
+/**
+ * @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 {CdkAccordionItem} from './accordion-item';
+export {CdkAccordion} from './accordion';
+export * from './accordion-module';

src/cdk/accordion/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/accordion",
+    "skipTemplateCodegen": true
+  }
+}

src/cdk/accordion/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/accordion",
+    "skipTemplateCodegen": true
+  }
+}

src/demo-app/demo-material-module.ts

@@ -33,6 +33,7 @@ import {
 } from '@angular/material';
 import {MatNativeDateModule, MatRippleModule} from '@angular/material';
 import {CdkTableModule} from '@angular/cdk/table';
+import {CdkAccordionModule} from '@angular/cdk/accordion';
 import {A11yModule} from '@angular/cdk/a11y';
 import {BidiModule} from '@angular/cdk/bidi';
 import {OverlayModule} from '@angular/cdk/overlay';
@@ -80,6 +81,7 @@ import {PortalModule} from '@angular/cdk/portal';
     CdkTableModule,
     A11yModule,
     BidiModule,
+    CdkAccordionModule,
     ObserversModule,
     OverlayModule,
     PlatformModule,