src/app/shared/layout/collapsible/collapsible.component.html

<!-------------------------------------------------------------------------------
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 -------------------------------------------------------------------------------->

<div [class.collapsible-header---with-content]="appHeaderTemplateRef"
     #header [class.collapsible-header---no-color]="appSimpleCollapsible" class="collapsible-header">

  <button (click)="toggle()"
          *ngIf="!appHideButton"
          [class.not-allowed]="appDisabled"
          type="button"
          [class.collapsible-header--toggle---small]="appSimpleCollapsible"
          [disabled]="appDisabled"
          class="collapsible-header--toggle cursor-pointer">
    <mat-icon [class.collapsible-header--icon---collapsed]="isCollapsed$ | async"
              class="collapsible-header--icon">
      navigate_next
    </mat-icon>
    <span class="collapsible-header--spacing"></span>
    <span *ngIf="appTitle" class="collapsible-header--title">
      {{appTitle}}
    </span>
  </button>

  <div *ngIf="appHideButton" class="collapsible-header--toggle">
        <span *ngIf="appTitle" class="collapsible-header--title" style="margin-left: 0.25em;">
      {{appTitle}}
    </span>
  </div>

  <ng-container *ngTemplateOutlet="appHeaderTemplateRef"></ng-container>
</div>

<div #bodyElement
     (focusin)="toggle(false)" class="collapsible-body">

  <ng-content></ng-content>

</div>