<div class="form-group">
  <div
    class="input-group"
    [class.disabled]="!control.enabled"
    [class.input-number]="type === 'number'"
    [class.input-number-currency]="currency"
    [class.input-number-percentage]="percentage"
    [class.input-number-adaptive]="adaptive">
    <span class="input-group-text" #prependText>
      <ng-content select="[prependText]"></ng-content>
    </span>

    @if (label) {
      <label
        [for]="id"
        [class.active]="isActiveLabel"
        [class.input-number-label]="type === 'number'"
        [class.empty-prepend-label]="!prependText.clientWidth">
        {{ label }}
      </label>
    }

    @if (type === 'number') {
      @if (currency || percentage) {
        <span class="input-group-text fw-semibold">{{ symbol }}</span>
      }
      <input
        type="number"
        [id]="id"
        [step]="step ?? null"
        [min]="min ?? ''"
        [max]="max ?? ''"
        [class.form-control]="readonly !== 'plaintext'"
        [class.form-control-plaintext]="readonly === 'plaintext'"
        [class.is-invalid]="isInvalid"
        [class.just-validate-success-field]="isValid"
        [formControl]="control"
        [placeholder]="placeholder"
        [readonly]="isReadonly"
        [autocomplete]="autocomplete"
        [attr.aria-describedby]="id + '-description'"
        (blur)="markAsTouched()" />
      <span class="input-group-text align-buttons flex-column">
        <button type="button" class="input-number-add" [disabled]="!control.enabled" (click)="incrementNumber()">
          <span class="visually-hidden">{{ 'it.form.increase-value' | translate }}</span>
        </button>
        <button type="button" class="input-number-sub" [disabled]="!control.enabled" (click)="incrementNumber(true)">
          <span class="visually-hidden">{{ 'it.form.decrease-value' | translate }}</span>
        </button>
      </span>
    } @else {
      <input
        [id]="id"
        [type]="type"
        [max]="type === 'date' ? maxDate : undefined"
        [min]="type === 'date' ? minDate : undefined"
        [class.form-control]="readonly !== 'plaintext'"
        [class.form-control-plaintext]="readonly === 'plaintext'"
        [class.is-invalid]="isInvalid"
        [class.just-validate-success-field]="isValid"
        [formControl]="control"
        [placeholder]="placeholder"
        [readonly]="isReadonly"
        [autocomplete]="autocomplete"
        [attr.aria-describedby]="id + '-description'"
        (blur)="markAsTouched()" />
    }

    <div class="input-group-append">
      <ng-content select="[append]"></ng-content>

      <div class="input-group-text">
        <ng-content select="[appendText]"></ng-content>
      </div>
    </div>
  </div>

  @if (description) {
    <small [id]="id + '-description'" class="form-text">{{ description }}</small>
  }

  @if (isInvalid) {
    <div class="form-feedback just-validate-error-label" [id]="id + '-error'">
      <div #customError>
        <ng-content select="[error]"></ng-content>
      </div>
      @if (!customError.hasChildNodes()) {
        {{ invalidMessage | async }}
      }
    </div>
  }
</div>
