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

Fluid Design System Angular

<div class="nj-form-item"
     [class.nj-form-item--static]="!isFloatingLabel"
     [class.nj-form-item--disabled]="isDisabled"
     [class.nj-form-item--error]="hasError"
     [class.nj-form-item--success]="hasSuccess"
     [class.nj-form-item--password]="isPassword"
     [class.nj-form-item--select]="isSelect"
     [class.nj-form-item--visible]="isVisible"
     [class.nj-form-item--textarea]="isMultiline"
     [ngClass]="[getFormItemSizeClass(), additionalClass]">
  <div class="nj-form-item__field-wrapper" (click)="wrapperClick.emit($event)">
    <ng-content select="[njFormField]"></ng-content>
    <label class="nj-form-item__label" [attr.for]="inputId" [attr.aria-hidden]="isCustomSelect() ? 'true' : null">
      <ng-content select="[njFormLabel]"></ng-content>
      <span *ngIf="isRequired" class="nj-form-item__required-asterisk">*</span>
    </label>
    <nj-icon-button
      *ngIf="isPassword"
      size="sm"
      variant="tertiary"
      [label]="passwordButtonLabel"
      [icon]="iconName || 'visibility'"
      (click)="toggleVisibility()"
      [ariaPressed]="isVisible"
      additionalClass="nj-form-item__password-button"
    >
    </nj-icon-button>
    <nj-icon class="nj-form-item__icon"
             *ngIf="!isPassword && !isMultiline && !hasCustomIcon && iconName"
             [name]="iconName"
             variant="inherit"
             (click)="iconClickHandler($event)"
             (keydown)="iconKeydownHandler($event)">
    </nj-icon>
    <div class="nj-form-item__icon" *ngIf="!isPassword && !isMultiline && hasCustomIcon" [attr.tabindex]="isIconClickable ? 0 : null"
         (click)="iconClickHandler($event)" (keydown)="iconKeydownHandler($event)">
      <ng-content select="[njFormCustomIcon]"></ng-content>
    </div>
    <p *ngIf="isPassword" class="nj-sr-only" aria-live="polite" aria-atomic="true">{{ passwordNotice }}</p>
    <ng-content select="[njFormAdditionalContent]"></ng-content>
  </div>
  <div class="nj-form-item__subscript" *ngIf="hasError || hasSuccess || hasHint" [attr.id]="getSubscriptId()">
    <nj-icon *ngIf="hasError" class="nj-form-item__subscript-icon" name="warning" size="inherit" variant="inherit"></nj-icon>
    <nj-icon *ngIf="hasSuccess && !hasError" class="nj-form-item__subscript-icon" name="check" size="inherit" variant="inherit"></nj-icon>
    <ng-content select="[njFormSubscript]"></ng-content>
  </div>
</div>