ng-tailwind 7.0.18 → 7.0.20

package/components/forms/template-driven/ngt-dropzone/ngt-dropzone.component.d.ts

@@ -70,7 +70,7 @@ export declare class NgtDropzoneComponent extends NgtControlValueAccessor implem
     ngAfterContentChecked(): void;
     ngOnInit(): void;
     ngOnDestroy(): void;
-    imagePreview(index: any): void;
+    imagePreview(uploadedResourcesIndex: number): void;
     onImageClick(element: any, index?: any): void;
     onFileClick(url: string, name: string, size: number): void;
     onCloseFileViewer(): void;

package/components/forms/template-driven/ngt-input/ngt-input.component.d.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectorRef, ElementRef, EventEmitter, Injector, OnDestroy, OnInit, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
 import { AsyncValidatorFn, ControlContainer } from '@angular/forms';
-import { NgtControlValueAccessor } from '../../../../base/ngt-control-value-accessor';
 import { NgtStylizableDirective } from '../../../../directives/ngt-stylizable/ngt-stylizable.directive';
+import { NgtControlValueAccessor } from '../../../../base/ngt-control-value-accessor';
 import { NgtHttpFindExistingResourceInterface, NgtHttpResourceService } from '../../../../services/http/ngt-http-resource.service';
 import { NgtHttpValidationService } from '../../../../services/http/ngt-http-validation.service';
 import { NgtTranslateService } from '../../../../services/http/ngt-translate.service';
@@ -103,6 +103,7 @@ export declare class NgtInputComponent extends NgtControlValueAccessor implement
     private initComponent;
     private updateValidations;
     private setupMasks;
+    private setupAlphanumericPasteHandler;
     private setupProperties;
     private minValueValidator;
     private multipleOfValidator;
@@ -115,9 +116,16 @@ export declare class NgtInputComponent extends NgtControlValueAccessor implement
     private searchExistingResource;
     private validatePhone;
     private uniqueValidator;
+    private validatorCNPJ;
+    private validatorNumericCNPJ;
+    private validatorAlphaNumericCNPJ;
+    private getCnpjVerificationDigit;
+    private getCnpjCharacterValue;
+    private validatorCPF;
     private getNativeValue;
     private getElementTitle;
     private removeMasks;
+    private normalizeDocument;
     private hasEmailServiceValidation;
     private hasPasswordValidation;
     private isDisabledByParent;

package/components/ngt-datatable/ngt-datatable.component.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, Injector, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, Injector, OnDestroy, OnInit, SimpleChanges, TemplateRef, WritableSignal } from '@angular/core';
 import { NgtHttpService } from '../../services/http/ngt-http.service';
 import { NgtTranslateService } from '../../services/http/ngt-translate.service';
 import { NgtInputComponent } from '../forms/template-driven/ngt-input/ngt-input.component';
@@ -62,7 +62,6 @@ export declare class NgtDatatableComponent implements OnInit, OnDestroy {
     onSearch: EventEmitter<any>;
     searchModalTemplate: TemplateRef<any>;
     data: any[];
-    loading: boolean;
     cleaningFilter: boolean;
     componentReady: boolean;
     filtersTranslated: any[];
@@ -70,12 +69,15 @@ export declare class NgtDatatableComponent implements OnInit, OnDestroy {
     columnCount: any[];
     hasSelectedAllElements: boolean;
     selectedElements: Array<NgtCheckedElement>;
+    readonly loadingSignal: WritableSignal<boolean>;
     filterModalStyle: NgtStylizableService;
     private searching;
     private searchTimeout;
     private subscriptions;
     private currentState;
     constructor(injector: Injector, ngtHttpService: NgtHttpService, changeDetector: ChangeDetectorRef, ngtTranslateService: NgtTranslateService);
+    get loading(): boolean;
+    set loading(value: boolean);
     ngOnInit(): void;
     ngOnDestroy(): void;
     setSearchModalTemplate(template: TemplateRef<any>): void;

package/fesm2022/ng-tailwind.mjs

@@ -2310,99 +2310,6 @@ function removeInputMask(element) {
     Inputmask.remove(element);
 }
 
-/**
- * Validates a Brazilian CNPJ (Cadastro Nacional da Pessoa Jurídica) number.
- * CNPJ is a unique identifier for companies in Brazil.
- *
- * @param value - The CNPJ value to validate (can include formatting characters)
- * @returns true if the CNPJ is valid, false otherwise
- *
- * @example
- * validateCNPJ('11.222.333/0001-81'); // returns true or false
- * validateCNPJ('11222333000181');     // returns true or false
- */
-function validateCNPJ(value) {
-    if (!value) {
-        return false;
-    }
-    // Validation weights for CNPJ verification digits
-    const weights = [6, 5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2];
-    // Remove non-digit characters
-    const cleanedValue = value.replace(/[^\d]/g, '');
-    // Check if CNPJ has exactly 14 digits
-    if (cleanedValue.length !== 14) {
-        return false;
-    }
-    // Check if all digits are the same (invalid CNPJ)
-    if (/^(\d)\1{13}$/.test(cleanedValue)) {
-        return false;
-    }
-    // Validate first verification digit
-    let sum = 0;
-    for (let i = 0; i < 12; i++) {
-        sum += parseInt(cleanedValue[i]) * weights[i + 1];
-    }
-    const firstDigit = sum % 11 < 2 ? 0 : 11 - (sum % 11);
-    if (parseInt(cleanedValue[12]) !== firstDigit) {
-        return false;
-    }
-    // Validate second verification digit
-    sum = 0;
-    for (let i = 0; i < 13; i++) {
-        sum += parseInt(cleanedValue[i]) * weights[i];
-    }
-    const secondDigit = sum % 11 < 2 ? 0 : 11 - (sum % 11);
-    if (parseInt(cleanedValue[13]) !== secondDigit) {
-        return false;
-    }
-    return true;
-}
-/**
- * Validates a Brazilian CPF (Cadastro de Pessoas Físicas) number.
- * CPF is a unique identifier for individuals in Brazil.
- *
- * @param value - The CPF value to validate (can include formatting characters)
- * @returns true if the CPF is valid, false otherwise
- *
- * @example
- * validateCPF('123.456.789-09'); // returns true or false
- * validateCPF('12345678909');    // returns true or false
- */
-function validateCPF(value) {
-    if (!value) {
-        return false;
-    }
-    // Remove non-digit characters
-    const cleanedValue = value.replace(/[^\d]/g, '');
-    // Check if CPF has exactly 11 digits
-    if (cleanedValue.length !== 11) {
-        return false;
-    }
-    // Check if all digits are the same (invalid CPF)
-    if (/^(\d)\1{10}$/.test(cleanedValue)) {
-        return false;
-    }
-    // Validate first verification digit
-    let sum = 0;
-    for (let i = 0; i < 9; i++) {
-        sum += parseInt(cleanedValue[i]) * (10 - i);
-    }
-    const firstDigit = sum % 11 < 2 ? 0 : 11 - (sum % 11);
-    if (parseInt(cleanedValue[9]) !== firstDigit) {
-        return false;
-    }
-    // Validate second verification digit
-    sum = 0;
-    for (let i = 0; i < 10; i++) {
-        sum += parseInt(cleanedValue[i]) * (11 - i);
-    }
-    const secondDigit = sum % 11 < 2 ? 0 : 11 - (sum % 11);
-    if (parseInt(cleanedValue[10]) !== secondDigit) {
-        return false;
-    }
-    return true;
-}
-
 class NgtInputComponent extends NgtControlValueAccessor {
     constructor(renderer, changeDetector, ngtStylizableDirective, formContainer, ngtFormComponent, ngtValidationService, ngtResourceService, ngtForm, ngtSection, ngtModal, injector, ngtTranslateService) {
         super();
@@ -2691,15 +2598,25 @@ class NgtInputComponent extends NgtControlValueAccessor {
             removeInputMask(this.element.nativeElement);
             return this.clearInput();
         }
+        const cnpjMaskPattern = 'XX.XXX.XXX/XXXX-99';
+        const onBeforeCnpjPaste = (pastedValue) => pastedValue.toUpperCase().replace(/[^A-Z0-9]/g, '');
+        const cnpjMaskParameters = {
+            mask: [cnpjMaskPattern],
+            definitions: {
+                X: {
+                    validator: '[0-9A-Za-z]',
+                    casing: 'upper'
+                }
+            },
+            showMaskOnHover: false,
+            onBeforePaste: onBeforeCnpjPaste
+        };
         let masks = {
             [InputMaskEnum.CPF]: {
                 mask: ['999.999.999-99'],
                 showMaskOnHover: false
             },
-            [InputMaskEnum.CNPJ]: {
-                mask: ['99.999.999/9999-99'],
-                showMaskOnHover: false
-            },
+            [InputMaskEnum.CNPJ]: cnpjMaskParameters,
             [InputMaskEnum.CUIT]: {
                 mask: ['99-99999999-9'],
                 clearMaskOnLostFocus: false
@@ -2709,14 +2626,16 @@ class NgtInputComponent extends NgtControlValueAccessor {
                 clearMaskOnLostFocus: false
             },
             [InputMaskEnum.CPF_CNPJ_RUT]: {
-                mask: ['999.999.999-99', '999999999999', '99.999.999/9999-99'],
-                keepStatic: true,
-                showMaskOnHover: false
+                mask: ['999.999.999-99', '999999999999', cnpjMaskPattern],
+                definitions: cnpjMaskParameters.definitions,
+                showMaskOnHover: false,
+                onBeforePaste: onBeforeCnpjPaste
             },
             [InputMaskEnum.CPF_CNPJ]: {
-                mask: ['999.999.999-99', '99.999.999/9999-99'],
-                keepStatic: true,
-                showMaskOnHover: false
+                mask: ['999.999.999-99', cnpjMaskPattern],
+                definitions: cnpjMaskParameters.definitions,
+                showMaskOnHover: false,
+                onBeforePaste: onBeforeCnpjPaste
             },
             [InputMaskEnum.DECIMAL]: {
                 digits: this.decimalMaskPrecision,
@@ -2768,6 +2687,39 @@ class NgtInputComponent extends NgtControlValueAccessor {
         else {
             applyInputMask(this.element.nativeElement, masks[this.mask]);
         }
+        if (this.mask == InputMaskEnum.CPF_CNPJ || this.mask == InputMaskEnum.CPF_CNPJ_RUT) {
+            this.setupAlphanumericPasteHandler();
+        }
+    }
+    setupAlphanumericPasteHandler() {
+        const handler = (event) => {
+            const pastedText = event.clipboardData?.getData('text/plain') ?? '';
+            const normalized = pastedText.toUpperCase().replace(/[^A-Z0-9]/g, '');
+            if (normalized.length !== 14 || !/[A-Z]/.test(normalized)) {
+                return;
+            }
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            const formatted = `${normalized.substring(0, 2)}.${normalized.substring(2, 5)}.${normalized.substring(5, 8)}/${normalized.substring(8, 12)}-${normalized.substring(12, 14)}`;
+            const input = this.element.nativeElement;
+            const inputmaskInstance = input.inputmask;
+            const alphaMaskOptions = {
+                mask: ['XX.XXX.XXX/XXXX-99'],
+                definitions: { X: { validator: '[0-9A-Za-z]', casing: 'upper' } },
+                showMaskOnHover: false
+            };
+            if (inputmaskInstance && typeof inputmaskInstance.option === 'function') {
+                inputmaskInstance.option(alphaMaskOptions);
+            }
+            else {
+                removeInputMask(input);
+                Inputmask(alphaMaskOptions).mask(input);
+            }
+            input.value = formatted;
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+            input.dispatchEvent(new Event('change', { bubbles: true }));
+        };
+        this.element.nativeElement.addEventListener('paste', handler, true);
     }
     setupProperties() {
         let props = {
@@ -2844,19 +2796,20 @@ class NgtInputComponent extends NgtControlValueAccessor {
             if (!control.value) {
                 return null;
             }
-            if (control.value && control.value.length <= 11) {
-                if (validateCPF(control.value)) {
+            const normalizedDocument = this.removeMasks(control.value);
+            if (normalizedDocument && normalizedDocument.length <= 11) {
+                if (this.validatorCPF(normalizedDocument)) {
                     return null;
                 }
                 else {
                     return { 'cpf': true };
                 }
             }
-            else if (control.value && control.value.length == 12) {
+            else if (normalizedDocument && normalizedDocument.length == 12) {
                 return null;
             }
             else {
-                if (control.value && validateCNPJ(control.value)) {
+                if (normalizedDocument && this.validatorCNPJ(normalizedDocument)) {
                     return null;
                 }
                 else {
@@ -2975,6 +2928,102 @@ class NgtInputComponent extends NgtControlValueAccessor {
             return Promise.resolve(null);
         };
     }
+    validatorCNPJ(value) {
+        const normalizedValue = this.normalizeDocument(value);
+        if (normalizedValue.length != 14) {
+            return false;
+        }
+        return /[A-Z]/.test(normalizedValue)
+            ? this.validatorAlphaNumericCNPJ(normalizedValue)
+            : this.validatorNumericCNPJ(normalizedValue);
+    }
+    validatorNumericCNPJ(value) {
+        const b = [6, 5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2];
+        if ((value = value.replace(/[^\d]/g, "")).length != 14) {
+            return false;
+        }
+        if (/0{14}/.test(value)) {
+            return false;
+        }
+        let n = 0;
+        for (let i = 0; i < 12; i++) {
+            n += Number(value[i]) * b[i + 1];
+        }
+        if (Number(value[12]) != (((n %= 11) < 2) ? 0 : 11 - n)) {
+            return false;
+        }
+        n = 0;
+        for (let i = 0; i <= 12; i++) {
+            n += Number(value[i]) * b[i];
+        }
+        if (Number(value[13]) != (((n %= 11) < 2) ? 0 : 11 - n)) {
+            return false;
+        }
+        return true;
+    }
+    validatorAlphaNumericCNPJ(value) {
+        if (!/^[A-Z0-9]{12}[0-9]{2}$/.test(value)) {
+            return false;
+        }
+        const firstWeights = [5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2];
+        const firstDigit = this.getCnpjVerificationDigit(value.substring(0, 12), firstWeights);
+        if (firstDigit !== Number(value[12])) {
+            return false;
+        }
+        const secondWeights = [6, 5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2];
+        const secondDigit = this.getCnpjVerificationDigit(`${value.substring(0, 12)}${firstDigit}`, secondWeights);
+        return secondDigit === Number(value[13]);
+    }
+    getCnpjVerificationDigit(value, weights) {
+        const weightedTotal = value
+            .split('')
+            .reduce((total, currentValue, index) => total + (this.getCnpjCharacterValue(currentValue) * weights[index]), 0);
+        const modulo = weightedTotal % 11;
+        return modulo < 2 ? 0 : 11 - modulo;
+    }
+    getCnpjCharacterValue(value) {
+        return /^[0-9]$/.test(value)
+            ? Number(value)
+            : value.charCodeAt(0) - 48;
+    }
+    validatorCPF(value) {
+        let numeros, digitos, soma, i, resultado, digitos_iguais;
+        digitos_iguais = 1;
+        if (value.length < 11) {
+            return false;
+        }
+        for (i = 0; i < value.length - 1; i++) {
+            if (value.charAt(i) != value.charAt(i + 1)) {
+                digitos_iguais = 0;
+                break;
+            }
+        }
+        if (!digitos_iguais) {
+            numeros = value.substring(0, 9);
+            digitos = value.substring(9);
+            soma = 0;
+            for (i = 10; i > 1; i--) {
+                soma += numeros.charAt(10 - i) * i;
+            }
+            resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
+            if (resultado != digitos.charAt(0)) {
+                return false;
+            }
+            numeros = value.substring(0, 10);
+            soma = 0;
+            for (i = 11; i > 1; i--) {
+                soma += numeros.charAt(11 - i) * i;
+            }
+            resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
+            if (resultado != digitos.charAt(1)) {
+                return false;
+            }
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
     getNativeValue() {
         return this.element.nativeElement.value;
     }
@@ -2988,8 +3037,10 @@ class NgtInputComponent extends NgtControlValueAccessor {
                 .replace(',', '.');
         }
         else if (this.mask == "cnpj-cpf" || this.mask == "cpf" || this.mask == "cnpj" || this.mask == "cnpj-cpf-rut" || this.mask == "cuit") {
-            value = (value + "")
-                .replace(/[^\d]/g, '');
+            value = this.normalizeDocument(value);
+            if (this.mask == "cpf" || this.mask == "cuit") {
+                value = value.replace(/[^\d]/g, '');
+            }
         }
         else if (this.mask == InputMaskEnum.CELLPHONE
             || this.mask == InputMaskEnum.INTERNATIONAL_PHONE) {
@@ -3003,6 +3054,12 @@ class NgtInputComponent extends NgtControlValueAccessor {
         }
         return value;
     }
+    normalizeDocument(value) {
+        return (value || '')
+            .toString()
+            .toUpperCase()
+            .replace(/[^A-Z0-9]/g, '');
+    }
     hasEmailServiceValidation() {
         return typeof this.ngtValidationService?.emailValidation === 'function';
     }
@@ -4260,12 +4317,12 @@ class NgtDatatableComponent {
         this.onOpenSearchModal = new EventEmitter();
         this.onSearch = new EventEmitter();
         this.data = [];
-        this.loading = false;
         this.cleaningFilter = false;
         this.componentReady = false;
         this.filtersTranslated = [];
         this.columnCount = [];
         this.selectedElements = [];
+        this.loadingSignal = signal(false);
         this.filterModalStyle = new NgtStylizableService();
         this.subscriptions = [];
         this.currentState = {
@@ -4288,6 +4345,12 @@ class NgtDatatableComponent {
             color: {}
         });
     }
+    get loading() {
+        return this.loadingSignal();
+    }
+    set loading(value) {
+        this.loadingSignal.set(value);
+    }
     ngOnInit() {
         if (this.table && this.table.nativeElement && this.table.nativeElement.rows
             && this.table.nativeElement.rows[0] && this.table.nativeElement.rows[0].cells) {
@@ -4613,11 +4676,11 @@ class NgtDatatableComponent {
         this.subscriptions = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtDatatableComponent, deps: [{ token: i0.Injector }, { token: NgtHttpService }, { token: i0.ChangeDetectorRef }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgtDatatableComponent, isStandalone: false, selector: "ngt-datatable", inputs: { remoteResource: "remoteResource", type: "type", filterTagBgColor: "filterTagBgColor", filterTagMargin: "filterTagMargin", paginationMargin: "paginationMargin", inputSearch: "inputSearch", searchDelay: "searchDelay", searchTermMinLength: "searchTermMinLength", searchTermOnEnter: "searchTermOnEnter", defaultFilters: "defaultFilters", filtersDescription: "filtersDescription", canSelectAllRegisters: "canSelectAllRegisters", headBgColor: "headBgColor" }, outputs: { onDataChange: "onDataChange", onClearFilter: "onClearFilter", onClearSelectedElements: "onClearSelectedElements", onSelectedElementsChange: "onSelectedElementsChange", onToogleAllCheckboxes: "onToogleAllCheckboxes", onToogleCheckbox: "onToogleCheckbox", onSelectAllRegisters: "onSelectAllRegisters", onOpenSearchModal: "onOpenSearchModal", onSearch: "onSearch" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "ngtPagination", first: true, predicate: ["ngtPagination"], descendants: true, static: true }, { propertyName: "searchModal", first: true, predicate: ["searchModal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"w-full\">\n    <div class=\"flex flex-wrap w-full\">\n        <ngt-tag *ngIf=\"hasAppliedFilters()\" class=\"w-full sm:w-auto {{ filterTagMargin }}\"\n            [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\" color.bg=\"bg-red-500\" (click)=\"removeFilter()\" ngt-stylizable>\n            Limpar Filtros\n        </ngt-tag>\n\n        <ng-container *ngIf=\"hasAppliedFilters()\">\n            <ng-container *ngFor=\"let filter of filtersTranslated\">\n                <ngt-tag class=\"w-full sm:w-auto {{ filterTagMargin }}\" [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\"\n                    [color.bg]=\"filterTagBgColor\" (click)=\"removeFilter(filter.reference)\" ngt-stylizable\n                    [title]=\"getTitle(filter)\">\n                    {{ filter.translation + ': ' + getTagFilterValue(filter) }}\n                </ngt-tag>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <table style=\"display: table;\" class=\"text-left w-full border-collapse table-responsive\" #table>\n        <ng-content></ng-content>\n    </table>\n\n    <p *ngIf=\"emptyStateVisible\" class=\"mt-8 mx-auto self-center text-center text-xl\">\n        {{ ngtTranslateService.ngtDatatableNoDataFound }}\n    </p>\n\n    <div *ngIf=\"loading\">\n        <div *ngFor=\"let i of [1, 2, 3, 4]\" class=\"flex w-full mt-3\">\n            <ng-container *ngIf=\"columnCount.length >= 2\">\n                <ng-container *ngFor=\"let j of columnCount; let last = last\">\n                    <ng-container *ngIf=\"last\">\n                        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!last\">\n                        <ngt-shining class=\"h-10 w-full mr-10\"></ngt-shining>\n                    </ng-container>\n                </ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"columnCount.length < 2\">\n                <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n                <ngt-shining class=\"h-10 w-full mr-10 ml-10\"></ngt-shining>\n                <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n            </ng-container>\n        </div>\n    </div>\n</div>\n\n<div class=\"clearfix {{ paginationMargin }}\" [hidden]='!data || data.length == 0'>\n    <ngt-pagination [pagesInterval]='4' (onPageChange)='apply($event, false)' (onPerPageChange)='apply(1, false)'\n        #ngtPagination>\n    </ngt-pagination>\n</div>\n\n<ngt-modal [customLayout]=\"true\" [isDisabled]=\"false\" [ngtStyle]=\"filterModalStyle\" #searchModal>\n    <ng-container *ngTemplateOutlet=\"searchModalTemplate\"></ng-container>\n</ngt-modal>", styles: ["@media (max-width: 767px){.table-responsive{display:block;position:relative;width:100%}.table-responsive thead,.table-responsive tbody,.table-responsive th,.table-responsive td,.table-responsive tr{display:block}.table-responsive td,.table-responsive th{height:50px}.table-responsive thead{float:left;margin-bottom:15px}.table-responsive tbody{width:auto;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}.table-responsive tbody tr{display:inline-block;min-width:100%}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtPaginationComponent, selector: "ngt-pagination", inputs: ["pagesInterval"], outputs: ["onPageChange", "onPerPageChange"] }, { kind: "component", type: NgtModalComponent, selector: "ngt-modal", inputs: ["customLayout", "disableDefaultCloses", "ngtStyle", "isDisabled"], outputs: ["onCloseModal", "onOpenModal"] }, { kind: "component", type: NgtTagComponent, selector: "ngt-tag", inputs: ["icon"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "gap", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgtDatatableComponent, isStandalone: false, selector: "ngt-datatable", inputs: { remoteResource: "remoteResource", type: "type", filterTagBgColor: "filterTagBgColor", filterTagMargin: "filterTagMargin", paginationMargin: "paginationMargin", inputSearch: "inputSearch", searchDelay: "searchDelay", searchTermMinLength: "searchTermMinLength", searchTermOnEnter: "searchTermOnEnter", defaultFilters: "defaultFilters", filtersDescription: "filtersDescription", canSelectAllRegisters: "canSelectAllRegisters", headBgColor: "headBgColor" }, outputs: { onDataChange: "onDataChange", onClearFilter: "onClearFilter", onClearSelectedElements: "onClearSelectedElements", onSelectedElementsChange: "onSelectedElementsChange", onToogleAllCheckboxes: "onToogleAllCheckboxes", onToogleCheckbox: "onToogleCheckbox", onSelectAllRegisters: "onSelectAllRegisters", onOpenSearchModal: "onOpenSearchModal", onSearch: "onSearch" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "ngtPagination", first: true, predicate: ["ngtPagination"], descendants: true, static: true }, { propertyName: "searchModal", first: true, predicate: ["searchModal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"w-full\">\n    <div class=\"flex flex-wrap w-full\">\n        <ngt-tag *ngIf=\"hasAppliedFilters()\" class=\"w-full sm:w-auto {{ filterTagMargin }}\"\n            [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\" color.bg=\"bg-red-500\" (click)=\"removeFilter()\" ngt-stylizable>\n            Limpar Filtros\n        </ngt-tag>\n\n        <ng-container *ngIf=\"hasAppliedFilters()\">\n            <ng-container *ngFor=\"let filter of filtersTranslated\">\n                <ngt-tag class=\"w-full sm:w-auto {{ filterTagMargin }}\" [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\"\n                    [color.bg]=\"filterTagBgColor\" (click)=\"removeFilter(filter.reference)\" ngt-stylizable\n                    [title]=\"getTitle(filter)\">\n                    {{ filter.translation + ': ' + getTagFilterValue(filter) }}\n                </ngt-tag>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <table style=\"display: table;\" class=\"text-left w-full border-collapse table-responsive\" #table>\n        <ng-content></ng-content>\n    </table>\n\n    <p *ngIf=\"emptyStateVisible\" class=\"mt-8 mx-auto self-center text-center text-xl\">\n        {{ ngtTranslateService.ngtDatatableNoDataFound }}\n    </p>\n\n    <div *ngIf=\"loadingSignal()\">\n        <div *ngFor=\"let i of [1, 2, 3, 4]\" class=\"flex w-full mt-3\">\n            <ng-container *ngIf=\"columnCount.length >= 2\">\n                <ng-container *ngFor=\"let j of columnCount; let last = last\">\n                    <ng-container *ngIf=\"last\">\n                        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!last\">\n                        <ngt-shining class=\"h-10 w-full mr-10\"></ngt-shining>\n                    </ng-container>\n                </ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"columnCount.length < 2\">\n                <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n                <ngt-shining class=\"h-10 w-full mr-10 ml-10\"></ngt-shining>\n                <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n            </ng-container>\n        </div>\n    </div>\n</div>\n\n<div class=\"clearfix {{ paginationMargin }}\" [hidden]='!data || data.length == 0'>\n    <ngt-pagination [pagesInterval]='4' (onPageChange)='apply($event, false)' (onPerPageChange)='apply(1, false)'\n        #ngtPagination>\n    </ngt-pagination>\n</div>\n\n<ngt-modal [customLayout]=\"true\" [isDisabled]=\"false\" [ngtStyle]=\"filterModalStyle\" #searchModal>\n    <ng-container *ngTemplateOutlet=\"searchModalTemplate\"></ng-container>\n</ngt-modal>", styles: ["@media (max-width: 767px){.table-responsive{display:block;position:relative;width:100%}.table-responsive thead,.table-responsive tbody,.table-responsive th,.table-responsive td,.table-responsive tr{display:block}.table-responsive td,.table-responsive th{height:50px}.table-responsive thead{float:left;margin-bottom:15px}.table-responsive tbody{width:auto;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}.table-responsive tbody tr{display:inline-block;min-width:100%}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtPaginationComponent, selector: "ngt-pagination", inputs: ["pagesInterval"], outputs: ["onPageChange", "onPerPageChange"] }, { kind: "component", type: NgtModalComponent, selector: "ngt-modal", inputs: ["customLayout", "disableDefaultCloses", "ngtStyle", "isDisabled"], outputs: ["onCloseModal", "onOpenModal"] }, { kind: "component", type: NgtTagComponent, selector: "ngt-tag", inputs: ["icon"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "gap", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtDatatableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngt-datatable', standalone: false, template: "<div class=\"w-full\">\n    <div class=\"flex flex-wrap w-full\">\n        <ngt-tag *ngIf=\"hasAppliedFilters()\" class=\"w-full sm:w-auto {{ filterTagMargin }}\"\n            [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\" color.bg=\"bg-red-500\" (click)=\"removeFilter()\" ngt-stylizable>\n            Limpar Filtros\n        </ngt-tag>\n\n        <ng-container *ngIf=\"hasAppliedFilters()\">\n            <ng-container *ngFor=\"let filter of filtersTranslated\">\n                <ngt-tag class=\"w-full sm:w-auto {{ filterTagMargin }}\" [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\"\n                    [color.bg]=\"filterTagBgColor\" (click)=\"removeFilter(filter.reference)\" ngt-stylizable\n                    [title]=\"getTitle(filter)\">\n                    {{ filter.translation + ': ' + getTagFilterValue(filter) }}\n                </ngt-tag>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <table style=\"display: table;\" class=\"text-left w-full border-collapse table-responsive\" #table>\n        <ng-content></ng-content>\n    </table>\n\n    <p *ngIf=\"emptyStateVisible\" class=\"mt-8 mx-auto self-center text-center text-xl\">\n        {{ ngtTranslateService.ngtDatatableNoDataFound }}\n    </p>\n\n    <div *ngIf=\"loading\">\n        <div *ngFor=\"let i of [1, 2, 3, 4]\" class=\"flex w-full mt-3\">\n            <ng-container *ngIf=\"columnCount.length >= 2\">\n                <ng-container *ngFor=\"let j of columnCount; let last = last\">\n                    <ng-container *ngIf=\"last\">\n                        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!last\">\n                        <ngt-shining class=\"h-10 w-full mr-10\"></ngt-shining>\n                    </ng-container>\n                </ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"columnCount.length < 2\">\n                <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n                <ngt-shining class=\"h-10 w-full mr-10 ml-10\"></ngt-shining>\n                <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n            </ng-container>\n        </div>\n    </div>\n</div>\n\n<div class=\"clearfix {{ paginationMargin }}\" [hidden]='!data || data.length == 0'>\n    <ngt-pagination [pagesInterval]='4' (onPageChange)='apply($event, false)' (onPerPageChange)='apply(1, false)'\n        #ngtPagination>\n    </ngt-pagination>\n</div>\n\n<ngt-modal [customLayout]=\"true\" [isDisabled]=\"false\" [ngtStyle]=\"filterModalStyle\" #searchModal>\n    <ng-container *ngTemplateOutlet=\"searchModalTemplate\"></ng-container>\n</ngt-modal>", styles: ["@media (max-width: 767px){.table-responsive{display:block;position:relative;width:100%}.table-responsive thead,.table-responsive tbody,.table-responsive th,.table-responsive td,.table-responsive tr{display:block}.table-responsive td,.table-responsive th{height:50px}.table-responsive thead{float:left;margin-bottom:15px}.table-responsive tbody{width:auto;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}.table-responsive tbody tr{display:inline-block;min-width:100%}}\n"] }]
+            args: [{ selector: 'ngt-datatable', standalone: false, template: "<div class=\"w-full\">\n    <div class=\"flex flex-wrap w-full\">\n        <ngt-tag *ngIf=\"hasAppliedFilters()\" class=\"w-full sm:w-auto {{ filterTagMargin }}\"\n            [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\" color.bg=\"bg-red-500\" (click)=\"removeFilter()\" ngt-stylizable>\n            Limpar Filtros\n        </ngt-tag>\n\n        <ng-container *ngIf=\"hasAppliedFilters()\">\n            <ng-container *ngFor=\"let filter of filtersTranslated\">\n                <ngt-tag class=\"w-full sm:w-auto {{ filterTagMargin }}\" [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\"\n                    [color.bg]=\"filterTagBgColor\" (click)=\"removeFilter(filter.reference)\" ngt-stylizable\n                    [title]=\"getTitle(filter)\">\n                    {{ filter.translation + ': ' + getTagFilterValue(filter) }}\n                </ngt-tag>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <table style=\"display: table;\" class=\"text-left w-full border-collapse table-responsive\" #table>\n        <ng-content></ng-content>\n    </table>\n\n    <p *ngIf=\"emptyStateVisible\" class=\"mt-8 mx-auto self-center text-center text-xl\">\n        {{ ngtTranslateService.ngtDatatableNoDataFound }}\n    </p>\n\n    <div *ngIf=\"loadingSignal()\">\n        <div *ngFor=\"let i of [1, 2, 3, 4]\" class=\"flex w-full mt-3\">\n            <ng-container *ngIf=\"columnCount.length >= 2\">\n                <ng-container *ngFor=\"let j of columnCount; let last = last\">\n                    <ng-container *ngIf=\"last\">\n                        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!last\">\n                        <ngt-shining class=\"h-10 w-full mr-10\"></ngt-shining>\n                    </ng-container>\n                </ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"columnCount.length < 2\">\n                <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n                <ngt-shining class=\"h-10 w-full mr-10 ml-10\"></ngt-shining>\n                <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n            </ng-container>\n        </div>\n    </div>\n</div>\n\n<div class=\"clearfix {{ paginationMargin }}\" [hidden]='!data || data.length == 0'>\n    <ngt-pagination [pagesInterval]='4' (onPageChange)='apply($event, false)' (onPerPageChange)='apply(1, false)'\n        #ngtPagination>\n    </ngt-pagination>\n</div>\n\n<ngt-modal [customLayout]=\"true\" [isDisabled]=\"false\" [ngtStyle]=\"filterModalStyle\" #searchModal>\n    <ng-container *ngTemplateOutlet=\"searchModalTemplate\"></ng-container>\n</ngt-modal>", styles: ["@media (max-width: 767px){.table-responsive{display:block;position:relative;width:100%}.table-responsive thead,.table-responsive tbody,.table-responsive th,.table-responsive td,.table-responsive tr{display:block}.table-responsive td,.table-responsive th{height:50px}.table-responsive thead{float:left;margin-bottom:15px}.table-responsive tbody{width:auto;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}.table-responsive tbody tr{display:inline-block;min-width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: NgtHttpService }, { type: i0.ChangeDetectorRef }, { type: NgtTranslateService, decorators: [{
                     type: Optional
                 }] }], propDecorators: { table: [{
@@ -8558,15 +8621,17 @@ class NgtDropzoneComponent extends NgtControlValueAccessor {
     ngOnDestroy() {
         this.destroySubscriptions();
     }
-    imagePreview(index) {
+    imagePreview(uploadedResourcesIndex) {
         const images = this.uploadedResources.filter((resource) => this.isImage(resource));
-        const imagesDiv = document.createElement("div");
+        const imagesDiv = document.createElement('div');
         images.forEach((image) => {
-            let imageElement = document.createElement("img");
+            let imageElement = document.createElement('img');
             imageElement.src = image.file.url;
             imagesDiv.appendChild(imageElement);
         });
-        this.onImageClick(imagesDiv, index);
+        const clickedResource = this.uploadedResources[uploadedResourcesIndex];
+        const imageIndexInGallery = images.indexOf(clickedResource);
+        this.onImageClick(imagesDiv, imageIndexInGallery >= 0 ? imageIndexInGallery : 0);
     }
     onImageClick(element, index) {
         if (!this.viewMode) {
@@ -9102,6 +9167,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{ providedIn: null }]
         }] });
 
+/**
+ * Validates a Brazilian CNPJ (Cadastro Nacional da Pessoa Jurídica) number.
+ * CNPJ is a unique identifier for companies in Brazil.
+ *
+ * @param value - The CNPJ value to validate (can include formatting characters)
+ * @returns true if the CNPJ is valid, false otherwise
+ *
+ * @example
+ * validateCNPJ('11.222.333/0001-81'); // returns true or false
+ * validateCNPJ('11222333000181');     // returns true or false
+ */
+function validateCNPJ(value) {
+    if (!value) {
+        return false;
+    }
+    // Validation weights for CNPJ verification digits
+    const weights = [6, 5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2];
+    // Remove non-digit characters
+    const cleanedValue = value.replace(/[^\d]/g, '');
+    // Check if CNPJ has exactly 14 digits
+    if (cleanedValue.length !== 14) {
+        return false;
+    }
+    // Check if all digits are the same (invalid CNPJ)
+    if (/^(\d)\1{13}$/.test(cleanedValue)) {
+        return false;
+    }
+    // Validate first verification digit
+    let sum = 0;
+    for (let i = 0; i < 12; i++) {
+        sum += parseInt(cleanedValue[i]) * weights[i + 1];
+    }
+    const firstDigit = sum % 11 < 2 ? 0 : 11 - (sum % 11);
+    if (parseInt(cleanedValue[12]) !== firstDigit) {
+        return false;
+    }
+    // Validate second verification digit
+    sum = 0;
+    for (let i = 0; i < 13; i++) {
+        sum += parseInt(cleanedValue[i]) * weights[i];
+    }
+    const secondDigit = sum % 11 < 2 ? 0 : 11 - (sum % 11);
+    if (parseInt(cleanedValue[13]) !== secondDigit) {
+        return false;
+    }
+    return true;
+}
+/**
+ * Validates a Brazilian CPF (Cadastro de Pessoas Físicas) number.
+ * CPF is a unique identifier for individuals in Brazil.
+ *
+ * @param value - The CPF value to validate (can include formatting characters)
+ * @returns true if the CPF is valid, false otherwise
+ *
+ * @example
+ * validateCPF('123.456.789-09'); // returns true or false
+ * validateCPF('12345678909');    // returns true or false
+ */
+function validateCPF(value) {
+    if (!value) {
+        return false;
+    }
+    // Remove non-digit characters
+    const cleanedValue = value.replace(/[^\d]/g, '');
+    // Check if CPF has exactly 11 digits
+    if (cleanedValue.length !== 11) {
+        return false;
+    }
+    // Check if all digits are the same (invalid CPF)
+    if (/^(\d)\1{10}$/.test(cleanedValue)) {
+        return false;
+    }
+    // Validate first verification digit
+    let sum = 0;
+    for (let i = 0; i < 9; i++) {
+        sum += parseInt(cleanedValue[i]) * (10 - i);
+    }
+    const firstDigit = sum % 11 < 2 ? 0 : 11 - (sum % 11);
+    if (parseInt(cleanedValue[9]) !== firstDigit) {
+        return false;
+    }
+    // Validate second verification digit
+    sum = 0;
+    for (let i = 0; i < 10; i++) {
+        sum += parseInt(cleanedValue[i]) * (11 - i);
+    }
+    const secondDigit = sum % 11 < 2 ? 0 : 11 - (sum % 11);
+    if (parseInt(cleanedValue[10]) !== secondDigit) {
+        return false;
+    }
+    return true;
+}
+
 class NgtReactiveFormValidationService {
     getSyncValidators(config) {
         const validators = [];