<!-- relative ui -->
<!-- ui if label is provided-->
<ng-container *ngIf="title">
  <ion-item (click)="showOptions()" lines="none" color="light">
    <ion-label>
      <h2 class="title">{{title}}</h2>
    </ion-label>
    <ion-label slot="end" class="info-container">
      <p color="primary" class="info" *ngIf="!selectedOption">{{placeHolder}}</p>
      <p color="primary" class="info" *ngIf="selectedOption">{{selectedOption.label}}</p>
    </ion-label>
    <ion-icon color="medium" name="arrow-dropdown" slot="end" mode="md"></ion-icon>
  </ion-item>
</ng-container>

<!-- centered ui if label not provided-->
<ng-container *ngIf="!title">
  <ion-item (click)="showOptions()" lines="none" color="light">
    <p [ngClass]="direction == 'rtl' ? 'centered-info-right' : 'centered-info-left'">
      {{selectedOption ? selectedOption.label : placeHolder }}</p>
    <ion-icon  name="arrow-dropdown" mode="md" color="medium"
      [ngClass]="direction == 'rtl' ? 'centered-icon-right' : 'centered-icon-left'"></ion-icon>
  </ion-item>
</ng-container>