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

Fluid Design System Angular

<nj-form-item
  [hasError]="hasError"
  [hasSuccess]="hasSuccess"
  [hasHint]="hasHint"
  [isDisabled]="isDisabled"
  [hasCustomIcon]="hasCustomIcon"
  [isFloatingLabel]="isFloatingLabel"
  [iconName]="iconName"
  [isSelect]="true"
  [additionalClass]="getAdditionalClass()"
  [inputId]="inputId"
  [size]="size"
  (keydown)="handleKeydownEvent($event)"
  (focusout)="handleFocusout($event)"
>
  <input
    #input
    type="text"
    (input)="handleInputEvent($event)"
    (focus)="_onTouched?.()"
    [value]="selectedValue?.label"
    [attr.id]="inputId"
    [disabled]="isDisabled"
    autocomplete="off"
    njFormField
    role="combobox"
    aria-autocomplete="list"
    [attr.aria-activedescendant]="focusedItemId"
    [attr.aria-controls]="getListId()"
    [attr.aria-expanded]="isOpen"
    [attr.aria-describedby]="getInstructionsId()"
    (click)="handleInputClick()"
  />

  <ng-content njFormLabel select="[njFormLabel]"></ng-content>

  <ng-content njFormSubscript select="[njFormSubscript]"></ng-content>

  <ng-container njFormAdditionalContent>
    <div class="nj-sr-only" aria-live="polite" aria-atomic="true">
      <p>{{ liveZoneContent }}</p>
    </div>

    <p [id]="getInstructionsId()" hidden>{{ inputInstructions }}</p>

    <nj-list-group
      [@transformList]="isOpen ? 'open': 'void'"
      *ngIf="isOpen"
      class="nj-form-item__list nj-form-item__list--no-animate"
      [ngClass]="{ 'nj-form-item__list--appended': appendTo }"
      [isDense]="true"
      [hasBorder]="false"
      [isClickable]="true"
      [listId]="getListId()"
      isCustomSelectList
      [ariaLabel]="listLabel"
      #optionsList
      (keydown)="appendTo ? handleKeydownEvent($event) : null"
      (focusout)="appendTo ? handleFocusout($event) : null"
    >
      <ng-content select="[njAutocompleteAdditional]"> </ng-content>

      <!-- Number of suggestions  -->
      <ng-container
        *ngIf="isFiltered && showNumberOfResults && filteredData?.length"
      >
        <ng-container
          [ngTemplateOutlet]="
            searchResultsTemplate ? searchResultsTemplate : defaultSearchResults
          "
          [ngTemplateOutletContext]="{
            numberOfFilteredData: filteredData.length
          }"
        ></ng-container>
      </ng-container>

      <!-- No suggestions -->
      <ng-container
        *ngIf="isFiltered && showNoResultsMessage && !filteredData?.length"
      >
        <ng-container
          [ngTemplateOutlet]="
            noResultTemplate ? noResultTemplate : defaultNoResults
          "
        ></ng-container>
      </ng-container>

      <!-- Suggestion items -->
      <ng-container *ngIf="filteredData">
        <li
          nj-list-item
          *ngFor="
            let option of filteredData;
            index as i;
            trackBy: trackByOption
          "
          [isActive]="i === activeIndex"
          [ariaSelected]="i === focusIndex"
          role="option"
          tabindex="-1"
          [id]="getItemId(i)"
          #item
          (itemClick)="selectItem(option)"
        >
          <ng-container
            [ngTemplateOutlet]="
              optionLabelTemplate ? optionLabelTemplate : defaultLabel
            "
            [ngTemplateOutletContext]="{ option: option }"
          ></ng-container>
        </li>
      </ng-container>
    </nj-list-group>
  </ng-container>
</nj-form-item>

<ng-template #defaultLabel let-option="option">
  <span
    *ngIf="isFiltered"
    njHighlight
    [content]="option?.label"
    [textToHighlight]="searchText"
  ></span>
  <span *ngIf="!isFiltered">{{ option?.label }}</span>
</ng-template>

<ng-template
  #defaultSearchResults
  let-numberOfFilteredData="numberOfFilteredData"
>
  <p class="nj-form-item__list-item-hint" aria-hidden="true">
    {{ numberOfFilteredData }} {{ resultsNumberMessage }}
  </p>
</ng-template>

<ng-template #defaultNoResults>
  <p class="nj-form-item__list-item-hint" aria-hidden="true">
    {{ noResultMessage }}
  </p>
</ng-template>