@smallpearl/ngx-helper 0.29.23

package/fesm2022/smallpearl-ngx-helper-mat-tel-input.mjs

@@ -0,0 +1,926 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Component, ChangeDetectionStrategy, Optional, Inject, Self, ViewChild, Input } from '@angular/core';
+import * as i2 from '@angular/cdk/a11y';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/common/http';
+import * as i3 from '@angular/forms';
+import { FormGroup, FormControl, Validators, NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i8 from '@angular/material/form-field';
+import { MAT_FORM_FIELD, MatFormFieldControl } from '@angular/material/form-field';
+import { PhoneNumberUtil, PhoneNumberType } from 'google-libphonenumber';
+import { BehaviorSubject, ReplaySubject, Subject, NEVER } from 'rxjs';
+import { map, takeUntil, take, tap, catchError } from 'rxjs/operators';
+import * as i7 from 'ngx-mat-select-search';
+import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i6 from '@angular/material/core';
+
+const QQMAT_TELEPHONE_INPUT_CONFIG_PROVIDER = new InjectionToken('QQMatTelephoneInputConfigProvider');
+
+// Array of country objects for the flag dropdown.
+// Here is the criteria for the plugin to support a given country/territory
+// - It has an iso2 code: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
+// - It has it's own country calling code (it is not a sub-region of another country): https://en.wikipedia.org/wiki/List_of_country_calling_codes
+// - It has a flag in the region-flags project: https://github.com/behdad/region-flags/tree/gh-pages/png
+// - It is supported by libphonenumber (it must be listed on this page): https://github.com/googlei18n/libphonenumber/blob/master/resources/ShortNumberMetadata.xml
+// Each country array has the following information:
+// [
+//    Country name,
+//    iso2 code,
+//    International dial code,
+// ]
+const COUNTRY_CODES = [
+    { name: "Afghanistan (‫افغانستان‬‎)", code: "AF", callingCode: 93 },
+    { name: "Albania (Shqipëri)", code: "AL", callingCode: 355 },
+    { name: "Algeria (‫الجزائر‬‎)", code: "DZ", callingCode: 213 },
+    { name: "American Samoa", code: "AS", callingCode: 1 },
+    { name: "Andorra", code: "AD", callingCode: 376 },
+    { name: "Angola", code: "AO", callingCode: 244 },
+    { name: "Anguilla", code: "AI", callingCode: 1 },
+    { name: "Antigua and Barbuda", code: "AG", callingCode: 1 },
+    { name: "Argentina", code: "AR", callingCode: 54 },
+    { name: "Armenia (Հայաստան)", code: "AM", callingCode: 374 },
+    { name: "Aruba", code: "AW", callingCode: 297 },
+    { name: "Ascension Island", code: "AC", callingCode: 247 },
+    { name: "Australia", code: "AU", callingCode: 61 },
+    { name: "Austria (Österreich)", code: "AT", callingCode: 43 },
+    { name: "Azerbaijan (Azərbaycan)", code: "AZ", callingCode: 994 },
+    { name: "Bahamas", code: "BS", callingCode: 1 },
+    { name: "Bahrain (‫البحرين‬‎)", code: "BH", callingCode: 973 },
+    { name: "Bangladesh (বাংলাদেশ)", code: "BD", callingCode: 880 },
+    { name: "Barbados", code: "BB", callingCode: 1 },
+    { name: "Belarus (Беларусь)", code: "BY", callingCode: 375 },
+    { name: "Belgium (België)", code: "BE", callingCode: 32 },
+    { name: "Belize", code: "BZ", callingCode: 501 },
+    { name: "Benin (Bénin)", code: "BJ", callingCode: 229 },
+    { name: "Bermuda", code: "BM", callingCode: 1 },
+    { name: "Bhutan (འབྲུག)", code: "BT", callingCode: 975 },
+    { name: "Bolivia", code: "BO", callingCode: 591 },
+    { name: "Bosnia and Herzegovina (Босна и Херцеговина)", code: "BA", callingCode: 387 },
+    { name: "Botswana", code: "BW", callingCode: 267 },
+    { name: "Brazil (Brasil)", code: "BR", callingCode: 55 },
+    { name: "British Indian Ocean Territory", code: "IO", callingCode: 246 },
+    { name: "British Virgin Islands", code: "VG", callingCode: 1 },
+    { name: "Brunei", code: "BN", callingCode: 673 },
+    { name: "Bulgaria (България)", code: "BG", callingCode: 359 },
+    { name: "Burkina Faso", code: "BF", callingCode: 226 },
+    { name: "Burundi (Uburundi)", code: "BI", callingCode: 257 },
+    { name: "Cambodia (កម្ពុជា)", code: "KH", callingCode: 855 },
+    { name: "Cameroon (Cameroun)", code: "CM", callingCode: 237 },
+    { name: "Canada", code: "CA", callingCode: 1 },
+    { name: "Cape Verde (Kabu Verdi)", code: "CV", callingCode: 238 },
+    { name: "Caribbean Netherlands", code: "BQ", callingCode: 599 },
+    { name: "Cayman Islands", code: "KY", callingCode: 1 },
+    { name: "Central African Republic (République centrafricaine)", code: "CF", callingCode: 236 },
+    { name: "Chad (Tchad)", code: "TD", callingCode: 235 },
+    { name: "Chile", code: "CL", callingCode: 56 },
+    { name: "China (中国)", code: "CN", callingCode: 86 },
+    { name: "Christmas Island", code: "CX", callingCode: 61 },
+    { name: "Cocos (Keeling) Islands", code: "CC", callingCode: 61 },
+    { name: "Colombia", code: "CO", callingCode: 57 },
+    { name: "Comoros (‫جزر القمر‬‎)", code: "KM", callingCode: 269 },
+    { name: "Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)", code: "CD", callingCode: 243 },
+    { name: "Congo (Republic) (Congo-Brazzaville)", code: "CG", callingCode: 242 },
+    { name: "Cook Islands", code: "CK", callingCode: 682 },
+    { name: "Costa Rica", code: "CR", callingCode: 506 },
+    { name: "Côte d’Ivoire", code: "CI", callingCode: 225 },
+    { name: "Croatia (Hrvatska)", code: "HR", callingCode: 385 },
+    { name: "Cuba", code: "CU", callingCode: 53 },
+    { name: "Curaçao", code: "CW", callingCode: 599 },
+    { name: "Cyprus (Κύπρος)", code: "CY", callingCode: 357 },
+    { name: "Czech Republic (Česká republika)", code: "CZ", callingCode: 420 },
+    { name: "Denmark (Danmark)", code: "DK", callingCode: 45 },
+    { name: "Djibouti", code: "DJ", callingCode: 253 },
+    { name: "Dominica", code: "DM", callingCode: 1 },
+    { name: "Dominican Republic (República Dominicana)", code: "DO", callingCode: 1 },
+    { name: "Ecuador", code: "EC", callingCode: 593 },
+    { name: "Egypt (‫مصر‬‎)", code: "EG", callingCode: 20 },
+    { name: "El Salvador", code: "SV", callingCode: 503 },
+    { name: "Equatorial Guinea (Guinea Ecuatorial)", code: "GQ", callingCode: 240 },
+    { name: "Eritrea", code: "ER", callingCode: 291 },
+    { name: "Estonia (Eesti)", code: "EE", callingCode: 372 },
+    { name: "Eswatini", code: "SZ", callingCode: 268 },
+    { name: "Ethiopia", code: "ET", callingCode: 251 },
+    { name: "Falkland Islands (Islas Malvinas)", code: "FK", callingCode: 500 },
+    { name: "Faroe Islands (Føroyar)", code: "FO", callingCode: 298 },
+    { name: "Fiji", code: "FJ", callingCode: 679 },
+    { name: "Finland (Suomi)", code: "FI", callingCode: 358 },
+    { name: "France", code: "FR", callingCode: 33 },
+    { name: "French Guiana (Guyane française)", code: "GF", callingCode: 594 },
+    { name: "French Polynesia (Polynésie française)", code: "PF", callingCode: 689 },
+    { name: "Gabon", code: "GA", callingCode: 241 },
+    { name: "Gambia", code: "GM", callingCode: 220 },
+    { name: "Georgia (საქართველო)", code: "GE", callingCode: 995 },
+    { name: "Germany (Deutschland)", code: "DE", callingCode: 49 },
+    { name: "Ghana (Gaana)", code: "GH", callingCode: 233 },
+    { name: "Gibraltar", code: "GI", callingCode: 350 },
+    { name: "Greece (Ελλάδα)", code: "GR", callingCode: 30 },
+    { name: "Greenland (Kalaallit Nunaat)", code: "GL", callingCode: 299 },
+    { name: "Grenada", code: "GD", callingCode: 1 },
+    { name: "Guadeloupe", code: "GP", callingCode: 590 },
+    { name: "Guam", code: "GU", callingCode: 1 },
+    { name: "Guatemala", code: "GT", callingCode: 502 },
+    { name: "Guernsey", code: "GG", callingCode: 44 },
+    { name: "Guinea (Guinée)", code: "GN", callingCode: 224 },
+    { name: "Guinea-Bissau (Guiné Bissau)", code: "GW", callingCode: 245 },
+    { name: "Guyana", code: "GY", callingCode: 592 },
+    { name: "Haiti", code: "HT", callingCode: 509 },
+    { name: "Honduras", code: "HN", callingCode: 504 },
+    { name: "Hong Kong (香港)", code: "HK", callingCode: 852 },
+    { name: "Hungary (Magyarország)", code: "HU", callingCode: 36 },
+    { name: "Iceland (Ísland)", code: "IS", callingCode: 354 },
+    { name: "India (भारत)", code: "IN", callingCode: 91 },
+    { name: "Indonesia", code: "ID", callingCode: 62 },
+    { name: "Iran (‫ایران‬‎)", code: "IR", callingCode: 98 },
+    { name: "Iraq (‫العراق‬‎)", code: "IQ", callingCode: 964 },
+    { name: "Ireland", code: "IE", callingCode: 353 },
+    { name: "Isle of Man", code: "IM", callingCode: 44 },
+    { name: "Israel (‫ישראל‬‎)", code: "IL", callingCode: 972 },
+    { name: "Italy (Italia)", code: "IT", callingCode: 39 },
+    { name: "Jamaica", code: "JM", callingCode: 1 },
+    { name: "Japan (日本)", code: "JP", callingCode: 81 },
+    { name: "Jersey", code: "JE", callingCode: 44 },
+    { name: "Jordan (‫الأردن‬‎)", code: "JO", callingCode: 962 },
+    { name: "Kazakhstan (Казахстан)", code: "KZ", callingCode: 7 },
+    { name: "Kenya", code: "KE", callingCode: 254 },
+    { name: "Kiribati", code: "KI", callingCode: 686 },
+    { name: "Kosovo", code: "XK", callingCode: 383 },
+    { name: "Kuwait (‫الكويت‬‎)", code: "KW", callingCode: 965 },
+    { name: "Kyrgyzstan (Кыргызстан)", code: "KG", callingCode: 996 },
+    { name: "Laos (ລາວ)", code: "LA", callingCode: 856 },
+    { name: "Latvia (Latvija)", code: "LV", callingCode: 371 },
+    { name: "Lebanon (‫لبنان‬‎)", code: "LB", callingCode: 961 },
+    { name: "Lesotho", code: "LS", callingCode: 266 },
+    { name: "Liberia", code: "LR", callingCode: 231 },
+    { name: "Libya (‫ليبيا‬‎)", code: "LY", callingCode: 218 },
+    { name: "Liechtenstein", code: "LI", callingCode: 423 },
+    { name: "Lithuania (Lietuva)", code: "LT", callingCode: 370 },
+    { name: "Luxembourg", code: "LU", callingCode: 352 },
+    { name: "Macau (澳門)", code: "MO", callingCode: 853 },
+    { name: "North Macedonia (Македонија)", code: "MK", callingCode: 389 },
+    { name: "Madagascar (Madagasikara)", code: "MG", callingCode: 261 },
+    { name: "Malawi", code: "MW", callingCode: 265 },
+    { name: "Malaysia", code: "MY", callingCode: 60 },
+    { name: "Maldives", code: "MV", callingCode: 960 },
+    { name: "Mali", code: "ML", callingCode: 223 },
+    { name: "Malta", code: "MT", callingCode: 356 },
+    { name: "Marshall Islands", code: "MH", callingCode: 692 },
+    { name: "Martinique", code: "MQ", callingCode: 596 },
+    { name: "Mauritania (‫موريتانيا‬‎)", code: "MR", callingCode: 222 },
+    { name: "Mauritius (Moris)", code: "MU", callingCode: 230 },
+    { name: "Mayotte", code: "YT", callingCode: 262 },
+    { name: "Mexico (México)", code: "MX", callingCode: 52 },
+    { name: "Micronesia", code: "FM", callingCode: 691 },
+    { name: "Moldova (Republica Moldova)", code: "MD", callingCode: 373 },
+    { name: "Monaco", code: "MC", callingCode: 377 },
+    { name: "Mongolia (Монгол)", code: "MN", callingCode: 976 },
+    { name: "Montenegro (Crna Gora)", code: "ME", callingCode: 382 },
+    { name: "Montserrat", code: "MS", callingCode: 1 },
+    { name: "Morocco (‫المغرب‬‎)", code: "MA", callingCode: 212 },
+    { name: "Mozambique (Moçambique)", code: "MZ", callingCode: 258 },
+    { name: "Myanmar (Burma) (မြန်မာ)", code: "MM", callingCode: 95 },
+    { name: "Namibia (Namibië)", code: "NA", callingCode: 264 },
+    { name: "Nauru", code: "NR", callingCode: 674 },
+    { name: "Nepal (नेपाल)", code: "NP", callingCode: 977 },
+    { name: "Netherlands (Nederland)", code: "NL", callingCode: 31 },
+    { name: "New Caledonia (Nouvelle-Calédonie)", code: "NC", callingCode: 687 },
+    { name: "New Zealand", code: "NZ", callingCode: 64 },
+    { name: "Nicaragua", code: "NI", callingCode: 505 },
+    { name: "Niger (Nijar)", code: "NE", callingCode: 227 },
+    { name: "Nigeria", code: "NG", callingCode: 234 },
+    { name: "Niue", code: "NU", callingCode: 683 },
+    { name: "Norfolk Island", code: "NF", callingCode: 672 },
+    { name: "North Korea (조선 민주주의 인민 공화국)", code: "KP", callingCode: 850 },
+    { name: "Northern Mariana Islands", code: "MP", callingCode: 1 },
+    { name: "Norway (Norge)", code: "NO", callingCode: 47 },
+    { name: "Oman (‫عُمان‬‎)", code: "OM", callingCode: 968 },
+    { name: "Pakistan (‫پاکستان‬‎)", code: "PK", callingCode: 92 },
+    { name: "Palau", code: "PW", callingCode: 680 },
+    { name: "Palestine (‫فلسطين‬‎)", code: "PS", callingCode: 970 },
+    { name: "Panama (Panamá)", code: "PA", callingCode: 507 },
+    { name: "Papua New Guinea", code: "PG", callingCode: 675 },
+    { name: "Paraguay", code: "PY", callingCode: 595 },
+    { name: "Peru (Perú)", code: "PE", callingCode: 51 },
+    { name: "Philippines", code: "PH", callingCode: 63 },
+    { name: "Poland (Polska)", code: "PL", callingCode: 48 },
+    { name: "Portugal", code: "PT", callingCode: 351 },
+    { name: "Puerto Rico", code: "PR", callingCode: 1 },
+    { name: "Qatar (‫قطر‬‎)", code: "QA", callingCode: 974 },
+    { name: "Réunion (La Réunion)", code: "RE", callingCode: 262 },
+    { name: "Romania (România)", code: "RO", callingCode: 40 },
+    { name: "Russia (Россия)", code: "RU", callingCode: 7 },
+    { name: "Rwanda", code: "RW", callingCode: 250 },
+    { name: "Saint Barthélemy", code: "BL", callingCode: 590 },
+    { name: "Saint Helena", code: "SH", callingCode: 290 },
+    { name: "Saint Kitts and Nevis", code: "KN", callingCode: 1 },
+    { name: "Saint Lucia", code: "LC", callingCode: 1 },
+    { name: "Saint Martin (Saint-Martin (partie française))", code: "MF", callingCode: 590 },
+    { name: "Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)", code: "PM", callingCode: 508 },
+    { name: "Saint Vincent and the Grenadines", code: "VC", callingCode: 1 },
+    { name: "Samoa", code: "WS", callingCode: 685 },
+    { name: "San Marino", code: "SM", callingCode: 378 },
+    { name: "São Tomé and Príncipe (São Tomé e Príncipe)", code: "ST", callingCode: 239 },
+    { name: "Saudi Arabia (‫المملكة العربية السعودية‬‎)", code: "SA", callingCode: 966 },
+    { name: "Senegal (Sénégal)", code: "SN", callingCode: 221 },
+    { name: "Serbia (Србија)", code: "RS", callingCode: 381 },
+    { name: "Seychelles", code: "SC", callingCode: 248 },
+    { name: "Sierra Leone", code: "SL", callingCode: 232 },
+    { name: "Singapore", code: "SG", callingCode: 65 },
+    { name: "Sint Maarten", code: "SX", callingCode: 1 },
+    { name: "Slovakia (Slovensko)", code: "SK", callingCode: 421 },
+    { name: "Slovenia (Slovenija)", code: "SI", callingCode: 386 },
+    { name: "Solomon Islands", code: "SB", callingCode: 677 },
+    { name: "Somalia (Soomaaliya)", code: "SO", callingCode: 252 },
+    { name: "South Africa", code: "ZA", callingCode: 27 },
+    { name: "South Korea (대한민국)", code: "KR", callingCode: 82 },
+    { name: "South Sudan (‫جنوب السودان‬‎)", code: "SS", callingCode: 211 },
+    { name: "Spain (España)", code: "ES", callingCode: 34 },
+    { name: "Sri Lanka (ශ්‍රී ලංකාව)", code: "LK", callingCode: 94 },
+    { name: "Sudan (‫السودان‬‎)", code: "SD", callingCode: 249 },
+    { name: "Suriname", code: "SR", callingCode: 597 },
+    { name: "Svalbard and Jan Mayen", code: "SJ", callingCode: 47 },
+    { name: "Sweden (Sverige)", code: "SE", callingCode: 46 },
+    { name: "Switzerland (Schweiz)", code: "CH", callingCode: 41 },
+    { name: "Syria (‫سوريا‬‎)", code: "SY", callingCode: 963 },
+    { name: "Taiwan (台灣)", code: "TW", callingCode: 886 },
+    { name: "Tajikistan", code: "TJ", callingCode: 992 },
+    { name: "Tanzania", code: "TZ", callingCode: 255 },
+    { name: "Thailand (ไทย)", code: "TH", callingCode: 66 },
+    { name: "Timor-Leste", code: "TL", callingCode: 670 },
+    { name: "Togo", code: "TG", callingCode: 228 },
+    { name: "Tokelau", code: "TK", callingCode: 690 },
+    { name: "Tonga", code: "TO", callingCode: 676 },
+    { name: "Trinidad and Tobago", code: "TT", callingCode: 1 },
+    { name: "Tunisia (‫تونس‬‎)", code: "TN", callingCode: 216 },
+    { name: "Turkey (Türkiye)", code: "TR", callingCode: 90 },
+    { name: "Turkmenistan", code: "TM", callingCode: 993 },
+    { name: "Turks and Caicos Islands", code: "TC", callingCode: 1 },
+    { name: "Tuvalu", code: "TV", callingCode: 688 },
+    { name: "U.S. Virgin Islands", code: "VI", callingCode: 1 },
+    { name: "Uganda", code: "UG", callingCode: 256 },
+    { name: "Ukraine (Україна)", code: "UA", callingCode: 380 },
+    { name: "United Arab Emirates (‫الإمارات العربية المتحدة‬‎)", code: "AE", callingCode: 971 },
+    { name: "United Kingdom", code: "GB", callingCode: 44 },
+    { name: "United States", code: "US", callingCode: 1 },
+    { name: "Uruguay", code: "UY", callingCode: 598 },
+    { name: "Uzbekistan (Oʻzbekiston)", code: "UZ", callingCode: 998 },
+    { name: "Vanuatu", code: "VU", callingCode: 678 },
+    { name: "Vatican City (Città del Vaticano)", code: "VA", callingCode: 39 },
+    { name: "Venezuela", code: "VE", callingCode: 58 },
+    { name: "Vietnam (Việt Nam)", code: "VN", callingCode: 84 },
+    { name: "Wallis and Futuna (Wallis-et-Futuna)", code: "WF", callingCode: 681 },
+    { name: "Western Sahara (‫الصحراء الغربية‬‎)", code: "EH", callingCode: 212 },
+    { name: "Yemen (‫اليمن‬‎)", code: "YE", callingCode: 967 },
+    { name: "Zambia", code: "ZM", callingCode: 260 },
+    { name: "Zimbabwe", code: "ZW", callingCode: 263 },
+    { name: "Åland Islands", code: "AX", callingCode: 358 }
+];
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const ALL_COUNTRIES_CALLING_CODES = '.*';
+/** Data structure for holding telephone number. */
+class ISOTelNumber {
+    country;
+    national;
+    constructor(country, national) {
+        this.country = country;
+        this.national = national;
+    }
+}
+class SPMatTelephoneInputComponent {
+    injector;
+    cdr;
+    http;
+    _focusMonitor;
+    _elementRef;
+    _formField;
+    ngControl;
+    static nextId = 0;
+    countrySelect;
+    nationalInput;
+    mobile = false;
+    // A regular expression specified as a string. This will be used to
+    // construct a RegExp object, by passing it as the argument.
+    allowedCountries;
+    defaultCountry = '';
+    filter$ = new BehaviorSubject('');
+    countries$ = this.filter$.pipe(map((searchStr) => {
+        const countries = new Array();
+        const searchStrLower = searchStr.toLocaleLowerCase();
+        this.countries.forEach((country) => {
+            if (`${country.callingCode} ${country.code} ${country.name}`
+                .toLocaleLowerCase()
+                .includes(searchStrLower)) {
+                countries.push(country);
+            }
+        });
+        return countries;
+    }));
+    countries = [];
+    filteredCountries = new ReplaySubject(1);
+    isDisabled = false;
+    _onChange = (_) => { };
+    control;
+    onCountrySelectFocus;
+    onCountrySelectBlur;
+    phoneUtil = PhoneNumberUtil.getInstance();
+    parts;
+    stateChanges = new Subject();
+    focused = false;
+    touched = false;
+    controlType = 'qq-tel-input';
+    id = `qq-tel-input-${SPMatTelephoneInputComponent.nextId++}`;
+    onChange = (_) => { };
+    onTouched = () => { };
+    telForm = new FormGroup({});
+    /** control for the MatSelect filter keyword */
+    countryFilterCtrl = new FormControl('');
+    get empty() {
+        const { value: { country, national }, } = this.parts;
+        return !country && !national;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    userAriaDescribedBy;
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        this.stateChanges.next();
+    }
+    _placeholder;
+    get required() {
+        return this._required ?? this.ngControl?.control?.hasValidator(Validators.required);
+    }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+        this.stateChanges.next();
+    }
+    _required;
+    searchText = '';
+    noEntriesFoundLabel = 'Not found';
+    get disabled() {
+        return this._disabled ?? this.ngControl?.control?.disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        this._disabled ? this.parts.disable() : this.parts.enable();
+        this.stateChanges.next();
+    }
+    _disabled;
+    destroy = new Subject();
+    get value() {
+        if (this.parts.valid) {
+            const { value: { country, national }, } = this.parts;
+            return new ISOTelNumber(`${country.callingCode}`, national);
+        }
+        return null;
+    }
+    set value(tel) {
+        const { country, national } = tel || new ISOTelNumber('', '');
+        let ci;
+        if (country) {
+            ci = this.countries.find((ci) => `${ci.callingCode}` == country);
+        }
+        // this.phoneUtil.
+        this.parts.setValue({ country: ci, national });
+        this.stateChanges.next();
+    }
+    get errorState() {
+        return this.parts.invalid && this.touched;
+    }
+    onFocusIn(event) {
+        if (!this.focused) {
+            this.focused = true;
+            this.stateChanges.next();
+        }
+    }
+    onFocusOut(event) {
+        if (!this._elementRef.nativeElement.contains(event.relatedTarget)) {
+            this.touched = true;
+            this.focused = false;
+            this.onTouched();
+            this.stateChanges.next();
+        }
+    }
+    autoFocusNext(control, nextElement) {
+        if (!control.errors && nextElement) {
+            this._focusMonitor.focusVia(nextElement, 'program');
+        }
+    }
+    autoFocusPrev(control, prevElement) {
+        if (control.value.length < 1) {
+            this._focusMonitor.focusVia(prevElement, 'program');
+        }
+    }
+    setDescribedByIds(ids) {
+        const controlElement = this._elementRef.nativeElement.querySelector('.qq-tel-input-container');
+        if (controlElement) {
+            controlElement.setAttribute('aria-describedby', ids.join(' '));
+        }
+    }
+    onContainerClick() {
+        // this._focusMonitor.focusVia(this.countrySelect, 'program');
+        // if (this.parts.controls.national.valid) {
+        //   this._focusMonitor.focusVia(this.nationalInput, 'program');
+        // } else if (this.parts.controls.country.valid) {
+        //   this._focusMonitor.focusVia(this.nationalInput, 'program');
+        // // } else if (this.parts.controls.national.valid) {
+        // //   this._focusMonitor.focusVia(this.nationalInput, 'program');
+        // } else {
+        //   this._focusMonitor.focusVia(this.countrySelect, 'program');
+        // }
+    }
+    constructor(injector, cdr, http, _focusMonitor, _elementRef, _formField, ngControl, formBuilder) {
+        this.injector = injector;
+        this.cdr = cdr;
+        this.http = http;
+        this._focusMonitor = _focusMonitor;
+        this._elementRef = _elementRef;
+        this._formField = _formField;
+        this.ngControl = ngControl;
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
+        this.parts = formBuilder.group({
+            country: [undefined, Validators.required],
+            national: ['', Validators.required],
+        });
+        this.initCountries();
+    }
+    ngOnInit() {
+        this.initCountries();
+        // this.onCountrySelectFocus = () => {
+        //   const options = (this.countrySelect.nativeElement as HTMLSelectElement).options;
+        //   [].forEach.call(options, function(o: any) {
+        //     const countryInfo: string = o.getAttribute('data-descr');
+        //     const [name, callingCode] = countryInfo.split('.');
+        //     o.textContent = name + ' (' + callingCode + ')';
+        //   });
+        // }
+        // this.onCountrySelectBlur = () => {
+        //   const options = (this.countrySelect.nativeElement as HTMLSelectElement).options;
+        //   [].forEach.call(options, function(o: any) {
+        //     const countryInfo: string = o.getAttribute('data-descr');
+        //     const [name, callingCode] = countryInfo.split('.');
+        //     o.textContent = '+' + callingCode;
+        //   });
+        // }
+        // this.countrySelect.nativeElement.addEventListener('focus', this.onCountrySelectFocus);
+        // this.countrySelect.nativeElement.addEventListener('blur', this.onCountrySelectBlur);
+        if (this.defaultCountry) {
+            const country = this.countries.find((ci) => ci.code == this.defaultCountry);
+            this.parts.controls.country.setValue(country);
+        }
+        this.filteredCountries.next(this.countries.slice());
+        // listen for search field value changes
+        this.countryFilterCtrl.valueChanges
+            .pipe(takeUntil(this.destroy))
+            .subscribe(() => {
+            this.filterCountries();
+        });
+    }
+    setInitialValue() {
+        this.filteredCountries
+            .pipe(take(1), takeUntil(this.destroy))
+            .subscribe(() => {
+            // Setting the compareWith property to a comparison function
+            // triggers initializing the selection according to the initial value of
+            // the form control (i.e. _initializeSelection()).
+            // This needs to be done after the filteredCountries are loaded
+            // initially and after the mat-option elements are available.
+            this.countrySelect.compareWith = (a, b) => a && b && a.code === b.code;
+        });
+    }
+    filterCountries() {
+        if (!this.countries) {
+            return;
+        }
+        // get the search keyword
+        let search = this.countryFilterCtrl.value;
+        if (!search) {
+            this.filteredCountries.next(this.countries.slice());
+            return;
+        }
+        search = search.toLowerCase();
+        // filter the banks
+        this.filteredCountries.next(this.countries.filter((country) => country.name.toLowerCase().indexOf(search) > -1 ||
+            country.callingCode.toString().indexOf(search) > -1 ||
+            country.code.toLowerCase().indexOf(search) > -1));
+    }
+    ngAfterViewInit() {
+        const ngControl = this.injector.get(NgControl, null);
+        if (ngControl) {
+            this.control = ngControl.control;
+        }
+        this.disableComponents();
+        if (!this.parts.controls.country.value) {
+            this.detectCountry();
+        }
+        else {
+            this.setInitialValue();
+        }
+    }
+    ngOnDestroy() {
+        // this.countrySelect.nativeElement.removeAllListners();
+        this.destroy.next();
+        this.destroy.complete();
+        this.stateChanges.complete();
+        this._focusMonitor.stopMonitoring(this._elementRef);
+    }
+    /**
+     * Set the country code to the given code.
+     *
+     * @param code Numeric country code to set the value of the country
+     * ion-select to. Will validate the code against a built-in country
+     * code list.
+     */
+    setCountryCode(code) {
+        code = code.trim();
+        if (code.startsWith('+')) {
+            code = code.substring(1);
+        }
+        for (let index = 0; index < this.countries.length; index++) {
+            const country = this.countries[index];
+            if (`${country.callingCode}` === code) {
+                this.parts.controls.country.setValue(country);
+                this.cdr.detectChanges();
+            }
+        }
+    }
+    // ControlValueAccessor interface methods
+    writeValue(telNumber) {
+        // Check the supplied number string can be converted into a numeric value.
+        try {
+            if (telNumber) {
+                const phoneNumber = this.phoneUtil.parse(telNumber);
+                if (phoneNumber) {
+                    const cc = phoneNumber.getCountryCode();
+                    const country = this.countries.find((ci) => ci.callingCode === cc);
+                    if (country) {
+                        this.parts.controls.country.setValue(country);
+                        this.parts.controls.national.setValue(phoneNumber.getNationalNumber());
+                    }
+                }
+            }
+            else {
+                // null value usually means form-reset. Clear national number
+                // and leave selected country code intact.
+                this.parts.controls.country.setValue(null);
+                this.parts.controls.national.setValue(null);
+                this.parts.controls.country.setErrors(null);
+                this.parts.controls.national.setErrors(null);
+                this.parts.setErrors(null);
+            }
+            this.cdr.detectChanges();
+        }
+        catch (error) {
+            // empty
+        }
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+        if (this.countrySelect && this.nationalInput) {
+            this.disableComponents();
+        }
+    }
+    onCountryChange(ev) {
+        const telNumberParts = this.getTelephoneNumberParts();
+        if (telNumberParts) {
+            this.notifyChange(telNumberParts);
+            this.control.setErrors(null);
+        }
+        else {
+            if (this.control) {
+                this.control.setErrors({ invalidPhoneNumber: true });
+                this.cdr.detectChanges();
+            }
+        }
+    }
+    onNationalNumberChange(ev) {
+        const telNumberParts = this.getTelephoneNumberParts();
+        if (telNumberParts) {
+            this.notifyChange(telNumberParts);
+            this.control.setErrors(null);
+        }
+        else {
+            if (this.control) {
+                this.control.setErrors({ invalidPhoneNumber: true });
+                this.cdr.detectChanges();
+            }
+        }
+    }
+    /**
+     * Returns the telephone number in ISO8601 format.
+     * @param numberParts
+     * @returns
+     */
+    ISOTelephoneNumber(numberParts) {
+        return `+${numberParts.callingCode}${numberParts.nationalNumber}`;
+    }
+    notifyChange(numberParts) {
+        const geoLocationProvider = this.injector.get(QQMAT_TELEPHONE_INPUT_CONFIG_PROVIDER, null);
+        if (geoLocationProvider && geoLocationProvider.saveCountrySelection) {
+            geoLocationProvider
+                .saveCountrySelection(numberParts)
+                .then(() => this._onChange(this.ISOTelephoneNumber(numberParts)))
+                .catch(() => { });
+        }
+        else {
+            this._onChange(this.ISOTelephoneNumber(numberParts));
+        }
+    }
+    get placeholderText() {
+        let placeholderText = this.placeholder;
+        if (this.required) {
+            placeholderText = placeholderText + '*';
+        }
+        return placeholderText;
+    }
+    get hasErrors() {
+        return this.control && this.control.hasError('invalidPhoneNumber');
+    }
+    disableComponents() {
+        const action = this.isDisabled ? 'addClass' : 'removeClass';
+        if (this.countrySelect) {
+            //this.countryCodeSelector.disabled = this.isDisabled;
+        }
+        if (this.nationalInput) {
+            //this.nationalNumberInput.disabled = this.isDisabled;
+        }
+    }
+    /**
+     * Returns the full telephone number, combining the selected
+     * country code with the national number.
+     *
+     * Leading zeros in the national number are removed.
+     *
+     * Validates the entered number using google-libphonenumber and if
+     * invalid, returns an empty string.
+     */
+    getTelephoneNumberParts() {
+        const selectedCountry = this.parts.controls.country.value;
+        const nationalNumber = this.parts.controls.national.value;
+        if (nationalNumber) {
+            const ci = this.countries.find((ci) => ci.callingCode == selectedCountry.callingCode);
+            if (ci) {
+                try {
+                    const phoneNumber = this.phoneUtil.parse(nationalNumber, ci.code);
+                    if (this.phoneUtil.isValidNumberForRegion(phoneNumber, ci.code)) {
+                        const numberType = this.phoneUtil.getNumberType(phoneNumber);
+                        // console.log(`Valid phone number for country ${ci.code}: ${this.phoneUtil.format(phoneNumber, PhoneNumberFormat.E164)}, type: ${numberType}`);
+                        if (!this.mobile || numberType === PhoneNumberType.MOBILE) {
+                            // const fullNumber = this.phoneUtil.format(phoneNumber, PhoneNumberFormat.E164);
+                            // console.log('full tel number:', fullNumber);
+                            return {
+                                ...ci,
+                                nationalNumber: nationalNumber,
+                            };
+                        }
+                    }
+                }
+                catch (error) {
+                    // do nothing
+                }
+            }
+        }
+        return null;
+    }
+    getAllowedCountries() {
+        if (this.allowedCountries) {
+            return this.allowedCountries;
+        }
+        const geoLocationProvider = this.injector.get(QQMAT_TELEPHONE_INPUT_CONFIG_PROVIDER, null);
+        return geoLocationProvider && geoLocationProvider.countries
+            ? geoLocationProvider.countries
+            : ALL_COUNTRIES_CALLING_CODES;
+    }
+    detectCountry() {
+        const geoLocationProvider = this.injector.get(QQMAT_TELEPHONE_INPUT_CONFIG_PROVIDER, null);
+        if (geoLocationProvider && geoLocationProvider.getCountryCode) {
+            geoLocationProvider
+                .getCountryCode(this.http)
+                .pipe(tap((res) => {
+                // console.log(`detectCountry response: ${JSON.stringify(res)}`);
+                if (res.countryCode) {
+                    const cc = COUNTRY_CODES.find((cc) => cc.code == res.countryCode);
+                    if (cc && !this.parts.controls.country.value) {
+                        this.parts.controls.country.setValue(cc);
+                        this.cdr.detectChanges();
+                    }
+                }
+            }), catchError((err) => {
+                // console.log(`detectCountry error: ${JSON.stringify(err)}`);
+                return NEVER;
+            }))
+                .subscribe();
+        }
+        else {
+            // console.log(`QQMAT_TELEPHONE_INPUT_CONFIG_PROVIDER not available`);
+        }
+    }
+    // Initialize this.countries if it's not already been initialized.
+    initCountries() {
+        if (!this.countries.length) {
+            // determine countries we support
+            const ccRegex = new RegExp(this.getAllowedCountries());
+            COUNTRY_CODES.forEach((c) => {
+                if (ccRegex.test(c.code)) {
+                    this.countries.push(c);
+                }
+            });
+            this.countries = this.countries.sort((a, b) => a.name.localeCompare(b.name));
+        }
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatTelephoneInputComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1.HttpClient }, { token: i2.FocusMonitor }, { token: i0.ElementRef }, { token: MAT_FORM_FIELD, optional: true }, { token: i3.NgControl, optional: true, self: true }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SPMatTelephoneInputComponent, isStandalone: true, selector: "sp-mat-telephone-input", inputs: { mobile: "mobile", allowedCountries: "allowedCountries", defaultCountry: "defaultCountry", userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"], placeholder: "placeholder", required: "required", searchText: "searchText", noEntriesFoundLabel: "noEntriesFoundLabel", disabled: "disabled", value: "value" }, providers: [
+            { provide: MatFormFieldControl, useExisting: SPMatTelephoneInputComponent },
+        ], viewQueries: [{ propertyName: "countrySelect", first: true, predicate: ["countryCodeSelector"], descendants: true, static: true }, { propertyName: "nationalInput", first: true, predicate: ["nationalNumberInput"], descendants: true }], ngImport: i0, template: `
+    <!--
+    <div
+      rol="group"
+      class="tel-input-wrapper"
+      [formGroup]="parts"
+      [attr.aria-labelledby]="_formField?.getLabelId()"
+      (focusin)="onFocusIn($event)"
+      (focusout)="onFocusOut($event)"
+    >
+      <select
+        #countryCodeSelector
+        title="Country Code"
+        formControlName="country"
+        (change)="onCountryChange($event)"
+      >
+        <option
+          *ngFor="let c of filteredCountries | async"
+          value="{{ c.code }}"
+          [attr.data-descr]="c.name + '.' + c.callingCode"
+        >
+          {{ c.name }} +{{ c.callingCode }}
+        </option>
+      </select>
+      <input
+        #nationalNumberInput
+        formControlName="national"
+        type="tel"
+        (input)="onNationalNumberChange($event)"
+      />
+    </div>
+-->
+    <div class="tel-input-wrapper" [formGroup]="parts">
+      <mat-select
+        #countryCodeSelector
+        formControlName="country"
+        (selectionChange)="onCountryChange($event)"
+      >
+        <mat-option>
+          <ngx-mat-select-search
+            [placeholderLabel]="searchText"
+            [noEntriesFoundLabel]="noEntriesFoundLabel"
+            [formControl]="countryFilterCtrl"
+          ></ngx-mat-select-search>
+        </mat-option>
+        <mat-option
+          *ngFor="let c of filteredCountries | async"
+          [value]="c"
+          [attr.data-descr]="c.name + '.' + c.callingCode"
+        >
+          {{ c.name }} +{{ c.callingCode }}
+        </mat-option>
+      </mat-select>
+      <input
+        style="padding-left: 4px"
+        #nationalNumberInput
+        formControlName="national"
+        type="tel"
+        (input)="onNationalNumberChange($event)"
+      />
+    </div>
+  `, isInline: true, styles: [".tel-input-wrapper{display:flex;padding:1px}.error-border{border-color:red}.box-border{border-bottom:1px solid gray;border-radius:4px}mat-select{display:inline-block;border:none;outline:none;scroll-behavior:smooth;background:none;width:30%}mat-select:focus{border:none;outline:none;background:none;scroll-behavior:smooth}input{flex:1 1 auto;background:none;border:none}input:focus{border:none;outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: NgxMatSelectSearchModule }, { kind: "component", type: i7.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatTelephoneInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-mat-telephone-input', template: `
+    <!--
+    <div
+      rol="group"
+      class="tel-input-wrapper"
+      [formGroup]="parts"
+      [attr.aria-labelledby]="_formField?.getLabelId()"
+      (focusin)="onFocusIn($event)"
+      (focusout)="onFocusOut($event)"
+    >
+      <select
+        #countryCodeSelector
+        title="Country Code"
+        formControlName="country"
+        (change)="onCountryChange($event)"
+      >
+        <option
+          *ngFor="let c of filteredCountries | async"
+          value="{{ c.code }}"
+          [attr.data-descr]="c.name + '.' + c.callingCode"
+        >
+          {{ c.name }} +{{ c.callingCode }}
+        </option>
+      </select>
+      <input
+        #nationalNumberInput
+        formControlName="national"
+        type="tel"
+        (input)="onNationalNumberChange($event)"
+      />
+    </div>
+-->
+    <div class="tel-input-wrapper" [formGroup]="parts">
+      <mat-select
+        #countryCodeSelector
+        formControlName="country"
+        (selectionChange)="onCountryChange($event)"
+      >
+        <mat-option>
+          <ngx-mat-select-search
+            [placeholderLabel]="searchText"
+            [noEntriesFoundLabel]="noEntriesFoundLabel"
+            [formControl]="countryFilterCtrl"
+          ></ngx-mat-select-search>
+        </mat-option>
+        <mat-option
+          *ngFor="let c of filteredCountries | async"
+          [value]="c"
+          [attr.data-descr]="c.name + '.' + c.callingCode"
+        >
+          {{ c.name }} +{{ c.callingCode }}
+        </mat-option>
+      </mat-select>
+      <input
+        style="padding-left: 4px"
+        #nationalNumberInput
+        formControlName="national"
+        type="tel"
+        (input)="onNationalNumberChange($event)"
+      />
+    </div>
+  `, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatSelectModule,
+                        NgxMatSelectSearchModule,
+                    ], providers: [
+                        { provide: MatFormFieldControl, useExisting: SPMatTelephoneInputComponent },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".tel-input-wrapper{display:flex;padding:1px}.error-border{border-color:red}.box-border{border-bottom:1px solid gray;border-radius:4px}mat-select{display:inline-block;border:none;outline:none;scroll-behavior:smooth;background:none;width:30%}mat-select:focus{border:none;outline:none;background:none;scroll-behavior:smooth}input{flex:1 1 auto;background:none;border:none}input:focus{border:none;outline:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1.HttpClient }, { type: i2.FocusMonitor }, { type: i0.ElementRef }, { type: i8.MatFormField, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_FORM_FIELD]
+                }] }, { type: i3.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i3.FormBuilder }], propDecorators: { countrySelect: [{
+                type: ViewChild,
+                args: ['countryCodeSelector', { static: true }]
+            }], nationalInput: [{
+                type: ViewChild,
+                args: ['nationalNumberInput']
+            }], mobile: [{
+                type: Input
+            }], allowedCountries: [{
+                type: Input
+            }], defaultCountry: [{
+                type: Input
+            }], userAriaDescribedBy: [{
+                type: Input,
+                args: ['aria-describedby']
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], searchText: [{
+                type: Input
+            }], noEntriesFoundLabel: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ISOTelNumber, QQMAT_TELEPHONE_INPUT_CONFIG_PROVIDER, SPMatTelephoneInputComponent };
+//# sourceMappingURL=smallpearl-ngx-helper-mat-tel-input.mjs.map