@if (formControl != null) {
  <div class="w-edit-input-number-field p-fluid field">
    @if (showLabel) {
      <w-input-label [label]="label" [required]="required" [disabled]="disabled" [size]="size" [tooltip]="tooltip" [tooltipPosition]="tooltipPosition" [validated]="isRequiredValid()"></w-input-label>
    }
    @if (getSizeName(sizeType.medium) == size) {
      <p-inputNumber
        [ngClass]="{'w-edit-input-number-medium-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',
                    'w-edit-input-number-medium-valid': formControl.valid && formControl.touched  && successMessage != '',
                    'w-edit-input-number-medium-warning': formControl.invalid && formControl.touched && (formControl.hasError('min') || formControl.hasError('max'))}"
        class="w-edit-input-number-medium w-edit-input-number-medium-height"
        styleClass="flex flex-1"
        [mode]="mode"
        [minFractionDigits]="minFractionDigits" [maxFractionDigits]="maxFractionDigits"
        [prefix]="prefix" [suffix]="suffix" [useGrouping]="useGrouping"
        id="w-textarea" [placeholder]="placeholder"
        [required]="required" [formControl]="formControl" >
      </p-inputNumber>
    }
    @if (getSizeName(sizeType.small) == size) {
      <p-inputNumber
        [ngClass]="{'w-edit-input-number-small-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',
                    'w-edit-input-number-small-valid': formControl.valid && formControl.touched  && successMessage != '',
                    'w-edit-input-number-small-warning': formControl.invalid && formControl.touched && (formControl.hasError('min') || formControl.hasError('max'))}"
        class="w-edit-input-number-small"
        styleClass="flex flex-1"
        [mode]="mode"
        [minFractionDigits]="minFractionDigits" [maxFractionDigits]="maxFractionDigits"
        [prefix]="prefix" [suffix]="suffix" [useGrouping]="useGrouping"
        id="w-textarea" [placeholder]="placeholder"
      [required]="required" [formControl]="formControl"></p-inputNumber>
    }
    <!-- <small *ngIf="formControl.valid && formControl.touched" class="w-input-success-alert-text">{{successMessage}}</small>-->
    @if (formControl.invalid && formControl.hasError('max') && formControl.touched) {
      <span
      class="w-input-alert-message w-input-warning-alert-text p-error block">{{maxErrorDescription}}</span>
    }
    @if (formControl.invalid && formControl.hasError('min') && formControl.touched) {
      <span
      class="w-input-alert-message w-input-warning-alert-text p-error block">{{minErrorDescription}}</span>
    }
    @if (formControl.hasError('required') && formControl.dirty) {
      <span
      class="w-input-alert-message w-input-error-alert-text p-error block">{{requiredErrorDescription}}</span>
    }
  </div>
} @else {
  <div class="w-edit-input-number-field p-fluid field">
    @if (showLabel) {
      <w-input-label [label]="label" [required]="required" [disabled]="disabled" [size]="size" [tooltip]="tooltip" [tooltipPosition]="tooltipPosition" [validated]="isRequiredValidNgModel()"></w-input-label>
    }
    @if (getSizeName(sizeType.medium) == size) {
      <p-inputNumber [disabled]="disabled"
        [required]="required"
        class="w-edit-input-number-medium w-edit-input-number-medium-height"
        styleClass="flex flex-1"
        [mode]="mode"
        [minFractionDigits]="minFractionDigits" [maxFractionDigits]="maxFractionDigits"
        [min]="min" [max]="max" [prefix]="prefix" [suffix]="suffix" [useGrouping]="useGrouping"
        id="w-textarea" [placeholder]="placeholder"
      [required]="required" [(ngModel)]="value" (onInput)="onValueChanged($event)" [disabled]="disabled"></p-inputNumber>
    }
    @if (getSizeName(sizeType.small) == size) {
      <p-inputNumber [disabled]="disabled"
        [required]="required"
        class="w-edit-input-number-small"
        styleClass="flex flex-1"
        [mode]="mode"
        [minFractionDigits]="minFractionDigits" [maxFractionDigits]="maxFractionDigits"
        [min]="min" [max]="max" [prefix]="prefix" [suffix]="suffix" [useGrouping]="useGrouping"
        id="w-textarea" [placeholder]="placeholder"
      [required]="required" [(ngModel)]="value" (onInput)="onValueChanged($event)" [disabled]="disabled"></p-inputNumber>
    }
  </div>
}