<ion-grid *ngIf="true" class="grid-no-padding">
  <ion-row>
    <ion-col [size]="12">
      <p>{{ 'login,enter-mobile' |translate }}</p>
    </ion-col>
  </ion-row>
  <!-- country select-->
  <ion-row>
    <ion-col [size]="12" class="column-no-padding">
      <searchable-select [placeHolder]="'general,select' | translate" [options]="options"
        (selected)="optionSelected($event)" (canceled)="optionCanceled()" [progress]="true" [default]="default">
      </searchable-select>

      <!--     
        <ion-item>
          <ion-label>{{ 'general,country' | translate}}</ion-label>
        <ion-select [(ngModel)]="selectedCountryCode" (ionChange)="countrySelected()" [placeholder]="'general,select' | translate"
          [okText]="'general,ok' | translate" [cancelText]="'general,cancel' | translate" class="large-ion-select">
          <ion-select-option *ngFor="let countryCode of codes" [value]="countryCode.countryCode">
            {{ countryCode.name}}</ion-select-option>
        >
      </ion-item>
    -->
    </ion-col>
  </ion-row>
  <!-- cber  -->
  <ion-row dir="ltr">
    <ion-col [size]="4" >
      <ion-item >
        <ion-input inputmode="tel"  [(ngModel)]="selectedDialCode" [pattern]="selectedDialCodePattern"></ion-input>
      </ion-item>
    </ion-col>
    <ion-col [size]="8" >
      <ion-item >
        <ion-input inputmode="numeric" [(ngModel)]="number" (ionChange)="numberChanged()" (ionBlur)="numberChanged()"
          [pattern]="numberPattern" [placeholder]="numberPlaceholder" [maxlength]="numberMax"></ion-input>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-grid>