feat(expansion-panel): add injection token for configuring the default options (#14384)

Adds a new injection token to allow people to configure the default options for the expansion panel component.

Fixes #14383.

Author: crisbeto

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

@@ -18,11 +18,17 @@ import {
   Input,
   OnDestroy,
   ViewEncapsulation,
+  Optional,
+  Inject,
 } from '@angular/core';
 import {merge, Subscription, EMPTY} from 'rxjs';
 import {filter} from 'rxjs/operators';
 import {matExpansionAnimations} from './expansion-animations';
-import {MatExpansionPanel} from './expansion-panel';
+import {
+  MatExpansionPanel,
+  MatExpansionPanelDefaultOptions,
+  MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,
+} from './expansion-panel';
 
 
 /**
@@ -68,7 +74,9 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
       @Host() public panel: MatExpansionPanel,
       private _element: ElementRef,
       private _focusMonitor: FocusMonitor,
-      private _changeDetectorRef: ChangeDetectorRef) {
+      private _changeDetectorRef: ChangeDetectorRef,
+      @Inject(MAT_EXPANSION_PANEL_DEFAULT_OPTIONS) @Optional()
+          defaultOptions?: MatExpansionPanelDefaultOptions) {
 
     const accordionHideToggleChange = panel.accordion ?
       panel.accordion._stateChanges.pipe(filter(changes => !!changes.hideToggle)) : EMPTY;
@@ -93,6 +101,11 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
         panel.accordion._handleHeaderFocus(this);
       }
     });
+
+    if (defaultOptions) {
+      this.expandedHeight = defaultOptions.expandedHeight;
+      this.collapsedHeight = defaultOptions.collapsedHeight;
+    }
   }
 
   /** Height of the header while the panel is expanded. */

src/lib/expansion/expansion-panel.ts

@@ -31,6 +31,7 @@ import {
   ViewContainerRef,
   ViewEncapsulation,
   ViewChild,
+  InjectionToken,
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
@@ -46,6 +47,28 @@ export type MatExpansionPanelState = 'expanded' | 'collapsed';
 /** Counter for generating unique element ids. */
 let uniqueId = 0;
 
+/**
+ * Object that can be used to override the default options
+ * for all of the expansion panels in a module.
+ */
+export interface MatExpansionPanelDefaultOptions {
+  /** Height of the header while the panel is expanded. */
+  expandedHeight: string;
+
+  /** Height of the header while the panel is collapsed. */
+  collapsedHeight: string;
+
+  /** Whether the toggle indicator should be hidden. */
+  hideToggle: boolean;
+}
+
+/**
+ * Injection token that can be used to configure the defalt
+ * options for the expansion panel component.
+ */
+export const MAT_EXPANSION_PANEL_DEFAULT_OPTIONS =
+    new InjectionToken<MatExpansionPanelDefaultOptions>('MAT_EXPANSION_PANEL_DEFAULT_OPTIONS');
+
 /**
  * `<mat-expansion-panel>`
  *
@@ -125,7 +148,9 @@ export class MatExpansionPanel extends CdkAccordionItem implements AfterContentI
               private _viewContainerRef: ViewContainerRef,
               // @breaking-change 8.0.0 _document and _animationMode to be made required
               @Inject(DOCUMENT) _document?: any,
-              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
+              @Inject(MAT_EXPANSION_PANEL_DEFAULT_OPTIONS) @Optional()
+                  defaultOptions?: MatExpansionPanelDefaultOptions) {
     super(accordion, _changeDetectorRef, _uniqueSelectionDispatcher);
     this.accordion = accordion;
     this._document = _document;
@@ -143,6 +168,10 @@ export class MatExpansionPanel extends CdkAccordionItem implements AfterContentI
         }
       }
     });
+
+    if (defaultOptions) {
+      this.hideToggle = defaultOptions.hideToggle;
+    }
   }
 
   /** Determines whether the expansion panel should have spacing between it and its siblings. */

src/lib/expansion/expansion.spec.ts

@@ -2,7 +2,12 @@ import {async, TestBed, fakeAsync, tick, ComponentFixture, flush} from '@angular
 import {Component, ViewChild} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {MatExpansionModule, MatExpansionPanel} from './index';
+import {
+  MatExpansionModule,
+  MatExpansionPanel,
+  MatExpansionPanelHeader,
+  MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,
+} from './index';
 import {SPACE, ENTER} from '@angular/cdk/keycodes';
 import {dispatchKeyboardEvent, createKeyboardEvent, dispatchEvent} from '@angular/cdk/testing';
 
@@ -305,6 +310,34 @@ describe('MatExpansionPanel', () => {
     expect(afterCollapse).toBe(1);
   }));
 
+  it('should be able to set the default options through the injection token', () => {
+    TestBed
+      .resetTestingModule()
+      .configureTestingModule({
+        imports: [MatExpansionModule, NoopAnimationsModule],
+        declarations: [PanelWithTwoWayBinding],
+        providers: [{
+          provide: MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,
+          useValue: {
+            hideToggle: true,
+            expandedHeight: '10px',
+            collapsedHeight: '16px'
+          }
+        }]
+      })
+      .compileComponents();
+
+    const fixture = TestBed.createComponent(PanelWithTwoWayBinding);
+    fixture.detectChanges();
+
+    const panel = fixture.debugElement.query(By.directive(MatExpansionPanel));
+    const header = fixture.debugElement.query(By.directive(MatExpansionPanelHeader));
+
+    expect(panel.componentInstance.hideToggle).toBe(true);
+    expect(header.componentInstance.expandedHeight).toBe('10px');
+    expect(header.componentInstance.collapsedHeight).toBe('16px');
+  });
+
   describe('disabled state', () => {
     let fixture: ComponentFixture<PanelWithContent>;
     let panel: HTMLElement;