@if (formControl) {
  <div class="w-edit-input-textarea-field">
    <div class="flex flex-column w-edit-input-textarea-height">
      @if (showLabel) {
        <w-input-label [label]="label" [required]="required" [message]="message" [disabled]="disabled" [size]="size" [tooltip]="tooltip" [tooltipPosition]="tooltipPosition" [validated]="isRequiredValid()"></w-input-label>
      }
      <textarea   pTextarea
                    [ngClass]="{'w-edit-input-textarea-small-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',
                                'w-edit-input-textarea-small-valid': formControl.valid && formControl.touched && successMessage != '',
                                'w-edit-input-textarea-small-warning': formControl.invalid && (formControl.hasError('minlength') || formControl.hasError('maxlength') || formControl.hasError('pattern')),
                                'flex flex-1 h-max': !autoResize}"
        [autoResize]="autoResize"
        [rows]="rows"
        class="w-edit-input-textarea-small"
        id="w-textarea"
        [placeholder]="placeholder"
        [required]="required"
        [formControl]="formControl">
      </textarea>
    </div>
    @if(formControl.invalid && formControl.hasError('maxlength')){ <span class="w-input-alert-message w-full w-input-warning-alert-text p-error block">{{maxlengthErrorDescription}}</span> }
    @if(formControl.invalid && formControl.hasError('minlength')){ <span class="w-input-alert-message w-full w-input-warning-alert-text p-error block">{{minlengthErrorDescription}}</span> }
    @if(formControl.invalid && formControl.hasError('pattern')){ <span class="w-input-alert-message w-full w-input-warning-alert-text p-error block">{{patternErrorDescription}}</span> }
    @if(formControl.hasError('required') && formControl.dirty){ <span class="w-input-alert-message w-full w-input-error-alert-text p-error block">{{requiredErrorDescription}}</span> }
  </div>
} @else {
  <ng-template #noNgControl>
    <div class="flex flex-column w-edit-input-textarea-height">
      @if (showLabel) {
        <w-input-label [label]="label" [required]="required" [message]="message" [disabled]="disabled" [size]="size" [tooltip]="tooltip" [tooltipPosition]="tooltipPosition" [validated]="isRequiredValidNgModel()"></w-input-label>
      }
      <textarea   pTextarea
        [disabled]="disabled"
        minlength="{{minlength}}"
        maxlength="{{maxlength}}"
        pattern="{{pattern}}"
        [autoResize]="autoResize"
        [required]="required"
        [rows]="rows"
        class="flex flex-1 h-max w-edit-input-textarea-small"
        id="w-textarea"
        [placeholder]="placeholder"
        [required]="required"
        [(ngModel)]="value"
        (input)="onValueChanged()"
        [disabled]="disabled">
      </textarea>
    </div>
  </ng-template>
}