<div class="ui-select" [ngClass]="{'ui-select--invalid': uiInvalid}">
  <div class="ui-select__input-wrapper">
    <digi-form-label
      [afLabel]="uiLabel"
      [afAnnounceIfOptional]="uiAnnounceIfOptional"
      [afRequired]="uiRequired"
      [afFor]="uiId"
      [afDescription]="uiDescription"
    ></digi-form-label>
    <div class="ui-select__select-wrapper">
      <select
        class="ui-select__select"
        [ngClass]="{'ui-select__select--invalid': uiInvalid}"
        [attr.id]="uiId"
        [attr.name]="name"
        [attr.required]="uiRequired"
        (change)="checkForChange($event.target.value)"
      >
        <option
          *ngIf="uiPlaceholder"
          [selected]="!currentValue"
          class="ui-select__option ui-select__option--placeholder"
          disabled
          value=""
        >
          {{uiPlaceholder}}
        </option>
        <option
          *ngFor="let option of uiOptions"
          [selected]="option.value === currentValue"
          [attr.value]="option.value"
          class="ui-select__option"
        >
          {{option.name}}
        </option>
      </select>
      <digi-icon-arrow-down aria-hidden="true" class="ui-select__icon" slot="icon"></digi-icon-arrow-down>
    </div>
  </div>
  <ui-validation-message
    [uiShowValidationMessage]="uiInvalid && uiValidationMessage"
    [uiValidationMessage]="uiValidationMessage"
  ></ui-validation-message>
</div>
