@seniorsistemas/angular-components 16.10.5 → 16.10.6

package/fesm2015/seniorsistemas-angular-components.js

@@ -1,5 +1,5 @@
 import { __decorate, __rest, __awaiter, __param } from 'tslib';
-import { EventEmitter, Input, Output, HostListener, Component, NgModule, HostBinding, ViewChild, Renderer2, Directive, Injectable, ElementRef, Pipe, forwardRef, ViewEncapsulation, ɵɵdefineInjectable, InjectionToken, Inject, ApplicationRef, ComponentFactoryResolver, Injector, TemplateRef, ViewContainerRef, ChangeDetectorRef, Optional, ContentChild, ContentChildren } from '@angular/core';
+import { EventEmitter, Input, Output, HostListener, Component, NgModule, HostBinding, ViewChild, Renderer2, Directive, Injectable, ElementRef, forwardRef, Pipe, ViewEncapsulation, ɵɵdefineInjectable, InjectionToken, Inject, ApplicationRef, ComponentFactoryResolver, Injector, TemplateRef, ViewContainerRef, ChangeDetectorRef, Optional, ContentChild, ContentChildren } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule, NavigationEnd, PRIMARY_OUTLET, ActivatedRoute, Router } from '@angular/router';
 import { BreadcrumbModule as BreadcrumbModule$1 } from 'primeng/breadcrumb';
@@ -1334,18 +1334,34 @@ let CountryPhonePickerComponent = CountryPhonePickerComponent_1 = class CountryP
         this.tabindex = 0;
         this._filterCountries = (value) => {
             if (!value) {
-                this.filteredCountriesList = this.countriesList;
+                this.filteredCountriesList = this._countriesList;
             }
             else {
-                this.filteredCountriesList = this.countriesList.filter((country) => {
+                this.filteredCountriesList = this._countriesList.filter((country) => {
                     const countryName = this.translate.instant(`platform.angular_components.country_name_${country.id}`);
                     return countryName.toLowerCase().includes(value.toLowerCase());
                 });
             }
         };
     }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+        this.mask = this.getMask();
+    }
     writeValue(value) {
         this.value = value;
+        if (value === null || value === void 0 ? void 0 : value.id) {
+            const country = this._countriesList.filter(({ id }) => id == value.id);
+            if (country.length) {
+                this.onSelectItem(country[0]);
+            }
+        }
+        if (value === null || value === void 0 ? void 0 : value.rawValue) {
+            this.phone.setValue(value.rawValue);
+        }
     }
     registerOnChange(onChange) {
         this._onChange = onChange;
@@ -1365,28 +1381,30 @@ let CountryPhonePickerComponent = CountryPhonePickerComponent_1 = class CountryP
         const countries = this.countryPhonePickerService.getCountries(this.ordination);
         this.filter.valueChanges.subscribe(this._filterCountries);
         if ((_a = this.countries) === null || _a === void 0 ? void 0 : _a.length) {
-            this.countriesList = countries.filter((country) => this.countries.includes(country.id));
+            this._countriesList = countries.filter((country) => this.countries.includes(country.id));
         }
         else {
-            this.countriesList = countries;
+            this._countriesList = countries;
         }
-        this.filteredCountriesList = this.countriesList;
+        this.filteredCountriesList = this._countriesList;
         this.selectedItem = this._getSelectedCountryDefault();
+        this.mask = this.getMask();
         this.phone.valueChanges.subscribe((value) => {
-            var _a;
             this.value = {
                 id: this.selectedItem.id,
                 ddi: this.selectedItem.ddi,
                 rawValue: value !== null && value !== void 0 ? value : "",
                 value: value ? `${this._applyMask(value)}` : "",
             };
-            (_a = this._onChange) === null || _a === void 0 ? void 0 : _a.call(this.value);
+            if (this._onChange) {
+                this._onChange(this.value);
+            }
         });
     }
     onKeydown(event) {
         if (event.key === "Enter" || event.key === " ") {
             if (this.open) {
-                this.selectedItem = this.countriesList[this.currentItemIndex];
+                this.selectedItem = this._countriesList[this.currentItemIndex];
                 this.selected.emit(this.selectedItem);
             }
             this.open = !this.open;
@@ -1412,13 +1430,13 @@ let CountryPhonePickerComponent = CountryPhonePickerComponent_1 = class CountryP
     }
     onBlur() {
         this.open = false;
-        this.currentItemIndex = this.countriesList.indexOf(this.selectedItem);
+        this.currentItemIndex = this._countriesList.indexOf(this.selectedItem);
     }
     onSelectItem(country) {
         this.open = false;
         this.selectedItem = country;
         this.phone.setValue("");
-        this.currentItemIndex = this.countriesList.indexOf(this.selectedItem);
+        this.currentItemIndex = this._countriesList.indexOf(this.selectedItem);
         this.selected.emit(this.selectedItem);
     }
     onCleanFilter() {
@@ -1428,9 +1446,10 @@ let CountryPhonePickerComponent = CountryPhonePickerComponent_1 = class CountryP
         this.open = false;
     }
     getMask() {
+        var _a;
         const mask = this.selectedItem.mask;
         if (Array.isArray(mask)) {
-            return !this.value || this.value.value.length <= mask[0].length - 1
+            return !((_a = this.value) === null || _a === void 0 ? void 0 : _a.rawValue) || this.value.rawValue.length <= mask[0].replace(/[^0]/g, "").length
                 ? mask[0] // fixo
                 : mask[1]; // celular
         }
@@ -1439,14 +1458,14 @@ let CountryPhonePickerComponent = CountryPhonePickerComponent_1 = class CountryP
         }
     }
     getPlaceholder() {
-        return this.getMask().replace(/9/g, "");
+        return this.mask.replace(/9/g, "");
     }
     _getSelectedCountryDefault() {
-        if (!this.countriesList.length) {
+        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];
+        const filteredByBr = this._countriesList.filter((country) => country.id === "br");
+        return filteredByBr.length ? filteredByBr[0] : this._countriesList[0];
     }
     _moveToUp() {
         if (this.currentItemIndex == 0) {
@@ -1461,7 +1480,7 @@ let CountryPhonePickerComponent = CountryPhonePickerComponent_1 = class CountryP
         }
     }
     _moveToDown() {
-        if (this.currentItemIndex >= this.countriesList.length - 1) {
+        if (this.currentItemIndex >= this._countriesList.length - 1) {
             return;
         }
         this.currentItemIndex++;
@@ -1481,7 +1500,7 @@ let CountryPhonePickerComponent = CountryPhonePickerComponent_1 = class CountryP
                 : this.selectedItem.mask[1] + "\0";
         }
         else {
-            mask = this.selectedItem.mask;
+            mask = this.selectedItem.mask + "\0";
         }
         let tokens = "";
         let replace = "";
@@ -1535,10 +1554,10 @@ __decorate([
 CountryPhonePickerComponent = CountryPhonePickerComponent_1 = __decorate([
     Component({
         selector: "s-country-phone-picker",
-        template: "<div class=\"country-phone-picker\">\n   <div class=\"phone-input\">\n      <div class=\"drop\" (click)=\"open = !open\">\n         <span class=\"drop-flag\" [ngClass]=\"'fi fi-' + selectedItem.id\">\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         autofocus\n         [mask]=\"getMask()\"       \n         [placeholder]=\"getPlaceholder()\"\n         [formControl]=\"phone\"\n         (focus)=\"onPhoneInputFocus()\" />\n   </div>\n   <div *ngIf=\"open\" class=\"dropdown\">\n      <div class=\"search\">\n         <input\n            class=\"search-field\"\n            type=\"text\"\n            [formControl]=\"filter\">\n         <span class=\"search-icon fas fa-search\"></span>\n         <span\n            class=\"search-clear fa fa-times\"\n            (click)=\"onCleanFilter()\"></span>\n      </div>\n      <ul class=\"select-list\">\n         <li\n            *ngFor=\"let country of filteredCountriesList; let i = index;\"\n            class=\"select-option\"\n            [ngClass]=\"{ 'select-option--focused': i == currentItemIndex }\"\n            (click)=\"onSelectItem(country)\">\n            <span\n               class=\"select-option__flag\"\n               [ngClass]=\"'fi fi-' + country.id\">\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      </ul>\n   </div>\n</div>",
+        template: "<div class=\"country-phone-picker\">\n   <div class=\"phone-input\">\n      <div class=\"drop\" (click)=\"open = !open\">\n         <span class=\"drop-flag\" [ngClass]=\"'fi fi-' + selectedItem.id\">\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         autofocus\n         [mask]=\"mask\"       \n         [placeholder]=\"getPlaceholder()\"\n         [formControl]=\"phone\"\n         (focus)=\"onPhoneInputFocus()\" />\n   </div>\n   <div *ngIf=\"open\" class=\"dropdown\">\n      <div class=\"search\">\n         <input\n            class=\"search-field\"\n            type=\"text\"\n            [formControl]=\"filter\">\n         <span class=\"search-icon fas fa-search\"></span>\n         <span\n            class=\"search-clear fa fa-times\"\n            (click)=\"onCleanFilter()\"></span>\n      </div>\n      <ul class=\"select-list\">\n         <li\n            *ngFor=\"let country of filteredCountriesList; let i = index;\"\n            class=\"select-option\"\n            [ngClass]=\"{ 'select-option--focused': i == currentItemIndex }\"\n            (click)=\"onSelectItem(country)\">\n            <span\n               class=\"select-option__flag\"\n               [ngClass]=\"'fi fi-' + country.id\">\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      </ul>\n   </div>\n</div>",
         providers: [{
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: CountryPhonePickerComponent_1,
+                useExisting: forwardRef(() => CountryPhonePickerComponent_1),
                 multi: true,
             }],
         styles: [".country-phone-picker .phone-input{background-color:#fff;border:1px solid #d8d8d8;border-radius:4px;display:-ms-flexbox;display:flex;line-height:normal}.country-phone-picker .phone-input .drop{-ms-flex-align:center;align-items:center;cursor:pointer;display:-ms-flexbox;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;-ms-flex-positive:1;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 .dropdown{background-color:#fff;border-radius:4px;box-shadow:0 4px 5px #00000033;padding:4px 0;position:absolute;margin:2px 0;z-index:999999}.country-phone-picker .dropdown .search{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding:8px 12px}.country-phone-picker .dropdown .search .search-field{border:1px solid #d8d8d8;border-radius:4px;-ms-flex-positive:1;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}.country-phone-picker .dropdown .search .search-icon{color:#333;font-size:12px;position:relative;right:24px}.country-phone-picker .dropdown .search .search-clear{color:#333;cursor:pointer;font-size:1rem}.country-phone-picker .dropdown .select-list{list-style:none;max-height:234px;min-width:360px;max-width:100vw;overflow:scroll;padding:0}.country-phone-picker .dropdown .select-list .select-option{cursor:pointer;display:-ms-flexbox;display:flex;padding:12px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.country-phone-picker .dropdown .select-list .select-option .select-option__flag{margin-right:12px}.country-phone-picker .dropdown .select-list .select-option .select-option__name{margin-right:.5rem;max-width:100%;overflow:hidden;text-overflow:ellipsis}.country-phone-picker .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%}.country-phone-picker .dropdown .select-list .select-option--focused,.country-phone-picker .dropdown .select-list .select-option:hover{background-color:#e5eaea}"]