<div
  class="ui-textarea"
  [ngClass]="{'ui-textarea--invalid': uiInvalid && uiValidationMessage, 'ui-textarea--with-counter': uiMaxLength}"
>
  <digi-form-textarea
    class="ui-textarea__textarea"
    [afId]="uiId"
    [afName]="uiName"
    [afLabel]="uiLabel"
    [afLabelDescription]="uiDescription"
    [afVariation]="uiVariation"
    [afRequired]="uiRequired"
    [afAnnounceIfOptional]="uiAnnounceIfOptional"
    [afMaxlength]="uiMaxLength"
    [afMinlength]="uiMinLength"
    [afValue]="currentValue"
    [afValidation]="uiInvalid ? 'error' : 'neutral'"
    (afOnInput)="checkForChange($event.detail.target.value)"
  ></digi-form-textarea>
  <span class="ui-textarea__counter" *ngIf="uiMaxLength">{{charactersLeft}} tecken kvar</span>
  <div class="ui-textarea__validation" aria-atomic="true" role="alert">
    <digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error"
      >{{uiValidationMessage}}</digi-form-validation-message
    >
  </div>
</div>
