<ion-grid [ngClass]="{'disabled-field': formControl.disabled}">
  <ion-row>
    <ion-col size="12" size-md="6">
      <ion-item lines="none">
                <ion-label [position]="to.labelPosition" [ngStyle]="{
                   'margin-left': props?.boxBorder ? '15%' : 'auto',
                   'max-width': 'none'
                 }">
          <span>{{to.label}}</span>
          @if (to.required && to.hideRequiredMarker !== true) {
            <span>*</span>
          }
          @if (to.description) {
            <span><br /><small>{{ to.description }}</small></span>
          }
        </ion-label>
      </ion-item>
    </ion-col>
    <ion-col size="12" size-md="6">

      <ion-item lines="none" style="align-items: baseline;" class="ion-no-padding input-box-wrapper"
        [ngClass]="{'input-box': props.boxBorder}" [ngStyle]="borderBottomColor">
        @if (to.prefix) {
          <span [style.color]="'var(--ion-color-text)'">{{to.prefix}}</span>
        }
        <ion-input [formControl]="formControl" (ionFocus)="setFocus(true)" (ionBlur)="setFocus(false)"
          [type]="props.type || 'text'" [formlyAttributes]="field" text-left>
        </ion-input>
      </ion-item>

      @if (showError) {
        <ion-item lines="none">
          <ion-label class="ion-text-wrap">
            <ion-text class="ion-font-size-smaller" color="danger">
              <formly-validation-message [field]="field"></formly-validation-message>
            </ion-text>
          </ion-label>
        </ion-item>
      }

      @if (props.checkbox) {
        <ion-checkbox class="ion-padding-top" color="primary" alignment="start"
          labelPlacement="end" [checked]="props.checkbox.value"
          (ionChange)="onCheckboxChange($event.detail.checked)">
          {{ props.checkbox.label }}
        </ion-checkbox>
      }
    </ion-col>
  </ion-row>
</ion-grid>
