@if (formControl) {
  <div class="w-edit-input-text-select-field p-fluid field">
    @if (showLabel) {
      <w-input-label [label]="label" [required]="required" [disabled]="disabled" [size]="size" [tooltip]="tooltip" [tooltipPosition]="tooltipPosition" [validated]="isRequiredValid()"></w-input-label>
    }
    <span [ngClass]="{'p-input-icon-right' : inputIcon != ''}">
      @if (inputIcon != '') {
        <i class="w-edit-input-text-small-icon pi {{inputIcon}}"></i>
      }
      <input pInputText
        [ngClass]="{'w-edit-input-text-small-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',
                    'w-edit-input-text-small-valid': formControl.valid && formControl.touched  && successMessage != '',
                    'w-edit-input-text-small-warning': formControl.invalid && (formControl.hasError('minlength') || formControl.hasError('maxlength') || formControl.hasError('pattern'))}"
        minlength="{{minlength}}" maxlength="{{maxlength}}" [email]="email"
        class="w-edit-input-text-small" id="w-textarea"
        [placeholder]="placeholder" [required]="required" [formControl]="formControl">
    </span>
    @if (formControl.invalid && formControl.hasError('maxlength') && formControl.touched ) {
      <span
      class="w-alert-message w-input-warning-alert-text p-error block">{{maxlengthErrorDescription}}</span>
    }
    @if (formControl.invalid && formControl.hasError('minlength') && formControl.touched ) {
      <span
      class="w-alert-message w-input-warning-alert-text p-error block">{{minlengthErrorDescription}}</span>
    }
    @if (formControl.invalid && formControl.hasError('pattern') && formControl.touched ) {
      <span
      class="w-alert-message w-input-warning-alert-text p-error block">{{patternErrorDescription}}</span>
    }
    @if (formControl.invalid && formControl.hasError('email') && formControl.dirty) {
      <span
      class="w-alert-message w-input-error-alert-text p-error block">{{emailErrorDescription}}</span>
    }
    @if (formControl.hasError('required') && formControl.dirty) {
      <span
      class="w-alert-message w-input-error-alert-text p-error block">{{requiredErrorDescription}}</span>
    }
  </div>
} @else {
  <div class="w-edit-input-text-select-field p-fluid field">
    @if (showLabel) {
      <w-input-label [label]="label" [required]="required"  [disabled]="disabled" [size]="size" [tooltip]="tooltip" [tooltipPosition]="tooltipPosition" [validated]="isRequiredValidNgModel()"></w-input-label>
    }
    <span [ngClass]="{'p-input-icon-right' : inputIcon != ''}">
      @if (inputIcon != '') {
        <i class="w-edit-input-text-small-icon pi {{inputIcon}}"></i>
      }
      <input pInputText minlength="{{minlength}}" maxlength="{{maxlength}}" pattern="{{pattern}}" [required]="required"
        class="w-edit-input-text-small" id="w-textarea"
        [placeholder]="placeholder" [required]="required" [(ngModel)]="value" (input)="onValueChanged()"
        [disabled]="disabled" [autofocus]="autofocus">
    </span>
  </div>
}