Merge pull request #3 from jiarongxu/preferred-countries

add preferred countries and focus input after change country
webcat12345 · May 20, 2017 · 31e13da · 31e13da
2 parents 9b0d014 + a8119d0
commit 31e13da
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/src/ngx-intl-tel-input.component.html b/src/ngx-intl-tel-input.component.html
@@ -5,7 +5,15 @@
             <div class="iti-arrow"></div>
         </div>
         <ul class="country-list dropdown-menu" *dropdownMenu>
-            <li class="country" *ngFor="let country of allCountries" (click)="onCountrySelect(country)">
+            <li class="country" *ngFor="let country of preferredCountriesInDropDown" (click)="onCountrySelect(country, focusable)">
+                <div class="flag-box">
+                    <div class="iti-flag" [ngClass]="country.flagClass"></div>
+                </div>
+                <span class="country-name">{{country.name}}</span>
+                <span class="dial-code">+{{country.dialCode}}</span>
+            </li>
+            <li class="divider"></li>
+            <li class="country" *ngFor="let country of allCountries" (click)="onCountrySelect(country, focusable)">
                 <div class="flag-box">
                     <div class="iti-flag" [ngClass]="country.flagClass"></div>
                 </div>
@@ -18,5 +26,5 @@
            (keypress)="onInputKeyPress($event)"
            [(ngModel)]="phone_number"
            (ngModelChange)="onPhoneNumberChange()"
-           [placeholder]="selectedCountry.placeHolder">
-</div>
+           [placeholder]="selectedCountry.placeHolder" #focusable>
+</div>
diff --git a/src/ngx-intl-tel-input.component.ts b/src/ngx-intl-tel-input.component.ts
@@ -11,10 +11,12 @@ import * as _ from 'google-libphonenumber';
 })
 export class NgxIntlTelInputComponent implements OnInit {
   @Input() value = '';
+  @Input() preferredCountries: Array<string> = [];
   @Output() valueChange: EventEmitter<string> = new EventEmitter<string>();
 
   phone_number = '';
   allCountries: Array<Country> = [];
+  preferredCountriesInDropDown: Array<Country> = [];
   selectedCountry: Country = new Country();
   constructor(
       private countryCodeData: CountryCode
@@ -23,20 +25,33 @@ export class NgxIntlTelInputComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.selectedCountry = this.allCountries[0];
+    if (this.preferredCountries.length) {
+      this.preferredCountries.forEach(iso2 => {
+        let preferredCountry = this.allCountries.filter((c) => {
+          return c.iso2 === iso2;
+        });
+        this.preferredCountriesInDropDown.push(preferredCountry[0]);
+      });
+    }
+    if (this.preferredCountriesInDropDown.length) {
+      this.selectedCountry = this.preferredCountriesInDropDown[0];
+    } else {
+      this.selectedCountry = this.allCountries[0];
+    }
   }
 
   public onPhoneNumberChange(): void {
     this.value = this.selectedCountry.dialCode + this.phone_number;
     this.valueChange.emit(this.value);
   }
 
-  public onCountrySelect(country: Country): void {
+  public onCountrySelect(country: Country, el): void {
     this.selectedCountry = country;
     if (this.phone_number.length > 0) {
       this.value = this.selectedCountry.dialCode + this.phone_number;
       this.valueChange.emit(this.value);
     }
+    el.focus();
   }
 
   public onInputKeyPress(event): void {
@@ -72,5 +87,4 @@ export class NgxIntlTelInputComponent implements OnInit {
       return e;
     }
   }
-
 }
diff --git a/src/resource/intl-tel-input.css b/src/resource/intl-tel-input.css
@@ -83,6 +83,8 @@
 .intl-tel-input .country-list .divider {
     padding-bottom: 5px;
     margin-bottom: 5px;
+    background-color: transparent;
+    margin-top: 0;
     border-bottom: 1px solid #CCC; }
 .intl-tel-input .country-list .country {
     padding: 5px 10px; }