src/app/shared/select/components/select.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
 -------------------------------------------------------------------------------->

<button #dropDown="appDropDown"
        #toggleButtonRef
        (click)="toggle()"
        (keydown)="onKeyDown($event)"
        [appConnectedPositions]="connectedPositions"
        [appDisabled]="appDisabled || !(appOptions?.length > 0)"
        [appDropDown]="optionsRef"
        [class.select-toggle-opened-bottom]="dropDown?.position?.panelClass === 'bottom'"
        [class.select-toggle-opened-top]="dropDown?.position?.panelClass === 'top'"
        [disabled]="appDisabled"
        [id]="appId"
        class="select-toggle openk-input"
        type="button">

  <span *ngIf="(appOptions | selected: appValue)?.value != null; else placeholderRef" class="select-toggle-text">
      {{(appOptions | selected: appValue)?.label }}
  </span>

  <ng-template #placeholderRef>
    <span class="select-toggle-text select-toggle-text-placeholder"> {{appPlaceholder}} </span>
  </ng-template>

  <mat-icon [class.select-toggle-icon-opened]="dropDown.isOpen"
            class="select-toggle-icon">
    play_arrow
  </mat-icon>

</button>

<ng-template #optionsRef>
  <div (focusin)="toggleButtonRef.focus()"
       (keydown)="onKeyDown($event)"
       [class.select-options-bottom]="dropDown?.position?.panelClass === 'bottom'"
       [class.select-options-top]="dropDown?.position?.panelClass === 'top'"
       class="select-options"
       tabindex="0">
    <div (click)="onClickOnOption(option?.value)"
         *ngFor="let option of appOptions"
         [class.select-options-button-selected]="appValue != null && option?.value === appValue"
         class="select-options-button openk-button">
      <span class="select-options-button-label">
        {{option?.label}}
      </span>
    </div>
  </div>
</ng-template>