<div class="input-wrapper" [class.empty]="!ngControl?.value" [class.focused]="!isReadonly && (uiControl?.focused | async)">
  <!-- suffix and prefix order changed due to flex-row-reverse -->
  <span class="suffix">{{ suffix }}</span>
  <ng-content select="input, ui-select, ui-datepicker, button, ui-searchbox, textarea"></ng-content>
  <span class="prefix">{{ prefix }}</span>
  @if (label) {
    <label [for]="uiControl?.id">{{ label }}{{ requiredMark }}</label>
  }
</div>
@if (showHint && ngControl?.touched && ngControl?.errors) {
  <span class="hint">
    {{ ngControl?.errors | uiFormControlFirstError: label }}
  </span>
}
@if (showHint && isReadonly) {
  <span class="hint readonly-hint">Nicht Änderbar</span>
}
@if (
  !isReadonly && clearable && ngControl?.value && !ngControl?.disabled && !(uiControl?.type === 'radio' || uiControl?.type === 'checkbox')
  ) {
  <button
    class="ui-form-control-clear clear"
    type="button"
    (click)="clear()"
    >
    <ui-icon icon="close"></ui-icon>
  </button>
}

@if (!!statusLabel && !clearable) {
  <span class="status">{{ statusLabel }}</span>
}
