@seniorsistemas/angular-components 16.10.5 → 16.10.6

package/bundles/seniorsistemas-angular-components.umd.js

@@ -1548,10 +1548,10 @@
             this.tabindex = 0;
             this._filterCountries = function (value) {
                 if (!value) {
-                    _this.filteredCountriesList = _this.countriesList;
+                    _this.filteredCountriesList = _this._countriesList;
                 }
                 else {
-                    _this.filteredCountriesList = _this.countriesList.filter(function (country) {
+                    _this.filteredCountriesList = _this._countriesList.filter(function (country) {
                         var countryName = _this.translate.instant("platform.angular_components.country_name_" + country.id);
                         return countryName.toLowerCase().includes(value.toLowerCase());
                     });
@@ -1559,8 +1559,31 @@
             };
         }
         CountryPhonePickerComponent_1 = CountryPhonePickerComponent;
+        Object.defineProperty(CountryPhonePickerComponent.prototype, "value", {
+            get: function () {
+                return this._value;
+            },
+            set: function (value) {
+                this._value = value;
+                this.mask = this.getMask();
+            },
+            enumerable: true,
+            configurable: true
+        });
         CountryPhonePickerComponent.prototype.writeValue = function (value) {
             this.value = value;
+            if (value === null || value === void 0 ? void 0 : value.id) {
+                var country = this._countriesList.filter(function (_a) {
+                    var id = _a.id;
+                    return 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);
+            }
         };
         CountryPhonePickerComponent.prototype.registerOnChange = function (onChange) {
             this._onChange = onChange;
@@ -1581,28 +1604,30 @@
             var 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(function (country) { return _this.countries.includes(country.id); });
+                this._countriesList = countries.filter(function (country) { return _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(function (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);
+                }
             });
         };
         CountryPhonePickerComponent.prototype.onKeydown = function (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;
@@ -1632,13 +1657,13 @@
         });
         CountryPhonePickerComponent.prototype.onBlur = function () {
             this.open = false;
-            this.currentItemIndex = this.countriesList.indexOf(this.selectedItem);
+            this.currentItemIndex = this._countriesList.indexOf(this.selectedItem);
         };
         CountryPhonePickerComponent.prototype.onSelectItem = function (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);
         };
         CountryPhonePickerComponent.prototype.onCleanFilter = function () {
@@ -1648,9 +1673,10 @@
             this.open = false;
         };
         CountryPhonePickerComponent.prototype.getMask = function () {
+            var _a;
             var 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
             }
@@ -1659,14 +1685,14 @@
             }
         };
         CountryPhonePickerComponent.prototype.getPlaceholder = function () {
-            return this.getMask().replace(/9/g, "");
+            return this.mask.replace(/9/g, "");
         };
         CountryPhonePickerComponent.prototype._getSelectedCountryDefault = function () {
-            if (!this.countriesList.length) {
+            if (!this._countriesList.length) {
                 throw new Error("No country loaded");
             }
-            var filteredByBr = this.countriesList.filter(function (country) { return country.id === "br"; });
-            return filteredByBr.length ? filteredByBr[0] : this.countriesList[0];
+            var filteredByBr = this._countriesList.filter(function (country) { return country.id === "br"; });
+            return filteredByBr.length ? filteredByBr[0] : this._countriesList[0];
         };
         CountryPhonePickerComponent.prototype._moveToUp = function () {
             if (this.currentItemIndex == 0) {
@@ -1681,7 +1707,7 @@
             }
         };
         CountryPhonePickerComponent.prototype._moveToDown = function () {
-            if (this.currentItemIndex >= this.countriesList.length - 1) {
+            if (this.currentItemIndex >= this._countriesList.length - 1) {
                 return;
             }
             this.currentItemIndex++;
@@ -1702,7 +1728,7 @@
                     : this.selectedItem.mask[1] + "\0";
             }
             else {
-                mask = this.selectedItem.mask;
+                mask = this.selectedItem.mask + "\0";
             }
             var tokens = "";
             var replace = "";
@@ -1766,10 +1792,10 @@
         CountryPhonePickerComponent = CountryPhonePickerComponent_1 = __decorate([
             core.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: forms.NG_VALUE_ACCESSOR,
-                        useExisting: CountryPhonePickerComponent_1,
+                        useExisting: core.forwardRef(function () { return 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}"]