@seniorsistemas/angular-components 16.10.5 → 16.10.6

package/fesm5/seniorsistemas-angular-components.js

@@ -1,5 +1,5 @@
 import { __decorate, __spread, __assign, __values, __extends, __rest, __awaiter, __generator, __param, __read } 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';
@@ -1380,10 +1380,10 @@ var CountryPhonePickerComponent = /** @class */ (function () {
         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());
                 });
@@ -1391,8 +1391,31 @@ var CountryPhonePickerComponent = /** @class */ (function () {
         };
     }
     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;
@@ -1413,28 +1436,30 @@ var CountryPhonePickerComponent = /** @class */ (function () {
         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;
@@ -1464,13 +1489,13 @@ var CountryPhonePickerComponent = /** @class */ (function () {
     });
     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 () {
@@ -1480,9 +1505,10 @@ var CountryPhonePickerComponent = /** @class */ (function () {
         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
         }
@@ -1491,14 +1517,14 @@ var CountryPhonePickerComponent = /** @class */ (function () {
         }
     };
     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) {
@@ -1513,7 +1539,7 @@ var CountryPhonePickerComponent = /** @class */ (function () {
         }
     };
     CountryPhonePickerComponent.prototype._moveToDown = function () {
-        if (this.currentItemIndex >= this.countriesList.length - 1) {
+        if (this.currentItemIndex >= this._countriesList.length - 1) {
             return;
         }
         this.currentItemIndex++;
@@ -1534,7 +1560,7 @@ var CountryPhonePickerComponent = /** @class */ (function () {
                 : this.selectedItem.mask[1] + "\0";
         }
         else {
-            mask = this.selectedItem.mask;
+            mask = this.selectedItem.mask + "\0";
         }
         var tokens = "";
         var replace = "";
@@ -1598,10 +1624,10 @@ var CountryPhonePickerComponent = /** @class */ (function () {
     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(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}"]