@engie-group/fluid-design-system-angular/src/components/select/select.component.html

Fluid Design System Angular

<nj-form-item
  [hasError]="hasError"
  [hasSuccess]="hasSuccess"
  [hasHint]="hasHint"
  [isDisabled]="isDisabled"
  [hasCustomIcon]="hasCustomIcon"
  [isFloatingLabel]="isFloatingLabel"
  [iconName]="iconName"
  [size]="size"
  [isSelect]="true"
  [additionalClass]="getAdditionalClass()"
  [inputId]="inputId"
  (focusout)="handleFocusout($event)"
>
  <input
    type="text"
    readonly
    [value]="selectedLabel"
    [attr.id]="inputId"
    [disabled]="isDisabled"
    tabindex="-1"
    aria-hidden="true"
    njFormField
  />
  <ng-content njFormLabel select="[njFormLabel]"></ng-content>
  <ng-content njFormSubscript select="[njFormSubscript]"></ng-content>
  <ng-container njFormAdditionalContent>
    <div
      *ngIf="selectedValue && customLabel?.templateRef"
      #customLabelEl
      class="nj-form-item__custom-label"
      aria-hidden="true"
      njFormField>
      <ng-container [ngTemplateOutlet]="customLabel.templateRef"
                    [ngTemplateOutletContext]="customLabelContext"></ng-container>
    </div>
    <p [id]="getInstructionsId()" hidden>{{ listNavigationLabel }}</p>
    <button
      #button
      type="button"
      class="nj-form-item__custom-list-button"
      aria-haspopup="listbox"
      [attr.aria-expanded]="isOpen"
      role="combobox"
      [attr.aria-label]="buttonLabel"
      [attr.tabindex]="isOpen ? -1 : null"
      [attr.aria-describedby]="getDescriptionId()"
      (click)="toggleIsOpen()"
    ></button>
    <nj-list-group
      class="nj-form-item__list nj-form-item__list--no-animate"
      [hidden]="!isOpen"
      [@transformList]="isOpen ? 'open': 'void'"
      [isDense]="true"
      [hasBorder]="false"
      [isClickable]="true"
      [isCustomSelectList]="true"
      tabindex="-1"
      [ariaLabel]="fieldLabel"
      (keydown)="handleListKeydown($event)"
    >
      <ng-content select="[njSelectOptions]"></ng-content>
    </nj-list-group>
  </ng-container>
</nj-form-item>