<div
  class="dropdown dropdown--animated"
  [ngClass]="{ open: isExpanded, show: isExpanded, dropup: isUp }"
  (blur)="isExpanded = false">
  <!-- dropdown trigger -->
  <button
    class="btn dropdown-toggle"
    type="button"
    aria-haspopup="true"
    [attr.aria-controls]="generatedId"
    [attr.aria-expanded]="isExpanded"
    [attr.aria-labelledby]="labelId ? labelId : null"
    (click)="toggleDropdown()"
    (keydown)="onKeydown($event)"
    #toggler>
    {{ togglerLabel || ('Action.Choose' | translate) }}
  </button>

  <!-- dropdown menu -->
  <div
    class="dropdown-menu"
    id="{{ generatedId }}"
    [attr.aria-hidden]="!isExpanded"
    [ngClass]="{ show: isExpanded }"
    *ngIf="isExpanded"
    @toggleVertically>
    <!-- animation -->

    <ul class="dropdown__list" role="menu">
      <li
        class="dropdown-item"
        role="menuitem"
        *ngFor="let item of options; let i = index"
        [ngClass]="{
          active: i === selectedIndex,
          current: i !== selectedIndex && i === currentIndex,
        }"
        (click)="selectItem(item)"
        [attr.aria-selected]="i === selectedIndex"
        (mouseenter)="currentIndex = i"
        (mouseleave)="currentIndex = this.selectedIndex">
        {{ item.label ? item.label : item }}
      </li>
    </ul>
  </div>
</div>
