<div
  class="pa-field"
  [style.--label-width]="labelWidth">
  <div
    class="pa-field-container"
    [class.no-internal-label]="noLabel"
    [class.pa-focus]="hasFocus"
    [class.pa-disabled]="disabled || readonly"
    [class.pa-readonly]="readonly"
    [class.pa-field-error]="control.dirty && control.invalid">
    <textarea
      #htmlInput
      class="pa-field-control pa-field-textarea"
      [class.pa-field-control-filled]="isFilled"
      [class.pa-text-area-resizable]="resizable"
      [formControl]="control"
      [id]="id"
      [attr.name]="name"
      [attr.autocomplete]="noAutoComplete ? 'off' : undefined"
      [attr.placeholder]="placeholder"
      [attr.maxlength]="maxlength"
      [attr.aria-describedby]="describedById"
      [readonly]="readonly"
      [paTextareaAutoHeight]="autoHeight"
      [paTextareaMaxHeight]="autoMaxHeight"
      [attr.rows]="rows"
      [paInputFormatter]="sanitizeHtmlTags"
      (blur)="onBlur()"
      (keyup)="onKeyUp($event)"
      (focus)="onFocus($event)"
      (mousedown)="hasFocus = true"></textarea>
    <label
      class="pa-field-label"
      [for]="id"
      aria-hidden="true">
      <ng-content></ng-content>
    </label>
  </div>

  <pa-form-field-hint
    [id]="describedById"
    [help]="help"
    [errors]="control.errors"
    [showErrors]="control.dirty"
    [showAllErrors]="showAllErrors"
    [errorMessages]="errorMessages"></pa-form-field-hint>

  <div class="expand">
    <pa-button
      aspect="basic"
      icon="fullscreen"
      size="small"
      [disabled]="disabled"
      (click)="expand()">
      {{ 'generic.expand' | translate }}
    </pa-button>
  </div>
</div>
