From baa681634b7e284090d24181ab556b39dc540ba4 Mon Sep 17 00:00:00 2001 From: fe-dev Date: Tue, 24 May 2022 10:13:11 +0300 Subject: [PATCH 1/7] UI: Phone input with country flag select --- ui-ngx/package.json | 1 + .../components/phone-input.component.html | 51 + .../components/phone-input.component.scss | 60 + .../components/phone-input.component.ts | 215 +++ .../src/app/shared/models/country.models.ts | 1587 +++++++++++++++++ ui-ngx/src/app/shared/shared.module.ts | 7 +- .../assets/locale/locale.constant-en_US.json | 6 + ui-ngx/yarn.lock | 5 + 8 files changed, 1930 insertions(+), 2 deletions(-) create mode 100644 ui-ngx/src/app/shared/components/phone-input.component.html create mode 100644 ui-ngx/src/app/shared/components/phone-input.component.scss create mode 100644 ui-ngx/src/app/shared/components/phone-input.component.ts create mode 100644 ui-ngx/src/app/shared/models/country.models.ts diff --git a/ui-ngx/package.json b/ui-ngx/package.json index 4f4316fced..feef69a2c9 100644 --- a/ui-ngx/package.json +++ b/ui-ngx/package.json @@ -62,6 +62,7 @@ "leaflet-providers": "^1.13.0", "leaflet.gridlayer.googlemutant": "^0.13.4", "leaflet.markercluster": "^1.5.3", + "libphonenumber-js": "^1.10.4", "messageformat": "^2.3.0", "moment": "^2.29.1", "moment-timezone": "^0.5.34", diff --git a/ui-ngx/src/app/shared/components/phone-input.component.html b/ui-ngx/src/app/shared/components/phone-input.component.html new file mode 100644 index 0000000000..9001e04ce8 --- /dev/null +++ b/ui-ngx/src/app/shared/components/phone-input.component.html @@ -0,0 +1,51 @@ + + +
+
+
+ {{ flagIcon }} + + + {{country.flag}} + {{country.name + ' +' + country.dialCode }} + + +
+ + phone-input.phone-input-label + + + {{ 'phone-input.phone-input-required' | translate }} + + + {{ 'phone-input.phone-input-validation' | translate }} + + + {{ 'phone-input.phone-input-pattern' | translate }} + + +
+
diff --git a/ui-ngx/src/app/shared/components/phone-input.component.scss b/ui-ngx/src/app/shared/components/phone-input.component.scss new file mode 100644 index 0000000000..0145a13d62 --- /dev/null +++ b/ui-ngx/src/app/shared/components/phone-input.component.scss @@ -0,0 +1,60 @@ +/** + * Copyright © 2016-2022 The Thingsboard Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +:host ::ng-deep { + + .phone-input-container { + display: flex; + align-items: center; + + .phone-input { + width: 100%; + } + } + + .flags-select-container { + display: inline-block; + position: relative; + width: 50px; + height: 100%; + margin-right: 5px; + } + + .flag-container { + position: absolute; + font-size: 20px; + top: 50%; + left: 0; + transform: translate(0, -50%); + } + .country-select { + width: 45px; + height: 30px; + + .country-flag { + font-size: 22px; + padding-right: 10px; + } + + .mat-select-trigger { + height: 100%; + width: 100%; + } + + .mat-select-value { + visibility: hidden; + } + } +} diff --git a/ui-ngx/src/app/shared/components/phone-input.component.ts b/ui-ngx/src/app/shared/components/phone-input.component.ts new file mode 100644 index 0000000000..6618811e19 --- /dev/null +++ b/ui-ngx/src/app/shared/components/phone-input.component.ts @@ -0,0 +1,215 @@ +/// +/// Copyright © 2016-2022 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { Component, forwardRef, Input, OnInit } from '@angular/core'; +import { + ControlValueAccessor, + FormBuilder, + FormControl, + FormGroup, + NG_VALIDATORS, + NG_VALUE_ACCESSOR, + ValidationErrors, + Validator, + ValidatorFn, + Validators +} from '@angular/forms'; +import { TranslateService } from '@ngx-translate/core'; +import { Country, CountryData } from '@shared/models/country.models'; +import examples from 'libphonenumber-js/examples.mobile.json'; +import { CountryCode, getExampleNumber, parsePhoneNumberFromString } from 'libphonenumber-js'; +import { phoneNumberPattern } from '@shared/models/settings.models'; +import { Subscription } from 'rxjs'; + +@Component({ + selector: 'tb-phone-input', + templateUrl: './phone-input.component.html', + styleUrls: ['./phone-input.component.scss'], + providers: [ + CountryData, + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => PhoneInputComponent), + multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => PhoneInputComponent), + multi: true + } + ] +}) +export class PhoneInputComponent implements OnInit, ControlValueAccessor, Validator { + + @Input() disabled: boolean; + @Input() defaultCountry: CountryCode = 'US'; + @Input() enableFlagsSelect = true; + @Input() required = true; + + allCountries: Array = []; + phonePlaceholder: string; + countryCallingCode: string; + flagIcon: string; + + phoneNumberPattern = phoneNumberPattern; + + private modelValue: string; + public phoneFormGroup: FormGroup; + private valueChange$: Subscription = null; + private propagateChange = (v: any) => { }; + + constructor(private translate: TranslateService, + private fb: FormBuilder, + private countryCodeData: CountryData) { + } + + ngOnInit(): void { + if (this.enableFlagsSelect) { + this.fetchCountryData(); + } + this.phoneFormGroup = this.fb.group({ + country: [this.defaultCountry, []], + phoneNumber: [ + this.countryCallingCode, + this.required ? [Validators.required, Validators.pattern(phoneNumberPattern), this.validatePhoneNumber()] : [] + ] + }); + + this.valueChange$ = this.phoneFormGroup.get('phoneNumber').valueChanges.subscribe(() => { + this.updateModel(); + }); + + this.phoneFormGroup.get('country').valueChanges.subscribe(value => { + if (value) { + const code = this.countryCallingCode; + this.getFlagAndPhoneNumberData(value); + let phoneNumber = this.phoneFormGroup.get('phoneNumber').value; + if (code !== this.countryCallingCode && phoneNumber) { + phoneNumber = phoneNumber.replace(code, this.countryCallingCode); + } else { + phoneNumber = this.countryCallingCode; + } + this.phoneFormGroup.get('phoneNumber').patchValue(phoneNumber); + } + }); + + this.phoneFormGroup.get('phoneNumber').valueChanges.subscribe(value => { + if (value) { + const parsedPhoneNumber = parsePhoneNumberFromString(value); + const country = this.phoneFormGroup.get('country').value; + if (parsedPhoneNumber?.country && parsedPhoneNumber?.country !== country) { + this.phoneFormGroup.get('country').patchValue(parsedPhoneNumber.country, {emitEvent: true}); + } + } + }); + } + + ngOnDestroy() { + if (this.valueChange$) { + this.valueChange$.unsubscribe(); + } + } + + getFlagAndPhoneNumberData(country) { + if (this.enableFlagsSelect) { + this.flagIcon = this.getFlagIcon(country); + } + this.getPhoneNumberData(country); + } + + getPhoneNumberData(country): void { + const phoneData = getExampleNumber(country, examples); + this.phonePlaceholder = phoneData.number; + this.countryCallingCode = '+' + phoneData.countryCallingCode; + } + + getFlagIcon(countryCode) { + const base = 127462 - 65; + return String.fromCodePoint(...countryCode.split('').map(country => base + country.charCodeAt(0))); + } + + validatePhoneNumber(): ValidatorFn { + return (c: FormControl) => { + const phoneNumber = c.value; + if (phoneNumber) { + const parsedPhoneNumber = parsePhoneNumberFromString(phoneNumber); + if (!parsedPhoneNumber?.isValid() || !parsedPhoneNumber?.isPossible()) { + return { + invalidPhoneNumber: { + valid: false + } + }; + } + } + return null; + }; + } + + validate(): ValidationErrors | null { + return this.phoneFormGroup.get('phoneNumber').valid ? null : { + phoneFormGroup: false + }; + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (isDisabled) { + this.phoneFormGroup.disable({emitEvent: false}); + } else { + this.phoneFormGroup.enable({emitEvent: false}); + } + } + + protected fetchCountryData(): void { + this.allCountries = []; + this.countryCodeData.allCountries.forEach((c) => { + const cc = c[1]; + const country: Country = { + name: c[0].toString(), + iso2: c[1].toString(), + dialCode: c[2].toString(), + flag: this.getFlagIcon(cc), + }; + + this.allCountries.push(country); + }); + } + + writeValue(phoneNumber): void { + this.modelValue = phoneNumber; + const country = phoneNumber ? parsePhoneNumberFromString(phoneNumber)?.country : this.defaultCountry; + this.getFlagAndPhoneNumberData(country); + this.phoneFormGroup.patchValue({phoneNumber, country}, {emitEvent: !phoneNumber}); + } + + private updateModel() { + const phoneNumber = this.phoneFormGroup.get('phoneNumber'); + if (phoneNumber.valid && this.modelValue !== phoneNumber.value) { + this.modelValue = phoneNumber.value; + this.propagateChange(this.modelValue); + } else { + this.propagateChange(null); + } + } + +} diff --git a/ui-ngx/src/app/shared/models/country.models.ts b/ui-ngx/src/app/shared/models/country.models.ts new file mode 100644 index 0000000000..a4ed4d38d9 --- /dev/null +++ b/ui-ngx/src/app/shared/models/country.models.ts @@ -0,0 +1,1587 @@ +import { Injectable } from '@angular/core'; + +export interface Country { + name: string; + iso2: string; + dialCode: string; + areaCodes?: string[]; + flag: string; +} + +export enum SearchCountryField { + DialCode = 'dialCode', + Iso2 = 'iso2', + Name = 'name', + All = 'all' +} + + +export enum CountryISO{ + Afghanistan = 'AF', + Albania = 'AL', + Algeria = 'DZ', + AmericanSamoa = 'AS', + Andorra = 'AD', + Angola = 'AO', + Anguilla = 'AI', + AntiguaAndBarbuda = 'AG', + Argentina = 'AR', + Armenia = 'AM', + Aruba = 'AW', + Australia = 'AU', + Austria = 'AT', + Azerbaijan = 'AZ', + Bahamas = 'BS', + Bahrain = 'BH', + Bangladesh = 'BD', + Barbados = 'BB', + Belarus = 'BY', + Belgium = 'BE', + Belize = 'BZ', + Benin = 'BJ', + Bermuda = 'BM', + Bhutan = 'BT', + Bolivia = 'BO', + BosniaAndHerzegovina = 'BA', + Botswana = 'BW', + Brazil = 'BR', + BritishIndianOceanTerritory = 'IO', + BritishVirginIslands = 'VG', + Brunei = 'BN', + Bulgaria = 'BG', + BurkinaFaso = 'BF', + Burundi = 'BI', + Cambodia = 'KH', + Cameroon = 'CM', + Canada = 'CA', + CapeVerde = 'CV', + CaribbeanNetherlands = 'BQ', + CaymanIslands = 'KY', + CentralAfricanRepublic = 'CF', + Chad = 'TD', + Chile = 'CL', + China = 'CN', + ChristmasIsland = 'CX', + Cocos = 'CC', + Colombia = 'CC', + Comoros = 'KM', + CongoDRCJamhuriYaKidemokrasiaYaKongo = 'CD', + CongoRepublicCongoBrazzaville = 'CG', + CookIslands = 'CK', + CostaRica = 'CR', + CôteDIvoire = 'CI', + Croatia = 'HR', + Cuba = 'CU', + Curaçao = 'CW', + Cyprus = 'CY', + CzechRepublic = 'CZ', + Denmark = 'DK', + Djibouti = 'DJ', + Dominica = 'DM', + DominicanRepublic = 'DO', + Ecuador = 'EC', + Egypt = 'EG', + ElSalvador = 'SV', + EquatorialGuinea = 'GQ', + Eritrea = 'ER', + Estonia = 'EE', + Ethiopia = 'ET', + FalklandIslands = 'FK', + FaroeIslands = 'FO', + Fiji = 'FJ', + Finland = 'FI', + France = 'FR', + FrenchGuiana = 'GF', + FrenchPolynesia = 'PF', + Gabon = 'GA', + Gambia = 'GM', + Georgia = 'GE', + Germany = 'DE', + Ghana = 'GH', + Gibraltar = 'GI', + Greece = 'GR', + Greenland = 'GL', + Grenada = 'GD', + Guadeloupe = 'GP', + Guam = 'GU', + Guatemala = 'GT', + Guernsey = 'GG', + Guinea = 'GN', + GuineaBissau = 'GW', + Guyana = 'GY', + Haiti = 'HT', + Honduras = 'HN', + HongKong = 'HK', + Hungary = 'HU', + Iceland = 'IS', + India = 'IN', + Indonesia = 'ID', + Iran = 'IR', + Iraq = 'IQ', + Ireland = 'IE', + IsleOfMan = 'IM', + Israel = 'IL', + Italy = 'IT', + Jamaica = 'JM', + Japan = 'JP', + Jersey = 'JE', + Jordan = 'JO', + Kazakhstan = 'KZ', + Kenya = 'KE', + Kiribati = 'KI', + Kosovo = 'XK', + Kuwait = 'KW', + Kyrgyzstan = 'KG', + Laos = 'LA', + Latvia = 'LV', + Lebanon = 'LB', + Lesotho = 'LS', + Liberia = 'LR', + Libya = 'LY', + Liechtenstein = 'LI', + Lithuania = 'LT', + Luxembourg = 'LU', + Macau = 'MO', + Macedonia = 'MK', + Madagascar = 'MG', + Malawi = 'MW', + Malaysia = 'MY', + Maldives = 'MV', + Mali = 'ML', + Malta = 'MT', + MarshallIslands = 'MH', + Martinique = 'MQ', + Mauritania = 'MR', + Mauritius = 'MU', + Mayotte = 'YT', + Mexico = 'MX', + Micronesia = 'FM', + Moldova = 'MD', + Monaco = 'MC', + Mongolia = 'MN', + Montenegro = 'ME', + Montserrat = 'MS', + Morocco = 'MA', + Mozambique = 'MZ', + Myanmar = 'MM', + Namibia = 'NA', + Nauru = 'NR', + Nepal = 'NP', + Netherlands = 'NL', + NewCaledonia = 'NC', + NewZealand = 'NZ', + Nicaragua = 'NI', + Niger = 'NE', + Nigeria = 'NG', + Niue = 'NU', + NorfolkIsland = 'NF', + NorthKorea = 'KP', + NorthernMarianaIslands = 'MP', + Norway = 'NO', + Oman = 'OM', + Pakistan = 'PK', + Palau = 'PW', + Palestine = 'PS', + Panama = 'PA', + PapuaNewGuinea = 'PG', + Paraguay = 'PY', + Peru = 'PE', + Philippines = 'PH', + Poland = 'PL', + Portugal = 'PT', + PuertoRico = 'PR', + Qatar = 'QA', + Réunion = 'RE', + Romania = 'RO', + Russia = 'RU', + Rwanda = 'RW', + SaintBarthélemy = 'BL', + SaintHelena = 'SH', + SaintKittsAndNevis = 'KN', + SaintLucia = 'LC', + SaintMartin = 'MF', + SaintPierreAndMiquelon = 'PM', + SaintVincentAndTheGrenadines = 'VC', + Samoa = 'WS', + SanMarino = 'SM', + SãoToméAndPríncipe = 'ST', + SaudiArabia = 'SA', + Senegal = 'SN', + Serbia = 'RS', + Seychelles = 'SC', + SierraLeone = 'SL', + Singapore = 'SG', + SintMaarten = 'SX', + Slovakia = 'SK', + Slovenia = 'SI', + SolomonIslands = 'SB', + Somalia = 'SO', + SouthAfrica = 'ZA', + SouthKorea = 'KR', + SouthSudan = 'SS', + Spain = 'ES', + SriLanka = 'LK', + Sudan = 'SD', + Suriname = 'SR', + SvalbardAndJanMayen = 'SJ', + Swaziland = 'SZ', + Sweden = 'SE', + Switzerland = 'CH', + Syria = 'SY', + Taiwan = 'TW', + Tajikistan = 'TJ', + Tanzania = 'TZ', + Thailand = 'TH', + TimorLeste = 'TL', + Togo = 'TG', + Tokelau = 'TK', + Tonga = 'TO', + TrinidadAndTobago = 'TT', + Tunisia = 'TN', + Turkey = 'TR', + Turkmenistan = 'TM', + TurksAndCaicosIslands = 'TC', + Tuvalu = 'TV', + USVirginIslands = 'VI', + Uganda = 'UG', + Ukraine = 'UA', + UnitedArabEmirates = 'AE', + UnitedKingdom = 'GB', + UnitedStates = 'US', + Uruguay = 'UY', + Uzbekistan = 'UZ', + Vanuatu = 'VU', + VaticanCity = 'VA', + Venezuela = 'VE', + Vietnam = 'VN', + WallisAndFutuna = 'WF', + WesternSahara = 'EH', + Yemen = 'YE', + Zambia = 'ZM', + Zimbabwe = 'ZW', + ÅlandIslands = 'AX', +} + +@Injectable() +export class CountryData { + public allCountries = [ + [ + 'Afghanistan', + CountryISO.Afghanistan, + '93' + ], + [ + 'Albania', + CountryISO.Albania, + '355' + ], + [ + 'Algeria', + CountryISO.Algeria, + '213' + ], + [ + 'American Samoa', + CountryISO.AmericanSamoa, + '1', + 1, + [ + '684', + ] + ], + [ + 'Andorra', + CountryISO.Andorra, + '376' + ], + [ + 'Angola', + CountryISO.Angola, + '244' + ], + [ + 'Anguilla', + CountryISO.Anguilla, + '1', + 1, + [ + '264', + ] + ], + [ + 'Antigua and Barbuda', + CountryISO.AntiguaAndBarbuda, + '1', + 1, + [ + '268', + ] + ], + [ + 'Argentina', + CountryISO.Argentina, + '54' + ], + [ + 'Armenia', + CountryISO.Armenia, + '374' + ], + [ + 'Aruba', + CountryISO.Aruba, + '297' + ], + [ + 'Australia', + CountryISO.Australia, + '61', + 0 + ], + [ + 'Austria', + CountryISO.Austria, + '43' + ], + [ + 'Azerbaijan', + CountryISO.Azerbaijan, + '994' + ], + [ + 'Bahamas', + CountryISO.Bahamas, + '1', + 1, + [ + '242', + ] + ], + [ + 'Bahrain', + CountryISO.Bahrain, + '973' + ], + [ + 'Bangladesh', + CountryISO.Bangladesh, + '880' + ], + [ + 'Barbados', + CountryISO.Barbados, + '1', + 1, + [ + '246', + ] + ], + [ + 'Belarus', + CountryISO.Belarus, + '375' + ], + [ + 'Belgium', + CountryISO.Belgium, + '32' + ], + [ + 'Belize', + CountryISO.Belize, + '501' + ], + [ + 'Benin', + CountryISO.Benin, + '229' + ], + [ + 'Bermuda', + CountryISO.Bermuda, + '1', + 1, + [ + '441', + ] + ], + [ + 'Bhutan', + CountryISO.Bhutan, + '975' + ], + [ + 'Bolivia', + CountryISO.Bolivia, + '591' + ], + [ + 'Bosnia and Herzegovina', + CountryISO.BosniaAndHerzegovina, + '387' + ], + [ + 'Botswana', + CountryISO.Botswana, + '267' + ], + [ + 'Brazil', + CountryISO.Brazil, + '55' + ], + [ + 'British Indian Ocean Territory', + CountryISO.BritishIndianOceanTerritory, + '246' + ], + [ + 'British Virgin Islands', + CountryISO.BritishVirginIslands, + '1', + 1, + [ + '284', + ] + ], + [ + 'Brunei', + CountryISO.Brunei, + '673' + ], + [ + 'Bulgaria', + CountryISO.Bulgaria, + '359' + ], + [ + 'Burkina Faso', + CountryISO.BurkinaFaso, + '226' + ], + [ + 'Burundi', + CountryISO.Burundi, + '257' + ], + [ + 'Cambodia', + CountryISO.Cambodia, + '855' + ], + [ + 'Cameroon', + CountryISO.Cameroon, + '237' + ], + [ + 'Canada', + CountryISO.Canada, + '1', + 1, + [ + '204', '226', '236', '249', '250', '289', '306', '343', '365', '387', '403', '416', + '418', '431', '437', '438', '450', '506', '514', '519', '548', '579', '581', '587', + '604', '613', '639', '647', '672', '705', '709', '742', '778', '780', '782', '807', + '819', '825', '867', '873', '902', '905' + ] + ], + [ + 'Cape Verde', + CountryISO.CapeVerde, + '238' + ], + [ + 'Caribbean Netherlands', + CountryISO.CaribbeanNetherlands, + '599', + 1 + ], + [ + 'Cayman Islands', + CountryISO.CaymanIslands, + '1', + 1, + [ + '345', + ] + ], + [ + 'Central African Republic', + CountryISO.CentralAfricanRepublic, + '236' + ], + [ + 'Chad', + CountryISO.Chad, + '235' + ], + [ + 'Chile', + CountryISO.Chile, + '56' + ], + [ + 'China', + CountryISO.China, + '86' + ], + [ + 'Christmas Island', + CountryISO.ChristmasIsland, + '61', + 2 + ], + [ + 'Cocos Islands', + CountryISO.Cocos, + '61', + 1 + ], + [ + 'Colombia', + CountryISO.Colombia, + '57' + ], + [ + 'Comoros', + CountryISO.Comoros, + '269' + ], + [ + 'Congo-Kinshasa', + CountryISO.CongoDRCJamhuriYaKidemokrasiaYaKongo, + '243' + ], + [ + 'Congo-Brazzaville', + CountryISO.CongoRepublicCongoBrazzaville, + '242' + ], + [ + 'Cook Islands', + CountryISO.CookIslands, + '682' + ], + [ + 'Costa Rica', + CountryISO.CostaRica, + '506' + ], + [ + 'Côte d’Ivoire', + CountryISO.CôteDIvoire, + '225' + ], + [ + 'Croatia', + CountryISO.Croatia, + '385' + ], + [ + 'Cuba', + CountryISO.Cuba, + '53' + ], + [ + 'Curaçao', + CountryISO.Curaçao, + '599', + 0 + ], + [ + 'Cyprus', + CountryISO.Cyprus, + '357' + ], + [ + 'Czech Republic', + CountryISO.CzechRepublic, + '420' + ], + [ + 'Denmark', + CountryISO.Denmark, + '45' + ], + [ + 'Djibouti', + CountryISO.Djibouti, + '253' + ], + [ + 'Dominica', + CountryISO.Dominica, + '1767' + ], + [ + 'Dominican Republic', + CountryISO.DominicanRepublic, + '1', + 2, + ['809', '829', '849'] + ], + [ + 'Ecuador', + CountryISO.Ecuador, + '593' + ], + [ + 'Egypt', + CountryISO.Egypt, + '20' + ], + [ + 'El Salvador', + CountryISO.ElSalvador, + '503' + ], + [ + 'Equatorial Guinea', + CountryISO.EquatorialGuinea, + '240' + ], + [ + 'Eritrea', + CountryISO.Eritrea, + '291' + ], + [ + 'Estonia', + CountryISO.Estonia, + '372' + ], + [ + 'Ethiopia', + CountryISO.Ethiopia, + '251' + ], + [ + 'Falkland Islands', + CountryISO.FalklandIslands, + '500' + ], + [ + 'Faroe Islands', + CountryISO.FaroeIslands, + '298' + ], + [ + 'Fiji', + CountryISO.Fiji, + '679' + ], + [ + 'Finland', + CountryISO.Finland, + '358', + 0 + ], + [ + 'France', + CountryISO.France, + '33' + ], + [ + 'French Guiana', + CountryISO.FrenchGuiana, + '594' + ], + [ + 'French Polynesia', + CountryISO.FrenchPolynesia, + '689' + ], + [ + 'Gabon', + CountryISO.Gabon, + '241' + ], + [ + 'Gambia', + CountryISO.Gambia, + '220' + ], + [ + 'Georgia', + CountryISO.Georgia, + '995' + ], + [ + 'Germany', + CountryISO.Germany, + '49' + ], + [ + 'Ghana', + CountryISO.Ghana, + '233' + ], + [ + 'Gibraltar', + CountryISO.Gibraltar, + '350' + ], + [ + 'Greece', + CountryISO.Greece, + '30' + ], + [ + 'Greenland', + CountryISO.Greenland, + '299' + ], + [ + 'Grenada', + CountryISO.Grenada, + '1473' + ], + [ + 'Guadeloupe', + CountryISO.Guadeloupe, + '590', + 0 + ], + [ + 'Guam', + CountryISO.Guam, + '1', + 1, + [ + '671', + ] + ], + [ + 'Guatemala', + CountryISO.Guatemala, + '502' + ], + [ + 'Guernsey', + CountryISO.Guernsey, + '44', + 1, + [1481] + ], + [ + 'Guinea', + CountryISO.Guinea, + '224' + ], + [ + 'Guinea-Bissau', + CountryISO.GuineaBissau, + '245' + ], + [ + 'Guyana', + CountryISO.Guyana, + '592' + ], + [ + 'Haiti', + CountryISO.Haiti, + '509' + ], + [ + 'Honduras', + CountryISO.Honduras, + '504' + ], + [ + 'Hong Kong', + CountryISO.HongKong, + '852' + ], + [ + 'Hungary', + CountryISO.Hungary, + '36' + ], + [ + 'Iceland', + CountryISO.Iceland, + '354' + ], + [ + 'India', + CountryISO.India, + '91' + ], + [ + 'Indonesia', + CountryISO.Indonesia, + '62' + ], + [ + 'Iran', + CountryISO.Iran, + '98' + ], + [ + 'Iraq', + CountryISO.Iraq, + '964' + ], + [ + 'Ireland', + CountryISO.Ireland, + '353' + ], + [ + 'Isle of Man', + CountryISO.IsleOfMan, + '44', + 2, + [1624] + ], + [ + 'Israel', + CountryISO.Israel, + '972' + ], + [ + 'Italy', + CountryISO.Italy, + '39', + 0 + ], + [ + 'Jamaica', + CountryISO.Jamaica, + '1', + 1, + [ + '876', + ] + ], + [ + 'Japan', + CountryISO.Japan, + '81' + ], + [ + 'Jersey', + CountryISO.Jersey, + '44', + 3, + [1534] + ], + [ + 'Jordan', + CountryISO.Jordan, + '962' + ], + [ + 'Kazakhstan', + CountryISO.Kazakhstan, + '7', + 1 + ], + [ + 'Kenya', + CountryISO.Kenya, + '254' + ], + [ + 'Kiribati', + CountryISO.Kiribati, + '686' + ], + [ + 'Kosovo', + CountryISO.Kosovo, + '383' + ], + [ + 'Kuwait', + CountryISO.Kuwait, + '965' + ], + [ + 'Kyrgyzstan', + CountryISO.Kyrgyzstan, + '996' + ], + [ + 'Laos', + CountryISO.Laos, + '856' + ], + [ + 'Latvia', + CountryISO.Latvia, + '371' + ], + [ + 'Lebanon', + CountryISO.Lebanon, + '961' + ], + [ + 'Lesotho', + CountryISO.Lesotho, + '266' + ], + [ + 'Liberia', + CountryISO.Liberia, + '231' + ], + [ + 'Libya', + CountryISO.Libya, + '218' + ], + [ + 'Liechtenstein', + CountryISO.Liechtenstein, + '423' + ], + [ + 'Lithuania', + CountryISO.Lithuania, + '370' + ], + [ + 'Luxembourg', + CountryISO.Luxembourg, + '352' + ], + [ + 'Macau', + CountryISO.Macau, + '853' + ], + [ + 'Macedonia', + CountryISO.Macedonia, + '389' + ], + [ + 'Madagascar', + CountryISO.Madagascar, + '261' + ], + [ + 'Malawi', + CountryISO.Malawi, + '265' + ], + [ + 'Malaysia', + CountryISO.Malaysia, + '60' + ], + [ + 'Maldives', + CountryISO.Maldives, + '960' + ], + [ + 'Mali', + CountryISO.Mali, + '223' + ], + [ + 'Malta', + CountryISO.Malta, + '356' + ], + [ + 'Marshall Islands', + CountryISO.MarshallIslands, + '692' + ], + [ + 'Martinique', + CountryISO.Martinique, + '596' + ], + [ + 'Mauritania', + CountryISO.Mauritania, + '222' + ], + [ + 'Mauritius', + CountryISO.Mauritius, + '230' + ], + [ + 'Mayotte', + CountryISO.Mayotte, + '262', + 1 + ], + [ + 'Mexico', + CountryISO.Mexico, + '52' + ], + [ + 'Micronesia', + CountryISO.Micronesia, + '691' + ], + [ + 'Moldova', + CountryISO.Moldova, + '373' + ], + [ + 'Monaco', + CountryISO.Monaco, + '377' + ], + [ + 'Mongolia', + CountryISO.Mongolia, + '976' + ], + [ + 'Montenegro', + CountryISO.Montenegro, + '382' + ], + [ + 'Montserrat', + CountryISO.Montserrat, + '1', + 1, + [ + '664', + ] + ], + [ + 'Morocco', + CountryISO.Morocco, + '212', + 0 + ], + [ + 'Mozambique', + CountryISO.Mozambique, + '258' + ], + [ + 'Myanmar', + CountryISO.Myanmar, + '95' + ], + [ + 'Namibia', + CountryISO.Namibia, + '264' + ], + [ + 'Nauru', + CountryISO.Nauru, + '674' + ], + [ + 'Nepal', + CountryISO.Nepal, + '977' + ], + [ + 'Netherlands', + CountryISO.Netherlands, + '31' + ], + [ + 'New Caledonia', + CountryISO.NewCaledonia, + '687' + ], + [ + 'New Zealand', + CountryISO.NewZealand, + '64' + ], + [ + 'Nicaragua', + CountryISO.Nicaragua, + '505' + ], + [ + 'Niger', + CountryISO.Niger, + '227' + ], + [ + 'Nigeria', + CountryISO.Nigeria, + '234' + ], + [ + 'Niue', + CountryISO.Niue, + '683' + ], + [ + 'Norfolk Island', + CountryISO.NorfolkIsland, + '672' + ], + [ + 'North Korea', + CountryISO.NorthKorea, + '850' + ], + [ + 'Northern Mariana Islands', + CountryISO.NorthernMarianaIslands, + '1670' + ], + [ + 'Norway', + CountryISO.Norway, + '47', + 0 + ], + [ + 'Oman', + CountryISO.Oman, + '968' + ], + [ + 'Pakistan', + CountryISO.Pakistan, + '92' + ], + [ + 'Palau', + CountryISO.Palau, + '680' + ], + [ + 'Palestine', + CountryISO.Palestine, + '970' + ], + [ + 'Panama', + CountryISO.Panama, + '507' + ], + [ + 'Papua New Guinea', + CountryISO.PapuaNewGuinea, + '675' + ], + [ + 'Paraguay', + CountryISO.Paraguay, + '595' + ], + [ + 'Peru', + CountryISO.Peru, + '51' + ], + [ + 'Philippines', + CountryISO.Philippines, + '63' + ], + [ + 'Poland', + CountryISO.Poland, + '48' + ], + [ + 'Portugal', + CountryISO.Portugal, + '351' + ], + [ + 'Puerto Rico', + CountryISO.PuertoRico, + '1', + 3, + ['787', '939'] + ], + [ + 'Qatar', + CountryISO.Qatar, + '974' + ], + [ + 'Réunion', + CountryISO.Réunion, + '262', + 0 + ], + [ + 'Romania', + CountryISO.Romania, + '40' + ], + [ + 'Russia', + CountryISO.Russia, + '7', + 0 + ], + [ + 'Rwanda', + CountryISO.Rwanda, + '250' + ], + [ + 'Saint Barthélemy', + CountryISO.SaintBarthélemy, + '590', + 1 + ], + [ + 'Saint Helena', + CountryISO.SaintHelena, + '290' + ], + [ + 'Saint Kitts and Nevis', + CountryISO.SaintKittsAndNevis, + '1869' + ], + [ + 'Saint Lucia', + CountryISO.SaintLucia, + '1', + 1, + [ + '758', + ] + ], + [ + 'Saint Martin', + CountryISO.SaintMartin, + '590', + 2 + ], + [ + 'Saint Pierre and Miquelon', + CountryISO.SaintPierreAndMiquelon, + '508' + ], + [ + 'Saint Vincent and the Grenadines', + CountryISO.SaintVincentAndTheGrenadines, + '1', + 1, + [ + '784', + ] + ], + [ + 'Samoa', + CountryISO.Samoa, + '685' + ], + [ + 'San Marino', + CountryISO.SanMarino, + '378' + ], + [ + 'São Tomé and Príncipe', + CountryISO.SãoToméAndPríncipe, + '239' + ], + [ + 'Saudi Arabia', + CountryISO.SaudiArabia, + '966' + ], + [ + 'Senegal', + CountryISO.Senegal, + '221' + ], + [ + 'Serbia', + CountryISO.Serbia, + '381' + ], + [ + 'Seychelles', + CountryISO.Seychelles, + '248' + ], + [ + 'Sierra Leone', + CountryISO.SierraLeone, + '232' + ], + [ + 'Singapore', + CountryISO.Singapore, + '65' + ], + [ + 'Sint Maarten', + CountryISO.SintMaarten, + '1', + 1, + [ + '721', + ] + ], + [ + 'Slovakia', + CountryISO.Slovakia, + '421' + ], + [ + 'Slovenia', + CountryISO.Slovenia, + '386' + ], + [ + 'Solomon Islands', + CountryISO.SolomonIslands, + '677' + ], + [ + 'Somalia', + CountryISO.Somalia, + '252' + ], + [ + 'South Africa', + CountryISO.SouthAfrica, + '27' + ], + [ + 'South Korea', + CountryISO.SouthKorea, + '82' + ], + [ + 'South Sudan', + CountryISO.SouthSudan, + '211' + ], + [ + 'Spain', + CountryISO.Spain, + '34' + ], + [ + 'Sri Lanka', + CountryISO.SriLanka, + '94' + ], + [ + 'Sudan', + CountryISO.Sudan, + '249' + ], + [ + 'Suriname', + CountryISO.Suriname, + '597' + ], + [ + 'Svalbard and Jan Mayen', + CountryISO.SvalbardAndJanMayen, + '47', + 1 + ], + [ + 'Swaziland', + CountryISO.Swaziland, + '268' + ], + [ + 'Sweden', + CountryISO.Sweden, + '46' + ], + [ + 'Switzerland', + CountryISO.Switzerland, + '41' + ], + [ + 'Syria', + CountryISO.Syria, + '963' + ], + [ + 'Taiwan', + CountryISO.Taiwan, + '886' + ], + [ + 'Tajikistan', + CountryISO.Tajikistan, + '992' + ], + [ + 'Tanzania', + CountryISO.Tanzania, + '255' + ], + [ + 'Thailand', + CountryISO.Thailand, + '66' + ], + [ + 'Timor-Leste', + CountryISO.TimorLeste, + '670' + ], + [ + 'Togo', + CountryISO.Togo, + '228' + ], + [ + 'Tokelau', + CountryISO.Tokelau, + '690' + ], + [ + 'Tonga', + CountryISO.Tonga, + '676' + ], + [ + 'Trinidad and Tobago', + CountryISO.TrinidadAndTobago, + '1', + 1, + [ + '868', + ] + ], + [ + 'Tunisia', + CountryISO.Tunisia, + '216' + ], + [ + 'Turkey', + CountryISO.Turkey, + '90' + ], + [ + 'Turkmenistan', + CountryISO.Turkmenistan, + '993' + ], + [ + 'Turks and Caicos Islands', + CountryISO.TurksAndCaicosIslands, + '1649' + ], + [ + 'Tuvalu', + CountryISO.Tuvalu, + '688' + ], + [ + 'U.S. Virgin Islands', + CountryISO.USVirginIslands, + '1', + 1, + [ + '340', + ] + ], + [ + 'Uganda', + CountryISO.Uganda, + '256' + ], + [ + 'Ukraine', + CountryISO.Ukraine, + '380' + ], + [ + 'United Arab Emirates', + CountryISO.UnitedArabEmirates, + '971' + ], + [ + 'United Kingdom', + CountryISO.UnitedKingdom, + '44', + 0 + ], + [ + 'United States', + CountryISO.UnitedStates, + '1', + 0 + ], + [ + 'Uruguay', + CountryISO.Uruguay, + '598' + ], + [ + 'Uzbekistan', + CountryISO.Uzbekistan, + '998' + ], + [ + 'Vanuatu', + CountryISO.Vanuatu, + '678' + ], + [ + 'Vatican City', + CountryISO.VaticanCity, + '39', + 1 + ], + [ + 'Venezuela', + CountryISO.Venezuela, + '58' + ], + [ + 'Vietnam', + CountryISO.Vietnam, + '84' + ], + [ + 'Wallis and Futuna', + CountryISO.WallisAndFutuna, + '681' + ], + [ + 'Western Sahara', + CountryISO.WesternSahara, + '212', + 1 + ], + [ + 'Yemen', + CountryISO.Yemen, + '967' + ], + [ + 'Zambia', + CountryISO.Zambia, + '260' + ], + [ + 'Zimbabwe', + CountryISO.Zimbabwe, + '263' + ], + [ + 'Åland Islands', + CountryISO.ÅlandIslands, + '358', + 1 + ] + ]; +} diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts index a356fa5921..706ffb16a0 100644 --- a/ui-ngx/src/app/shared/shared.module.ts +++ b/ui-ngx/src/app/shared/shared.module.ts @@ -159,6 +159,7 @@ import { TbMarkdownComponent } from '@shared/components/markdown.component'; import { ProtobufContentComponent } from '@shared/components/protobuf-content.component'; import { CssComponent } from '@shared/components/css.component'; import { SafePipe } from '@shared/pipe/safe.pipe'; +import { PhoneInputComponent } from '@shared/components/phone-input.component'; export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) { return markedOptionsService; @@ -277,7 +278,8 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) WidgetsBundleSearchComponent, CopyButtonComponent, TogglePasswordComponent, - ProtobufContentComponent + ProtobufContentComponent, + PhoneInputComponent ], imports: [ CommonModule, @@ -472,7 +474,8 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) WidgetsBundleSearchComponent, CopyButtonComponent, TogglePasswordComponent, - ProtobufContentComponent + ProtobufContentComponent, + PhoneInputComponent ] }) export class SharedModule { } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index aab433c992..050080d5ba 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3351,6 +3351,12 @@ "material-icons": "Material icons", "show-all": "Show all icons" }, + "phone-input": { + "phone-input-label": "Phone number", + "phone-input-required": "Phone number is required", + "phone-input-validation": "Phone number is invalid or not possible", + "phone-input-pattern": "Invalid phone number. Should be in E.164 format, ex. +19995550123." + }, "custom": { "widget-action": { "action-cell-button": "Action cell button", diff --git a/ui-ngx/yarn.lock b/ui-ngx/yarn.lock index 0aac92b131..45fe658406 100644 --- a/ui-ngx/yarn.lock +++ b/ui-ngx/yarn.lock @@ -6027,6 +6027,11 @@ less@4.1.1: needle "^2.5.2" source-map "~0.6.0" +libphonenumber-js@^1.10.4: + version "1.10.4" + resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.10.4.tgz#90397f0ed620262570a32244c9fbc389cc417ce4" + integrity sha512-9QWxEk4GW5RDnFzt8UtyRENfFpAN8u7Sbf9wf32tcXY9tdtnz1dKHIBwW2Wnfx8ypXJb9zUnTpK9aQJ/B8AlnA== + license-webpack-plugin@2.3.20: version "2.3.20" resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-2.3.20.tgz#f51fb674ca31519dbedbe1c7aabc036e5a7f2858" From 19c313dbedfa9cca37f0c42aaba7f2064fa32686 Mon Sep 17 00:00:00 2001 From: fe-dev Date: Mon, 30 May 2022 14:54:41 +0300 Subject: [PATCH 2/7] Refactoring --- .../components/phone-input.component.html | 3 +- .../components/phone-input.component.ts | 34 ++++++++++++++----- .../src/app/shared/models/country.models.ts | 16 +++++++++ .../assets/locale/locale.constant-en_US.json | 2 +- 4 files changed, 44 insertions(+), 11 deletions(-) diff --git a/ui-ngx/src/app/shared/components/phone-input.component.html b/ui-ngx/src/app/shared/components/phone-input.component.html index 9001e04ce8..15ed9bf2df 100644 --- a/ui-ngx/src/app/shared/components/phone-input.component.html +++ b/ui-ngx/src/app/shared/components/phone-input.component.html @@ -27,7 +27,7 @@ - + phone-input.phone-input-label diff --git a/ui-ngx/src/app/shared/components/phone-input.component.ts b/ui-ngx/src/app/shared/components/phone-input.component.ts index 6618811e19..536b1cc723 100644 --- a/ui-ngx/src/app/shared/components/phone-input.component.ts +++ b/ui-ngx/src/app/shared/components/phone-input.component.ts @@ -59,6 +59,15 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida @Input() enableFlagsSelect = true; @Input() required = true; + private floatLabel = 'always'; + get showLabel(): string { + return this.floatLabel; + } + @Input() + set showLabel(value) { + this.floatLabel = value ? 'always' : 'never'; + } + allCountries: Array = []; phonePlaceholder: string; countryCallingCode: string; @@ -82,11 +91,9 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida } this.phoneFormGroup = this.fb.group({ country: [this.defaultCountry, []], - phoneNumber: [ - this.countryCallingCode, - this.required ? [Validators.required, Validators.pattern(phoneNumberPattern), this.validatePhoneNumber()] : [] - ] + phoneNumber: [null, this.required ? [Validators.required] : []] }); + this.phoneFormGroup.get('phoneNumber').setValidators([Validators.pattern(phoneNumberPattern), this.validatePhoneNumber()]); this.valueChange$ = this.phoneFormGroup.get('phoneNumber').valueChanges.subscribe(() => { this.updateModel(); @@ -97,12 +104,14 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida const code = this.countryCallingCode; this.getFlagAndPhoneNumberData(value); let phoneNumber = this.phoneFormGroup.get('phoneNumber').value; - if (code !== this.countryCallingCode && phoneNumber) { - phoneNumber = phoneNumber.replace(code, this.countryCallingCode); - } else { - phoneNumber = this.countryCallingCode; + if (phoneNumber) { + if (code !== this.countryCallingCode && phoneNumber.includes(code)) { + phoneNumber = phoneNumber.replace(code, this.countryCallingCode); + } else { + phoneNumber = this.countryCallingCode; + } + this.phoneFormGroup.get('phoneNumber').patchValue(phoneNumber); } - this.phoneFormGroup.get('phoneNumber').patchValue(phoneNumber); } }); @@ -123,6 +132,13 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida } } + focus() { + const phoneNumber = this.phoneFormGroup.get('phoneNumber'); + if (!phoneNumber.value) { + phoneNumber.patchValue(this.countryCallingCode); + } + } + getFlagAndPhoneNumberData(country) { if (this.enableFlagsSelect) { this.flagIcon = this.getFlagIcon(country); diff --git a/ui-ngx/src/app/shared/models/country.models.ts b/ui-ngx/src/app/shared/models/country.models.ts index a4ed4d38d9..10612de015 100644 --- a/ui-ngx/src/app/shared/models/country.models.ts +++ b/ui-ngx/src/app/shared/models/country.models.ts @@ -1,3 +1,19 @@ +/// +/// Copyright © 2016-2022 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + import { Injectable } from '@angular/core'; export interface Country { diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 050080d5ba..b720594fe0 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3355,7 +3355,7 @@ "phone-input-label": "Phone number", "phone-input-required": "Phone number is required", "phone-input-validation": "Phone number is invalid or not possible", - "phone-input-pattern": "Invalid phone number. Should be in E.164 format, ex. +19995550123." + "phone-input-pattern": "Invalid phone number. Should be in E.164 format, ex. {{phoneNumber}}" }, "custom": { "widget-action": { From c2c59114dbea1f7a9c63ed309872a529773a51a0 Mon Sep 17 00:00:00 2001 From: fe-dev Date: Tue, 7 Jun 2022 13:07:57 +0300 Subject: [PATCH 3/7] UI: add phone input with country flags for sms authenticator --- .../sms-auth-dialog.component.html | 15 +-------------- .../shared/components/phone-input.component.html | 6 ++---- .../shared/components/phone-input.component.scss | 1 + .../shared/components/phone-input.component.ts | 16 ++++++---------- .../src/assets/locale/locale.constant-en_US.json | 3 ++- 5 files changed, 12 insertions(+), 29 deletions(-) diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html index d4fb60095a..bb547f56a3 100644 --- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html +++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html @@ -37,20 +37,7 @@

security.2fa.dialog.sms-step-description

- - - - - {{ 'admin.number-to-required' | translate }} - - - {{ 'admin.phone-number-pattern' | translate }} - - - +
- + phone-input.phone-input-label + {{ 'phone-input.phone-input-required' | translate }} {{ 'phone-input.phone-input-validation' | translate }} - - {{ 'phone-input.phone-input-pattern' | translate }} - diff --git a/ui-ngx/src/app/shared/components/phone-input.component.scss b/ui-ngx/src/app/shared/components/phone-input.component.scss index 0145a13d62..872c686af0 100644 --- a/ui-ngx/src/app/shared/components/phone-input.component.scss +++ b/ui-ngx/src/app/shared/components/phone-input.component.scss @@ -21,6 +21,7 @@ .phone-input { width: 100%; + max-width: 290px; } } diff --git a/ui-ngx/src/app/shared/components/phone-input.component.ts b/ui-ngx/src/app/shared/components/phone-input.component.ts index 536b1cc723..bbee8098f6 100644 --- a/ui-ngx/src/app/shared/components/phone-input.component.ts +++ b/ui-ngx/src/app/shared/components/phone-input.component.ts @@ -33,6 +33,7 @@ import examples from 'libphonenumber-js/examples.mobile.json'; import { CountryCode, getExampleNumber, parsePhoneNumberFromString } from 'libphonenumber-js'; import { phoneNumberPattern } from '@shared/models/settings.models'; import { Subscription } from 'rxjs'; +import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field/form-field'; @Component({ selector: 'tb-phone-input', @@ -58,15 +59,8 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida @Input() defaultCountry: CountryCode = 'US'; @Input() enableFlagsSelect = true; @Input() required = true; - - private floatLabel = 'always'; - get showLabel(): string { - return this.floatLabel; - } - @Input() - set showLabel(value) { - this.floatLabel = value ? 'always' : 'never'; - } + @Input() floatLabel: FloatLabelType = 'always'; + @Input() appearance: MatFormFieldAppearance = 'legacy'; allCountries: Array = []; phonePlaceholder: string; @@ -134,6 +128,8 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida focus() { const phoneNumber = this.phoneFormGroup.get('phoneNumber'); + this.phoneFormGroup.markAsPristine(); + this.phoneFormGroup.markAsUntouched(); if (!phoneNumber.value) { phoneNumber.patchValue(this.countryCallingCode); } @@ -220,7 +216,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida private updateModel() { const phoneNumber = this.phoneFormGroup.get('phoneNumber'); - if (phoneNumber.valid && this.modelValue !== phoneNumber.value) { + if (phoneNumber.valid && phoneNumber.value) { this.modelValue = phoneNumber.value; this.propagateChange(this.modelValue); } else { diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index b4bd223ed4..d8a08a5677 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -4435,7 +4435,8 @@ "phone-input-label": "Phone number", "phone-input-required": "Phone number is required", "phone-input-validation": "Phone number is invalid or not possible", - "phone-input-pattern": "Invalid phone number. Should be in E.164 format, ex. {{phoneNumber}}" + "phone-input-pattern": "Invalid phone number. Should be in E.164 format, ex. {{phoneNumber}}", + "phone-input-hint": "Phone Number in E.164 format, ex. {{phoneNumber}}" }, "custom": { "widget-action": { From eb105d0859c5a1e2510f6e39a4d268fb8c73d391 Mon Sep 17 00:00:00 2001 From: fe-dev Date: Mon, 13 Jun 2022 16:37:40 +0300 Subject: [PATCH 4/7] UI: Refactoring phone input --- .../components/phone-input.component.html | 4 +- .../components/phone-input.component.scss | 5 - .../components/phone-input.component.ts | 64 +- .../src/app/shared/models/country.models.ts | 1573 +++-------------- 4 files changed, 268 insertions(+), 1378 deletions(-) diff --git a/ui-ngx/src/app/shared/components/phone-input.component.html b/ui-ngx/src/app/shared/components/phone-input.component.html index d52d7202d0..4b81391b5f 100644 --- a/ui-ngx/src/app/shared/components/phone-input.component.html +++ b/ui-ngx/src/app/shared/components/phone-input.component.html @@ -22,8 +22,8 @@ {{ flagIcon }} - {{country.flag}} - {{country.name + ' +' + country.dialCode }} + {{country.flag}} + {{' ' + country.name + ' +' + country.dialCode }} diff --git a/ui-ngx/src/app/shared/components/phone-input.component.scss b/ui-ngx/src/app/shared/components/phone-input.component.scss index 872c686af0..d8bd9df461 100644 --- a/ui-ngx/src/app/shared/components/phone-input.component.scss +++ b/ui-ngx/src/app/shared/components/phone-input.component.scss @@ -44,11 +44,6 @@ width: 45px; height: 30px; - .country-flag { - font-size: 22px; - padding-right: 10px; - } - .mat-select-trigger { height: 100%; width: 100%; diff --git a/ui-ngx/src/app/shared/components/phone-input.component.ts b/ui-ngx/src/app/shared/components/phone-input.component.ts index bbee8098f6..f5fdf62f34 100644 --- a/ui-ngx/src/app/shared/components/phone-input.component.ts +++ b/ui-ngx/src/app/shared/components/phone-input.component.ts @@ -62,15 +62,15 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida @Input() floatLabel: FloatLabelType = 'always'; @Input() appearance: MatFormFieldAppearance = 'legacy'; - allCountries: Array = []; + allCountries: Array = this.countryCodeData.allCountries; phonePlaceholder: string; - countryCallingCode: string; flagIcon: string; - + phoneFormGroup: FormGroup; phoneNumberPattern = phoneNumberPattern; + private baseCode = 127397; + private countryCallingCode: string; private modelValue: string; - public phoneFormGroup: FormGroup; private valueChange$: Subscription = null; private propagateChange = (v: any) => { }; @@ -80,17 +80,24 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida } ngOnInit(): void { - if (this.enableFlagsSelect) { - this.fetchCountryData(); + const validators: ValidatorFn[] = [Validators.pattern(phoneNumberPattern), this.validatePhoneNumber()]; + if (this.required) { + validators.push(Validators.required); } this.phoneFormGroup = this.fb.group({ country: [this.defaultCountry, []], - phoneNumber: [null, this.required ? [Validators.required] : []] + phoneNumber: [null, validators] }); - this.phoneFormGroup.get('phoneNumber').setValidators([Validators.pattern(phoneNumberPattern), this.validatePhoneNumber()]); - this.valueChange$ = this.phoneFormGroup.get('phoneNumber').valueChanges.subscribe(() => { + this.valueChange$ = this.phoneFormGroup.get('phoneNumber').valueChanges.subscribe(value => { this.updateModel(); + if (value) { + const parsedPhoneNumber = parsePhoneNumberFromString(value); + const country = this.phoneFormGroup.get('country').value; + if (parsedPhoneNumber?.country && parsedPhoneNumber?.country !== country) { + this.phoneFormGroup.get('country').patchValue(parsedPhoneNumber.country, {emitEvent: true}); + } + } }); this.phoneFormGroup.get('country').valueChanges.subscribe(value => { @@ -101,20 +108,8 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida if (phoneNumber) { if (code !== this.countryCallingCode && phoneNumber.includes(code)) { phoneNumber = phoneNumber.replace(code, this.countryCallingCode); - } else { - phoneNumber = this.countryCallingCode; + this.phoneFormGroup.get('phoneNumber').patchValue(phoneNumber); } - this.phoneFormGroup.get('phoneNumber').patchValue(phoneNumber); - } - } - }); - - this.phoneFormGroup.get('phoneNumber').valueChanges.subscribe(value => { - if (value) { - const parsedPhoneNumber = parsePhoneNumberFromString(value); - const country = this.phoneFormGroup.get('country').value; - if (parsedPhoneNumber?.country && parsedPhoneNumber?.country !== country) { - this.phoneFormGroup.get('country').patchValue(parsedPhoneNumber.country, {emitEvent: true}); } } }); @@ -135,22 +130,21 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida } } - getFlagAndPhoneNumberData(country) { + private getFlagAndPhoneNumberData(country) { if (this.enableFlagsSelect) { this.flagIcon = this.getFlagIcon(country); } this.getPhoneNumberData(country); } - getPhoneNumberData(country): void { + private getPhoneNumberData(country): void { const phoneData = getExampleNumber(country, examples); this.phonePlaceholder = phoneData.number; this.countryCallingCode = '+' + phoneData.countryCallingCode; } - getFlagIcon(countryCode) { - const base = 127462 - 65; - return String.fromCodePoint(...countryCode.split('').map(country => base + country.charCodeAt(0))); + private getFlagIcon(countryCode) { + return String.fromCodePoint(...countryCode.split('').map(country => this.baseCode + country.charCodeAt(0))); } validatePhoneNumber(): ValidatorFn { @@ -192,21 +186,6 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida } } - protected fetchCountryData(): void { - this.allCountries = []; - this.countryCodeData.allCountries.forEach((c) => { - const cc = c[1]; - const country: Country = { - name: c[0].toString(), - iso2: c[1].toString(), - dialCode: c[2].toString(), - flag: this.getFlagIcon(cc), - }; - - this.allCountries.push(country); - }); - } - writeValue(phoneNumber): void { this.modelValue = phoneNumber; const country = phoneNumber ? parsePhoneNumberFromString(phoneNumber)?.country : this.defaultCountry; @@ -223,5 +202,4 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida this.propagateChange(null); } } - } diff --git a/ui-ngx/src/app/shared/models/country.models.ts b/ui-ngx/src/app/shared/models/country.models.ts index 10612de015..d4895fada7 100644 --- a/ui-ngx/src/app/shared/models/country.models.ts +++ b/ui-ngx/src/app/shared/models/country.models.ts @@ -24,15 +24,7 @@ export interface Country { flag: string; } -export enum SearchCountryField { - DialCode = 'dialCode', - Iso2 = 'iso2', - Name = 'name', - All = 'all' -} - - -export enum CountryISO{ +export enum CountryISO { Afghanistan = 'AF', Albania = 'AL', Algeria = 'DZ', @@ -280,1324 +272,249 @@ export enum CountryISO{ @Injectable() export class CountryData { - public allCountries = [ - [ - 'Afghanistan', - CountryISO.Afghanistan, - '93' - ], - [ - 'Albania', - CountryISO.Albania, - '355' - ], - [ - 'Algeria', - CountryISO.Algeria, - '213' - ], - [ - 'American Samoa', - CountryISO.AmericanSamoa, - '1', - 1, - [ - '684', - ] - ], - [ - 'Andorra', - CountryISO.Andorra, - '376' - ], - [ - 'Angola', - CountryISO.Angola, - '244' - ], - [ - 'Anguilla', - CountryISO.Anguilla, - '1', - 1, - [ - '264', - ] - ], - [ - 'Antigua and Barbuda', - CountryISO.AntiguaAndBarbuda, - '1', - 1, - [ - '268', - ] - ], - [ - 'Argentina', - CountryISO.Argentina, - '54' - ], - [ - 'Armenia', - CountryISO.Armenia, - '374' - ], - [ - 'Aruba', - CountryISO.Aruba, - '297' - ], - [ - 'Australia', - CountryISO.Australia, - '61', - 0 - ], - [ - 'Austria', - CountryISO.Austria, - '43' - ], - [ - 'Azerbaijan', - CountryISO.Azerbaijan, - '994' - ], - [ - 'Bahamas', - CountryISO.Bahamas, - '1', - 1, - [ - '242', - ] - ], - [ - 'Bahrain', - CountryISO.Bahrain, - '973' - ], - [ - 'Bangladesh', - CountryISO.Bangladesh, - '880' - ], - [ - 'Barbados', - CountryISO.Barbados, - '1', - 1, - [ - '246', - ] - ], - [ - 'Belarus', - CountryISO.Belarus, - '375' - ], - [ - 'Belgium', - CountryISO.Belgium, - '32' - ], - [ - 'Belize', - CountryISO.Belize, - '501' - ], - [ - 'Benin', - CountryISO.Benin, - '229' - ], - [ - 'Bermuda', - CountryISO.Bermuda, - '1', - 1, - [ - '441', - ] - ], - [ - 'Bhutan', - CountryISO.Bhutan, - '975' - ], - [ - 'Bolivia', - CountryISO.Bolivia, - '591' - ], - [ - 'Bosnia and Herzegovina', - CountryISO.BosniaAndHerzegovina, - '387' - ], - [ - 'Botswana', - CountryISO.Botswana, - '267' - ], - [ - 'Brazil', - CountryISO.Brazil, - '55' - ], - [ - 'British Indian Ocean Territory', - CountryISO.BritishIndianOceanTerritory, - '246' - ], - [ - 'British Virgin Islands', - CountryISO.BritishVirginIslands, - '1', - 1, - [ - '284', - ] - ], - [ - 'Brunei', - CountryISO.Brunei, - '673' - ], - [ - 'Bulgaria', - CountryISO.Bulgaria, - '359' - ], - [ - 'Burkina Faso', - CountryISO.BurkinaFaso, - '226' - ], - [ - 'Burundi', - CountryISO.Burundi, - '257' - ], - [ - 'Cambodia', - CountryISO.Cambodia, - '855' - ], - [ - 'Cameroon', - CountryISO.Cameroon, - '237' - ], - [ - 'Canada', - CountryISO.Canada, - '1', - 1, - [ - '204', '226', '236', '249', '250', '289', '306', '343', '365', '387', '403', '416', - '418', '431', '437', '438', '450', '506', '514', '519', '548', '579', '581', '587', - '604', '613', '639', '647', '672', '705', '709', '742', '778', '780', '782', '807', - '819', '825', '867', '873', '902', '905' - ] - ], - [ - 'Cape Verde', - CountryISO.CapeVerde, - '238' - ], - [ - 'Caribbean Netherlands', - CountryISO.CaribbeanNetherlands, - '599', - 1 - ], - [ - 'Cayman Islands', - CountryISO.CaymanIslands, - '1', - 1, - [ - '345', - ] - ], - [ - 'Central African Republic', - CountryISO.CentralAfricanRepublic, - '236' - ], - [ - 'Chad', - CountryISO.Chad, - '235' - ], - [ - 'Chile', - CountryISO.Chile, - '56' - ], - [ - 'China', - CountryISO.China, - '86' - ], - [ - 'Christmas Island', - CountryISO.ChristmasIsland, - '61', - 2 - ], - [ - 'Cocos Islands', - CountryISO.Cocos, - '61', - 1 - ], - [ - 'Colombia', - CountryISO.Colombia, - '57' - ], - [ - 'Comoros', - CountryISO.Comoros, - '269' - ], - [ - 'Congo-Kinshasa', - CountryISO.CongoDRCJamhuriYaKidemokrasiaYaKongo, - '243' - ], - [ - 'Congo-Brazzaville', - CountryISO.CongoRepublicCongoBrazzaville, - '242' - ], - [ - 'Cook Islands', - CountryISO.CookIslands, - '682' - ], - [ - 'Costa Rica', - CountryISO.CostaRica, - '506' - ], - [ - 'Côte d’Ivoire', - CountryISO.CôteDIvoire, - '225' - ], - [ - 'Croatia', - CountryISO.Croatia, - '385' - ], - [ - 'Cuba', - CountryISO.Cuba, - '53' - ], - [ - 'Curaçao', - CountryISO.Curaçao, - '599', - 0 - ], - [ - 'Cyprus', - CountryISO.Cyprus, - '357' - ], - [ - 'Czech Republic', - CountryISO.CzechRepublic, - '420' - ], - [ - 'Denmark', - CountryISO.Denmark, - '45' - ], - [ - 'Djibouti', - CountryISO.Djibouti, - '253' - ], - [ - 'Dominica', - CountryISO.Dominica, - '1767' - ], - [ - 'Dominican Republic', - CountryISO.DominicanRepublic, - '1', - 2, - ['809', '829', '849'] - ], - [ - 'Ecuador', - CountryISO.Ecuador, - '593' - ], - [ - 'Egypt', - CountryISO.Egypt, - '20' - ], - [ - 'El Salvador', - CountryISO.ElSalvador, - '503' - ], - [ - 'Equatorial Guinea', - CountryISO.EquatorialGuinea, - '240' - ], - [ - 'Eritrea', - CountryISO.Eritrea, - '291' - ], - [ - 'Estonia', - CountryISO.Estonia, - '372' - ], - [ - 'Ethiopia', - CountryISO.Ethiopia, - '251' - ], - [ - 'Falkland Islands', - CountryISO.FalklandIslands, - '500' - ], - [ - 'Faroe Islands', - CountryISO.FaroeIslands, - '298' - ], - [ - 'Fiji', - CountryISO.Fiji, - '679' - ], - [ - 'Finland', - CountryISO.Finland, - '358', - 0 - ], - [ - 'France', - CountryISO.France, - '33' - ], - [ - 'French Guiana', - CountryISO.FrenchGuiana, - '594' - ], - [ - 'French Polynesia', - CountryISO.FrenchPolynesia, - '689' - ], - [ - 'Gabon', - CountryISO.Gabon, - '241' - ], - [ - 'Gambia', - CountryISO.Gambia, - '220' - ], - [ - 'Georgia', - CountryISO.Georgia, - '995' - ], - [ - 'Germany', - CountryISO.Germany, - '49' - ], - [ - 'Ghana', - CountryISO.Ghana, - '233' - ], - [ - 'Gibraltar', - CountryISO.Gibraltar, - '350' - ], - [ - 'Greece', - CountryISO.Greece, - '30' - ], - [ - 'Greenland', - CountryISO.Greenland, - '299' - ], - [ - 'Grenada', - CountryISO.Grenada, - '1473' - ], - [ - 'Guadeloupe', - CountryISO.Guadeloupe, - '590', - 0 - ], - [ - 'Guam', - CountryISO.Guam, - '1', - 1, - [ - '671', - ] - ], - [ - 'Guatemala', - CountryISO.Guatemala, - '502' - ], - [ - 'Guernsey', - CountryISO.Guernsey, - '44', - 1, - [1481] - ], - [ - 'Guinea', - CountryISO.Guinea, - '224' - ], - [ - 'Guinea-Bissau', - CountryISO.GuineaBissau, - '245' - ], - [ - 'Guyana', - CountryISO.Guyana, - '592' - ], - [ - 'Haiti', - CountryISO.Haiti, - '509' - ], - [ - 'Honduras', - CountryISO.Honduras, - '504' - ], - [ - 'Hong Kong', - CountryISO.HongKong, - '852' - ], - [ - 'Hungary', - CountryISO.Hungary, - '36' - ], - [ - 'Iceland', - CountryISO.Iceland, - '354' - ], - [ - 'India', - CountryISO.India, - '91' - ], - [ - 'Indonesia', - CountryISO.Indonesia, - '62' - ], - [ - 'Iran', - CountryISO.Iran, - '98' - ], - [ - 'Iraq', - CountryISO.Iraq, - '964' - ], - [ - 'Ireland', - CountryISO.Ireland, - '353' - ], - [ - 'Isle of Man', - CountryISO.IsleOfMan, - '44', - 2, - [1624] - ], - [ - 'Israel', - CountryISO.Israel, - '972' - ], - [ - 'Italy', - CountryISO.Italy, - '39', - 0 - ], - [ - 'Jamaica', - CountryISO.Jamaica, - '1', - 1, - [ - '876', - ] - ], - [ - 'Japan', - CountryISO.Japan, - '81' - ], - [ - 'Jersey', - CountryISO.Jersey, - '44', - 3, - [1534] - ], - [ - 'Jordan', - CountryISO.Jordan, - '962' - ], - [ - 'Kazakhstan', - CountryISO.Kazakhstan, - '7', - 1 - ], - [ - 'Kenya', - CountryISO.Kenya, - '254' - ], - [ - 'Kiribati', - CountryISO.Kiribati, - '686' - ], - [ - 'Kosovo', - CountryISO.Kosovo, - '383' - ], - [ - 'Kuwait', - CountryISO.Kuwait, - '965' - ], - [ - 'Kyrgyzstan', - CountryISO.Kyrgyzstan, - '996' - ], - [ - 'Laos', - CountryISO.Laos, - '856' - ], - [ - 'Latvia', - CountryISO.Latvia, - '371' - ], - [ - 'Lebanon', - CountryISO.Lebanon, - '961' - ], - [ - 'Lesotho', - CountryISO.Lesotho, - '266' - ], - [ - 'Liberia', - CountryISO.Liberia, - '231' - ], - [ - 'Libya', - CountryISO.Libya, - '218' - ], - [ - 'Liechtenstein', - CountryISO.Liechtenstein, - '423' - ], - [ - 'Lithuania', - CountryISO.Lithuania, - '370' - ], - [ - 'Luxembourg', - CountryISO.Luxembourg, - '352' - ], - [ - 'Macau', - CountryISO.Macau, - '853' - ], - [ - 'Macedonia', - CountryISO.Macedonia, - '389' - ], - [ - 'Madagascar', - CountryISO.Madagascar, - '261' - ], - [ - 'Malawi', - CountryISO.Malawi, - '265' - ], - [ - 'Malaysia', - CountryISO.Malaysia, - '60' - ], - [ - 'Maldives', - CountryISO.Maldives, - '960' - ], - [ - 'Mali', - CountryISO.Mali, - '223' - ], - [ - 'Malta', - CountryISO.Malta, - '356' - ], - [ - 'Marshall Islands', - CountryISO.MarshallIslands, - '692' - ], - [ - 'Martinique', - CountryISO.Martinique, - '596' - ], - [ - 'Mauritania', - CountryISO.Mauritania, - '222' - ], - [ - 'Mauritius', - CountryISO.Mauritius, - '230' - ], - [ - 'Mayotte', - CountryISO.Mayotte, - '262', - 1 - ], - [ - 'Mexico', - CountryISO.Mexico, - '52' - ], - [ - 'Micronesia', - CountryISO.Micronesia, - '691' - ], - [ - 'Moldova', - CountryISO.Moldova, - '373' - ], - [ - 'Monaco', - CountryISO.Monaco, - '377' - ], - [ - 'Mongolia', - CountryISO.Mongolia, - '976' - ], - [ - 'Montenegro', - CountryISO.Montenegro, - '382' - ], - [ - 'Montserrat', - CountryISO.Montserrat, - '1', - 1, - [ - '664', - ] - ], - [ - 'Morocco', - CountryISO.Morocco, - '212', - 0 - ], - [ - 'Mozambique', - CountryISO.Mozambique, - '258' - ], - [ - 'Myanmar', - CountryISO.Myanmar, - '95' - ], - [ - 'Namibia', - CountryISO.Namibia, - '264' - ], - [ - 'Nauru', - CountryISO.Nauru, - '674' - ], - [ - 'Nepal', - CountryISO.Nepal, - '977' - ], - [ - 'Netherlands', - CountryISO.Netherlands, - '31' - ], - [ - 'New Caledonia', - CountryISO.NewCaledonia, - '687' - ], - [ - 'New Zealand', - CountryISO.NewZealand, - '64' - ], - [ - 'Nicaragua', - CountryISO.Nicaragua, - '505' - ], - [ - 'Niger', - CountryISO.Niger, - '227' - ], - [ - 'Nigeria', - CountryISO.Nigeria, - '234' - ], - [ - 'Niue', - CountryISO.Niue, - '683' - ], - [ - 'Norfolk Island', - CountryISO.NorfolkIsland, - '672' - ], - [ - 'North Korea', - CountryISO.NorthKorea, - '850' - ], - [ - 'Northern Mariana Islands', - CountryISO.NorthernMarianaIslands, - '1670' - ], - [ - 'Norway', - CountryISO.Norway, - '47', - 0 - ], - [ - 'Oman', - CountryISO.Oman, - '968' - ], - [ - 'Pakistan', - CountryISO.Pakistan, - '92' - ], - [ - 'Palau', - CountryISO.Palau, - '680' - ], - [ - 'Palestine', - CountryISO.Palestine, - '970' - ], - [ - 'Panama', - CountryISO.Panama, - '507' - ], - [ - 'Papua New Guinea', - CountryISO.PapuaNewGuinea, - '675' - ], - [ - 'Paraguay', - CountryISO.Paraguay, - '595' - ], - [ - 'Peru', - CountryISO.Peru, - '51' - ], - [ - 'Philippines', - CountryISO.Philippines, - '63' - ], - [ - 'Poland', - CountryISO.Poland, - '48' - ], - [ - 'Portugal', - CountryISO.Portugal, - '351' - ], - [ - 'Puerto Rico', - CountryISO.PuertoRico, - '1', - 3, - ['787', '939'] - ], - [ - 'Qatar', - CountryISO.Qatar, - '974' - ], - [ - 'Réunion', - CountryISO.Réunion, - '262', - 0 - ], - [ - 'Romania', - CountryISO.Romania, - '40' - ], - [ - 'Russia', - CountryISO.Russia, - '7', - 0 - ], - [ - 'Rwanda', - CountryISO.Rwanda, - '250' - ], - [ - 'Saint Barthélemy', - CountryISO.SaintBarthélemy, - '590', - 1 - ], - [ - 'Saint Helena', - CountryISO.SaintHelena, - '290' - ], - [ - 'Saint Kitts and Nevis', - CountryISO.SaintKittsAndNevis, - '1869' - ], - [ - 'Saint Lucia', - CountryISO.SaintLucia, - '1', - 1, - [ - '758', - ] - ], - [ - 'Saint Martin', - CountryISO.SaintMartin, - '590', - 2 - ], - [ - 'Saint Pierre and Miquelon', - CountryISO.SaintPierreAndMiquelon, - '508' - ], - [ - 'Saint Vincent and the Grenadines', - CountryISO.SaintVincentAndTheGrenadines, - '1', - 1, - [ - '784', - ] - ], - [ - 'Samoa', - CountryISO.Samoa, - '685' - ], - [ - 'San Marino', - CountryISO.SanMarino, - '378' - ], - [ - 'São Tomé and Príncipe', - CountryISO.SãoToméAndPríncipe, - '239' - ], - [ - 'Saudi Arabia', - CountryISO.SaudiArabia, - '966' - ], - [ - 'Senegal', - CountryISO.Senegal, - '221' - ], - [ - 'Serbia', - CountryISO.Serbia, - '381' - ], - [ - 'Seychelles', - CountryISO.Seychelles, - '248' - ], - [ - 'Sierra Leone', - CountryISO.SierraLeone, - '232' - ], - [ - 'Singapore', - CountryISO.Singapore, - '65' - ], - [ - 'Sint Maarten', - CountryISO.SintMaarten, - '1', - 1, - [ - '721', - ] - ], - [ - 'Slovakia', - CountryISO.Slovakia, - '421' - ], - [ - 'Slovenia', - CountryISO.Slovenia, - '386' - ], - [ - 'Solomon Islands', - CountryISO.SolomonIslands, - '677' - ], - [ - 'Somalia', - CountryISO.Somalia, - '252' - ], - [ - 'South Africa', - CountryISO.SouthAfrica, - '27' - ], - [ - 'South Korea', - CountryISO.SouthKorea, - '82' - ], - [ - 'South Sudan', - CountryISO.SouthSudan, - '211' - ], - [ - 'Spain', - CountryISO.Spain, - '34' - ], - [ - 'Sri Lanka', - CountryISO.SriLanka, - '94' - ], - [ - 'Sudan', - CountryISO.Sudan, - '249' - ], - [ - 'Suriname', - CountryISO.Suriname, - '597' - ], - [ - 'Svalbard and Jan Mayen', - CountryISO.SvalbardAndJanMayen, - '47', - 1 - ], - [ - 'Swaziland', - CountryISO.Swaziland, - '268' - ], - [ - 'Sweden', - CountryISO.Sweden, - '46' - ], - [ - 'Switzerland', - CountryISO.Switzerland, - '41' - ], - [ - 'Syria', - CountryISO.Syria, - '963' - ], - [ - 'Taiwan', - CountryISO.Taiwan, - '886' - ], - [ - 'Tajikistan', - CountryISO.Tajikistan, - '992' - ], - [ - 'Tanzania', - CountryISO.Tanzania, - '255' - ], - [ - 'Thailand', - CountryISO.Thailand, - '66' - ], - [ - 'Timor-Leste', - CountryISO.TimorLeste, - '670' - ], - [ - 'Togo', - CountryISO.Togo, - '228' - ], - [ - 'Tokelau', - CountryISO.Tokelau, - '690' - ], - [ - 'Tonga', - CountryISO.Tonga, - '676' - ], - [ - 'Trinidad and Tobago', - CountryISO.TrinidadAndTobago, - '1', - 1, - [ - '868', - ] - ], - [ - 'Tunisia', - CountryISO.Tunisia, - '216' - ], - [ - 'Turkey', - CountryISO.Turkey, - '90' - ], - [ - 'Turkmenistan', - CountryISO.Turkmenistan, - '993' - ], - [ - 'Turks and Caicos Islands', - CountryISO.TurksAndCaicosIslands, - '1649' - ], - [ - 'Tuvalu', - CountryISO.Tuvalu, - '688' - ], - [ - 'U.S. Virgin Islands', - CountryISO.USVirginIslands, - '1', - 1, - [ - '340', - ] - ], - [ - 'Uganda', - CountryISO.Uganda, - '256' - ], - [ - 'Ukraine', - CountryISO.Ukraine, - '380' - ], - [ - 'United Arab Emirates', - CountryISO.UnitedArabEmirates, - '971' - ], - [ - 'United Kingdom', - CountryISO.UnitedKingdom, - '44', - 0 - ], - [ - 'United States', - CountryISO.UnitedStates, - '1', - 0 - ], - [ - 'Uruguay', - CountryISO.Uruguay, - '598' - ], - [ - 'Uzbekistan', - CountryISO.Uzbekistan, - '998' - ], - [ - 'Vanuatu', - CountryISO.Vanuatu, - '678' - ], - [ - 'Vatican City', - CountryISO.VaticanCity, - '39', - 1 - ], - [ - 'Venezuela', - CountryISO.Venezuela, - '58' - ], - [ - 'Vietnam', - CountryISO.Vietnam, - '84' - ], - [ - 'Wallis and Futuna', - CountryISO.WallisAndFutuna, - '681' - ], - [ - 'Western Sahara', - CountryISO.WesternSahara, - '212', - 1 - ], - [ - 'Yemen', - CountryISO.Yemen, - '967' - ], - [ - 'Zambia', - CountryISO.Zambia, - '260' - ], - [ - 'Zimbabwe', - CountryISO.Zimbabwe, - '263' - ], - [ - 'Åland Islands', - CountryISO.ÅlandIslands, - '358', - 1 - ] + public allCountries: Array = [ + {name: 'Afghanistan', iso2: CountryISO.Afghanistan, dialCode: '93', flag: '🇦🇫'}, + {name: 'Albania', iso2: CountryISO.Albania, dialCode: '355', flag: '🇦🇱'}, + {name: 'Algeria', iso2: CountryISO.Algeria, dialCode: '213', flag: '🇩🇿'}, + {name: 'American Samoa', iso2: CountryISO.AmericanSamoa, dialCode: '1', flag: '🇦🇸'}, + {name: 'Andorra', iso2: CountryISO.Andorra, dialCode: '376', flag: '🇦🇩'}, + {name: 'Angola', iso2: CountryISO.Angola, dialCode: '244', flag: '🇦🇴'}, + {name: 'Anguilla', iso2: CountryISO.Anguilla, dialCode: '1', flag: '🇦🇮'}, + {name: 'Antigua and Barbuda', iso2: CountryISO.AntiguaAndBarbuda, dialCode: '1', flag: '🇦🇬'}, + {name: 'Argentina', iso2: CountryISO.Argentina, dialCode: '54', flag: '🇦🇷'}, + {name: 'Armenia', iso2: CountryISO.Armenia, dialCode: '374', flag: '🇦🇲'}, + {name: 'Aruba', iso2: CountryISO.Aruba, dialCode: '297', flag: '🇦🇼'}, + {name: 'Australia', iso2: CountryISO.Australia, dialCode: '61', flag: '🇦🇺'}, + {name: 'Austria', iso2: CountryISO.Austria, dialCode: '43', flag: '🇦🇹'}, + {name: 'Azerbaijan', iso2: CountryISO.Azerbaijan, dialCode: '994', flag: '🇦🇿'}, + {name: 'Bahamas', iso2: CountryISO.Bahamas, dialCode: '1', flag: '🇧🇸'}, + {name: 'Bahrain', iso2: CountryISO.Bahrain, dialCode: '973', flag: '🇧🇭'}, + {name: 'Bangladesh', iso2: CountryISO.Bangladesh, dialCode: '880', flag: '🇧🇩'}, + {name: 'Barbados', iso2: CountryISO.Barbados, dialCode: '1', flag: '🇧🇧'}, + {name: 'Belarus', iso2: CountryISO.Belarus, dialCode: '375', flag: '🇧🇾'}, + {name: 'Belgium', iso2: CountryISO.Belgium, dialCode: '32', flag: '🇧🇪'}, + {name: 'Belize', iso2: CountryISO.Belize, dialCode: '501', flag: '🇧🇿'}, + {name: 'Benin', iso2: CountryISO.Benin, dialCode: '229', flag: '🇧🇯'}, + {name: 'Bermuda', iso2: CountryISO.Bermuda, dialCode: '1', flag: '🇧🇲'}, + {name: 'Bhutan', iso2: CountryISO.Bhutan, dialCode: '975', flag: '🇧🇹'}, + {name: 'Bolivia', iso2: CountryISO.Bolivia, dialCode: '591', flag: '🇧🇴'}, + {name: 'Bosnia and Herzegovina', iso2: CountryISO.BosniaAndHerzegovina, dialCode: '387', flag: '🇧🇦'}, + {name: 'Botswana', iso2: CountryISO.Botswana, dialCode: '267', flag: '🇧🇼'}, + {name: 'Brazil', iso2: CountryISO.Brazil, dialCode: '55', flag: '🇧🇷'}, + {name: 'British Indian Ocean Territory', iso2: CountryISO.BritishIndianOceanTerritory, dialCode: '246', flag: '🇮🇴'}, + {name: 'British Virgin Islands', iso2: CountryISO.BritishVirginIslands, dialCode: '1', flag: '🇻🇬'}, + {name: 'Brunei', iso2: CountryISO.Brunei, dialCode: '673', flag: '🇧🇳'}, + {name: 'Bulgaria', iso2: CountryISO.Bulgaria, dialCode: '359', flag: '🇧🇬'}, + {name: 'Burkina Faso', iso2: CountryISO.BurkinaFaso, dialCode: '226', flag: '🇧🇫'}, + {name: 'Burundi', iso2: CountryISO.Burundi, dialCode: '257', flag: '🇧🇮'}, + {name: 'Cambodia', iso2: CountryISO.Cambodia, dialCode: '855', flag: '🇰🇭'}, + {name: 'Cameroon', iso2: CountryISO.Cameroon, dialCode: '237', flag: '🇨🇲'}, + {name: 'Canada', iso2: CountryISO.Canada, dialCode: '1', flag: '🇨🇦'}, + {name: 'Cape Verde', iso2: CountryISO.CapeVerde, dialCode: '238', flag: '🇨🇻'}, + {name: 'Caribbean Netherlands', iso2: CountryISO.CaribbeanNetherlands, dialCode: '599', flag: '🇧🇶'}, + {name: 'Cayman Islands', iso2: CountryISO.CaymanIslands, dialCode: '1', flag: '🇰🇾'}, + {name: 'Central African Republic', iso2: CountryISO.CentralAfricanRepublic, dialCode: '236', flag: '🇨🇫'}, + {name: 'Chad', iso2: CountryISO.Chad, dialCode: '235', flag: '🇹🇩'}, + {name: 'Chile', iso2: CountryISO.Chile, dialCode: '56', flag: '🇨🇱'}, + {name: 'China', iso2: CountryISO.China, dialCode: '86', flag: '🇨🇳'}, + {name: 'Christmas Island', iso2: CountryISO.ChristmasIsland, dialCode: '61', flag: '🇨🇽'}, + {name: 'Cocos Islands', iso2: CountryISO.Cocos, dialCode: '61', flag: '🇨🇨'}, + {name: 'Colombia', iso2: CountryISO.Colombia, dialCode: '57', flag: '🇨🇨'}, + {name: 'Comoros', iso2: CountryISO.Comoros, dialCode: '269', flag: '🇰🇲'}, + {name: 'Congo-Kinshasa', iso2: CountryISO.CongoDRCJamhuriYaKidemokrasiaYaKongo, dialCode: '243', flag: '🇨🇩'}, + {name: 'Congo-Brazzaville', iso2: CountryISO.CongoRepublicCongoBrazzaville, dialCode: '242', flag: '🇨🇬'}, + {name: 'Cook Islands', iso2: CountryISO.CookIslands, dialCode: '682', flag: '🇨🇰'}, + {name: 'Costa Rica', iso2: CountryISO.CostaRica, dialCode: '506', flag: '🇨🇷'}, + {name: 'Côte d’Ivoire', iso2: CountryISO.CôteDIvoire, dialCode: '225', flag: '🇨🇮'}, + {name: 'Croatia', iso2: CountryISO.Croatia, dialCode: '385', flag: '🇭🇷'}, + {name: 'Cuba', iso2: CountryISO.Cuba, dialCode: '53', flag: '🇨🇺'}, + {name: 'Curaçao', iso2: CountryISO.Curaçao, dialCode: '599', flag: '🇨🇼'}, + {name: 'Cyprus', iso2: CountryISO.Cyprus, dialCode: '357', flag: '🇨🇾'}, + {name: 'Czech Republic', iso2: CountryISO.CzechRepublic, dialCode: '420', flag: '🇨🇿'}, + {name: 'Denmark', iso2: CountryISO.Denmark, dialCode: '45', flag: '🇩🇰'}, + {name: 'Djibouti', iso2: CountryISO.Djibouti, dialCode: '253', flag: '🇩🇯'}, + {name: 'Dominica', iso2: CountryISO.Dominica, dialCode: '1767', flag: '🇩🇲'}, + {name: 'Dominican Republic', iso2: CountryISO.DominicanRepublic, dialCode: '1', flag: '🇩🇴'}, + {name: 'Ecuador', iso2: CountryISO.Ecuador, dialCode: '593', flag: '🇪🇨'}, + {name: 'Egypt', iso2: CountryISO.Egypt, dialCode: '20', flag: '🇪🇬'}, + {name: 'El Salvador', iso2: CountryISO.ElSalvador, dialCode: '503', flag: '🇸🇻'}, + {name: 'Equatorial Guinea', iso2: CountryISO.EquatorialGuinea, dialCode: '240', flag: '🇬🇶'}, + {name: 'Eritrea', iso2: CountryISO.Eritrea, dialCode: '291', flag: '🇪🇷'}, + {name: 'Estonia', iso2: CountryISO.Estonia, dialCode: '372', flag: '🇪🇪'}, + {name: 'Ethiopia', iso2: CountryISO.Ethiopia, dialCode: '251', flag: '🇪🇹'}, + {name: 'Falkland Islands', iso2: CountryISO.FalklandIslands, dialCode: '500', flag: '🇫🇰'}, + {name: 'Faroe Islands', iso2: CountryISO.FaroeIslands, dialCode: '298', flag: '🇫🇴'}, + {name: 'Fiji', iso2: CountryISO.Fiji, dialCode: '679', flag: '🇫🇯'}, + {name: 'Finland', iso2: CountryISO.Finland, dialCode: '358', flag: '🇫🇮'}, + {name: 'France', iso2: CountryISO.France, dialCode: '33', flag: '🇫🇷'}, + {name: 'French Guiana', iso2: CountryISO.FrenchGuiana, dialCode: '594', flag: '🇬🇫'}, + {name: 'French Polynesia', iso2: CountryISO.FrenchPolynesia, dialCode: '689', flag: '🇵🇫'}, + {name: 'Gabon', iso2: CountryISO.Gabon, dialCode: '241', flag: '🇬🇦'}, + {name: 'Gambia', iso2: CountryISO.Gambia, dialCode: '220', flag: '🇬🇲'}, + {name: 'Georgia', iso2: CountryISO.Georgia, dialCode: '995', flag: '🇬🇪'}, + {name: 'Germany', iso2: CountryISO.Germany, dialCode: '49', flag: '🇩🇪'}, + {name: 'Ghana', iso2: CountryISO.Ghana, dialCode: '233', flag: '🇬🇭'}, + {name: 'Gibraltar', iso2: CountryISO.Gibraltar, dialCode: '350', flag: '🇬🇮'}, + {name: 'Greece', iso2: CountryISO.Greece, dialCode: '30', flag: '🇬🇷'}, + {name: 'Greenland', iso2: CountryISO.Greenland, dialCode: '299', flag: '🇬🇱'}, + {name: 'Grenada', iso2: CountryISO.Grenada, dialCode: '1473', flag: '🇬🇩'}, + {name: 'Guadeloupe', iso2: CountryISO.Guadeloupe, dialCode: '590', flag: '🇬🇵'}, + {name: 'Guam', iso2: CountryISO.Guam, dialCode: '1', flag: '🇬🇺'}, + {name: 'Guatemala', iso2: CountryISO.Guatemala, dialCode: '502', flag: '🇬🇹'}, + {name: 'Guernsey', iso2: CountryISO.Guernsey, dialCode: '44', flag: '🇬🇬'}, + {name: 'Guinea', iso2: CountryISO.Guinea, dialCode: '224', flag: '🇬🇳'}, + {name: 'Guinea-Bissau', iso2: CountryISO.GuineaBissau, dialCode: '245', flag: '🇬🇼'}, + {name: 'Guyana', iso2: CountryISO.Guyana, dialCode: '592', flag: '🇬🇾'}, + {name: 'Haiti', iso2: CountryISO.Haiti, dialCode: '509', flag: '🇭🇹'}, + {name: 'Honduras', iso2: CountryISO.Honduras, dialCode: '504', flag: '🇭🇳'}, + {name: 'Hong Kong', iso2: CountryISO.HongKong, dialCode: '852', flag: '🇭🇰'}, + {name: 'Hungary', iso2: CountryISO.Hungary, dialCode: '36', flag: '🇭🇺'}, + {name: 'Iceland', iso2: CountryISO.Iceland, dialCode: '354', flag: '🇮🇸'}, + {name: 'India', iso2: CountryISO.India, dialCode: '91', flag: '🇮🇳'}, + {name: 'Indonesia', iso2: CountryISO.Indonesia, dialCode: '62', flag: '🇮🇩'}, + {name: 'Iran', iso2: CountryISO.Iran, dialCode: '98', flag: '🇮🇷'}, + {name: 'Iraq', iso2: CountryISO.Iraq, dialCode: '964', flag: '🇮🇶'}, + {name: 'Ireland', iso2: CountryISO.Ireland, dialCode: '353', flag: '🇮🇪'}, + {name: 'Isle of Man', iso2: CountryISO.IsleOfMan, dialCode: '44', flag: '🇮🇲'}, + {name: 'Israel', iso2: CountryISO.Israel, dialCode: '972', flag: '🇮🇱'}, + {name: 'Italy', iso2: CountryISO.Italy, dialCode: '39', flag: '🇮🇹'}, + {name: 'Jamaica', iso2: CountryISO.Jamaica, dialCode: '1', flag: '🇯🇲'}, + {name: 'Japan', iso2: CountryISO.Japan, dialCode: '81', flag: '🇯🇵'}, + {name: 'Jersey', iso2: CountryISO.Jersey, dialCode: '44', flag: '🇯🇪'}, + {name: 'Jordan', iso2: CountryISO.Jordan, dialCode: '962', flag: '🇯🇴'}, + {name: 'Kazakhstan', iso2: CountryISO.Kazakhstan, dialCode: '7', flag: '🇰🇿'}, + {name: 'Kenya', iso2: CountryISO.Kenya, dialCode: '254', flag: '🇰🇪'}, + {name: 'Kiribati', iso2: CountryISO.Kiribati, dialCode: '686', flag: '🇰🇮'}, + {name: 'Kosovo', iso2: CountryISO.Kosovo, dialCode: '383', flag: '🇽🇰'}, + {name: 'Kuwait', iso2: CountryISO.Kuwait, dialCode: '965', flag: '🇰🇼'}, + {name: 'Kyrgyzstan', iso2: CountryISO.Kyrgyzstan, dialCode: '996', flag: '🇰🇬'}, + {name: 'Laos', iso2: CountryISO.Laos, dialCode: '856', flag: '🇱🇦'}, + {name: 'Latvia', iso2: CountryISO.Latvia, dialCode: '371', flag: '🇱🇻'}, + {name: 'Lebanon', iso2: CountryISO.Lebanon, dialCode: '961', flag: '🇱🇧'}, + {name: 'Lesotho', iso2: CountryISO.Lesotho, dialCode: '266', flag: '🇱🇸'}, + {name: 'Liberia', iso2: CountryISO.Liberia, dialCode: '231', flag: '🇱🇷'}, + {name: 'Libya', iso2: CountryISO.Libya, dialCode: '218', flag: '🇱🇾'}, + {name: 'Liechtenstein', iso2: CountryISO.Liechtenstein, dialCode: '423', flag: '🇱🇮'}, + {name: 'Lithuania', iso2: CountryISO.Lithuania, dialCode: '370', flag: '🇱🇹'}, + {name: 'Luxembourg', iso2: CountryISO.Luxembourg, dialCode: '352', flag: '🇱🇺'}, + {name: 'Macau', iso2: CountryISO.Macau, dialCode: '853', flag: '🇲🇴'}, + {name: 'Macedonia', iso2: CountryISO.Macedonia, dialCode: '389', flag: '🇲🇰'}, + {name: 'Madagascar', iso2: CountryISO.Madagascar, dialCode: '261', flag: '🇲🇬'}, + {name: 'Malawi', iso2: CountryISO.Malawi, dialCode: '265', flag: '🇲🇼'}, + {name: 'Malaysia', iso2: CountryISO.Malaysia, dialCode: '60', flag: '🇲🇾'}, + {name: 'Maldives', iso2: CountryISO.Maldives, dialCode: '960', flag: '🇲🇻'}, + {name: 'Mali', iso2: CountryISO.Mali, dialCode: '223', flag: '🇲🇱'}, + {name: 'Malta', iso2: CountryISO.Malta, dialCode: '356', flag: '🇲🇹'}, + {name: 'Marshall Islands', iso2: CountryISO.MarshallIslands, dialCode: '692', flag: '🇲🇭'}, + {name: 'Martinique', iso2: CountryISO.Martinique, dialCode: '596', flag: '🇲🇶'}, + {name: 'Mauritania', iso2: CountryISO.Mauritania, dialCode: '222', flag: '🇲🇷'}, + {name: 'Mauritius', iso2: CountryISO.Mauritius, dialCode: '230', flag: '🇲🇺'}, + {name: 'Mayotte', iso2: CountryISO.Mayotte, dialCode: '262', flag: '🇾🇹'}, + {name: 'Mexico', iso2: CountryISO.Mexico, dialCode: '52', flag: '🇲🇽'}, + {name: 'Micronesia', iso2: CountryISO.Micronesia, dialCode: '691', flag: '🇫🇲'}, + {name: 'Moldova', iso2: CountryISO.Moldova, dialCode: '373', flag: '🇲🇩'}, + {name: 'Monaco', iso2: CountryISO.Monaco, dialCode: '377', flag: '🇲🇨'}, + {name: 'Mongolia', iso2: CountryISO.Mongolia, dialCode: '976', flag: '🇲🇳'}, + {name: 'Montenegro', iso2: CountryISO.Montenegro, dialCode: '382', flag: '🇲🇪'}, + {name: 'Montserrat', iso2: CountryISO.Montserrat, dialCode: '1', flag: '🇲🇸'}, + {name: 'Morocco', iso2: CountryISO.Morocco, dialCode: '212', flag: '🇲🇦'}, + {name: 'Mozambique', iso2: CountryISO.Mozambique, dialCode: '258', flag: '🇲🇿'}, + {name: 'Myanmar', iso2: CountryISO.Myanmar, dialCode: '95', flag: '🇲🇲'}, + {name: 'Namibia', iso2: CountryISO.Namibia, dialCode: '264', flag: '🇳🇦'}, + {name: 'Nauru', iso2: CountryISO.Nauru, dialCode: '674', flag: '🇳🇷'}, + {name: 'Nepal', iso2: CountryISO.Nepal, dialCode: '977', flag: '🇳🇵'}, + {name: 'Netherlands', iso2: CountryISO.Netherlands, dialCode: '31', flag: '🇳🇱'}, + {name: 'New Caledonia', iso2: CountryISO.NewCaledonia, dialCode: '687', flag: '🇳🇨'}, + {name: 'New Zealand', iso2: CountryISO.NewZealand, dialCode: '64', flag: '🇳🇿'}, + {name: 'Nicaragua', iso2: CountryISO.Nicaragua, dialCode: '505', flag: '🇳🇮'}, + {name: 'Niger', iso2: CountryISO.Niger, dialCode: '227', flag: '🇳🇪'}, + {name: 'Nigeria', iso2: CountryISO.Nigeria, dialCode: '234', flag: '🇳🇬'}, + {name: 'Niue', iso2: CountryISO.Niue, dialCode: '683', flag: '🇳🇺'}, + {name: 'Norfolk Island', iso2: CountryISO.NorfolkIsland, dialCode: '672', flag: '🇳🇫'}, + {name: 'North Korea', iso2: CountryISO.NorthKorea, dialCode: '850', flag: '🇰🇵'}, + {name: 'Northern Mariana Islands', iso2: CountryISO.NorthernMarianaIslands, dialCode: '1670', flag: '🇲🇵'}, + {name: 'Norway', iso2: CountryISO.Norway, dialCode: '47', flag: '🇳🇴'}, + {name: 'Oman', iso2: CountryISO.Oman, dialCode: '968', flag: '🇴🇲'}, + {name: 'Pakistan', iso2: CountryISO.Pakistan, dialCode: '92', flag: '🇵🇰'}, + {name: 'Palau', iso2: CountryISO.Palau, dialCode: '680', flag: '🇵🇼'}, + {name: 'Palestine', iso2: CountryISO.Palestine, dialCode: '970', flag: '🇵🇸'}, + {name: 'Panama', iso2: CountryISO.Panama, dialCode: '507', flag: '🇵🇦'}, + {name: 'Papua New Guinea', iso2: CountryISO.PapuaNewGuinea, dialCode: '675', flag: '🇵🇬'}, + {name: 'Paraguay', iso2: CountryISO.Paraguay, dialCode: '595', flag: '🇵🇾'}, + {name: 'Peru', iso2: CountryISO.Peru, dialCode: '51', flag: '🇵🇪'}, + {name: 'Philippines', iso2: CountryISO.Philippines, dialCode: '63', flag: '🇵🇭'}, + {name: 'Poland', iso2: CountryISO.Poland, dialCode: '48', flag: '🇵🇱'}, + {name: 'Portugal', iso2: CountryISO.Portugal, dialCode: '351', flag: '🇵🇹'}, + {name: 'Puerto Rico', iso2: CountryISO.PuertoRico, dialCode: '1', flag: '🇵🇷'}, + {name: 'Qatar', iso2: CountryISO.Qatar, dialCode: '974', flag: '🇶🇦'}, + {name: 'Réunion', iso2: CountryISO.Réunion, dialCode: '262', flag: '🇷🇪'}, + {name: 'Romania', iso2: CountryISO.Romania, dialCode: '40', flag: '🇷🇴'}, + {name: 'Russia', iso2: CountryISO.Russia, dialCode: '7', flag: '🇷🇺'}, + {name: 'Rwanda', iso2: CountryISO.Rwanda, dialCode: '250', flag: '🇷🇼'}, + {name: 'Saint Barthélemy', iso2: CountryISO.SaintBarthélemy, dialCode: '590', flag: '🇧🇱'}, + {name: 'Saint Helena', iso2: CountryISO.SaintHelena, dialCode: '290', flag: '🇸🇭'}, + {name: 'Saint Kitts and Nevis', iso2: CountryISO.SaintKittsAndNevis, dialCode: '1869', flag: '🇰🇳'}, + {name: 'Saint Lucia', iso2: CountryISO.SaintLucia, dialCode: '1', flag: '🇱🇨'}, + {name: 'Saint Martin', iso2: CountryISO.SaintMartin, dialCode: '590', flag: '🇲🇫'}, + {name: 'Saint Pierre and Miquelon', iso2: CountryISO.SaintPierreAndMiquelon, dialCode: '508', flag: '🇵🇲'}, + {name: 'Saint Vincent and the Grenadines', iso2: CountryISO.SaintVincentAndTheGrenadines, dialCode: '1', flag: '🇻🇨'}, + {name: 'Samoa', iso2: CountryISO.Samoa, dialCode: '685', flag: '🇼🇸'}, + {name: 'San Marino', iso2: CountryISO.SanMarino, dialCode: '378', flag: '🇸🇲'}, + {name: 'São Tomé and Príncipe', iso2: CountryISO.SãoToméAndPríncipe, dialCode: '239', flag: '🇸🇹'}, + {name: 'Saudi Arabia', iso2: CountryISO.SaudiArabia, dialCode: '966', flag: '🇸🇦'}, + {name: 'Senegal', iso2: CountryISO.Senegal, dialCode: '221', flag: '🇸🇳'}, + {name: 'Serbia', iso2: CountryISO.Serbia, dialCode: '381', flag: '🇷🇸'}, + {name: 'Seychelles', iso2: CountryISO.Seychelles, dialCode: '248', flag: '🇸🇨'}, + {name: 'Sierra Leone', iso2: CountryISO.SierraLeone, dialCode: '232', flag: '🇸🇱'}, + {name: 'Singapore', iso2: CountryISO.Singapore, dialCode: '65', flag: '🇸🇬'}, + {name: 'Sint Maarten', iso2: CountryISO.SintMaarten, dialCode: '1', flag: '🇸🇽'}, + {name: 'Slovakia', iso2: CountryISO.Slovakia, dialCode: '421', flag: '🇸🇰'}, + {name: 'Slovenia', iso2: CountryISO.Slovenia, dialCode: '386', flag: '🇸🇮'}, + {name: 'Solomon Islands', iso2: CountryISO.SolomonIslands, dialCode: '677', flag: '🇸🇧'}, + {name: 'Somalia', iso2: CountryISO.Somalia, dialCode: '252', flag: '🇸🇴'}, + {name: 'South Africa', iso2: CountryISO.SouthAfrica, dialCode: '27', flag: '🇿🇦'}, + {name: 'South Korea', iso2: CountryISO.SouthKorea, dialCode: '82', flag: '🇰🇷'}, + {name: 'South Sudan', iso2: CountryISO.SouthSudan, dialCode: '211', flag: '🇸🇸'}, + {name: 'Spain', iso2: CountryISO.Spain, dialCode: '34', flag: '🇪🇸'}, + {name: 'Sri Lanka', iso2: CountryISO.SriLanka, dialCode: '94', flag: '🇱🇰'}, + {name: 'Sudan', iso2: CountryISO.Sudan, dialCode: '249', flag: '🇸🇩'}, + {name: 'Suriname: ', iso2: CountryISO.Suriname, dialCode: '597', flag: '🇸🇷'}, + {name: 'Svalbard and Jan Mayen', iso2: CountryISO.SvalbardAndJanMayen, dialCode: '47', flag: '🇸🇯'}, + {name: 'Swaziland', iso2: CountryISO.Swaziland, dialCode: '268', flag: '🇸🇿'}, + {name: 'Sweden', iso2: CountryISO.Sweden, dialCode: '46', flag: '🇸🇪'}, + {name: 'Switzerland', iso2: CountryISO.Switzerland, dialCode: '41', flag: '🇨🇭'}, + {name: 'Syria', iso2: CountryISO.Syria, dialCode: '963', flag: '🇸🇾'}, + {name: 'Taiwan', iso2: CountryISO.Taiwan, dialCode: '886', flag: '🇹🇼'}, + {name: 'Tajikistan', iso2: CountryISO.Tajikistan, dialCode: '992', flag: '🇹🇯'}, + {name: 'Tanzania', iso2: CountryISO.Tanzania, dialCode: '255', flag: '🇹🇿'}, + {name: 'Thailand', iso2: CountryISO.Thailand, dialCode: '66', flag: '🇹🇭'}, + {name: 'Timor-Leste', iso2: CountryISO.TimorLeste, dialCode: '670', flag: '🇹🇱'}, + {name: 'Togo', iso2: CountryISO.Togo, dialCode: '228', flag: '🇹🇬'}, + {name: 'Tokelau', iso2: CountryISO.Tokelau, dialCode: '690', flag: '🇹🇰'}, + {name: 'Tonga', iso2: CountryISO.Tonga, dialCode: '676', flag: '🇹🇴'}, + {name: 'Trinidad and Tobago', iso2: CountryISO.TrinidadAndTobago, dialCode: '1', flag: '🇹🇹'}, + {name: 'Tunisia', iso2: CountryISO.Tunisia, dialCode: '216', flag: '🇹🇳'}, + {name: 'Turkey', iso2: CountryISO.Turkey, dialCode: '90', flag: '🇹🇷'}, + {name: 'Turkmenistan', iso2: CountryISO.Turkmenistan, dialCode: '993', flag: '🇹🇲'}, + {name: 'Turks and Caicos Islands', iso2: CountryISO.TurksAndCaicosIslands, dialCode: '1649', flag: '🇹🇨'}, + {name: 'Tuvalu', iso2: CountryISO.Tuvalu, dialCode: '688', flag: '🇹🇻'}, + {name: 'U.S. Virgin Islands', iso2: CountryISO.USVirginIslands, dialCode: '1', flag: '🇻🇮'}, + {name: 'Uganda', iso2: CountryISO.Uganda, dialCode: '256', flag: '🇺🇬'}, + {name: 'Ukraine', iso2: CountryISO.Ukraine, dialCode: '380', flag: '🇺🇦'}, + {name: 'United Arab Emirates', iso2: CountryISO.UnitedArabEmirates, dialCode: '971', flag: '🇦🇪'}, + {name: 'United Kingdom', iso2: CountryISO.UnitedKingdom, dialCode: '44', flag: '🇬🇧'}, + {name: 'United States', iso2: CountryISO.UnitedStates, dialCode: '1', flag: '🇺🇸'}, + {name: 'Uruguay', iso2: CountryISO.Uruguay, dialCode: '598', flag: '🇺🇾'}, + {name: 'Uzbekistan', iso2: CountryISO.Uzbekistan, dialCode: '998', flag: '🇺🇿'}, + {name: 'Vanuatu', iso2: CountryISO.Vanuatu, dialCode: '678', flag: '🇻🇺'}, + {name: 'Vatican City', iso2: CountryISO.VaticanCity, dialCode: '39', flag: '🇻🇦'}, + {name: 'Venezuela', iso2: CountryISO.Venezuela, dialCode: '58', flag: '🇻🇪'}, + {name: 'Vietnam', iso2: CountryISO.Vietnam, dialCode: '84', flag: '🇻🇳'}, + {name: 'Wallis and Futuna', iso2: CountryISO.WallisAndFutuna, dialCode: '681', flag: '🇼🇫'}, + {name: 'Western Sahara', iso2: CountryISO.WesternSahara, dialCode: '212', flag: '🇪🇭'}, + {name: 'Yemen', iso2: CountryISO.Yemen, dialCode: '967', flag: '🇾🇪'}, + {name: 'Zambia', iso2: CountryISO.Zambia, dialCode: '260', flag: '🇿🇲'}, + {name: 'Zimbabwe', iso2: CountryISO.Zimbabwe, dialCode: '263', flag: '🇿🇼'}, + {name: 'Åland Islands', iso2: CountryISO.ÅlandIslands, dialCode: '358', flag: '🇦🇽'} ]; } From afc3820b79a1c54330fb6d30e1808e7d49de4b34 Mon Sep 17 00:00:00 2001 From: fe-dev Date: Mon, 13 Jun 2022 16:48:15 +0300 Subject: [PATCH 5/7] UI: Change placeholder --- ui-ngx/src/app/shared/components/phone-input.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui-ngx/src/app/shared/components/phone-input.component.html b/ui-ngx/src/app/shared/components/phone-input.component.html index 4b81391b5f..039f52a272 100644 --- a/ui-ngx/src/app/shared/components/phone-input.component.html +++ b/ui-ngx/src/app/shared/components/phone-input.component.html @@ -28,12 +28,12 @@ - phone-input.phone-input-label + security.2fa.dialog.sms-step-label Date: Tue, 14 Jun 2022 12:06:46 +0300 Subject: [PATCH 6/7] UI: Add input placeholder --- .../authentication-dialog/sms-auth-dialog.component.html | 6 +++++- ui-ngx/src/app/shared/components/phone-input.component.html | 4 ++-- ui-ngx/src/app/shared/components/phone-input.component.ts | 1 + 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html index bb547f56a3..e216c22d3e 100644 --- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html +++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html @@ -37,7 +37,11 @@

security.2fa.dialog.sms-step-description

- + +
- security.2fa.dialog.sms-step-label + {{ placeholder | translate }} = this.countryCodeData.allCountries; phonePlaceholder: string; From 51e05d1a9ad7bc60d824949d57639c56dc4d0666 Mon Sep 17 00:00:00 2001 From: fe-dev Date: Tue, 14 Jun 2022 16:14:01 +0300 Subject: [PATCH 7/7] UI: Refactoring phone input and add to test sms dialog and contact --- .../admin/send-test-sms-dialog.component.html | 16 ++++------ .../sms-auth-dialog.component.html | 2 +- .../shared/components/contact.component.html | 12 ++++---- .../components/phone-input.component.html | 2 +- .../components/phone-input.component.scss | 1 - .../components/phone-input.component.ts | 30 ++++++++++++++----- 6 files changed, 35 insertions(+), 28 deletions(-) diff --git a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html index cc7b4d21f3..40cc60f730 100644 --- a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html +++ b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html @@ -30,17 +30,11 @@
- - admin.number-to - - - {{ 'admin.number-to-required' | translate }} - - - {{ 'admin.phone-number-pattern' | translate }} - - - + + admin.sms-message diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html index e216c22d3e..aace1d7152 100644 --- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html +++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html @@ -36,7 +36,7 @@ {{ 'security.2fa.dialog.sms-step-label' | translate }}

security.2fa.dialog.sms-step-description

-
+
contact.address2 - - contact.phone - - - {{ 'contact.phone-max-length' | translate }} - - + + contact.email diff --git a/ui-ngx/src/app/shared/components/phone-input.component.html b/ui-ngx/src/app/shared/components/phone-input.component.html index c5b2ae7bc1..83db450d70 100644 --- a/ui-ngx/src/app/shared/components/phone-input.component.html +++ b/ui-ngx/src/app/shared/components/phone-input.component.html @@ -28,7 +28,7 @@
- {{ placeholder | translate }} + {{ label | translate }} = this.countryCodeData.allCountries; phonePlaceholder: string;