<div class="ui-input" [ngClass]="{'ui-input--invalid': uiInvalid && uiValidationMessage}">
  <digi-form-input
    class="ui-input__input"
    [afId]="uiId"
    [afName]="uiName"
    [afLabel]="uiLabel"
    [afLabelDescription]="uiDescription"
    [afType]="uiType"
    [afVariation]="uiVariation"
    [afRequired]="uiRequired"
    [afAnnounceIfOptional]="uiAnnounceIfOptional"
    [afMin]="uiMin"
    [afMax]="uiMax"
    [afValue]="currentValue"
    [afValidation]="uiInvalid ? 'error' : 'neutral'"
    (afOnInput)="checkForChange($event.detail.target.value)"
  ></digi-form-input>
  <div class="ui-input__validation" aria-atomic="true" role="alert">
    <digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error"
      >{{uiValidationMessage}}</digi-form-validation-message
    >
  </div>
</div>
