Class MatExpansionPanelHeader

src/material/expansion/expansion-panel-header.ts:59–219

  },
})
export class MatExpansionPanelHeader implements AfterViewInit, OnDestroy, FocusableOption {
  panel = inject(MatExpansionPanel, {host: true});
  private _element = inject(ElementRef);
  private _focusMonitor = inject(FocusMonitor);
  private _changeDetectorRef = inject(ChangeDetectorRef);

  private _parentChangeSubscription = Subscription.EMPTY;

  constructor() {
    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
    const panel = this.panel;
    const defaultOptions = inject<MatExpansionPanelDefaultOptions>(
      MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,
      {optional: true},
    );
    const tabIndex = inject(new HostAttributeToken('tabindex'), {optional: true});

    const accordionHideToggleChange = panel.accordion
      ? panel.accordion._stateChanges.pipe(
          filter(changes => !!(changes['hideToggle'] || changes['togglePosition'])),
        )
      : EMPTY;
    this.tabIndex = parseInt(tabIndex || '') || 0;

    // Since the toggle state depends on an @Input on the panel, we
    // need to subscribe and trigger change detection manually.
    this._parentChangeSubscription = merge(
      panel.opened,
      panel.closed,
      accordionHideToggleChange,
      panel._inputChanges.pipe(
        filter(changes => {
          return !!(changes['hideToggle'] || changes['disabled'] || changes['togglePosition']);
        }),
      ),
    ).subscribe(() => this._changeDetectorRef.markForCheck());

    // Avoids focus being lost if the panel contained the focused element and was closed.
    panel.closed
      .pipe(filter(() => panel._containsFocus()))
      .subscribe(() => this._focusMonitor.focusVia(this._element, 'program'));

    if (defaultOptions) {
      this.expandedHeight = defaultOptions.expandedHeight;
      this.collapsedHeight = defaultOptions.collapsedHeight;
    }
  }

  /** Height of the header while the panel is expanded. */
  @Input() expandedHeight!: string;

  /** Height of the header while the panel is collapsed. */
  @Input() collapsedHeight!: string;

  /** Tab index of the header. */
  @Input({
    transform: (value: unknown) => (value == null ? 0 : numberAttribute(value)),
  })