ngx-vector-components 5.112.0 → 5.113.0

package/fesm2022/ngx-vector-components.mjs

@@ -3238,7 +3238,12 @@ class DropdownFieldComponent {
                 .getPaged(encodeURIComponent(this.currentSearchQuery), this.currentScrollPage, this.limitScrollPage, this.dependencies)
                 .subscribe({
                 next: (response) => {
-                    this.pagedSuggestions = this.currentScrollPage === 0 ? response : this.pagedSuggestions?.concat(response);
+                    const formattedResponse = response.map((item) => ({
+                        ...item,
+                        name: this.formatDropdownValue(item.name),
+                    }));
+                    this.pagedSuggestions =
+                        this.currentScrollPage === 0 ? formattedResponse : this.pagedSuggestions?.concat(formattedResponse);
                     const controlValue = typeof this.control.value == 'object' ? this.control.value?.code : this.control.value;
                     if (this.control.value && this.pagedSuggestions?.find((item) => item.code == controlValue)) {
                         this.setControlValueFromSuggestions();
@@ -3296,6 +3301,85 @@ class DropdownFieldComponent {
     filterListByQuery(list = [], query) {
         return list.filter((opt) => String(opt.code).toUpperCase().includes(query) || opt.name.toUpperCase().includes(query));
     }
+    formatDropdownValue(value) {
+        const firstDigitIndex = value.search(/\d/);
+        if (firstDigitIndex === -1)
+            return value;
+        const prefix = value.slice(0, firstDigitIndex);
+        const suffixWithNumbers = value.slice(firstDigitIndex);
+        const match = suffixWithNumbers.match(/^(\d+)(.*)$/);
+        if (!match)
+            return value;
+        const rawNumber = match[1];
+        const suffix = match[2];
+        const formatted = this.applyDynamicCpfCnpjMask(rawNumber);
+        return `${prefix}${formatted}${suffix}`;
+    }
+    applyDynamicCpfCnpjMask(value) {
+        if (!value)
+            return '';
+        const alphanumerics = value.replace(/[^a-zA-Z0-9]/g, '');
+        const isOnlyDigits = /^\d+$/.test(alphanumerics);
+        if (isOnlyDigits && !this.isCpfOrCnpj(alphanumerics))
+            return value;
+        let masked = '';
+        const isCpf = alphanumerics.length <= 11;
+        if (isCpf) {
+            for (let i = 0; i < alphanumerics.length; i++) {
+                masked += alphanumerics[i];
+                if (i === 2 || i === 5)
+                    masked += '.';
+                else if (i === 8)
+                    masked += '-';
+            }
+        }
+        else {
+            for (let i = 0; i < alphanumerics.length; i++) {
+                masked += alphanumerics[i];
+                if (i === 1 || i === 4)
+                    masked += '.';
+                else if (i === 7)
+                    masked += '/';
+                else if (i === 11)
+                    masked += '-';
+            }
+        }
+        return masked;
+    }
+    isCpfOrCnpj(value) {
+        const cleaned = value.replace(/\D/g, '');
+        return this.isValidCpf(cleaned) || this.isValidCnpj(cleaned);
+    }
+    isValidCpf(cpf) {
+        if (cpf.length !== 11 || /^(\d)\1+$/.test(cpf))
+            return false;
+        const digits = cpf.split('').map(Number);
+        const calcVerifier = (factor) => {
+            let total = 0;
+            for (let i = 0; i < factor - 1; i++) {
+                total += digits[i] * (factor - i);
+            }
+            const rest = total % 11;
+            return rest < 2 ? 0 : 11 - rest;
+        };
+        const dv1 = calcVerifier(10);
+        const dv2 = calcVerifier(11);
+        return dv1 === digits[9] && dv2 === digits[10];
+    }
+    isValidCnpj(cnpj) {
+        if (cnpj.length !== 14 || /^(\d)\1+$/.test(cnpj))
+            return false;
+        const digits = cnpj.split('').map(Number);
+        const calcVerifier = (length) => {
+            const weights = length === 12 ? [5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2] : [6, 5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2];
+            const total = digits.slice(0, length).reduce((sum, num, idx) => sum + num * weights[idx], 0);
+            const rest = total % 11;
+            return rest < 2 ? 0 : 11 - rest;
+        };
+        const dv1 = calcVerifier(12);
+        const dv2 = calcVerifier(13);
+        return dv1 === digits[12] && dv2 === digits[13];
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownFieldComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DropdownFieldComponent, selector: "vector-dropdown-field", inputs: { options: "options", isNgContent: "isNgContent", forceSelection: "forceSelection", isRequired: "isRequired", control: "control", label: "label", service: "service", paged: "paged", buttonAction: "buttonAction", dependencies: "dependencies", hiddenErrorMessage: "hiddenErrorMessage", dynamicFilters: "dynamicFilters", minLengthToService: "minLengthToService", initialLoad: "initialLoad", disabled: "disabled", limitScrollPage: "limitScrollPage", inputId: "inputId" }, outputs: { onFocus: "onFocus", onChange: "onChange" }, ngImport: i0, template: "<div class=\"relative\">\r\n  <div class=\"input-container\">\r\n    <div class=\"input-inner-container\" *ngIf=\"!isNgContent\">\r\n      <p-dropdown\r\n        *ngIf=\"dynamicFilters\"\r\n        appendTo=\"body\"\r\n        optionLabel=\"name\"\r\n        optionValue=\"code\"\r\n        [(ngModel)]=\"selectedDynamicFilter\"\r\n        [options]=\"dynamicFilters\"\r\n        [disabled]=\"disabled\"\r\n        [inputId]=\"inputId\"\r\n      >\r\n      </p-dropdown>\r\n      <p-autoComplete\r\n        appendTo=\"body\"\r\n        field=\"name\"\r\n        [forceSelection]=\"forceSelection\"\r\n        [dropdown]=\"true\"\r\n        [formControl]=\"control\"\r\n        [placeholder]=\"placeholder\"\r\n        [suggestions]=\"pagedSuggestions\"\r\n        [dropdownIcon]=\"dynamicFilters ? 'pi pi-search' : 'pi pi-chevron-down'\"\r\n        [delay]=\"800\"\r\n        (completeMethod)=\"search($event)\"\r\n        (onShow)=\"onOpenAutocompletePanel()\"\r\n        (onHide)=\"onHideAutocompletePanel()\"\r\n        (onFocus)=\"onFocus.emit($event)\"\r\n        (onChange)=\"onChange.emit($event)\"\r\n        [disabled]=\"disabled\"\r\n        [inputId]=\"inputId\"\r\n      >\r\n      </p-autoComplete>\r\n    </div>\r\n\r\n    <div class=\"input-inner-container\" *ngIf=\"isNgContent\">\r\n      <p-autoComplete\r\n        appendTo=\"body\"\r\n        field=\"name\"\r\n        [forceSelection]=\"forceSelection\"\r\n        [dropdown]=\"true\"\r\n        [formControl]=\"control\"\r\n        [placeholder]=\"placeholder\"\r\n        [suggestions]=\"pagedSuggestions\"\r\n        [dropdownIcon]=\"dynamicFilters ? 'pi pi-search' : 'pi pi-chevron-down'\"\r\n        [delay]=\"800\"\r\n        (completeMethod)=\"search($event)\"\r\n        (onShow)=\"onOpenAutocompletePanel()\"\r\n        (onHide)=\"onHideAutocompletePanel()\"\r\n        (onFocus)=\"onFocus.emit($event)\"\r\n        (onChange)=\"onChange.emit($event)\"\r\n        [disabled]=\"disabled\"\r\n        [inputId]=\"inputId\"\r\n      >\r\n        <ng-template let-option pTemplate=\"item\">\r\n          <div class=\"option-content\">\r\n            <span class=\"option-label\">{{ option.name }}</span>\r\n            <br />\r\n            <span class=\"option-sublabel\">{{ option.code }}</span>\r\n          </div>\r\n        </ng-template>\r\n      </p-autoComplete>\r\n    </div>\r\n\r\n    <vector-button\r\n      *ngIf=\"buttonAction\"\r\n      [label]=\"buttonAction.label\"\r\n      [disabled]=\"disabled\"\r\n      (onClick)=\"buttonAction.onClick(control.value)\"\r\n    ></vector-button>\r\n  </div>\r\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\r\n</div>\r\n", styles: [".input-container{display:flex;align-items:flex-end;width:100%}@media (max-width: 575px){.input-container{align-items:flex-start;flex-direction:column}}.input-container p-autoComplete{flex:1}@media (max-width: 575px){.input-container p-autoComplete{width:100%}}.input-container vector-button{margin-left:15px}@media (max-width: 575px){.input-container vector-button{margin-left:0;margin-top:10px;width:100%}}.input-container p-dropdown{margin-right:-5px;width:150px}@media (max-width: 575px){.input-container p-dropdown{width:100px}}.input-container .input-inner-container{display:flex;width:100%}.p-dropdown-panel,.p-autocomplete-panel,.p-multiselect-panel{max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$3.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5$1.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "round", "style", "loading"], outputs: ["onClick"] }, { kind: "component", type: FieldErrorMessageComponent, selector: "vector-field-error-message", inputs: ["control"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -3761,7 +3845,12 @@ class DataTableComponent {
                 content += `<div class="text-centered"><i class="${iconClass} status-table-field table-button"></i></div>`;
                 break;
             case TableColumnType.MASK:
-                content += MaskUtil.doMaskString(cellText, col.mask);
+                if (col.mask === 'dynamicCpfCnpj') {
+                    content += MaskUtil.formatDocument(cellText);
+                }
+                else {
+                    content += MaskUtil.doMaskString(cellText, col.mask);
+                }
                 break;
             case TableColumnType.CURRENCY:
                 content += Number(cellText).toLocaleString('pt-BR', {