<button
  #multiselectButton
  [uiOverlayTriggerFor]="overlay"
  [uiOverlayPositions]="overlayPositions"
  [attr.id]="buttonElementId"
  [attr.aria-controls]="panelId"
  [ngClass]="{'multiselect__toggle-btn--invalid': isInvalid && showValidation}"
  type="button"
  class="multiselect__toggle-btn"
>
  <span class="multiselect__toggle-btn__text">{{multiselectTitle}}</span>
  <digi-icon-arrow-down aria-hidden="true" class="multiselect__toggle-btn__arrow-down"></digi-icon-arrow-down>
  <span class="msfa__a11y-sr-only"> Filtrera på {{multiselectTitle}}. </span>
</button>

<ui-overlay #overlay>
  <div class="multiselect__overlay-content" [attr.id]="panelId" cdkTrapFocus cdkTrapFocusAutoCapture>
    <ui-multiselect-panel
      [availableOptions]="availableOptions"
      [selectedOptions]="selectedOptions"
      [overlayRef]="overlay"
      [multiselectTitle]="multiselectTitle"
      [confirmButtonText]="confirmButtonText"
      (selectedOptionsChange)="emitSelectedOptions($event)"
    ></ui-multiselect-panel>
  </div>
</ui-overlay>

<div class="msfa__a11y-sr-only" aria-live="polite">
  <span *ngIf="selectedOptions"
    >Antal valda {{multiselectTitle.toLocaleLowerCase()}} är {{selectedOptions.length}}</span
  >
</div>
<div class="msfa__a11y-sr-only" aria-live="polite">
  <ul *ngFor="let option of selectedOptions">
    <li>{{option.label}}</li>
  </ul>
</div>
