@engie-group/fluid-design-system-angular/src/components/multi-select/multi-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
    #input
    type="text"
    readonly
    [value]="formattedInputValue"
    [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>
    <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()">
      <span class="nj-sr-only">{{buttonLabel}}</span>
    </button>
    <div class="nj-form-item__selected-tags" (click)="toggleIsOpen()">
      <ng-container *ngIf="selectIndexAsArray?.length as numOfSelected">
        <ng-container *ngIf="displaySelectedItems">
          <nj-tag *ngFor="let optionIndex of selectedIndexesToShow; let i = index"
                  #tags
                  [variant]="tagColor"
                  [size]="tagSize"
                  [isClosable]="true"
                  [shouldAutoDestruct]="false"
                  [closeLabel]="getTagCloseLabel(optionIndex)"
                  (closeClick)="toggleByIndex($event, optionIndex, i)">
            {{getLabelAtIndex(optionIndex)}}
          </nj-tag>
          <nj-tag *ngIf="maxTagsToDisplay && numOfSelected > maxTagsToDisplay"
                  [variant]="tagColor"
                  [size]="tagSize">
            +{{numOfSelected - maxTagsToDisplay}}
          </nj-tag>
        </ng-container>
        <ng-container *ngIf="!displaySelectedItems">
          <nj-tag
            *ngIf="numOfSelected === 1"
            [variant]="tagColor"
            [size]="tagSize"
            [isClosable]="true"
            [shouldAutoDestruct]="false"
            [closeLabel]="getTagCloseLabel(selectIndexAsArray?.[0])"
            (closeClick)="toggleByIndex($event, selectIndexAsArray?.[0], 0)">
            {{getLabelAtIndex(selectIndexAsArray?.[0])}}
          </nj-tag>
          <nj-tag
            *ngIf="numOfSelected > 1"
            [variant]="tagColor"
            [isClosable]="true"
            [shouldAutoDestruct]="false"
            [size]="tagSize"
            [closeLabel]="tagResetSelectionLabel"
            (closeClick)="resetSelection($event)">
            {{numOfSelected}} {{selectedText}}
          </nj-tag>
        </ng-container>
      </ng-container>
    </div>
    <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"
      [isCheckboxList]="true"
      tabindex="-1"
      [ariaLabel]="fieldLabel"
      (keydown)="handleListKeydown($event)"
    >
      <ng-content select="[njSelectOptions]"></ng-content>
    </nj-list-group>
  </ng-container>
</nj-form-item>