<div class="mb-3">
  <label class="form-label" [for]="inputId">{{title}}</label>
  <div class="input-group" [class.is-invalid]="error">
    <input #inputField [type]="showReveal && textVisible ? 'text' : 'password'" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (focus)="onFocus()" (focusout)="onFocusOut()" (change)="onChange(value)" [disabled]="disabled" [autocomplete]="autocomplete">
    @if (showReveal) {
      <button type="button" class="btn btn-outline-secondary" (click)="toggleVisibility()" i18n-title title="Show password" [disabled]="disabled || disableRevealToggle">
        <i-bs name="eye"></i-bs>
      </button>
    }
  </div>
  <div class="invalid-feedback">
    {{error}}
  </div>
  @if (hint) {
    <small class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
  }
</div>
