@let poHelper = setHelper(label, additionalHelpTooltip);
<po-field-container
  [p-disabled]="isDisabled"
  [p-id]="id"
  [p-label]="label"
  [p-optional]="optional"
  [p-required]="required"
  [p-show-required]="showRequired"
  [p-helper]="label ? poHelper.helperSettings : undefined"
  [p-show-helper]="label ? displayAdditionalHelp : undefined"
  [p-size]="size"
  [p-text-wrap]="labelTextWrap()"
>
  <div class="po-field-container-content po-field-container-input" [attr.p-size]="size">
    @if (icon) {
      <div class="po-field-icon-container-left">
        <po-icon
          class="po-field-icon po-icon-input"
          [class.po-field-icon-disabled]="isDisabled"
          [class.po-field-icon-aa]="size === 'small'"
          [p-icon]="icon"
        ></po-icon>
      </div>
    }

    <input
      #inp
      class="po-input"
      [attr.data-focused-element]="!isDisabled"
      [attr.data-inactive-component]="isDisabled || readonly"
      [attr.max]="max"
      [attr.min]="min"
      [attr.name]="name"
      [autocomplete]="autocomplete"
      [ngClass]="{
        'po-input-icon-left': icon && size !== 'small',
        'po-input-icon-left-aa': icon && size === 'small',
        'po-input-icon-right': (clean || loading) && size !== 'small',
        'po-input-icon-right-aa': (clean || loading) && size === 'small'
      }"
      [class.po-input-aa]="size === 'small'"
      [disabled]="isDisabled"
      [id]="id"
      [placeholder]="isDisabled ? '' : placeholder"
      [readonly]="readonly"
      [required]="required"
      inputmode="decimal"
      type="text"
      (blur)="onBlur($event)"
      (focus)="onFocus($event)"
      (input)="onInput($event)"
      (keypress)="onKeyPress($event)"
      (keydown)="onKeyDown($event)"
    />

    <div class="po-field-icon-container-right">
      @if (loading) {
        <po-loading-icon [p-size]="mapSizeToIcon(size)"></po-loading-icon>
      }

      @if (!loading && clean && !isDisabled && !readonly) {
        <po-clean class="po-icon-input" [p-element-ref]="inputEl" [p-size]="size" (p-change-event)="clear($event)">
        </po-clean>
      }
    </div>
    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {
      <po-helper
        #helperEl
        class="po-field-helper-button"
        [p-size]="size"
        [p-helper]="poHelper.helperSettings"
        [p-disabled]="isDisabled"
        [p-append-in-body]="appendBox"
      >
      </po-helper>
    }
  </div>

  @if (!readonly) {
    <po-field-container-bottom
      [p-append-in-body]="appendBox"
      [p-help]="help"
      [p-disabled]="isDisabled"
      [p-error-limit]="errorLimit"
      [p-error-pattern]="getErrorPatternMessage()"
      [p-size]="size"
    ></po-field-container-bottom>
  }
</po-field-container>