@seniorsistemas/angular-components 17.31.2 → 18.0.0-develop-ae6477c0

package/fesm2022/seniorsistemas-angular-components-country-phone-picker.mjs

@@ -0,0 +1,631 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, PLATFORM_ID, forwardRef, ViewContainerRef, ElementRef, Component, Inject, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
+import * as i3 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i4 from '@angular/forms';
+import { UntypedFormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i5 from 'ngx-mask';
+import { NgxMaskDirective, NgxMaskPipe, provideNgxMask } from 'ngx-mask';
+import { DomPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
+import { isNullOrUndefined } from '@seniorsistemas/angular-components/utils';
+
+const countries = [
+    { id: "gb", ddi: "+44", mask: "00-0000-0000" },
+    { id: 'br', ddi: '+55', mask: ['(00) 0000-00009', '(00) 00000-0000'] },
+    { id: 'ar', ddi: '+54', mask: ['(00) 0000-00009', '(000) 0000-0000'] },
+    { id: 'bo', ddi: '+591', mask: '0 000 0000' },
+    { id: 'cl', ddi: '+56', mask: '0 0000 0000' },
+    { id: 'co', ddi: '+57', mask: ['0 00000009', '000 0000000'] },
+    { id: 'cr', ddi: '+506', mask: '0000 0000' },
+    { id: 'cu', ddi: '+53', mask: ['000 0009', '00 000000'] },
+    { id: 'ec', ddi: '+593', mask: ['000 00009', '000 000 000'] },
+    { id: 'sv', ddi: '+503', mask: '0000 0000' },
+    { id: 'gt', ddi: '+502', mask: '0000 0000' },
+    { id: 'ht', ddi: '+509', mask: '0000 0000' },
+    { id: 'hn', ddi: '+504', mask: '0000-0000' },
+    { id: 'mx', ddi: '+52', mask: ['00 0000 00009', '0 00 0000 0000'] },
+    { id: 'ni', ddi: '+505', mask: '0000 0000' },
+    { id: 'pa', ddi: '+507', mask: '0000 0000' },
+    { id: 'py', ddi: '+595', mask: ['00 000 0009', '000 000000'] },
+    { id: 'pe', ddi: '+51', mask: '000 000 000' },
+    { id: 'do', ddi: '+1809', mask: '000 000-0000' },
+    { id: 'uy', ddi: '+598', mask: ['0000 00009', '0000 00000'] },
+    { id: 've', ddi: '+58', mask: '000-0000000' },
+    { id: 'us', ddi: '+1', mask: '000-000-0000' },
+    { id: 'ca', ddi: '+1', mask: '000-000-0000' },
+    { id: 'cn', ddi: '+86', mask: '000 0000 0000' },
+    { id: 'as', ddi: '+1684', mask: '000-0000' },
+    { id: 'ai', ddi: '+1264', mask: '000-0000' },
+    { id: 'ag', ddi: '+1268', mask: '000-0000' },
+    { id: 'bs', ddi: '+1242', mask: '000-0000' },
+    { id: 'bb', ddi: '+1246', mask: '000-0000' },
+    { id: 'bm', ddi: '+1441', mask: '000-0000' },
+    { id: 'vg', ddi: '+1284', mask: '000-0000' },
+    { id: 'ky', ddi: '+1345', mask: '000-0000' },
+    { id: 'dm', ddi: '+1767', mask: '000-0000' },
+    { id: 'gd', ddi: '+1473', mask: '000-0000' },
+    { id: 'gu', ddi: '+1671', mask: '000-0000' },
+    { id: 'jm', ddi: '+1876', mask: '000-0000' },
+    { id: 'ms', ddi: '+1664', mask: '000-0000' },
+    { id: 'mp', ddi: '+1670', mask: '000-0000' },
+    { id: 'pr', ddi: '+1', mask: '000-0000' },
+    { id: 'kn', ddi: '+1869', mask: '000-0000' },
+    { id: 'lc', ddi: '+1758', mask: '000-0000' },
+    { id: 'vc', ddi: '+1784', mask: '000-0000' },
+    { id: 'tt', ddi: '+1868', mask: '000-0000' },
+    { id: 'tc', ddi: '+1649', mask: '000-0000' },
+    { id: 'fi', ddi: '+358', mask: '000 0000000' },
+    { id: 'rs', ddi: '+381', mask: '000 0000000' },
+    { id: 'zm', ddi: '+260', mask: '000 0000000' },
+    { id: 'af', ddi: '+93', mask: '000 000 0000' },
+    { id: 'al', ddi: '+355', mask: '000 000 0000' },
+    { id: 'hr', ddi: '+385', mask: '000 000 0000' },
+    { id: 'et', ddi: '+251', mask: '000 000 0000' },
+    { id: 'gh', ddi: '+233', mask: '000 000 0000' },
+    { id: 'gr', ddi: '+30', mask: '000 000 0000' },
+    { id: 'ie', ddi: '+353', mask: '000 000 0000' },
+    { id: 'it', ddi: '+39', mask: '000 000 0000' },
+    { id: 'lr', ddi: '+231', mask: '000 000 0000' },
+    { id: 'na', ddi: '+264', mask: '000 000 0000' },
+    { id: 'nz', ddi: '+64', mask: '000 000 0000' },
+    { id: 'sa', ddi: '+966', mask: '000 000 0000' },
+    { id: 'za', ddi: '+27', mask: '000 000 0000' },
+    { id: 'lk', ddi: '+94', mask: '000 000 0000' },
+    { id: 'sd', ddi: '+249', mask: '000 000 0000' },
+    { id: 'th', ddi: '+66', mask: '000 000 0000' },
+    { id: 'ua', ddi: '+380', mask: '000 000 0000' },
+    { id: 'ae', ddi: '+971', mask: '000 000 0000' },
+    { id: 'va', ddi: '+39', mask: '000 000 0000' },
+    { id: 'zw', ddi: '+263', mask: '000 000 0000' },
+    { id: 'dz', ddi: '+213', mask: '0000 00 00 00' },
+    { id: 'be', ddi: '+32', mask: '0000 00 00 00' },
+    { id: 'yt', ddi: '+262', mask: '0000 00 00 00' },
+    { id: 'bl', ddi: '+590', mask: '0000 00 00 00' },
+    { id: 'mf', ddi: '+1599', mask: '0000 00 00 00' },
+    { id: 'ad', ddi: '+376', mask: '000-000' },
+    { id: 'ao', ddi: '+244', mask: '000 000 000' },
+    { id: 'ba', ddi: '+387', mask: '000 000 000' },
+    { id: 'bg', ddi: '+359', mask: '000 000 000' },
+    { id: 'kh', ddi: '+855', mask: '000 000 000' },
+    { id: 'cz', ddi: '+420', mask: '000 000 000' },
+    { id: 'gq', ddi: '+240', mask: '000 000 000' },
+    { id: 'gw', ddi: '+245', mask: '000 000 000' },
+    { id: 'li', ddi: '+423', mask: '000 000 000' },
+    { id: 'lu', ddi: '+352', mask: '000 000 000' },
+    { id: 'mk', ddi: '+389', mask: '000 000 000' },
+    { id: 'me', ddi: '+382', mask: '000 000 000' },
+    { id: 'pl', ddi: '+48', mask: '000 000 000' },
+    { id: 'pt', ddi: '+351', mask: '000 000 000' },
+    { id: 'si', ddi: '+386', mask: '000 000 000' },
+    { id: 'am', ddi: '+374', mask: '000 000000' },
+    { id: 'aw', ddi: '+297', mask: '000 0000' },
+    { id: 'bn', ddi: '+673', mask: '000 0000' },
+    { id: 'fj', ddi: '+679', mask: '000 0000' },
+    { id: 'gm', ddi: '+220', mask: '000 0000' },
+    { id: 'gy', ddi: '+592', mask: '000 0000' },
+    { id: 'is', ddi: '+354', mask: '000 0000' },
+    { id: 'fm', ddi: '+691', mask: '000 0000' },
+    { id: 'nr', ddi: '+674', mask: '000 0000' },
+    { id: 'nu', ddi: '+683', mask: '000 0000' },
+    { id: 'pw', ddi: '+680', mask: '000 0000' },
+    { id: 'st', ddi: '+239', mask: '000 0000' },
+    { id: 'to', ddi: '+676', mask: '000 0000' },
+    { id: 'vu', ddi: '+678', mask: '000 0000' },
+    { id: 'fk', ddi: '+500', mask: '00000' },
+    { id: 'fo', ddi: '+298', mask: '00000' },
+    { id: 'sh', ddi: '+290', mask: '00000' },
+    { id: 'au', ddi: '+61', mask: '0000 000 000' },
+    { id: 'cx', ddi: '+61', mask: '0000 000 000' },
+    { id: 'cc', ddi: '+61', mask: '0000 000 000' },
+    { id: 'cd', ddi: '+243', mask: '0000 000 000' },
+    { id: 'kg', ddi: '+996', mask: '0000 000 000' },
+    { id: 'ro', ddi: '+40', mask: '0000 000 000' },
+    { id: 'rw', ddi: '+250', mask: '0000 000 000' },
+    { id: 'sk', ddi: '+421', mask: '0000 000 000' },
+    { id: 'sy', ddi: '+963', mask: '0000 000 000' },
+    { id: 'tw', ddi: '+886', mask: '0000 000 000' },
+    { id: 'tz', ddi: '+255', mask: '0000 000 000' },
+    { id: 'ye', ddi: '+967', mask: '0000 000 000' },
+    { id: 'at', ddi: '+43', mask: '0000 000000' },
+    { id: 'ke', ddi: '+254', mask: '0000 000000' },
+    { id: 'ug', ddi: '+256', mask: '0000 000000' },
+    { id: 'az', ddi: '+994', mask: '000 000 00 00' },
+    { id: 'ch', ddi: '+41', mask: '000 000 00 00' },
+    { id: 'vn', ddi: '+84', mask: '000 000 00 00' },
+    { id: 'bh', ddi: '+973', mask: '0000 0000' },
+    { id: 'ee', ddi: '+372', mask: '0000 0000' },
+    { id: 'sz', ddi: '+268', mask: '0000 0000' },
+    { id: 'hk', ddi: '+852', mask: '0000 0000' },
+    { id: 'ls', ddi: '+266', mask: '0000 0000' },
+    { id: 'mo', ddi: '+853', mask: '0000 0000' },
+    { id: 'mt', ddi: '+356', mask: '0000 0000' },
+    { id: 'mu', ddi: '+230', mask: '0000 0000' },
+    { id: 'mn', ddi: '+976', mask: '0000 0000' },
+    { id: 'om', ddi: '+968', mask: '0000 0000' },
+    { id: 'pg', ddi: '+675', mask: '0000 0000' },
+    { id: 'qa', ddi: '+974', mask: '0000 0000' },
+    { id: 'sg', ddi: '+65', mask: '0000 0000' },
+    { id: 'tl', ddi: '+670', mask: '0000 0000' },
+    { id: 'bd', ddi: '+880', mask: '00000 000000' },
+    { id: 'im', ddi: '+44', mask: '00000 000000' },
+    { id: 'by', ddi: '+375', mask: '0 000 000-00-00' },
+    { id: 'bz', ddi: '+501', mask: '000-0000' },
+    { id: 'mv', ddi: '+960', mask: '000-0000' },
+    { id: 'mh', ddi: '+692', mask: '000-0000' },
+    { id: 'sr', ddi: '+597', mask: '000-0000' },
+    { id: 'bj', ddi: '+229', mask: '00 00 00 00' },
+    { id: 'bt', ddi: '+975', mask: '00 00 00 00' },
+    { id: 'bf', ddi: '+226', mask: '00 00 00 00' },
+    { id: 'bi', ddi: '+257', mask: '00 00 00 00' },
+    { id: 'cf', ddi: '+236', mask: '00 00 00 00' },
+    { id: 'td', ddi: '+235', mask: '00 00 00 00' },
+    { id: 'ci', ddi: '+225', mask: '00 00 00 00' },
+    { id: 'dk', ddi: '+45', mask: '00 00 00 00' },
+    { id: 'dj', ddi: '+253', mask: '00 00 00 00' },
+    { id: 'fr', ddi: '+33', mask: '00 00 00 00' },
+    { id: 'pf', ddi: '+689', mask: '00 00 00 00' },
+    { id: 'ga', ddi: '+241', mask: '00 00 00 00' },
+    { id: 'ml', ddi: '+223', mask: '00 00 00 00' },
+    { id: 'mr', ddi: '+222', mask: '00 00 00 00' },
+    { id: 'ne', ddi: '+227', mask: '00 00 00 00' },
+    { id: 'sm', ddi: '+378', mask: '00 00 00 00' },
+    { id: 'tg', ddi: '+228', mask: '00 00 00 00' },
+    { id: 'gi', ddi: '+350', mask: '00000000' },
+    { id: 'ki', ddi: '+686', mask: '00000000' },
+    { id: 'tv', ddi: '+688', mask: '00000000' },
+    { id: 'bw', ddi: '+267', mask: '00 000 000' },
+    { id: 'er', ddi: '+291', mask: '00 000 000' },
+    { id: 'lv', ddi: '+371', mask: '00 000 000' },
+    { id: 'lb', ddi: '+961', mask: '00 000 000' },
+    { id: 'tn', ddi: '+216', mask: '00 000 000' },
+    { id: 'cm', ddi: '+237', mask: '0 00 00 00 00' },
+    { id: 'cv', ddi: '+238', mask: '000 00 00' },
+    { id: 'km', ddi: '+269', mask: '000 00 00' },
+    { id: 'pm', ddi: '+508', mask: '000 00 00' },
+    { id: 'cg', ddi: '+242', mask: '00 000 0000' },
+    { id: 'mz', ddi: '+258', mask: '00 000 0000' },
+    { id: 'mm', ddi: '+95', mask: '00 000 0000' },
+    { id: 'ck', ddi: '+682', mask: '00 000' },
+    { id: 'cy', ddi: '+357', mask: '00 000000' },
+    { id: 'eg', ddi: '+20', mask: '0000 000 0000' },
+    { id: 'ir', ddi: '+98', mask: '0000 000 0000' },
+    { id: 'iq', ddi: '+964', mask: '0000 000 0000' },
+    { id: 'ng', ddi: '+234', mask: '0000 000 0000' },
+    { id: 'kp', ddi: '+850', mask: '0000 000 0000' },
+    { id: 'ph', ddi: '+63', mask: '0000 000 0000' },
+    { id: 'ge', ddi: '+995', mask: '000 00 00 00' },
+    { id: 'gn', ddi: '+224', mask: '000 00 00 00' },
+    { id: 'es', ddi: '+34', mask: '000 00 00 00' },
+    { id: 'de', ddi: '+49', mask: '00000 0000000' },
+    { id: 'gl', ddi: '+299', mask: '00 00 00' },
+    { id: 'wf', ddi: '+681', mask: '00 00 00' },
+    { id: 'hu', ddi: '+36', mask: '(00) 000 0000' },
+    { id: 'in', ddi: '+91', mask: '000000 00000' },
+    { id: 'id', ddi: '+62', mask: '0000-000-000' },
+    { id: 'il', ddi: '+972', mask: '000-000-0000' },
+    { id: 'jp', ddi: '+81', mask: '000-000-0000' },
+    { id: 'jo', ddi: '+962', mask: '00 0000 0000' },
+    { id: 'kz', ddi: '+7', mask: '0 (000) 000-0000' },
+    { id: 'kw', ddi: '+965', mask: '000 00000' },
+    { id: 'la', ddi: '+856', mask: '000 00 000 000' },
+    { id: 'ly', ddi: '+218', mask: '000-0000000' },
+    { id: 'lt', ddi: '+370', mask: '(0-000) 00000' },
+    { id: 'np', ddi: '+977', mask: '(0-000) 00000' },
+    { id: 'mg', ddi: '+261', mask: '000 00 000 00' },
+    { id: 'mw', ddi: '+265', mask: '000 00 000 00' },
+    { id: 'my', ddi: '+60', mask: '000-000 0000' },
+    { id: 'md', ddi: '+373', mask: '0000 00 000' },
+    { id: 'mc', ddi: '+377', mask: '00 00 00 00 00' },
+    { id: 'ma', ddi: '+212', mask: '0000-000000' },
+    { id: 'nl', ddi: '+31', mask: '00 00000000' },
+    { id: 'nc', ddi: '+687', mask: '00.00.00' },
+    { id: 'no', ddi: '+47', mask: '000 00 000' },
+    { id: 'pk', ddi: '+92', mask: '0000 0000000' },
+    { id: 'ru', ddi: '+7', mask: '0 (000) 000-00-00' },
+    { id: 'ws', ddi: '+685', mask: '00 00000' },
+    { id: 'sb', ddi: '+677', mask: '00 00000' },
+    { id: 'sn', ddi: '+221', mask: '00 000 00 00' },
+    { id: 'sc', ddi: '+248', mask: '0 000 000' },
+    { id: 'sl', ddi: '+232', mask: '(000) 000000' },
+    { id: 'so', ddi: '+252', mask: '0 0000000' },
+    { id: 'kr', ddi: '+82', mask: '000-0000-0000' },
+    { id: 'se', ddi: '+46', mask: '000-000 00 00' },
+    { id: 'tj', ddi: '+992', mask: '000 00 0000' },
+    { id: 'tk', ddi: '+690', mask: '0000' },
+    { id: 'tr', ddi: '+90', mask: '0000 000 00 00' },
+    { id: 'tm', ddi: '+993', mask: '0 00 000000' },
+    { id: 'uz', ddi: '+998', mask: '0 00 000 00 00' },
+];
+
+var Ordination;
+(function (Ordination) {
+    Ordination["NO"] = "no";
+    Ordination["AZ"] = "az";
+    Ordination["ZA"] = "za";
+})(Ordination || (Ordination = {}));
+
+class CountryPhonePickerService {
+    _translate;
+    constructor(_translate) {
+        this._translate = _translate;
+    }
+    getCountries(ordination) {
+        switch (ordination) {
+            case Ordination.AZ:
+                return this._sortAlphabetically();
+            case Ordination.ZA:
+                return this._sortAlphabeticallyDescending();
+            case Ordination.NO:
+            default:
+                return countries;
+        }
+    }
+    _sortAlphabetically() {
+        return countries.sort((a, b) => {
+            const aName = this._translate.instant(`platform.angular_components_${a.id}`);
+            const bName = this._translate.instant(`platform.angular_components_${b.id}`);
+            return aName.localeCompare(bName);
+        });
+    }
+    _sortAlphabeticallyDescending() {
+        return countries.sort((a, b) => {
+            const aName = this._translate.instant(`platform.angular_components_${a.id}`);
+            const bName = this._translate.instant(`platform.angular_components_${b.id}`);
+            return bName.localeCompare(aName);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CountryPhonePickerService, deps: [{ token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CountryPhonePickerService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CountryPhonePickerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i2.TranslateService }] });
+
+class CountryPhonePickerComponent {
+    _countryPhonePickerService;
+    _translate;
+    _eRef;
+    platformId;
+    countries = [];
+    ordination = Ordination.NO;
+    selected = new EventEmitter();
+    focusLost = new EventEmitter();
+    phoneInput = null;
+    filterInput = null;
+    isFocused = false;
+    mask = null;
+    selectedItem = null;
+    currentItemIndex = 0;
+    filteredCountriesList = [];
+    phone = new UntypedFormControl('');
+    filter = new UntypedFormControl('');
+    dropTop = 0;
+    dropLeft = 0;
+    _value = null;
+    _onChange;
+    _onTouched;
+    _countriesList = [];
+    _open = false;
+    _offsetTop = 0;
+    _portalHost = null;
+    constructor(_countryPhonePickerService, _translate, _eRef, platformId) {
+        this._countryPhonePickerService = _countryPhonePickerService;
+        this._translate = _translate;
+        this._eRef = _eRef;
+        this.platformId = platformId;
+    }
+    dropdownTemplate = null;
+    viewContainerRef = null;
+    dropElement = null;
+    dropdownContainer = null;
+    get value() {
+        return this._value ?? null;
+    }
+    set value(value) {
+        this._value = value;
+        this.mask = this.getMask();
+    }
+    get open() {
+        return this._open;
+    }
+    set open(open) {
+        this._open = open;
+        if (open) {
+            this._createDropdownPortal();
+        }
+        else {
+            if (this._portalHost?.hasAttached()) {
+                this._portalHost.detach();
+            }
+            this.phoneInput?.nativeElement?.focus();
+        }
+    }
+    onClickout(event) {
+        if (!this._eRef.nativeElement.contains(event.target)) {
+            const clickedOnFilterInput = this.filterInput?.nativeElement === event.target;
+            if (this.open && !clickedOnFilterInput) {
+                this.open = false;
+            }
+        }
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            if (this.open) {
+                this.selectedItem = this._countriesList[this.currentItemIndex];
+                this.selected.emit(this.selectedItem);
+            }
+            this.open = !this.open;
+        }
+        else if (event.key === 'Escape') {
+            this.open = false;
+        }
+        else if (event.key === 'ArrowDown') {
+            this._moveToDown();
+        }
+        else if (event.key === 'ArrowUp') {
+            this._moveToUp();
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+        if (value?.id) {
+            const country = this._countriesList.filter(({ id }) => id === value.id);
+            if (country.length) {
+                this.onSelectItem(country[0]);
+            }
+        }
+        if (value?.rawValue) {
+            this.phone.setValue(value.rawValue);
+        }
+    }
+    registerOnChange(onChange) {
+        this._onChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+        this._onTouched = onTouched;
+    }
+    ngOnInit() {
+        const countries = this._countryPhonePickerService.getCountries(this.ordination);
+        this.filter.valueChanges.subscribe(this._filterCountries);
+        if (this.countries?.length) {
+            this._countriesList = countries.filter((country) => this.countries.includes(country.id));
+        }
+        else {
+            this._countriesList = countries;
+        }
+        this.filteredCountriesList = this._countriesList;
+        this.selectedItem = this._getSelectedCountryDefault();
+        this.mask = this.getMask();
+        this.phone.valueChanges.subscribe((value) => {
+            if (!this.selectedItem) {
+                return;
+            }
+            this.value = {
+                id: this.selectedItem.id,
+                ddi: this.selectedItem.ddi,
+                rawValue: value ?? '',
+                value: value ? `${this._applyMask(value)}` : '',
+            };
+            if (this._onChange) {
+                this._onChange(this.value);
+            }
+        });
+    }
+    onSelectItem(country) {
+        this.open = false;
+        this.selectedItem = country;
+        this.phone.setValue('');
+        this.currentItemIndex = this._countriesList.indexOf(this.selectedItem);
+        this.selected.emit(this.selectedItem);
+    }
+    onCleanFilter() {
+        this.filter.setValue('');
+    }
+    onPhoneInputFocus() {
+        this.open = false;
+        this.isFocused = true;
+    }
+    onBlur(value) {
+        this.focusLost.emit(value);
+        this.isFocused = false;
+    }
+    getMask() {
+        if (!this.selectedItem)
+            return null;
+        const mask = this.selectedItem.mask;
+        if (Array.isArray(mask)) {
+            return !this.value?.rawValue || this.value.rawValue.length <= mask[0].replace(/[^0]/g, '').length
+                ? mask[0] // fixo
+                : mask[1]; // celular
+        }
+        else {
+            return mask;
+        }
+    }
+    getPlaceholder() {
+        return this.mask?.replace(/9/g, '') ?? '- NO MASK -';
+    }
+    _getSelectedCountryDefault() {
+        if (!this._countriesList.length) {
+            throw new Error('No country loaded');
+        }
+        const filteredByBr = this._countriesList.filter((country) => country.id === 'br');
+        return filteredByBr.length ? filteredByBr[0] : this._countriesList[0];
+    }
+    _filterCountries = (value) => {
+        if (!value) {
+            this.filteredCountriesList = this._countriesList;
+        }
+        else {
+            this.filteredCountriesList = this._countriesList.filter((country) => {
+                const countryName = this._translate.instant(`platform.angular_components.country_name_${country.id}`);
+                return countryName.toLowerCase().includes(value.toLowerCase());
+            });
+        }
+    };
+    _moveToUp() {
+        if (this.currentItemIndex === 0) {
+            return;
+        }
+        this.currentItemIndex--;
+        const selectList = document.querySelector('.select-list');
+        const item = selectList.children[this.currentItemIndex];
+        if (item.offsetTop - selectList.offsetTop <= this._offsetTop) {
+            this._offsetTop -= 45;
+            selectList.scrollTo(0, this._offsetTop);
+        }
+    }
+    static SCROLL_OFFSET_THRESHOLD = 180;
+    static SCROLL_AMOUNT_PER_ITEM = 45;
+    _moveToDown() {
+        if (this.currentItemIndex >= this._countriesList.length - 1) {
+            return;
+        }
+        this.currentItemIndex++;
+        const selectList = document.querySelector('.select-list');
+        const item = selectList.children[this.currentItemIndex];
+        if (item.offsetTop - selectList.offsetTop >
+            this._offsetTop + CountryPhonePickerComponent.SCROLL_OFFSET_THRESHOLD) {
+            this._offsetTop += CountryPhonePickerComponent.SCROLL_AMOUNT_PER_ITEM;
+            selectList.scrollTo(0, this._offsetTop);
+        }
+    }
+    _applyMask(value) {
+        let mask;
+        if (Array.isArray(this.selectedItem?.mask)) {
+            const rawMask = this.selectedItem.mask[0].replace(/[^0]/g, '');
+            mask = value.length <= rawMask.length ? this.selectedItem.mask[0] + '\0' : this.selectedItem.mask[1] + '\0';
+        }
+        else {
+            mask = this.selectedItem?.mask + '\0';
+        }
+        let tokens = '';
+        let replace = '';
+        let acumulador = 0;
+        let contador = 0;
+        for (const token of mask) {
+            if (isNaN(parseInt(token, 10))) {
+                if (acumulador) {
+                    tokens += `(\\d{${acumulador}})`;
+                    contador++;
+                    replace += `$${contador}`;
+                    acumulador = 0;
+                }
+                if (token !== '\0') {
+                    replace += token;
+                }
+            }
+            else {
+                acumulador++;
+            }
+        }
+        tokens = `^${tokens}*`;
+        return this.phone.value.replace(new RegExp(tokens), replace);
+    }
+    _createDropdownPortal() {
+        if (!isPlatformBrowser(this.platformId) || isNullOrUndefined(this.dropElement))
+            return;
+        const bodyElement = document.body;
+        const dropElementRect = this.dropElement.nativeElement.getBoundingClientRect();
+        this.dropTop = dropElementRect.bottom + window.scrollY;
+        this.dropLeft = dropElementRect.left + window.scrollX;
+        this._portalHost = new DomPortalOutlet(bodyElement, undefined, undefined, undefined);
+        const portal = new TemplatePortal(this.dropdownTemplate, this.viewContainerRef);
+        this._portalHost.attach(portal);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CountryPhonePickerComponent, deps: [{ token: CountryPhonePickerService }, { token: i2.TranslateService }, { token: i0.ElementRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CountryPhonePickerComponent, selector: "s-country-phone-picker", inputs: { countries: "countries", ordination: "ordination" }, outputs: { selected: "selected", focusLost: "focusLost" }, host: { listeners: { "document:click": "onClickout($event)", "keydown": "onKeydown($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CountryPhonePickerComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "phoneInput", first: true, predicate: ["phoneInput"], descendants: true, static: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }, { propertyName: "viewContainerRef", first: true, predicate: ["dropElement"], descendants: true, read: ViewContainerRef }, { propertyName: "dropElement", first: true, predicate: ["dropElement"], descendants: true, read: ElementRef }, { propertyName: "dropdownContainer", first: true, predicate: ["#dropdownContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"country-phone-picker\">\n    <div\n        #dropElement\n        class=\"phone-input\"\n        [class.phone-input--focused]=\"isFocused\"\n    >\n        <div\n            class=\"drop\"\n            (click)=\"open = !open\"\n        >\n            <span\n                class=\"drop-flag\"\n                [ngClass]=\"'fi fi-' + selectedItem?.id\"\n            >\n            </span>\n            <span class=\"drop-icon fas fa-caret-down\"></span>\n        </div>\n        <p class=\"phone-ddi\">{{ selectedItem?.ddi }}</p>\n        <input\n            #phoneInput\n            type=\"tel\"\n            [mask]=\"mask\"\n            [placeholder]=\"getPlaceholder()\"\n            [formControl]=\"phone\"\n            (focus)=\"onPhoneInputFocus()\"\n            (blur)=\"onBlur(value)\"\n        />\n    </div>\n    <ng-template #dropdownTemplate>\n        @if (open) {\n            <div\n                #dropdownContainer\n                class=\"dropdown\"\n                [ngStyle]=\"{\n                    position: 'absolute',\n                    top: dropTop + 'px',\n                    left: dropLeft + 'px',\n                }\"\n            >\n                <div class=\"search\">\n                    <input\n                        class=\"search-field\"\n                        type=\"text\"\n                        [formControl]=\"filter\"\n                        #filterInput\n                    />\n                    <span class=\"search-icon fas fa-search\"></span>\n                    <span\n                        class=\"search-clear fa fa-times\"\n                        (click)=\"onCleanFilter()\"\n                    ></span>\n                </div>\n                <ul class=\"select-list\">\n                    @for (country of filteredCountriesList; track $index) {\n                        <li\n                            class=\"select-option\"\n                            [ngClass]=\"{ 'select-option--focused': $index === currentItemIndex }\"\n                            (click)=\"onSelectItem(country)\"\n                        >\n                            <span\n                                class=\"select-option__flag\"\n                                [ngClass]=\"'fi fi-' + country.id\"\n                            >\n                            </span>\n                            <span class=\"select-option__name\">\n                                {{ 'platform.angular_components.country_name_' + country.id | translate }}\n                            </span>\n                            <span class=\"select-option__ddi\">\n                                {{ country.ddi }}\n                            </span>\n                        </li>\n                    }\n                </ul>\n            </div>\n        }\n    </ng-template>\n</div>\n", styles: [":host.ng-invalid.ng-dirty .phone-input{border-color:#c13018}.country-phone-picker:has(input:focus) .phone-input{border:1px solid #428bca}.country-phone-picker .phone-input{background-color:#fff;border:1px solid #d8d8d8;border-radius:4px;display:flex;line-height:normal;overflow:hidden}.country-phone-picker .phone-input .drop{align-items:center;cursor:pointer;display:flex}.country-phone-picker .phone-input .drop .drop-flag{margin-left:12px}.country-phone-picker .phone-input .drop .drop-icon{font-size:12px;margin:0 8px}.country-phone-picker .phone-input .phone-ddi{margin:8px 0}.country-phone-picker .phone-input input{border:none;flex-grow:1;font-family:Open Sans,sans-serif;font-size:14px;font-weight:400;line-height:150%;margin-left:8px}.country-phone-picker .phone-input input:focus{color:#697882;outline:0}.country-phone-picker .phone-input--focused{outline:2px solid #428bca}.dropdown{background-color:#fff;border-radius:4px;box-shadow:0 4px 5px #0003;padding:4px 0;position:absolute;margin:2px 0;z-index:999999}.dropdown .search{align-items:center;display:flex;padding:8px 12px}.dropdown .search .search-field{border:1px solid #d8d8d8;border-radius:4px;flex-grow:1;font-family:Open Sans,sans-serif;font-size:14px;font-weight:400;height:36px;line-height:150%;padding:0 32px 0 8px}.dropdown .search .search-icon{color:#333;font-size:12px;position:relative;right:24px}.dropdown .search .search-clear{color:#333;cursor:pointer;font-size:1rem}.dropdown .select-list{list-style:none;max-height:234px;min-width:360px;max-width:100vw;overflow:scroll;padding:0}.dropdown .select-list .select-option{cursor:pointer;display:flex;padding:12px;-webkit-user-select:none;user-select:none}.dropdown .select-list .select-option .select-option__flag{margin-right:12px}.dropdown .select-list .select-option .select-option__name{margin-right:.5rem;max-width:100%;overflow:hidden;text-overflow:ellipsis}.dropdown .select-list .select-option .select-option__ddi{color:#697882;font-size:14px;font-family:Open Sans,sans-serif;font-weight:400;line-height:150%}.dropdown .select-list .select-option:hover,.dropdown .select-list .select-option--focused{background-color:#e5eaea}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CountryPhonePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's-country-phone-picker', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CountryPhonePickerComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"country-phone-picker\">\n    <div\n        #dropElement\n        class=\"phone-input\"\n        [class.phone-input--focused]=\"isFocused\"\n    >\n        <div\n            class=\"drop\"\n            (click)=\"open = !open\"\n        >\n            <span\n                class=\"drop-flag\"\n                [ngClass]=\"'fi fi-' + selectedItem?.id\"\n            >\n            </span>\n            <span class=\"drop-icon fas fa-caret-down\"></span>\n        </div>\n        <p class=\"phone-ddi\">{{ selectedItem?.ddi }}</p>\n        <input\n            #phoneInput\n            type=\"tel\"\n            [mask]=\"mask\"\n            [placeholder]=\"getPlaceholder()\"\n            [formControl]=\"phone\"\n            (focus)=\"onPhoneInputFocus()\"\n            (blur)=\"onBlur(value)\"\n        />\n    </div>\n    <ng-template #dropdownTemplate>\n        @if (open) {\n            <div\n                #dropdownContainer\n                class=\"dropdown\"\n                [ngStyle]=\"{\n                    position: 'absolute',\n                    top: dropTop + 'px',\n                    left: dropLeft + 'px',\n                }\"\n            >\n                <div class=\"search\">\n                    <input\n                        class=\"search-field\"\n                        type=\"text\"\n                        [formControl]=\"filter\"\n                        #filterInput\n                    />\n                    <span class=\"search-icon fas fa-search\"></span>\n                    <span\n                        class=\"search-clear fa fa-times\"\n                        (click)=\"onCleanFilter()\"\n                    ></span>\n                </div>\n                <ul class=\"select-list\">\n                    @for (country of filteredCountriesList; track $index) {\n                        <li\n                            class=\"select-option\"\n                            [ngClass]=\"{ 'select-option--focused': $index === currentItemIndex }\"\n                            (click)=\"onSelectItem(country)\"\n                        >\n                            <span\n                                class=\"select-option__flag\"\n                                [ngClass]=\"'fi fi-' + country.id\"\n                            >\n                            </span>\n                            <span class=\"select-option__name\">\n                                {{ 'platform.angular_components.country_name_' + country.id | translate }}\n                            </span>\n                            <span class=\"select-option__ddi\">\n                                {{ country.ddi }}\n                            </span>\n                        </li>\n                    }\n                </ul>\n            </div>\n        }\n    </ng-template>\n</div>\n", styles: [":host.ng-invalid.ng-dirty .phone-input{border-color:#c13018}.country-phone-picker:has(input:focus) .phone-input{border:1px solid #428bca}.country-phone-picker .phone-input{background-color:#fff;border:1px solid #d8d8d8;border-radius:4px;display:flex;line-height:normal;overflow:hidden}.country-phone-picker .phone-input .drop{align-items:center;cursor:pointer;display:flex}.country-phone-picker .phone-input .drop .drop-flag{margin-left:12px}.country-phone-picker .phone-input .drop .drop-icon{font-size:12px;margin:0 8px}.country-phone-picker .phone-input .phone-ddi{margin:8px 0}.country-phone-picker .phone-input input{border:none;flex-grow:1;font-family:Open Sans,sans-serif;font-size:14px;font-weight:400;line-height:150%;margin-left:8px}.country-phone-picker .phone-input input:focus{color:#697882;outline:0}.country-phone-picker .phone-input--focused{outline:2px solid #428bca}.dropdown{background-color:#fff;border-radius:4px;box-shadow:0 4px 5px #0003;padding:4px 0;position:absolute;margin:2px 0;z-index:999999}.dropdown .search{align-items:center;display:flex;padding:8px 12px}.dropdown .search .search-field{border:1px solid #d8d8d8;border-radius:4px;flex-grow:1;font-family:Open Sans,sans-serif;font-size:14px;font-weight:400;height:36px;line-height:150%;padding:0 32px 0 8px}.dropdown .search .search-icon{color:#333;font-size:12px;position:relative;right:24px}.dropdown .search .search-clear{color:#333;cursor:pointer;font-size:1rem}.dropdown .select-list{list-style:none;max-height:234px;min-width:360px;max-width:100vw;overflow:scroll;padding:0}.dropdown .select-list .select-option{cursor:pointer;display:flex;padding:12px;-webkit-user-select:none;user-select:none}.dropdown .select-list .select-option .select-option__flag{margin-right:12px}.dropdown .select-list .select-option .select-option__name{margin-right:.5rem;max-width:100%;overflow:hidden;text-overflow:ellipsis}.dropdown .select-list .select-option .select-option__ddi{color:#697882;font-size:14px;font-family:Open Sans,sans-serif;font-weight:400;line-height:150%}.dropdown .select-list .select-option:hover,.dropdown .select-list .select-option--focused{background-color:#e5eaea}\n"] }]
+        }], ctorParameters: () => [{ type: CountryPhonePickerService }, { type: i2.TranslateService }, { type: i0.ElementRef }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { countries: [{
+                type: Input
+            }], ordination: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }], focusLost: [{
+                type: Output
+            }], phoneInput: [{
+                type: ViewChild,
+                args: ['phoneInput', { static: true }]
+            }], filterInput: [{
+                type: ViewChild,
+                args: ['filterInput']
+            }], dropdownTemplate: [{
+                type: ViewChild,
+                args: ['dropdownTemplate']
+            }], viewContainerRef: [{
+                type: ViewChild,
+                args: ['dropElement', { read: ViewContainerRef }]
+            }], dropElement: [{
+                type: ViewChild,
+                args: ['dropElement', { read: ElementRef }]
+            }], dropdownContainer: [{
+                type: ViewChild,
+                args: ['#dropdownContainer', { read: ElementRef }]
+            }], onClickout: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class CountryPhonePickerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CountryPhonePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: CountryPhonePickerModule, declarations: [CountryPhonePickerComponent], imports: [CommonModule,
+            TranslateModule,
+            ReactiveFormsModule,
+            NgxMaskDirective,
+            NgxMaskPipe], exports: [CountryPhonePickerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CountryPhonePickerModule, providers: [
+            CountryPhonePickerService,
+            provideNgxMask(),
+        ], imports: [CommonModule,
+            TranslateModule,
+            ReactiveFormsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CountryPhonePickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        TranslateModule,
+                        ReactiveFormsModule,
+                        NgxMaskDirective,
+                        NgxMaskPipe,
+                    ],
+                    declarations: [CountryPhonePickerComponent],
+                    exports: [CountryPhonePickerComponent],
+                    providers: [
+                        CountryPhonePickerService,
+                        provideNgxMask(),
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CountryPhonePickerComponent, CountryPhonePickerModule, Ordination, countries };
+//# sourceMappingURL=seniorsistemas-angular-components-country-phone-picker.mjs.map