Panel header

Main parts of panel-header

Panel header consits of 3 configurable parts:

• one or more tabs which are used to title panel component or its subsections.
• main action button (optional)
• drop-down menu of additional panel actions

Tabs

• configured by panelTabs input as a single translation string [panelTabs]="'COMPOSITIONS'" or comma-separated ones [panelTabs]="'catalogue,url,file'"
• atempt to translate each tab title will be made using 'PANEL_HEADER' translation module. If the translation is not defined on this module use translationModule input to override the value

  @Input({transform: toArray}) panelTabs: string[];

  @Input() translationModule: string = 'PANEL_HEADER';

• active tab is determined by the value of @Input() selectedTab$: BehaviorSubject<string>;. Selecting a tab emmits a new value to the provided subject

Buttons (actions)

• Buttons are provided via projected content.

• Main button is not hidden in a dropdown and provides easy access of an action. Projected via <ng-content select="[mainButton]"/> eg. needs mainButton directive to be indentified

• extra-buttons are projected via <ng-content select="extra-buttons"/> eg. as a part of extra-buttons element. As projected content is placed inside of the ng-bootstrap dropdown it is expected that each action wil have dropdown-item class.

<hs-panel-header name="custom" [panelTabs]="'My Cool Panel'" [translationModule]="''">
  <button mainButton [disabled]="!hsConfig.panelsEnabled['custom']"
     class="btn btn-sm btn-outline-primary"
      (click)="mainButtonAction()"> {{'PANEL_HEADER.CUSTOM' | translateHs}}
      <i class="glyphicon icon-save-floppy"></i>
  </button>
  <extra-buttons>
      <a class="dropdown-item" (click)="actionA()">
          <i class="icon-fatredo"></i>&nbsp;{{'CUSTOM.actionA' | translateHs}}
      </a>
      <a class="dropdown-item" (click)="actionB()">
          <i class="icon-plus"></i>&nbsp;{{'CUSTOM.actionB'|translateHs}}
      </a>
  </extra-buttons>
</hs-panel-header>