<ion-item (click)="onSelectItem()" [disabled]="formControl.disabled" [button]="!formControl.disabled">
  <ion-label [position]="to.labelPosition" style="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>
  @if (displayType === 'boolean') {
    <div>
      <ion-checkbox [checked]="model[pathToDisplayValue]" disabled="true"></ion-checkbox>
    </div>
  } @else {
    <ion-text>{{getValue()}}</ion-text>
    <ion-icon name="caret-down-outline"></ion-icon>
  }
</ion-item>

<!-- TODO same as in form-field wrapper; maybe extract error message into separate wrapper -->
@if (showError) {
  <ion-item lines="none">
    <ion-label>
      <ion-text color="danger">
        <p>
          <formly-validation-message [field]="field"></formly-validation-message>
        </p>
      </ion-text>
    </ion-label>
  </ion-item>
}
