<!-- Copyright (C) 2022 Robert Bosch GmbH Copyright (C) 2022 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights
reserved. -->

<div class="bci-select" [ngStyle]="{ width: width }" (keydown)="manageKeyDown($event)">
  <button
    class="bci-select-trigger"
    (click)="toggle()"
    #trigger
    [disabled]="disabled"
    attr.aria-label="Open select {{ id }}"
  >
    <span [ngClass]="{ 'bci-select-trigger-label': true, withRequiredMark: required }">{{ label }}</span>
    <div [ngClass]="{ 'bci-select-trigger-value': true, hasLabel: !!label }" class="bci-select-trigger-value">
      <div>
        <span
          [ngClass]="{ 'bci-select-trigger-placeholder': true, shouldNotScroll: panelOpen }"
          *ngIf="!value || !value.length">{{ placeholder }}</span>
        <span [ngClass]="{ 'bci-select-trigger-text': true, shouldNotScroll: panelOpen }" *ngIf="value">{{
          displaySelectedOptions
        }}</span>
      </div>
    </div>
    <div class="bci-select-trigger-panel-open-wrapper">
      <mat-icon fontIcon="bosch-ic-up" *ngIf="panelOpen"></mat-icon>
      <mat-icon fontIcon="bosch-ic-down" *ngIf="!panelOpen"></mat-icon>
    </div>
  </button>
  <ul
    *ngIf="panelOpen && !!options"
    class="bci-select-panel"
    [ngStyle]="
      panelOpensToTop
        ? {
            bottom: notificationHeight
          }
        : null
    "
    #panel
    role="listbox"
    tabindex="-1"
    (mouseenter)="initActiveOption(true)"
  >
    <ng-container *ngFor="let option of options">
      <span
        [ngClass]="{ 'bci-select-panel-optiongroup-label': true, disabled: getGroupForOption(option).disabled }"
        *ngIf="optionIsFirstOfGroup(option)"
        >{{ getGroupForOption(option).label }}</span
      >
      <li
        [ngClass]="{
          'bci-select-panel-option': true,
          selected: optionIsSelected(option),
          keyboardSelected: option === activeOption,
          multiple: multiple,
          disabled: option.disabled
        }"
        role="option"
        attr.aria-label="Select {{ option.viewValue }}"
        (click)="!option.disabled && onOptionClick(option.value)"
      >
        <mat-checkbox
          *ngIf="!!multiple"
          [checked]="optionIsSelected(option)"
          [disabled]="option.disabled"
        ></mat-checkbox>
        <span
          ><span class="bci-select-panel-option-text">{{ option.viewValue }}</span></span
        >
      </li>
    </ng-container>
  </ul>
  <ng-content select="mat-hint" *ngIf="_hintChildren.length > 0"></ng-content>
  <ng-content select="mat-error" *ngIf="_errorChildren.length > 0"></ng-content>
</div>
