refactor(material/expansion): convert to standalone

Converts `material/expansion` to standalone.

Author: crisbeto

src/material/expansion/accordion.spec.ts

@@ -8,7 +8,11 @@ import {
   MatExpansionPanel,
   MatExpansionPanelHeader,
 } from './index';
-import {dispatchKeyboardEvent, createKeyboardEvent, dispatchEvent} from '../../cdk/testing/private';
+import {
+  dispatchKeyboardEvent,
+  createKeyboardEvent,
+  dispatchEvent,
+} from '@angular/cdk/testing/private';
 import {DOWN_ARROW, UP_ARROW, HOME, END} from '@angular/cdk/keycodes';
 import {FocusMonitor} from '@angular/cdk/a11y';
 
@@ -17,8 +21,9 @@ describe('MatAccordion', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, MatExpansionModule],
-      declarations: [
+      imports: [
+        BrowserAnimationsModule,
+        MatExpansionModule,
         AccordionWithHideToggle,
         AccordionWithTogglePosition,
         NestedPanel,
@@ -310,6 +315,8 @@ describe('MatAccordion', () => {
       </mat-expansion-panel>
     }
   </mat-accordion>`,
+  standalone: true,
+  imports: [MatExpansionModule],
 })
 class SetOfItems {
   @ViewChild(MatAccordion) accordion: MatAccordion;
@@ -337,6 +344,8 @@ class SetOfItems {
       Content 1
     </mat-expansion-panel>
   </mat-accordion>`,
+  standalone: true,
+  imports: [MatExpansionModule],
 })
 class NestedAccordions {
   @ViewChildren(MatExpansionPanelHeader) headers: QueryList<MatExpansionPanelHeader>;
@@ -355,6 +364,8 @@ class NestedAccordions {
       </mat-expansion-panel>
     </mat-expansion-panel>
   </mat-accordion>`,
+  standalone: true,
+  imports: [MatExpansionModule],
 })
 class NestedPanel {
   @ViewChild('outerPanel') outerPanel: MatExpansionPanel;
@@ -369,6 +380,8 @@ class NestedPanel {
       <p>Content</p>
     </mat-expansion-panel>
   </mat-accordion>`,
+  standalone: true,
+  imports: [MatExpansionModule],
 })
 class AccordionWithHideToggle {
   hideToggle = false;
@@ -382,6 +395,8 @@ class AccordionWithHideToggle {
       <p>Content</p>
     </mat-expansion-panel>
   </mat-accordion>`,
+  standalone: true,
+  imports: [MatExpansionModule],
 })
 class AccordionWithTogglePosition {
   togglePosition = 'after';

src/material/expansion/accordion.ts

@@ -45,6 +45,7 @@ import {MatExpansionPanelHeader} from './expansion-panel-header';
     // way for the harness to detect if multiple panel support is enabled.
     '[class.mat-accordion-multi]': 'this.multi',
   },
+  standalone: true,
 })
 export class MatAccordion
   extends CdkAccordion

src/material/expansion/expansion-module.ts

@@ -20,8 +20,10 @@ import {
 } from './expansion-panel-header';
 
 @NgModule({
-  imports: [MatCommonModule, CdkAccordionModule, PortalModule],
-  exports: [
+  imports: [
+    MatCommonModule,
+    CdkAccordionModule,
+    PortalModule,
     MatAccordion,
     MatExpansionPanel,
     MatExpansionPanelActionRow,
@@ -30,7 +32,7 @@ import {
     MatExpansionPanelDescription,
     MatExpansionPanelContent,
   ],
-  declarations: [
+  exports: [
     MatAccordion,
     MatExpansionPanel,
     MatExpansionPanelActionRow,

src/material/expansion/expansion-panel-content.ts

@@ -15,6 +15,7 @@ import {MAT_EXPANSION_PANEL, MatExpansionPanelBase} from './expansion-panel-base
  */
 @Directive({
   selector: 'ng-template[matExpansionPanelContent]',
+  standalone: true,
 })
 export class MatExpansionPanelContent {
   constructor(

src/material/expansion/expansion-panel-header.ts

@@ -61,6 +61,7 @@ import {
     '(click)': '_toggle()',
     '(keydown)': '_keydown($event)',
   },
+  standalone: true,
 })
 export class MatExpansionPanelHeader implements AfterViewInit, OnDestroy, FocusableOption {
   private _parentChangeSubscription = Subscription.EMPTY;
@@ -229,6 +230,7 @@ export class MatExpansionPanelHeader implements AfterViewInit, OnDestroy, Focusa
   host: {
     class: 'mat-expansion-panel-header-description',
   },
+  standalone: true,
 })
 export class MatExpansionPanelDescription {}
 
@@ -240,5 +242,6 @@ export class MatExpansionPanelDescription {}
   host: {
     class: 'mat-expansion-panel-header-title',
   },
+  standalone: true,
 })
 export class MatExpansionPanelTitle {}

src/material/expansion/expansion-panel.ts

@@ -9,7 +9,7 @@
 import {AnimationEvent} from '@angular/animations';
 import {CdkAccordionItem} from '@angular/cdk/accordion';
 import {UniqueSelectionDispatcher} from '@angular/cdk/collections';
-import {TemplatePortal} from '@angular/cdk/portal';
+import {CdkPortalOutlet, TemplatePortal} from '@angular/cdk/portal';
 import {DOCUMENT} from '@angular/common';
 import {
   AfterContentInit,
@@ -96,6 +96,8 @@ export const MAT_EXPANSION_PANEL_DEFAULT_OPTIONS =
     '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
     '[class.mat-expansion-panel-spacing]': '_hasSpacing()',
   },
+  standalone: true,
+  imports: [CdkPortalOutlet],
 })
 export class MatExpansionPanel
   extends CdkAccordionItem
@@ -261,5 +263,6 @@ export class MatExpansionPanel
   host: {
     class: 'mat-action-row',
   },
+  standalone: true,
 })
 export class MatExpansionPanelActionRow {}

src/material/expansion/expansion.spec.ts

@@ -16,13 +16,18 @@ import {
   MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,
 } from './index';
 import {SPACE, ENTER} from '@angular/cdk/keycodes';
-import {dispatchKeyboardEvent, createKeyboardEvent, dispatchEvent} from '../../cdk/testing/private';
+import {
+  dispatchKeyboardEvent,
+  createKeyboardEvent,
+  dispatchEvent,
+} from '@angular/cdk/testing/private';
 
 describe('MatExpansionPanel', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [MatExpansionModule, NoopAnimationsModule],
-      declarations: [
+      imports: [
+        MatExpansionModule,
+        NoopAnimationsModule,
         PanelWithContent,
         PanelWithContentInNgIf,
         PanelWithCustomMargin,
@@ -400,7 +405,6 @@ describe('MatExpansionPanel', () => {
     TestBed.resetTestingModule()
       .configureTestingModule({
         imports: [MatExpansionModule, NoopAnimationsModule],
-        declarations: [PanelWithTwoWayBinding],
         providers: [
           {
             provide: MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,
@@ -570,6 +574,8 @@ describe('MatExpansionPanel', () => {
     <p>Some content</p>
     <button>I am a button</button>
   </mat-expansion-panel>`,
+  standalone: true,
+  imports: [MatExpansionModule],
 })
 class PanelWithContent {
   expanded = false;
@@ -590,6 +596,8 @@ class PanelWithContent {
       </div>
     }
   `,
+  standalone: true,
+  imports: [MatExpansionModule],
 })
 class PanelWithContentInNgIf {
   expansionShown = true;
@@ -607,6 +615,8 @@ class PanelWithContentInNgIf {
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores officia, aliquam dicta
     corrupti maxime voluptate accusamus impedit atque incidunt pariatur.
   </mat-expansion-panel>`,
+  standalone: true,
+  imports: [MatExpansionModule],
 })
 class PanelWithCustomMargin {
   expanded = false;
@@ -622,6 +632,8 @@ class PanelWithCustomMargin {
       <button>I am a button</button>
     </ng-template>
   </mat-expansion-panel>`,
+  standalone: true,
+  imports: [MatExpansionModule],
 })
 class LazyPanelWithContent {
   expanded = false;
@@ -636,6 +648,8 @@ class LazyPanelWithContent {
       <p>Some content</p>
     </ng-template>
   </mat-expansion-panel>`,
+  standalone: true,
+  imports: [MatExpansionModule],
 })
 class LazyPanelOpenOnLoad {}
 
@@ -644,6 +658,8 @@ class LazyPanelOpenOnLoad {}
   <mat-expansion-panel [(expanded)]="expanded">
     <mat-expansion-panel-header>Panel Title</mat-expansion-panel-header>
   </mat-expansion-panel>`,
+  standalone: true,
+  imports: [MatExpansionModule],
 })
 class PanelWithTwoWayBinding {
   expanded = false;
@@ -654,6 +670,8 @@ class PanelWithTwoWayBinding {
   <mat-expansion-panel>
     <mat-expansion-panel-header tabindex="7">Panel Title</mat-expansion-panel-header>
   </mat-expansion-panel>`,
+  standalone: true,
+  imports: [MatExpansionModule],
 })
 class PanelWithHeaderTabindex {}
 
@@ -667,6 +685,8 @@ class PanelWithHeaderTabindex {}
       </mat-expansion-panel>
     </mat-expansion-panel>
   `,
+  standalone: true,
+  imports: [MatExpansionModule],
 })
 class NestedLazyPanelWithContent {
   parentExpanded = false;

src/material/expansion/testing/expansion-harness.spec.ts

@@ -13,8 +13,7 @@ describe('MatExpansionHarness', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatExpansionModule, NoopAnimationsModule],
-      declarations: [ExpansionHarnessTestComponent],
+      imports: [MatExpansionModule, NoopAnimationsModule, ExpansionHarnessTestComponent],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ExpansionHarnessTestComponent);
@@ -321,6 +320,8 @@ function getActiveElementTag() {
 
     <div class="test-content-harness">Outside of expansion panel</div>
   `,
+  standalone: true,
+  imports: [MatExpansionModule],
 })
 class ExpansionHarnessTestComponent {
   panel1Expanded = false;

tools/public_api_guard/material/expansion.md

@@ -17,9 +17,9 @@ import { FocusableOption } from '@angular/cdk/a11y';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import * as i5 from '@angular/material/core';
-import * as i6 from '@angular/cdk/accordion';
-import * as i7 from '@angular/cdk/portal';
+import * as i1 from '@angular/material/core';
+import * as i2 from '@angular/cdk/accordion';
+import * as i3 from '@angular/cdk/portal';
 import { InjectionToken } from '@angular/core';
 import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
@@ -59,7 +59,7 @@ export class MatAccordion extends CdkAccordion implements MatAccordionBase, Afte
     ngOnDestroy(): void;
     togglePosition: MatAccordionTogglePosition;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatAccordion, "mat-accordion", ["matAccordion"], { "multi": { "alias": "multi"; "required": false; }; "hideToggle": { "alias": "hideToggle"; "required": false; }; "displayMode": { "alias": "displayMode"; "required": false; }; "togglePosition": { "alias": "togglePosition"; "required": false; }; }, {}, ["_headers"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatAccordion, "mat-accordion", ["matAccordion"], { "multi": { "alias": "multi"; "required": false; }; "hideToggle": { "alias": "hideToggle"; "required": false; }; "displayMode": { "alias": "displayMode"; "required": false; }; "togglePosition": { "alias": "togglePosition"; "required": false; }; }, {}, ["_headers"], never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAccordion, never>;
 }
@@ -92,7 +92,7 @@ export class MatExpansionModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatExpansionModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatExpansionModule, [typeof i1.MatAccordion, typeof i2.MatExpansionPanel, typeof i2.MatExpansionPanelActionRow, typeof i3.MatExpansionPanelHeader, typeof i3.MatExpansionPanelTitle, typeof i3.MatExpansionPanelDescription, typeof i4.MatExpansionPanelContent], [typeof i5.MatCommonModule, typeof i6.CdkAccordionModule, typeof i7.PortalModule], [typeof i1.MatAccordion, typeof i2.MatExpansionPanel, typeof i2.MatExpansionPanelActionRow, typeof i3.MatExpansionPanelHeader, typeof i3.MatExpansionPanelTitle, typeof i3.MatExpansionPanelDescription, typeof i4.MatExpansionPanelContent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatExpansionModule, never, [typeof i1.MatCommonModule, typeof i2.CdkAccordionModule, typeof i3.PortalModule, typeof i4.MatAccordion, typeof i5.MatExpansionPanel, typeof i5.MatExpansionPanelActionRow, typeof i6.MatExpansionPanelHeader, typeof i6.MatExpansionPanelTitle, typeof i6.MatExpansionPanelDescription, typeof i7.MatExpansionPanelContent], [typeof i4.MatAccordion, typeof i5.MatExpansionPanel, typeof i5.MatExpansionPanelActionRow, typeof i6.MatExpansionPanelHeader, typeof i6.MatExpansionPanelTitle, typeof i6.MatExpansionPanelDescription, typeof i7.MatExpansionPanelContent]>;
 }
 
 // @public
@@ -128,15 +128,15 @@ export class MatExpansionPanel extends CdkAccordionItem implements AfterContentI
     get togglePosition(): MatAccordionTogglePosition;
     set togglePosition(value: MatAccordionTogglePosition);
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatExpansionPanel, "mat-expansion-panel", ["matExpansionPanel"], { "disabled": { "alias": "disabled"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "hideToggle": { "alias": "hideToggle"; "required": false; }; "togglePosition": { "alias": "togglePosition"; "required": false; }; }, { "opened": "opened"; "closed": "closed"; "expandedChange": "expandedChange"; "afterExpand": "afterExpand"; "afterCollapse": "afterCollapse"; }, ["_lazyContent"], ["mat-expansion-panel-header", "*", "mat-action-row"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatExpansionPanel, "mat-expansion-panel", ["matExpansionPanel"], { "disabled": { "alias": "disabled"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "hideToggle": { "alias": "hideToggle"; "required": false; }; "togglePosition": { "alias": "togglePosition"; "required": false; }; }, { "opened": "opened"; "closed": "closed"; "expandedChange": "expandedChange"; "afterExpand": "afterExpand"; "afterCollapse": "afterCollapse"; }, ["_lazyContent"], ["mat-expansion-panel-header", "*", "mat-action-row"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatExpansionPanel, [{ optional: true; skipSelf: true; }, null, null, null, null, { optional: true; }, { optional: true; }]>;
 }
 
 // @public
 export class MatExpansionPanelActionRow {
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatExpansionPanelActionRow, "mat-action-row", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatExpansionPanelActionRow, "mat-action-row", never, {}, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatExpansionPanelActionRow, never>;
 }
@@ -149,7 +149,7 @@ export class MatExpansionPanelContent {
     // (undocumented)
     _template: TemplateRef<any>;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatExpansionPanelContent, "ng-template[matExpansionPanelContent]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatExpansionPanelContent, "ng-template[matExpansionPanelContent]", never, {}, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatExpansionPanelContent, [null, { optional: true; }]>;
 }
@@ -164,7 +164,7 @@ export interface MatExpansionPanelDefaultOptions {
 // @public
 export class MatExpansionPanelDescription {
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatExpansionPanelDescription, "mat-panel-description", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatExpansionPanelDescription, "mat-panel-description", never, {}, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatExpansionPanelDescription, never>;
 }
@@ -196,7 +196,7 @@ export class MatExpansionPanelHeader implements AfterViewInit, OnDestroy, Focusa
     tabIndex: number;
     _toggle(): void;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatExpansionPanelHeader, "mat-expansion-panel-header", never, { "expandedHeight": { "alias": "expandedHeight"; "required": false; }; "collapsedHeight": { "alias": "collapsedHeight"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, ["mat-panel-title", "mat-panel-description", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatExpansionPanelHeader, "mat-expansion-panel-header", never, { "expandedHeight": { "alias": "expandedHeight"; "required": false; }; "collapsedHeight": { "alias": "collapsedHeight"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, ["mat-panel-title", "mat-panel-description", "*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatExpansionPanelHeader, [{ host: true; }, null, null, null, { optional: true; }, { optional: true; }, { attribute: "tabindex"; }]>;
 }
@@ -207,7 +207,7 @@ export type MatExpansionPanelState = 'expanded' | 'collapsed';
 // @public
 export class MatExpansionPanelTitle {
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatExpansionPanelTitle, "mat-panel-title", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatExpansionPanelTitle, "mat-panel-title", never, {}, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatExpansionPanelTitle, never>;
 }