ng-firebase-table-kxp 1.0.7 → 1.0.9

package/fesm2015/ng-firebase-table-kxp.mjs

@@ -26,6 +26,8 @@ import * as i15 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
+import * as i16 from 'ngx-mask';
+import { NgxMaskDirective, NgxMaskPipe, provideNgxMask } from 'ngx-mask';
 import { __awaiter } from 'tslib';
 import { firstValueFrom, Subject, debounceTime } from 'rxjs';
 import firebase from 'firebase/compat/app';
@@ -311,9 +313,172 @@ class TableService {
         }
         return query;
     }
-    /**
-     * Detecta se a query vai precisar de index composto e deve usar fallback client-side
-     */
+    getIdFilter(params) {
+        var _a, _b, _c;
+        if (!((_a = params.arrange) === null || _a === void 0 ? void 0 : _a.filters))
+            return null;
+        const idFilter = params.arrange.filters.find((f) => {
+            var _a, _b;
+            return f.arrange === 'filter' &&
+                ((_a = f.filter) === null || _a === void 0 ? void 0 : _a.property) === 'id' &&
+                ((_b = f.filter) === null || _b === void 0 ? void 0 : _b.filtering);
+        });
+        return ((_c = (_b = idFilter === null || idFilter === void 0 ? void 0 : idFilter.filter) === null || _b === void 0 ? void 0 : _b.filtering) === null || _c === void 0 ? void 0 : _c.trim()) || null;
+    }
+    getDocumentById(collection, docId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const docRef = this.ngFire.collection(collection).doc(docId);
+                const docSnapshot = yield docRef.get().toPromise();
+                if (docSnapshot && docSnapshot.exists) {
+                    return Object.assign({ id: docSnapshot.id }, docSnapshot.data());
+                }
+                return null;
+            }
+            catch (error) {
+                console.warn('Erro ao buscar documento por ID:', error);
+                return null;
+            }
+        });
+    }
+    searchByIdPartial(params, searchTerm) {
+        var _a, _b, _c, _d;
+        return __awaiter(this, void 0, void 0, function* () {
+            const exactMatch = yield this.getDocumentById(params.collection, searchTerm);
+            if (exactMatch) {
+                if (params.conditions) {
+                    const operators = this.operators;
+                    const passesConditions = params.conditions.every((cond) => {
+                        const operatorFn = operators[cond.operator];
+                        return operatorFn
+                            ? operatorFn(exactMatch[cond.firestoreProperty], cond.dashProperty)
+                            : false;
+                    });
+                    if (!passesConditions) {
+                        return {
+                            items: [],
+                            filterLength: 0,
+                            firstDoc: null,
+                            lastDoc: null,
+                            hasNextPage: false,
+                            hasPreviousPage: false,
+                            currentClientPageIndex: 0,
+                            totalPages: 0,
+                        };
+                    }
+                }
+                if (params.filterFn && !params.filterFn(exactMatch)) {
+                    return {
+                        items: [],
+                        filterLength: 0,
+                        firstDoc: null,
+                        lastDoc: null,
+                        hasNextPage: false,
+                        hasPreviousPage: false,
+                        currentClientPageIndex: 0,
+                        totalPages: 0,
+                    };
+                }
+                return {
+                    items: [exactMatch],
+                    filterLength: 1,
+                    firstDoc: null,
+                    lastDoc: null,
+                    hasNextPage: false,
+                    hasPreviousPage: false,
+                    currentClientPageIndex: 0,
+                    totalPages: 1,
+                };
+            }
+            const searchTermLower = searchTerm.toLowerCase();
+            const paramsWithoutIdFilter = Object.assign(Object.assign({}, params), { arrange: Object.assign(Object.assign({}, params.arrange), { filters: params.arrange.filters.filter((f) => { var _a; return !(f.arrange === 'filter' && ((_a = f.filter) === null || _a === void 0 ? void 0 : _a.property) === 'id'); }) }) });
+            let query = this.ngFire.collection(params.collection).ref;
+            // Aplicar conditions
+            if (params.conditions) {
+                params.conditions.forEach((cond) => {
+                    query = query.where(cond.firestoreProperty, cond.operator, cond.dashProperty);
+                });
+            }
+            // Aplicar sortBy
+            if (((_b = (_a = params.arrange) === null || _a === void 0 ? void 0 : _a.sortBy) === null || _b === void 0 ? void 0 : _b.field) && ((_d = (_c = params.arrange) === null || _c === void 0 ? void 0 : _c.sortBy) === null || _d === void 0 ? void 0 : _d.order)) {
+                query = query.orderBy(params.arrange.sortBy.field, params.arrange.sortBy.order);
+            }
+            const snapshot = yield query.get();
+            let items = snapshot.docs
+                .map((doc) => (Object.assign({ id: doc.id }, doc.data())))
+                .filter((item) => item.id.toLowerCase().includes(searchTermLower));
+            // Separar equals filters e outros filtros
+            const equalsFilters = paramsWithoutIdFilter.arrange.filters.filter((f) => f.arrange === 'equals' && f.filter);
+            const otherFilters = paramsWithoutIdFilter.arrange.filters.filter((f) => {
+                var _a;
+                return f.arrange !== 'equals' &&
+                    (f.arrange !== 'filter' || ((_a = f.filter) === null || _a === void 0 ? void 0 : _a.property) !== 'id');
+            });
+            // Aplicar equals filters com lógica OR dentro de cada propriedade
+            if (equalsFilters.length > 0) {
+                // Agrupar por propriedade para aplicar OR
+                const groupedByProperty = equalsFilters.reduce((acc, f) => {
+                    const prop = f.filter.property;
+                    if (!acc[prop]) {
+                        acc[prop] = [];
+                    }
+                    acc[prop].push(f.filter.filtering);
+                    return acc;
+                }, {});
+                // Filtrar: item deve ter pelo menos um valor de CADA propriedade
+                items = items.filter((item) => {
+                    return Object.entries(groupedByProperty).every(([prop, values]) => {
+                        return values.includes(item[prop]);
+                    });
+                });
+            }
+            // Aplicar outros filtros
+            otherFilters.forEach((filterItem) => {
+                var _a, _b;
+                if (filterItem.arrange === 'filter' &&
+                    ((_a = filterItem.filter) === null || _a === void 0 ? void 0 : _a.filtering) &&
+                    ((_b = filterItem.filter) === null || _b === void 0 ? void 0 : _b.property)) {
+                    const filterValue = String(filterItem.filter.filtering)
+                        .trim()
+                        .toLowerCase();
+                    items = items.filter((item) => {
+                        const itemValue = String(item[filterItem.filter.property]).toLowerCase();
+                        return itemValue.includes(filterValue);
+                    });
+                }
+            });
+            // Aplicar filterFn se existir
+            if (params.filterFn) {
+                items = items.filter(params.filterFn);
+            }
+            // Paginação
+            const pageSize = params.batchSize;
+            let currentClientPageIndex = 0;
+            if (params.navigation === 'reload') {
+                currentClientPageIndex = 0;
+            }
+            else {
+                // Usar o índice passado pelo componente sem incrementar/decrementar
+                currentClientPageIndex = params.clientPageIndex || 0;
+            }
+            const startIndex = currentClientPageIndex * pageSize;
+            const endIndex = startIndex + pageSize;
+            const paginatedItems = items.slice(startIndex, endIndex);
+            const totalPages = Math.ceil(items.length / pageSize);
+            const hasNextPage = currentClientPageIndex < totalPages - 1;
+            const hasPreviousPage = currentClientPageIndex > 0;
+            return {
+                items: paginatedItems,
+                filterLength: items.length,
+                firstDoc: null,
+                lastDoc: null,
+                hasNextPage,
+                hasPreviousPage,
+                currentClientPageIndex,
+                totalPages,
+            };
+        });
+    }
     shouldUseClientSideFallback(params) {
         var _a, _b, _c;
         const hasConditions = params.conditions && params.conditions.length > 0;
@@ -322,6 +487,15 @@ class TableService {
         if (params.filterFn) {
             return false;
         }
+        if (hasArrangeFilters) {
+            const equalsFilters = params.arrange.filters.filter((f) => f.arrange === 'equals' && f.filter);
+            if (equalsFilters.length > 0) {
+                const propertiesSet = new Set(equalsFilters.map((f) => f.filter.property));
+                if (propertiesSet.size > 1) {
+                    return true;
+                }
+            }
+        }
         if (hasConditions && hasArrangeFilters && hasSortBy) {
             return true;
         }
@@ -329,12 +503,25 @@ class TableService {
             return true;
         }
         if (hasArrangeFilters && params.arrange.filters.length > 1 && hasSortBy) {
+            const equalsFilters = params.arrange.filters.filter((f) => f.arrange === 'equals' && f.filter);
+            if (equalsFilters.length > 0) {
+                const propertiesSet = new Set(equalsFilters.map((f) => f.filter.property));
+                if (propertiesSet.size === 1 &&
+                    equalsFilters.length === params.arrange.filters.length) {
+                    return false;
+                }
+            }
             return true;
         }
         return false;
     }
     getPaginated(params) {
         return __awaiter(this, void 0, void 0, function* () {
+            const idFilterValue = this.getIdFilter(params);
+            if (idFilterValue) {
+                const result = yield this.searchByIdPartial(params, idFilterValue);
+                return result;
+            }
             // Detectar preventivamente se deve usar fallback
             if (this.shouldUseClientSideFallback(params)) {
                 yield this.trackMissingIndexPreventive(params.collection, params.arrange, params.conditions);
@@ -404,13 +591,27 @@ class TableService {
             // Se não há condições disponíveis, tenta aplicar filtros do arrange
             let appliedFirestoreFilter = null;
             if (!hasAppliedWhereClause && ((_a = params.arrange) === null || _a === void 0 ? void 0 : _a.filters)) {
-                const equalsFilter = params.arrange.filters.find((f) => { var _a; return f.arrange === 'equals' && ((_a = f.filter) === null || _a === void 0 ? void 0 : _a.filtering); });
-                if (equalsFilter && equalsFilter.filter) {
-                    query = query.where(equalsFilter.filter.property, '==', equalsFilter.filter.filtering);
+                // Agrupar equals filters por propriedade
+                const equalsFilters = params.arrange.filters.filter((f) => f.arrange === 'equals' && f.filter);
+                const equalsGroupedByProperty = equalsFilters.reduce((acc, current) => {
+                    const prop = current.filter.property;
+                    if (!acc[prop]) {
+                        acc[prop] = [];
+                    }
+                    acc[prop].push(current.filter.filtering);
+                    return acc;
+                }, {});
+                // Se há apenas UMA propriedade com múltiplos valores, aplicar no Firestore com 'in'
+                const properties = Object.keys(equalsGroupedByProperty);
+                if (properties.length === 1 && equalsFilters.length > 0) {
+                    const prop = properties[0];
+                    const values = equalsGroupedByProperty[prop];
+                    query = query.where(prop, 'in', values);
                     hasAppliedWhereClause = true;
-                    appliedFirestoreFilter = equalsFilter;
+                    // Marcar TODOS os equals filters dessa propriedade como aplicados
+                    appliedFirestoreFilter = 'all-equals';
                 }
-                else {
+                else if (properties.length === 0) {
                     const otherFilter = params.arrange.filters.find((f) => {
                         var _a, _b, _c, _d;
                         return (f.arrange === 'filter' &&
@@ -481,10 +682,23 @@ class TableService {
             }
             const equalsFilters = filters.filter((f) => f.arrange === 'equals');
             const otherFilters = filters.filter((f) => f.arrange !== 'equals');
-            const remainingEqualsFilters = equalsFilters.filter((f) => f !== appliedFirestoreFilter);
-            if (remainingEqualsFilters.length > 0) {
+            // Aplicar equals filters no client-side apenas se não foram aplicados no Firestore
+            if (appliedFirestoreFilter !== 'all-equals' && equalsFilters.length > 0) {
+                // Agrupar por propriedade para aplicar OR dentro de cada propriedade
+                const groupedByProperty = equalsFilters.reduce((acc, f) => {
+                    const prop = f.filter.property;
+                    if (!acc[prop]) {
+                        acc[prop] = [];
+                    }
+                    acc[prop].push(f.filter.filtering);
+                    return acc;
+                }, {});
+                // Filtrar: item deve ter pelo menos um valor de CADA propriedade
+                // (AND entre propriedades, OR dentro de cada propriedade)
                 items = items.filter((item) => {
-                    return remainingEqualsFilters.every((f) => item[f.filter.property] === f.filter.filtering);
+                    return Object.entries(groupedByProperty).every(([prop, values]) => {
+                        return values.includes(item[prop]);
+                    });
                 });
             }
             otherFilters.forEach((filterItem) => {
@@ -565,11 +779,8 @@ class TableService {
             if (params.navigation === 'reload') {
                 currentClientPageIndex = 0;
             }
-            else if (params.navigation === 'forward') {
-                currentClientPageIndex = (params.clientPageIndex || 0) + 1;
-            }
-            else if (params.navigation === 'backward') {
-                currentClientPageIndex = Math.max(0, (params.clientPageIndex || 0) - 1);
+            else {
+                currentClientPageIndex = params.clientPageIndex || 0;
             }
             const pageSize = params.batchSize;
             const startIndex = currentClientPageIndex * pageSize;
@@ -1067,28 +1278,26 @@ class TableComponent {
             if (this.data.actionButton && !this.data.actionButton.condition) {
                 this.data.actionButton.condition = (_row) => true;
             }
-            if (this.data.pagination) {
-                this.data.displayedColumns.forEach((col) => {
-                    if (col.isFilterable) {
-                        if (this.hasFilterableColumn === false)
-                            this.hasFilterableColumn = true;
-                        this.dropdownItems.push(Object.assign(Object.assign({}, col), { arrange: 'filter', title: col.title }));
-                    }
-                    if (col.isSortable) {
-                        if (this.hasSortableColumn === false)
-                            this.hasSortableColumn = true;
-                        this.sortableDropdownItems.push(Object.assign(Object.assign({}, col), { arrange: 'ascending', title: col.title + ': crescente' }));
-                        this.sortableDropdownItems.push(Object.assign(Object.assign({}, col), { arrange: 'descending', title: col.title + ': decrescente' }));
-                    }
-                    if (col.isFilterableByDate) {
-                        this.dropdownItems.push(Object.assign(Object.assign({}, col), { arrange: 'filterByDate', title: col.title + ': filtro por data' }));
-                    }
-                });
-                if (this.data.filterableOptions &&
-                    Array.isArray(this.data.filterableOptions) &&
-                    this.data.filterableOptions.length > 0) {
-                    this.data.filterableOptions.forEach((option) => this.dropdownItems.push(Object.assign(Object.assign({}, option), { arrange: 'equals' })));
+            this.data.displayedColumns.forEach((col) => {
+                if (col.isFilterable) {
+                    if (this.hasFilterableColumn === false)
+                        this.hasFilterableColumn = true;
+                    this.dropdownItems.push(Object.assign(Object.assign({}, col), { arrange: 'filter', title: col.title }));
+                }
+                if (col.isSortable) {
+                    if (this.hasSortableColumn === false)
+                        this.hasSortableColumn = true;
+                    this.sortableDropdownItems.push(Object.assign(Object.assign({}, col), { arrange: 'ascending', title: col.title + ': crescente' }));
+                    this.sortableDropdownItems.push(Object.assign(Object.assign({}, col), { arrange: 'descending', title: col.title + ': decrescente' }));
+                }
+                if (col.isFilterableByDate) {
+                    this.dropdownItems.push(Object.assign(Object.assign({}, col), { arrange: 'filterByDate', title: col.title + ': filtro por data' }));
                 }
+            });
+            if (this.data.filterableOptions &&
+                Array.isArray(this.data.filterableOptions) &&
+                this.data.filterableOptions.length > 0) {
+                this.data.filterableOptions.forEach((option) => this.dropdownItems.push(Object.assign(Object.assign({}, option), { arrange: 'equals' })));
             }
             // Sem paginação
             if (this.data.pagination === false) {
@@ -1185,7 +1394,10 @@ class TableComponent {
             yield this.loadRelations();
             yield this.loadQueryLengths();
             this.totalItems = this.items.length;
-            this.dataSource = new MatTableDataSource(this.items);
+            // Aplicar filtros client-side se existirem
+            let itemsToDisplay = [...this.items];
+            itemsToDisplay = this.applyClientSideFilters(itemsToDisplay);
+            this.dataSource = new MatTableDataSource(itemsToDisplay);
             this.dataSource.paginator = this.paginator;
             this.dataSource.sort = this.sort;
             if (this.data.sortBy) {
@@ -1227,15 +1439,107 @@ class TableComponent {
             this.filterPredicate = this.dataSource.filterPredicate;
         });
     }
+    // Aplicar filtros client-side (filtros por data)
+    applyClientSideFilters(items) {
+        let filteredItems = [...items];
+        // Processar filtros do filtersForm
+        this.filtersForm.controls.forEach((control) => {
+            var _a, _b, _c;
+            const group = control;
+            const selectedFilter = (_a = group.get('selectFilter')) === null || _a === void 0 ? void 0 : _a.value;
+            if (!selectedFilter)
+                return;
+            const arrange = selectedFilter.arrange;
+            if (arrange === 'filterByDate') {
+                const initial = (_b = group.get('initialDate')) === null || _b === void 0 ? void 0 : _b.value;
+                const final = (_c = group.get('finalDate')) === null || _c === void 0 ? void 0 : _c.value;
+                // Só aplicar filtro se ambas as datas estiverem preenchidas
+                if (initial && final && initial.trim() && final.trim()) {
+                    try {
+                        // Validar formato da data (DD/MM/AAAA)
+                        const datePattern = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
+                        if (!datePattern.test(initial) || !datePattern.test(final)) {
+                            return; // Ignorar se formato inválido
+                        }
+                        const [dayI, monthI, yearI] = initial.split('/');
+                        const initialDate = new Date(`${monthI}/${dayI}/${yearI}`);
+                        const [dayF, monthF, yearF] = final.split('/');
+                        const finalDate = new Date(`${monthF}/${dayF}/${yearF}`);
+                        finalDate.setHours(23, 59, 59);
+                        // Validar se as datas são válidas
+                        if (isNaN(initialDate.getTime()) || isNaN(finalDate.getTime())) {
+                            return; // Ignorar se datas inválidas
+                        }
+                        // Usar o campo da coluna ou o sortBy.field como padrão
+                        const dateField = selectedFilter.property || this.sortBy.field;
+                        filteredItems = filteredItems.filter((item) => {
+                            try {
+                                const fieldValue = item[dateField];
+                                if (!fieldValue) {
+                                    return false;
+                                }
+                                let itemDate;
+                                if (typeof fieldValue.toDate === 'function') {
+                                    itemDate = fieldValue.toDate();
+                                }
+                                else if (fieldValue instanceof Date) {
+                                    itemDate = fieldValue;
+                                }
+                                else if (typeof fieldValue === 'string') {
+                                    itemDate = new Date(fieldValue);
+                                    if (isNaN(itemDate.getTime())) {
+                                        return false;
+                                    }
+                                }
+                                else if (typeof fieldValue === 'number') {
+                                    itemDate = new Date(fieldValue);
+                                }
+                                else {
+                                    return false;
+                                }
+                                return itemDate >= initialDate && itemDate <= finalDate;
+                            }
+                            catch (error) {
+                                console.warn('Erro ao processar filtro de data para o item:', item.id, error);
+                                return false;
+                            }
+                        });
+                    }
+                    catch (error) {
+                        console.warn('Erro ao processar datas do filtro:', error);
+                    }
+                }
+                // Se as datas não estiverem preenchidas, não aplicar filtro (retornar todos os itens)
+            }
+        });
+        return filteredItems;
+    }
+    // Handler para mudanças de data no filtro
+    onDateFilterChange() {
+        if (this.data.pagination === false) {
+            // Aplicar filtros (ou remover se campos estiverem vazios)
+            this.applyFiltersToDataSource();
+        }
+    }
+    // Aplicar filtros ao dataSource quando não há paginação
+    applyFiltersToDataSource() {
+        if (!this.dataSource)
+            return;
+        let filteredItems = this.applyClientSideFilters([...this.items]);
+        this.dataSource.data = filteredItems;
+        this.totalItems = filteredItems.length;
+    }
     // Métodos com paginação
     loadItemsPaginated(navigation = 'reload', reset = false) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
             if (reset && ['forward', 'reload'].includes(navigation)) {
                 this.lastDoc = null;
+                this.currentClientPageIndex = 0;
             }
             if (reset && ['backward', 'reload'].includes(navigation)) {
                 this.firstDoc = null;
+                this.currentClientPageIndex = 0;
             }
             const activeFilters = this.filtersForm.controls
                 .flatMap((control) => {
@@ -1538,7 +1842,7 @@ class TableComponent {
     }
     // Filtro de data
     search() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         return __awaiter(this, void 0, void 0, function* () {
             if (this.selectSort.value) {
                 if (this.selectSort.value.arrange === 'ascending') {
@@ -1554,27 +1858,30 @@ class TableComponent {
                     };
                 }
             }
-            yield this.loadItemsPaginated('reload', true);
-            this.currentArrange =
-                this.filtersForm.length > 0
-                    ? (_c = (_b = (_a = this.filtersForm.at(0).get('selectFilter')) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.arrange) !== null && _c !== void 0 ? _c : ''
-                    : '';
-            this.paginator.firstPage();
+            // Sem paginação: aplicar filtros client-side
+            if (this.data.pagination === false) {
+                this.applyFiltersToDataSource();
+                this.currentArrange =
+                    this.filtersForm.length > 0
+                        ? (_c = (_b = (_a = this.filtersForm.at(0).get('selectFilter')) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.arrange) !== null && _c !== void 0 ? _c : ''
+                        : '';
+            }
+            else {
+                // Com paginação: comportamento original
+                yield this.loadItemsPaginated('reload', true);
+                this.currentArrange =
+                    this.filtersForm.length > 0
+                        ? (_f = (_e = (_d = this.filtersForm.at(0).get('selectFilter')) === null || _d === void 0 ? void 0 : _d.value) === null || _e === void 0 ? void 0 : _e.arrange) !== null && _f !== void 0 ? _f : ''
+                        : '';
+                this.paginator.firstPage();
+            }
         });
     }
     resetFilter() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this.data.pagination) {
-                this.dataSource.filter = '';
-                if (this.filterPredicate) {
-                    this.dataSource.filterPredicate = this.filterPredicate;
-                }
-            }
-            else {
-                this.dataSource.filter = '';
-                if (this.filterPredicate) {
-                    this.dataSource.filterPredicate = this.filterPredicate;
-                }
+            this.dataSource.filter = '';
+            if (this.filterPredicate) {
+                this.dataSource.filterPredicate = this.filterPredicate;
             }
             this.filtersForm.clear();
             this.addFilter();
@@ -1583,9 +1890,18 @@ class TableComponent {
                 order: this.data.sortBy ? this.data.sortBy.order : 'desc',
                 field: this.data.sortBy ? this.data.sortBy.field : 'createdAt',
             };
-            yield this.loadItemsPaginated('reload', true);
-            this.currentArrange = '';
-            this.paginator.firstPage();
+            // Sem paginação: recarregar itens originais
+            if (this.data.pagination === false) {
+                this.dataSource.data = [...this.items];
+                this.totalItems = this.items.length;
+                this.currentArrange = '';
+            }
+            else {
+                // Com paginação: comportamento original
+                yield this.loadItemsPaginated('reload', true);
+                this.currentArrange = '';
+                this.paginator.firstPage();
+            }
         });
     }
     // Método público para recarregar a tabela
@@ -1730,10 +2046,10 @@ class TableComponent {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableComponent, deps: [{ token: i1$1.Router }, { token: TableService }, { token: i1.AngularFirestore }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableComponent, selector: "lib-table", inputs: { data: "data", downloadTable: "downloadTable" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div *ngIf=\"data\" class=\"card-body\">\r\n  <div class=\"flex flex-col justify-between gap-6\">\r\n    <!-- UNIFIED CONTROL PANEL: FILTERS, SORT & ACTIONS -->\r\n    <div\r\n      class=\"rounded-xl border border-gray-200 bg-white p-4 shadow-lg\"\r\n      *ngIf=\"\r\n        data.pagination === true &&\r\n        (dropdownItems.length > 0 ||\r\n          sortableDropdownItems.length > 0 ||\r\n          data.actionButton)\r\n      \"\r\n    >\r\n      <!-- PANEL HEADER: Title, Custom Action, and Global Actions -->\r\n      <div\r\n        class=\"mb-4 flex flex-col items-start justify-between gap-4 border-b-2 border-gray-200 pb-4 md:flex-row md:items-center\"\r\n      >\r\n        <!-- Left Side: Title & Main Action Button -->\r\n        <div class=\"flex flex-wrap items-center gap-4\">\r\n          <div class=\"flex items-center gap-2\">\r\n            <i class=\"fa fa-filter text-xl text-blue-500\"></i>\r\n            <span class=\"text-lg font-semibold text-gray-700\"\r\n              >Filtros e A\u00E7\u00F5es</span\r\n            >\r\n          </div>\r\n          <button\r\n            *ngIf=\"data.actionButton && data.actionButton.condition\"\r\n            [ngClass]=\"\r\n              (data.actionButton.colorClass || 'bg-blue-500') +\r\n              ' flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white hover:opacity-70'\r\n            \"\r\n            [routerLink]=\"data.actionButton.routerLink\"\r\n            (click)=\"\r\n              data.actionButton.method ? data.actionButton.method($event) : null\r\n            \"\r\n          >\r\n            <i\r\n              *ngIf=\"data.actionButton.icon\"\r\n              [class]=\"data.actionButton.icon\"\r\n            ></i>\r\n            {{ data.actionButton.label }}\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Right Side: Search, Reset, Export -->\r\n        <div\r\n          class=\"flex flex-wrap gap-3\"\r\n          *ngIf=\"\r\n            this.hasFilterableColumn === true || this.hasSortableColumn === true\r\n          \"\r\n        >\r\n          <button\r\n            (click)=\"search()\"\r\n            type=\"button\"\r\n            class=\"flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700\"\r\n            matTooltip=\"Aplicar filtros\"\r\n          >\r\n            <i class=\"fa fa-search\"></i>\r\n            Pesquisar\r\n          </button>\r\n\r\n          <button\r\n            (click)=\"resetFilter()\"\r\n            class=\"flex items-center gap-2 rounded-lg bg-red-500 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-red-600\"\r\n            matTooltip=\"Limpar filtros\"\r\n          >\r\n            <i class=\"fas fa-redo-alt\"></i>\r\n            Resetar\r\n          </button>\r\n\r\n          <button\r\n            *ngIf=\"data.download !== false && downloadTable\"\r\n            class=\"flex items-center gap-2 rounded-lg bg-orange-500 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-orange-600\"\r\n            matTooltipPosition=\"above\"\r\n            matTooltip=\"Exportar Tabela\"\r\n            [disabled]=\"\r\n              this.dataSource && this.dataSource.filteredData.length <= 0\r\n            \"\r\n            (click)=\"\r\n              $any(arrange) && downloadTable !== undefined\r\n                ? downloadTable($any(arrange), data.conditions || [])\r\n                : null\r\n            \"\r\n          >\r\n            <i class=\"fa fa-download\"></i>\r\n            Exportar\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- FILTERS CONTENT (WITH REFINEMENTS) -->\r\n      <div class=\"mb-4 space-y-3\" *ngIf=\"filtersForm.controls.length > 0\">\r\n        <div\r\n          [formGroup]=\"$any(filterGroup)\"\r\n          *ngFor=\"let filterGroup of filtersForm.controls; let i = index\"\r\n          class=\"flex flex-wrap items-center gap-3 rounded-lg border border-gray-200 p-2\"\r\n        >\r\n          <!-- FILTER TYPE SELECTOR -->\r\n          <div class=\"min-w-[200px] flex-1\" *ngIf=\"dropdownItems.length > 0\">\r\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n              <mat-label>Tipo de filtro</mat-label>\r\n              <mat-select\r\n                placeholder=\"Selecione o tipo...\"\r\n                formControlName=\"selectFilter\"\r\n                (selectionChange)=\"onSelectFilterChange()\"\r\n              >\r\n                <mat-option *ngFor=\"let item of dropdownItems\" [value]=\"item\">\r\n                  <div class=\"flex items-center gap-2\">\r\n                    <i\r\n                      [class]=\"item.icon || 'fa fa-filter'\"\r\n                      class=\"text-sm text-blue-500\"\r\n                    ></i>\r\n                    <span>{{ item.title }}</span>\r\n                  </div>\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <!-- TEXT FILTER -->\r\n          <div\r\n            class=\"min-w-[200px] flex-1\"\r\n            *ngIf=\"\r\n              $any(filterGroup).get('selectFilter')?.value?.arrange === 'filter'\r\n            \"\r\n          >\r\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n              <mat-label class=\"flex items-center gap-2\">\r\n                <i class=\"fa fa-search text-gray-400\"></i>\r\n                <span>{{\r\n                  $any(filterGroup).get(\"selectFilter\")?.value?.title ||\r\n                    \"Filtrar\"\r\n                }}</span>\r\n              </mat-label>\r\n              <input\r\n                (keyup.enter)=\"search()\"\r\n                formControlName=\"typeFilter\"\r\n                matInput\r\n                placeholder=\"Digite para filtrar...\"\r\n                #input\r\n              />\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <!-- DROPDOWN FILTER -->\r\n          <div\r\n            class=\"min-w-[200px] flex-1\"\r\n            *ngIf=\"\r\n              $any(filterGroup).get('selectFilter')?.value &&\r\n              $any(filterGroup)\r\n                .get('selectFilter')\r\n                ?.value.hasOwnProperty('items')\r\n            \"\r\n          >\r\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n              <mat-label>{{\r\n                $any(filterGroup).get(\"selectFilter\")?.value?.title ||\r\n                  \"Selecione\"\r\n              }}</mat-label>\r\n              <mat-select\r\n                placeholder=\"Selecione...\"\r\n                formControlName=\"selectItem\"\r\n                multiple\r\n              >\r\n                <mat-option\r\n                  *ngFor=\"\r\n                    let item of $any(filterGroup).get('selectFilter')?.value\r\n                      .items\r\n                  \"\r\n                  [value]=\"item\"\r\n                >\r\n                  {{ item.label }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <!-- DATE FILTER -->\r\n          <div\r\n            class=\"min-w-[340px] flex-auto\"\r\n            *ngIf=\"\r\n              $any(filterGroup).get('selectFilter')?.value?.arrange ===\r\n              'filterByDate'\r\n            \"\r\n          >\r\n            <div\r\n              class=\"flex flex-col items-stretch gap-3 sm:flex-row sm:items-center\"\r\n            >\r\n              <mat-form-field appearance=\"outline\" class=\"flex-1\">\r\n                <mat-label class=\"flex items-center gap-2\">\r\n                  <i class=\"fa fa-calendar text-gray-400\"></i>\r\n                  <span>Data Inicial</span>\r\n                </mat-label>\r\n                <input\r\n                  matInput\r\n                  (keyup.enter)=\"search()\"\r\n                  formControlName=\"initialDate\"\r\n                  placeholder=\"DD/MM/AAAA\"\r\n                  maxlength=\"10\"\r\n                />\r\n              </mat-form-field>\r\n\r\n              <mat-form-field appearance=\"outline\" class=\"flex-1\">\r\n                <mat-label class=\"flex items-center gap-2\">\r\n                  <i class=\"fa fa-calendar text-gray-400\"></i>\r\n                  <span>Data Final</span>\r\n                </mat-label>\r\n                <input\r\n                  (keyup.enter)=\"search()\"\r\n                  matInput\r\n                  formControlName=\"finalDate\"\r\n                  placeholder=\"DD/MM/AAAA\"\r\n                  maxlength=\"10\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- REMOVE FILTER BUTTON -->\r\n          <div *ngIf=\"filtersForm.length > 1\" class=\"ml-auto flex-shrink-0\">\r\n            <button\r\n              (click)=\"removeFilter(i)\"\r\n              class=\"flex h-10 w-10 items-center justify-center rounded-full transition-colors duration-300 hover:bg-red-100\"\r\n              matTooltip=\"Remover filtro\"\r\n            >\r\n              <i class=\"fa fa-trash text-red-500 hover:text-red-600\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- PANEL FOOTER: Add Filter & Sort -->\r\n      <div\r\n        class=\"-mb-2 flex flex-col items-center justify-between gap-4 border-t border-gray-200 pt-4 sm:flex-row\"\r\n      >\r\n        <!-- Add Filter Button -->\r\n        <div *ngIf=\"dropdownItems.length > 0\">\r\n          <button\r\n            (click)=\"addFilter()\"\r\n            class=\"transform rounded-full border-2 border-blue-300 bg-blue-50 px-6 py-2 text-sm font-medium text-blue-600 transition-all duration-300 hover:-translate-y-0.5 hover:border-blue-400 hover:bg-blue-100 hover:shadow-md\"\r\n            matTooltip=\"Adicionar novo filtro\"\r\n          >\r\n            <i class=\"fa fa-plus mr-2\"></i>\r\n            Adicionar Filtro\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Sort Dropdown -->\r\n        <div\r\n          class=\"w-full sm:w-auto sm:min-w-[250px]\"\r\n          *ngIf=\"sortableDropdownItems.length > 0\"\r\n        >\r\n          <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n            <mat-label>Ordenar por</mat-label>\r\n            <mat-select placeholder=\"Selecione...\" [formControl]=\"selectSort\">\r\n              <mat-option\r\n                *ngFor=\"let item of sortableDropdownItems\"\r\n                [value]=\"item\"\r\n              >\r\n                <div class=\"flex items-center gap-2\">\r\n                  <i class=\"fa fa-sort-alpha-down text-cyan-600\"></i>\r\n                  <span>{{ item.title }}</span>\r\n                </div>\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- SIMPLE SEARCH (for non-paginated tables) -->\r\n    <div\r\n      class=\"rounded-xl border border-gray-200 bg-white p-4 shadow-lg\"\r\n      *ngIf=\"data.pagination === false\"\r\n    >\r\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n        <mat-label class=\"flex items-center gap-2\">\r\n          <i class=\"fa fa-search text-blue-500\"></i>\r\n          Buscar\r\n        </mat-label>\r\n        <input\r\n          matInput\r\n          (keyup.enter)=\"search()\"\r\n          (keyup)=\"applyFilter(filterInput.value)\"\r\n          placeholder=\"Digite para filtrar...\"\r\n          #filterInput\r\n        />\r\n        <mat-icon matSuffix class=\"text-gray-500\">search</mat-icon>\r\n      </mat-form-field>\r\n      <button\r\n        *ngIf=\"data.actionButton\"\r\n        [ngClass]=\"\r\n          (data.actionButton.colorClass || 'bg-blue-500') +\r\n          ' float-right flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white hover:opacity-70'\r\n        \"\r\n        [routerLink]=\"data.actionButton.routerLink\"\r\n        (click)=\"\r\n          data.actionButton.method ? data.actionButton.method($event) : null\r\n        \"\r\n      >\r\n        <i *ngIf=\"data.actionButton.icon\" [class]=\"data.actionButton.icon\"></i>\r\n        {{ data.actionButton.label }}\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"flex flex-col\">\r\n      <div\r\n        class=\"mx-auto flex flex-col\"\r\n        *ngIf=\"data.tabs && data.tabs.tabsData && data.tabs.tabsData.length > 0\"\r\n      >\r\n        <!-- Calcular quantos grupos de 6 tabs existem -->\r\n        <ng-container\r\n          *ngFor=\"\r\n            let groupIndex of getTabGroups(data.tabs.tabsData);\r\n            let i = index\r\n          \"\r\n        >\r\n          <div class=\"mx-auto flex flex-row\">\r\n            <ng-container\r\n              *ngFor=\"\r\n                let tab of getTabGroup(data.tabs.tabsData, groupIndex);\r\n                let j = index\r\n              \"\r\n            >\r\n              <button\r\n                class=\"border-2 border-gray-300 bg-gray-200 px-4 py-2 font-medium transition hover:brightness-95\"\r\n                [ngClass]=\"\r\n                  isTabSelected(getRealTabIndex(i, j))\r\n                    ? 'border-b-0 brightness-110'\r\n                    : ''\r\n                \"\r\n                (click)=\"onTableSelected(i, j)\"\r\n              >\r\n                {{ tab.label }}\r\n                <span\r\n                  *ngIf=\"tab.counter !== undefined\"\r\n                  class=\"ml-2 text-xs font-bold\"\r\n                  [ngClass]=\"tab.counterClass\"\r\n                >\r\n                  {{ tab.counter }}\r\n                </span>\r\n              </button>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"mat-elevation-z8 w-full overflow-x-auto rounded-xl\">\r\n        <table\r\n          mat-table\r\n          [dataSource]=\"dataSource\"\r\n          matSort\r\n          #sort=\"matSort\"\r\n          matSortActive=\"createdAt\"\r\n          matSortDirection=\"desc\"\r\n        >\r\n          <ng-container\r\n            *ngFor=\"let col of data.displayedColumns\"\r\n            matColumnDef=\"{{ col.property }}\"\r\n          >\r\n            <ng-container *matHeaderCellDef>\r\n              <!-- IF THE COLUMN IS NOT SORTABLE, THEN DON'T SHOW THE SORT BUTTONS -->\r\n              <th\r\n                *ngIf=\"!col.isSortable || data.pagination === true\"\r\n                mat-header-cell\r\n                [ngClass]=\"\r\n                  (data?.color?.bg ? ' ' + $any(data.color).bg : '') +\r\n                  (data?.color?.text ? ' ' + $any(data.color).text : '')\r\n                \"\r\n              >\r\n                {{ col.title }}\r\n              </th>\r\n              <!-- IF THE COLUMN IS SORTABLE, THEN SHOW THE SORT BUTTONS -->\r\n              <th\r\n                *ngIf=\"col.isSortable && data.pagination === false\"\r\n                mat-header-cell\r\n                mat-sort-header\r\n                [ngClass]=\"\r\n                  (data?.color?.bg ? ' ' + $any(data.color).bg : '') +\r\n                  (data?.color?.text ? ' ' + $any(data.color).text : '')\r\n                \"\r\n              >\r\n                {{ col.title }}\r\n              </th>\r\n              <td\r\n                mat-cell\r\n                *matCellDef=\"let row\"\r\n                (click)=\"col.method ? col.method(row) : null\"\r\n                (mouseenter)=\"onCellMouseEnter($event, row, col)\"\r\n                (mouseleave)=\"onCellMouseLeave()\"\r\n                (mousemove)=\"onCellMouseMove($event)\"\r\n              >\r\n                <!-- CHECK IF THE COLUMN MUST BE DISPLAYED -->\r\n                <span *ngIf=\"!col.image && !col.iconClass && !col.method\">\r\n                  <ng-container>\r\n                    <span\r\n                      *ngIf=\"\r\n                        col.charLimit &&\r\n                          row[col.property] &&\r\n                          row[col.property].length > col.charLimit;\r\n                        else withinLimit\r\n                      \"\r\n                    >\r\n                      <a\r\n                        *ngIf=\"col.hasLink === true\"\r\n                        [href]=\"row[col.property]\"\r\n                        target=\"_blank\"\r\n                      >\r\n                        {{ getDisplayValue(col, row) }}\r\n                      </a>\r\n                      <a\r\n                        *ngIf=\"col.hasLink && isString(col.hasLink)\"\r\n                        [href]=\"col.hasLink\"\r\n                        target=\"_blank\"\r\n                      >\r\n                        {{ getDisplayValue(col, row) }}\r\n                      </a>\r\n                      <span\r\n                        *ngIf=\"col.hasLink !== true && !isString(col.hasLink)\"\r\n                      >\r\n                        {{ getDisplayValue(col, row) }}\r\n                      </span>\r\n                    </span>\r\n                  </ng-container>\r\n                  <ng-template #withinLimit>\r\n                    <a\r\n                      *ngIf=\"col.hasLink === true\"\r\n                      [href]=\"row[col.property]\"\r\n                      target=\"_blank\"\r\n                    >\r\n                      {{ getDisplayValue(col, row, true) }}\r\n                    </a>\r\n                    <a\r\n                      *ngIf=\"col.hasLink && isString(col.hasLink)\"\r\n                      [href]=\"col.hasLink\"\r\n                      target=\"_blank\"\r\n                    >\r\n                      {{ getDisplayValue(col, row, true) }}\r\n                    </a>\r\n                    <span\r\n                      *ngIf=\"col.hasLink !== true && !isString(col.hasLink)\"\r\n                    >\r\n                      {{ getDisplayValue(col, row, true) }}\r\n                    </span>\r\n                  </ng-template>\r\n                </span>\r\n                <!------------------- IMAGE ------------------>\r\n                <img\r\n                  *ngIf=\"\r\n                    col.image && col.image.path && !col.iconClass && !col.method\r\n                  \"\r\n                  [src]=\"col.image.path + '/' + row[col.property]\"\r\n                  [ngClass]=\"col.image.class\"\r\n                  alt=\"Imagem\"\r\n                />\r\n                <img\r\n                  *ngIf=\"\r\n                    col.image && col.image.url && !col.iconClass && !col.method\r\n                  \"\r\n                  [src]=\"row[col.property]\"\r\n                  [ngClass]=\"col.image.class\"\r\n                  alt=\"Imagem\"\r\n                />\r\n                <ng-container *ngIf=\"col.iconClass\">\r\n                  <button\r\n                    *ngFor=\"let iconClass of col.iconClass\"\r\n                    (click)=\"\r\n                      iconClass.buttonMethod\r\n                        ? iconClass.buttonMethod(row, $event)\r\n                        : $event.stopPropagation()\r\n                    \"\r\n                  >\r\n                    <span\r\n                      [ngClass]=\"iconClass.class\"\r\n                      *ngIf=\"\r\n                        iconClass.condition === undefined ||\r\n                        (iconClass.condition !== undefined &&\r\n                          $any(iconClass.condition)(row))\r\n                      \"\r\n                      >{{ iconClass.text }}</span\r\n                    >\r\n                  </button>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n          <tr mat-header-row *matHeaderRowDef=\"columnProperties\"></tr>\r\n          <tr\r\n            [ngClass]=\"{\r\n              'example-element-row': data.isNotClickable === true,\r\n              'example-element-row cursor-pointer': !data.isNotClickable\r\n            }\"\r\n            mat-row\r\n            *matRowDef=\"let row; columns: columnProperties\"\r\n            (click)=\"goToDetails(row)\"\r\n          ></tr>\r\n\r\n          <!-- ROW SHOWN WHEN THERE IS NO MATCHING DATA. -->\r\n          <tr class=\"mat-row\" *matNoDataRow>\r\n            <td *ngIf=\"!isLoading\" class=\"mat-cell p-4\" colspan=\"4\">\r\n              Nenhum resultado encontrado para a busca\r\n            </td>\r\n          </tr>\r\n        </table>\r\n\r\n        <div class=\"flex justify-center\" *ngIf=\"isLoading\">\r\n          <mat-spinner></mat-spinner>\r\n        </div>\r\n\r\n        <div class=\"paginator-container\">\r\n          <mat-paginator\r\n            #paginator\r\n            [pageSizeOptions]=\"[25, 50, 100]\"\r\n            [pageSize]=\"pageSize\"\r\n            [length]=\"totalItems\"\r\n            showFirstLastButtons\r\n            aria-label=\"Select page of periodic elements\"\r\n            (page)=\"onPageChange($event)\"\r\n            [ngClass]=\"{\r\n              'hide-length':\r\n                ['filter', 'filterByDate', 'equals'].includes(\r\n                  this.currentArrange\r\n                ) || this.data.filterFn,\r\n              'hide-next-button': !hasNextPage && data.pagination === true,\r\n              'hide-last-button':\r\n                (!hasNextPage && data.pagination === true) || this.data.filterFn\r\n            }\"\r\n          >\r\n          </mat-paginator>\r\n          <div\r\n            *ngIf=\"\r\n              !isLoading &&\r\n              dataSource?.data &&\r\n              dataSource.data.length > 0 &&\r\n              data?.filterFn\r\n            \"\r\n            class=\"page-number-display\"\r\n          >\r\n            {{ currentPageNumber }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- TOOLTIP PERSONALIZADO -->\r\n  <div\r\n    *ngIf=\"showTooltip\"\r\n    class=\"fixed z-50 max-w-md break-words rounded-lg bg-gray-800 px-3 py-2 text-sm text-white shadow-lg\"\r\n    [style.left.px]=\"tooltipPosition.x\"\r\n    [style.top.px]=\"tooltipPosition.y\"\r\n    [style.pointer-events]=\"'none'\"\r\n  >\r\n    {{ tooltipContent }}\r\n  </div>\r\n</div>\r\n", styles: ["::ng-deep .hide-length .mat-mdc-paginator-range-label{display:none}::ng-deep .hide-next-button .mat-mdc-tooltip-trigger.mat-mdc-paginator-navigation-next.mdc-icon-button.mat-mdc-icon-button.mat-unthemed.mat-mdc-button-base{visibility:hidden}::ng-deep .hide-next-button .mat-mdc-tooltip-trigger.mat-mdc-paginator-navigation-last.mdc-icon-button.mat-mdc-icon-button.mat-unthemed.mat-mdc-button-base.ng-star-inserted{visibility:hidden}::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field.ng-tns-c162-1.mdc-text-field--filled{width:25dvw}::ng-deep .custom-filter .mat-mdc-text-field-wrapper{width:20dvw;max-width:300px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i8.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i14.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i15.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableComponent, selector: "lib-table", inputs: { data: "data", downloadTable: "downloadTable" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div *ngIf=\"data\" class=\"card-body\">\r\n  <div class=\"flex flex-col justify-between gap-6\">\r\n    <!-- UNIFIED CONTROL PANEL: FILTERS, SORT & ACTIONS -->\r\n    <div\r\n      class=\"rounded-xl border border-gray-200 bg-white p-4 shadow-lg\"\r\n      *ngIf=\"\r\n        data.pagination === true &&\r\n        (dropdownItems.length > 0 ||\r\n          sortableDropdownItems.length > 0 ||\r\n          data.actionButton)\r\n      \"\r\n    >\r\n      <!-- PANEL HEADER: Title, Custom Action, and Global Actions -->\r\n      <div\r\n        class=\"mb-4 flex flex-col items-start justify-between gap-4 border-b-2 border-gray-200 pb-4 md:flex-row md:items-center\"\r\n      >\r\n        <!-- Left Side: Title & Main Action Button -->\r\n        <div class=\"flex flex-wrap items-center gap-4\">\r\n          <div class=\"flex items-center gap-2\">\r\n            <i class=\"fa fa-filter text-xl text-blue-500\"></i>\r\n            <span class=\"text-lg font-semibold text-gray-700\"\r\n              >Filtros e A\u00E7\u00F5es</span\r\n            >\r\n          </div>\r\n          <button\r\n            *ngIf=\"data.actionButton && data.actionButton.condition\"\r\n            [ngClass]=\"\r\n              (data.actionButton.colorClass || 'bg-blue-500') +\r\n              ' flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white hover:opacity-70'\r\n            \"\r\n            [routerLink]=\"data.actionButton.routerLink\"\r\n            (click)=\"\r\n              data.actionButton.method ? data.actionButton.method($event) : null\r\n            \"\r\n          >\r\n            <i\r\n              *ngIf=\"data.actionButton.icon\"\r\n              [class]=\"data.actionButton.icon\"\r\n            ></i>\r\n            {{ data.actionButton.label }}\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Right Side: Search, Reset, Export -->\r\n        <div\r\n          class=\"flex flex-wrap gap-3\"\r\n          *ngIf=\"\r\n            this.hasFilterableColumn === true || this.hasSortableColumn === true\r\n          \"\r\n        >\r\n          <button\r\n            (click)=\"search()\"\r\n            type=\"button\"\r\n            class=\"flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700\"\r\n            matTooltip=\"Aplicar filtros\"\r\n          >\r\n            <i class=\"fa fa-search\"></i>\r\n            Pesquisar\r\n          </button>\r\n\r\n          <button\r\n            (click)=\"resetFilter()\"\r\n            class=\"flex items-center gap-2 rounded-lg bg-red-500 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-red-600\"\r\n            matTooltip=\"Limpar filtros\"\r\n          >\r\n            <i class=\"fas fa-redo-alt\"></i>\r\n            Resetar\r\n          </button>\r\n\r\n          <button\r\n            *ngIf=\"data.download !== false && downloadTable\"\r\n            class=\"flex items-center gap-2 rounded-lg bg-orange-500 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-orange-600\"\r\n            matTooltipPosition=\"above\"\r\n            matTooltip=\"Exportar Tabela\"\r\n            [disabled]=\"\r\n              this.dataSource && this.dataSource.filteredData.length <= 0\r\n            \"\r\n            (click)=\"\r\n              $any(arrange) && downloadTable !== undefined\r\n                ? downloadTable($any(arrange), data.conditions || [])\r\n                : null\r\n            \"\r\n          >\r\n            <i class=\"fa fa-download\"></i>\r\n            Exportar\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- FILTERS CONTENT (WITH REFINEMENTS) -->\r\n      <div class=\"mb-4 space-y-3\" *ngIf=\"filtersForm.controls.length > 0\">\r\n        <div\r\n          [formGroup]=\"$any(filterGroup)\"\r\n          *ngFor=\"let filterGroup of filtersForm.controls; let i = index\"\r\n          class=\"flex flex-wrap items-center gap-3 rounded-lg border border-gray-200 p-2\"\r\n        >\r\n          <!-- FILTER TYPE SELECTOR -->\r\n          <div class=\"min-w-[200px] flex-1\" *ngIf=\"dropdownItems.length > 0\">\r\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n              <mat-label>Tipo de filtro</mat-label>\r\n              <mat-select\r\n                placeholder=\"Selecione o tipo...\"\r\n                formControlName=\"selectFilter\"\r\n                (selectionChange)=\"onSelectFilterChange()\"\r\n              >\r\n                <mat-option *ngFor=\"let item of dropdownItems\" [value]=\"item\">\r\n                  <div class=\"flex items-center gap-2\">\r\n                    <i\r\n                      [class]=\"item.icon || 'fa fa-filter'\"\r\n                      class=\"text-sm text-blue-500\"\r\n                    ></i>\r\n                    <span>{{ item.title }}</span>\r\n                  </div>\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <!-- TEXT FILTER -->\r\n          <div\r\n            class=\"min-w-[200px] flex-1\"\r\n            *ngIf=\"\r\n              $any(filterGroup).get('selectFilter')?.value?.arrange === 'filter'\r\n            \"\r\n          >\r\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n              <mat-label class=\"flex items-center gap-2\">\r\n                <i class=\"fa fa-search text-gray-400\"></i>\r\n                <span>{{\r\n                  $any(filterGroup).get(\"selectFilter\")?.value?.title ||\r\n                    \"Filtrar\"\r\n                }}</span>\r\n              </mat-label>\r\n              <input\r\n                (keyup.enter)=\"search()\"\r\n                formControlName=\"typeFilter\"\r\n                matInput\r\n                placeholder=\"Digite para filtrar...\"\r\n                #input\r\n              />\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <!-- DROPDOWN FILTER -->\r\n          <div\r\n            class=\"min-w-[200px] flex-1\"\r\n            *ngIf=\"\r\n              $any(filterGroup).get('selectFilter')?.value &&\r\n              $any(filterGroup)\r\n                .get('selectFilter')\r\n                ?.value.hasOwnProperty('items')\r\n            \"\r\n          >\r\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n              <mat-label>{{\r\n                $any(filterGroup).get(\"selectFilter\")?.value?.title ||\r\n                  \"Selecione\"\r\n              }}</mat-label>\r\n              <mat-select\r\n                placeholder=\"Selecione...\"\r\n                formControlName=\"selectItem\"\r\n                multiple\r\n              >\r\n                <mat-option\r\n                  *ngFor=\"\r\n                    let item of $any(filterGroup).get('selectFilter')?.value\r\n                      .items\r\n                  \"\r\n                  [value]=\"item\"\r\n                >\r\n                  {{ item.label }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <!-- DATE FILTER -->\r\n          <div\r\n            class=\"min-w-[340px] flex-auto\"\r\n            *ngIf=\"\r\n              $any(filterGroup).get('selectFilter')?.value?.arrange ===\r\n              'filterByDate'\r\n            \"\r\n          >\r\n            <div\r\n              class=\"flex flex-col items-stretch gap-3 sm:flex-row sm:items-center\"\r\n            >\r\n              <mat-form-field appearance=\"outline\" class=\"flex-1\">\r\n                <mat-label class=\"flex items-center gap-2\">\r\n                  <i class=\"fa fa-calendar text-gray-400\"></i>\r\n                  <span>Data Inicial</span>\r\n                </mat-label>\r\n                <input\r\n                  matInput\r\n                  (keyup.enter)=\"search()\"\r\n                  formControlName=\"initialDate\"\r\n                  [dropSpecialCharacters]=\"false\"\r\n                  mask=\"d0/M0/0000\"\r\n                  placeholder=\"DD/MM/AAAA\"\r\n                  maxlength=\"10\"\r\n                />\r\n              </mat-form-field>\r\n\r\n              <mat-form-field appearance=\"outline\" class=\"flex-1\">\r\n                <mat-label class=\"flex items-center gap-2\">\r\n                  <i class=\"fa fa-calendar text-gray-400\"></i>\r\n                  <span>Data Final</span>\r\n                </mat-label>\r\n                <input\r\n                  (keyup.enter)=\"search()\"\r\n                  matInput\r\n                  formControlName=\"finalDate\"\r\n                  [dropSpecialCharacters]=\"false\"\r\n                  mask=\"d0/M0/0000\"\r\n                  placeholder=\"DD/MM/AAAA\"\r\n                  maxlength=\"10\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- REMOVE FILTER BUTTON -->\r\n          <div *ngIf=\"filtersForm.length > 1\" class=\"ml-auto flex-shrink-0\">\r\n            <button\r\n              (click)=\"removeFilter(i)\"\r\n              class=\"flex h-10 w-10 items-center justify-center rounded-full transition-colors duration-300 hover:bg-red-100\"\r\n              matTooltip=\"Remover filtro\"\r\n            >\r\n              <i class=\"fa fa-trash text-red-500 hover:text-red-600\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- PANEL FOOTER: Add Filter & Sort -->\r\n      <div\r\n        class=\"-mb-2 flex flex-col items-center justify-between gap-4 border-t border-gray-200 pt-4 sm:flex-row\"\r\n      >\r\n        <!-- Add Filter Button -->\r\n        <div *ngIf=\"dropdownItems.length > 0\">\r\n          <button\r\n            (click)=\"addFilter()\"\r\n            class=\"transform rounded-full border-2 border-blue-300 bg-blue-50 px-6 py-2 text-sm font-medium text-blue-600 transition-all duration-300 hover:-translate-y-0.5 hover:border-blue-400 hover:bg-blue-100 hover:shadow-md\"\r\n            matTooltip=\"Adicionar novo filtro\"\r\n          >\r\n            <i class=\"fa fa-plus mr-2\"></i>\r\n            Adicionar Filtro\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Sort Dropdown -->\r\n        <div\r\n          class=\"w-full sm:w-auto sm:min-w-[250px]\"\r\n          *ngIf=\"sortableDropdownItems.length > 0\"\r\n        >\r\n          <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n            <mat-label>Ordenar por</mat-label>\r\n            <mat-select placeholder=\"Selecione...\" [formControl]=\"selectSort\">\r\n              <mat-option\r\n                *ngFor=\"let item of sortableDropdownItems\"\r\n                [value]=\"item\"\r\n              >\r\n                <div class=\"flex items-center gap-2\">\r\n                  <i class=\"fa fa-sort-alpha-down text-cyan-600\"></i>\r\n                  <span>{{ item.title }}</span>\r\n                </div>\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- SIMPLE SEARCH (for non-paginated tables) -->\r\n    <div\r\n      class=\"rounded-xl border border-gray-200 bg-white p-4 shadow-lg\"\r\n      *ngIf=\"data.pagination === false && hasFilterableColumn === true\"\r\n    >\r\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n        <mat-label class=\"flex items-center gap-2\">\r\n          <i class=\"fa fa-search text-blue-500\"></i>\r\n          Buscar\r\n        </mat-label>\r\n        <input\r\n          matInput\r\n          (keyup.enter)=\"search()\"\r\n          (keyup)=\"applyFilter(filterInput.value)\"\r\n          placeholder=\"Digite para filtrar...\"\r\n          #filterInput\r\n        />\r\n        <mat-icon matSuffix class=\"text-gray-500\">search</mat-icon>\r\n      </mat-form-field>\r\n      <button\r\n        *ngIf=\"data.actionButton\"\r\n        [ngClass]=\"\r\n          (data.actionButton.colorClass || 'bg-blue-500') +\r\n          ' float-right flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white hover:opacity-70'\r\n        \"\r\n        [routerLink]=\"data.actionButton.routerLink\"\r\n        (click)=\"\r\n          data.actionButton.method ? data.actionButton.method($event) : null\r\n        \"\r\n      >\r\n        <i *ngIf=\"data.actionButton.icon\" [class]=\"data.actionButton.icon\"></i>\r\n        {{ data.actionButton.label }}\r\n      </button>\r\n    </div>\r\n\r\n    <!-- FILTERS PANEL (for non-paginated tables) -->\r\n    <div\r\n      class=\"rounded-xl border border-gray-200 bg-white p-4 shadow-lg\"\r\n      *ngIf=\"data.pagination === false && dropdownItems.length > 0\"\r\n    >\r\n      <!-- FILTERS CONTENT -->\r\n      <div class=\"mb-4 space-y-3\" *ngIf=\"filtersForm.controls.length > 0\">\r\n        <div\r\n          [formGroup]=\"$any(filterGroup)\"\r\n          *ngFor=\"let filterGroup of filtersForm.controls; let i = index\"\r\n          class=\"flex flex-wrap items-center gap-3 rounded-lg border border-gray-200 p-2\"\r\n        >\r\n          <!-- FILTER TYPE SELECTOR -->\r\n          <div class=\"min-w-[200px] flex-1\" *ngIf=\"dropdownItems.length > 0\">\r\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n              <mat-label>Tipo de filtro</mat-label>\r\n              <mat-select\r\n                placeholder=\"Selecione o tipo...\"\r\n                formControlName=\"selectFilter\"\r\n                (selectionChange)=\"onSelectFilterChange()\"\r\n              >\r\n                <mat-option *ngFor=\"let item of dropdownItems\" [value]=\"item\">\r\n                  <div class=\"flex items-center gap-2\">\r\n                    <i\r\n                      [class]=\"item.icon || 'fa fa-filter'\"\r\n                      class=\"text-sm text-blue-500\"\r\n                    ></i>\r\n                    <span>{{ item.title }}</span>\r\n                  </div>\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <!-- TEXT FILTER -->\r\n          <div\r\n            class=\"min-w-[200px] flex-1\"\r\n            *ngIf=\"\r\n              $any(filterGroup).get('selectFilter')?.value?.arrange === 'filter'\r\n            \"\r\n          >\r\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n              <mat-label class=\"flex items-center gap-2\">\r\n                <i class=\"fa fa-search text-gray-400\"></i>\r\n                <span>{{\r\n                  $any(filterGroup).get(\"selectFilter\")?.value?.title ||\r\n                    \"Filtrar\"\r\n                }}</span>\r\n              </mat-label>\r\n              <input\r\n                (keyup.enter)=\"search()\"\r\n                formControlName=\"typeFilter\"\r\n                matInput\r\n                placeholder=\"Digite para filtrar...\"\r\n                #input\r\n              />\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <!-- DROPDOWN FILTER -->\r\n          <div\r\n            class=\"min-w-[200px] flex-1\"\r\n            *ngIf=\"\r\n              $any(filterGroup).get('selectFilter')?.value &&\r\n              $any(filterGroup)\r\n                .get('selectFilter')\r\n                ?.value.hasOwnProperty('items')\r\n            \"\r\n          >\r\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n              <mat-label>{{\r\n                $any(filterGroup).get(\"selectFilter\")?.value?.title ||\r\n                  \"Selecione\"\r\n              }}</mat-label>\r\n              <mat-select\r\n                placeholder=\"Selecione...\"\r\n                formControlName=\"selectItem\"\r\n                multiple\r\n              >\r\n                <mat-option\r\n                  *ngFor=\"\r\n                    let item of $any(filterGroup).get('selectFilter')?.value\r\n                      .items\r\n                  \"\r\n                  [value]=\"item\"\r\n                >\r\n                  {{ item.label }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <!-- DATE FILTER -->\r\n          <div\r\n            class=\"min-w-[340px] flex-auto\"\r\n            *ngIf=\"\r\n              $any(filterGroup).get('selectFilter')?.value?.arrange ===\r\n              'filterByDate'\r\n            \"\r\n          >\r\n            <div\r\n              class=\"flex flex-col items-stretch gap-3 sm:flex-row sm:items-center\"\r\n            >\r\n              <mat-form-field appearance=\"outline\" class=\"flex-1\">\r\n                <mat-label class=\"flex items-center gap-2\">\r\n                  <i class=\"fa fa-calendar text-gray-400\"></i>\r\n                  <span>Data Inicial</span>\r\n                </mat-label>\r\n                <input\r\n                  matInput\r\n                  (keyup.enter)=\"search()\"\r\n                  (blur)=\"onDateFilterChange()\"\r\n                  formControlName=\"initialDate\"\r\n                  [dropSpecialCharacters]=\"false\"\r\n                  mask=\"d0/M0/0000\"\r\n                  placeholder=\"DD/MM/AAAA\"\r\n                  maxlength=\"10\"\r\n                />\r\n              </mat-form-field>\r\n\r\n              <mat-form-field appearance=\"outline\" class=\"flex-1\">\r\n                <mat-label class=\"flex items-center gap-2\">\r\n                  <i class=\"fa fa-calendar text-gray-400\"></i>\r\n                  <span>Data Final</span>\r\n                </mat-label>\r\n                <input\r\n                  (keyup.enter)=\"search()\"\r\n                  (blur)=\"onDateFilterChange()\"\r\n                  matInput\r\n                  formControlName=\"finalDate\"\r\n                  [dropSpecialCharacters]=\"false\"\r\n                  mask=\"d0/M0/0000\"\r\n                  placeholder=\"DD/MM/AAAA\"\r\n                  maxlength=\"10\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- REMOVE FILTER BUTTON -->\r\n          <div *ngIf=\"filtersForm.length > 1\" class=\"ml-auto flex-shrink-0\">\r\n            <button\r\n              (click)=\"removeFilter(i)\"\r\n              class=\"flex h-10 w-10 items-center justify-center rounded-full transition-colors duration-300 hover:bg-red-100\"\r\n              matTooltip=\"Remover filtro\"\r\n            >\r\n              <i class=\"fa fa-trash text-red-500 hover:text-red-600\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- PANEL FOOTER: Add Filter & Actions -->\r\n      <div\r\n        class=\"-mb-2 flex flex-col items-center justify-between gap-4 border-t border-gray-200 pt-4 sm:flex-row\"\r\n      >\r\n        <!-- Add Filter Button -->\r\n        <div *ngIf=\"dropdownItems.length > 0\">\r\n          <button\r\n            (click)=\"addFilter()\"\r\n            class=\"transform rounded-full border-2 border-blue-300 bg-blue-50 px-6 py-2 text-sm font-medium text-blue-600 transition-all duration-300 hover:-translate-y-0.5 hover:border-blue-400 hover:bg-blue-100 hover:shadow-md\"\r\n            matTooltip=\"Adicionar novo filtro\"\r\n          >\r\n            <i class=\"fa fa-plus mr-2\"></i>\r\n            Adicionar Filtro\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Action Buttons -->\r\n        <div class=\"flex flex-wrap gap-3\">\r\n          <button\r\n            (click)=\"search()\"\r\n            type=\"button\"\r\n            class=\"flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700\"\r\n            matTooltip=\"Aplicar filtros\"\r\n          >\r\n            <i class=\"fa fa-search\"></i>\r\n            Aplicar\r\n          </button>\r\n\r\n          <button\r\n            (click)=\"resetFilter()\"\r\n            class=\"flex items-center gap-2 rounded-lg bg-red-500 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-red-600\"\r\n            matTooltip=\"Limpar filtros\"\r\n          >\r\n            <i class=\"fas fa-redo-alt\"></i>\r\n            Resetar\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"flex flex-col\">\r\n      <div\r\n        class=\"mx-auto flex flex-col\"\r\n        *ngIf=\"data.tabs && data.tabs.tabsData && data.tabs.tabsData.length > 0\"\r\n      >\r\n        <!-- Calcular quantos grupos de 6 tabs existem -->\r\n        <ng-container\r\n          *ngFor=\"\r\n            let groupIndex of getTabGroups(data.tabs.tabsData);\r\n            let i = index\r\n          \"\r\n        >\r\n          <div class=\"mx-auto flex flex-row\">\r\n            <ng-container\r\n              *ngFor=\"\r\n                let tab of getTabGroup(data.tabs.tabsData, groupIndex);\r\n                let j = index\r\n              \"\r\n            >\r\n              <button\r\n                class=\"border-2 border-gray-300 bg-gray-200 px-4 py-2 font-medium transition hover:brightness-95\"\r\n                [ngClass]=\"\r\n                  isTabSelected(getRealTabIndex(i, j))\r\n                    ? 'border-b-0 brightness-110'\r\n                    : ''\r\n                \"\r\n                (click)=\"onTableSelected(i, j)\"\r\n              >\r\n                {{ tab.label }}\r\n                <span\r\n                  *ngIf=\"tab.counter !== undefined\"\r\n                  class=\"ml-2 text-xs font-bold\"\r\n                  [ngClass]=\"tab.counterClass\"\r\n                >\r\n                  {{ tab.counter }}\r\n                </span>\r\n              </button>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"mat-elevation-z8 w-full overflow-x-auto rounded-xl\">\r\n        <table\r\n          mat-table\r\n          [dataSource]=\"dataSource\"\r\n          matSort\r\n          #sort=\"matSort\"\r\n          matSortActive=\"createdAt\"\r\n          matSortDirection=\"desc\"\r\n        >\r\n          <ng-container\r\n            *ngFor=\"let col of data.displayedColumns\"\r\n            matColumnDef=\"{{ col.property }}\"\r\n          >\r\n            <ng-container *matHeaderCellDef>\r\n              <!-- IF THE COLUMN IS NOT SORTABLE, THEN DON'T SHOW THE SORT BUTTONS -->\r\n              <th\r\n                *ngIf=\"!col.isSortable || data.pagination === true\"\r\n                mat-header-cell\r\n                [ngClass]=\"\r\n                  (data.color?.bg ? ' ' + $any(data.color).bg : '') +\r\n                  (data.color?.text ? ' ' + $any(data.color).text : '')\r\n                \"\r\n              >\r\n                {{ col.title }}\r\n              </th>\r\n              <!-- IF THE COLUMN IS SORTABLE, THEN SHOW THE SORT BUTTONS -->\r\n              <th\r\n                *ngIf=\"col.isSortable && data.pagination === false\"\r\n                mat-header-cell\r\n                mat-sort-header\r\n                [ngClass]=\"\r\n                  (data.color?.bg ? ' ' + $any(data.color).bg : '') +\r\n                  (data.color?.text ? ' ' + $any(data.color).text : '')\r\n                \"\r\n              >\r\n                {{ col.title }}\r\n              </th>\r\n              <td\r\n                mat-cell\r\n                *matCellDef=\"let row\"\r\n                (click)=\"col.method ? col.method(row) : null\"\r\n                (mouseenter)=\"onCellMouseEnter($event, row, col)\"\r\n                (mouseleave)=\"onCellMouseLeave()\"\r\n                (mousemove)=\"onCellMouseMove($event)\"\r\n              >\r\n                <!-- CHECK IF THE COLUMN MUST BE DISPLAYED -->\r\n                <span *ngIf=\"!col.image && !col.iconClass && !col.method\">\r\n                  <ng-container>\r\n                    <span\r\n                      *ngIf=\"\r\n                        col.charLimit &&\r\n                          row[col.property] &&\r\n                          row[col.property].length > col.charLimit;\r\n                        else withinLimit\r\n                      \"\r\n                    >\r\n                      <a\r\n                        *ngIf=\"col.hasLink === true\"\r\n                        [href]=\"row[col.property]\"\r\n                        target=\"_blank\"\r\n                      >\r\n                        {{ getDisplayValue(col, row) }}\r\n                      </a>\r\n                      <a\r\n                        *ngIf=\"col.hasLink && isString(col.hasLink)\"\r\n                        [href]=\"col.hasLink\"\r\n                        target=\"_blank\"\r\n                      >\r\n                        {{ getDisplayValue(col, row) }}\r\n                      </a>\r\n                      <span\r\n                        *ngIf=\"col.hasLink !== true && !isString(col.hasLink)\"\r\n                      >\r\n                        {{ getDisplayValue(col, row) }}\r\n                      </span>\r\n                    </span>\r\n                  </ng-container>\r\n                  <ng-template #withinLimit>\r\n                    <a\r\n                      *ngIf=\"col.hasLink === true\"\r\n                      [href]=\"row[col.property]\"\r\n                      target=\"_blank\"\r\n                    >\r\n                      {{ getDisplayValue(col, row, true) }}\r\n                    </a>\r\n                    <a\r\n                      *ngIf=\"col.hasLink && isString(col.hasLink)\"\r\n                      [href]=\"col.hasLink\"\r\n                      target=\"_blank\"\r\n                    >\r\n                      {{ getDisplayValue(col, row, true) }}\r\n                    </a>\r\n                    <span\r\n                      *ngIf=\"col.hasLink !== true && !isString(col.hasLink)\"\r\n                    >\r\n                      {{ getDisplayValue(col, row, true) }}\r\n                    </span>\r\n                  </ng-template>\r\n                </span>\r\n                <!------------------- IMAGE ------------------>\r\n                <img\r\n                  *ngIf=\"\r\n                    col.image && col.image.path && !col.iconClass && !col.method\r\n                  \"\r\n                  [src]=\"col.image.path + '/' + row[col.property]\"\r\n                  [ngClass]=\"col.image.class\"\r\n                  alt=\"Imagem\"\r\n                />\r\n                <img\r\n                  *ngIf=\"\r\n                    col.image && col.image.url && !col.iconClass && !col.method\r\n                  \"\r\n                  [src]=\"row[col.property]\"\r\n                  [ngClass]=\"col.image.class\"\r\n                  alt=\"Imagem\"\r\n                />\r\n                <ng-container *ngIf=\"col.iconClass\">\r\n                  <button\r\n                    *ngFor=\"let iconClass of col.iconClass\"\r\n                    (click)=\"\r\n                      iconClass.buttonMethod\r\n                        ? iconClass.buttonMethod(row, $event)\r\n                        : $event.stopPropagation()\r\n                    \"\r\n                  >\r\n                    <span\r\n                      [ngClass]=\"iconClass.class\"\r\n                      *ngIf=\"\r\n                        iconClass.condition === undefined ||\r\n                        (iconClass.condition !== undefined &&\r\n                          $any(iconClass.condition)(row))\r\n                      \"\r\n                      >{{ iconClass.text }}</span\r\n                    >\r\n                  </button>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n          <tr mat-header-row *matHeaderRowDef=\"columnProperties\"></tr>\r\n          <tr\r\n            [ngClass]=\"{\r\n              'example-element-row': data.isNotClickable === true,\r\n              'example-element-row cursor-pointer': !data.isNotClickable\r\n            }\"\r\n            mat-row\r\n            *matRowDef=\"let row; columns: columnProperties\"\r\n            (click)=\"goToDetails(row)\"\r\n          ></tr>\r\n\r\n          <!-- ROW SHOWN WHEN THERE IS NO MATCHING DATA. -->\r\n          <tr class=\"mat-row\" *matNoDataRow>\r\n            <td *ngIf=\"!isLoading\" class=\"mat-cell p-4\" colspan=\"4\">\r\n              Nenhum resultado encontrado para a busca\r\n            </td>\r\n          </tr>\r\n        </table>\r\n\r\n        <div class=\"flex justify-center\" *ngIf=\"isLoading\">\r\n          <mat-spinner></mat-spinner>\r\n        </div>\r\n\r\n        <div class=\"paginator-container\">\r\n          <mat-paginator\r\n            #paginator\r\n            [pageSizeOptions]=\"[25, 50, 100]\"\r\n            [pageSize]=\"pageSize\"\r\n            [length]=\"totalItems\"\r\n            showFirstLastButtons\r\n            aria-label=\"Select page of periodic elements\"\r\n            (page)=\"onPageChange($event)\"\r\n            [ngClass]=\"{\r\n              'hide-length':\r\n                ['filter', 'filterByDate', 'equals'].includes(\r\n                  this.currentArrange\r\n                ) || this.data.filterFn,\r\n              'hide-next-button': !hasNextPage && data.pagination === true,\r\n              'hide-last-button':\r\n                (!hasNextPage && data.pagination === true) || this.data.filterFn\r\n            }\"\r\n          >\r\n          </mat-paginator>\r\n          <div\r\n            *ngIf=\"\r\n              !isLoading &&\r\n              dataSource?.data &&\r\n              dataSource.data.length > 0 &&\r\n              data?.filterFn\r\n            \"\r\n            class=\"page-number-display\"\r\n          >\r\n            {{ currentPageNumber }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- TOOLTIP PERSONALIZADO -->\r\n  <div\r\n    *ngIf=\"showTooltip\"\r\n    class=\"fixed z-50 max-w-md break-words rounded-lg bg-gray-800 px-3 py-2 text-sm text-white shadow-lg\"\r\n    [style.left.px]=\"tooltipPosition.x\"\r\n    [style.top.px]=\"tooltipPosition.y\"\r\n    [style.pointer-events]=\"'none'\"\r\n  >\r\n    {{ tooltipContent }}\r\n  </div>\r\n</div>\r\n", styles: ["::ng-deep .hide-length .mat-mdc-paginator-range-label{display:none}::ng-deep .hide-next-button .mat-mdc-tooltip-trigger.mat-mdc-paginator-navigation-next.mdc-icon-button.mat-mdc-icon-button.mat-unthemed.mat-mdc-button-base{visibility:hidden}::ng-deep .hide-next-button .mat-mdc-tooltip-trigger.mat-mdc-paginator-navigation-last.mdc-icon-button.mat-mdc-icon-button.mat-unthemed.mat-mdc-button-base.ng-star-inserted{visibility:hidden}::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field.ng-tns-c162-1.mdc-text-field--filled{width:25dvw}::ng-deep .custom-filter .mat-mdc-text-field-wrapper{width:20dvw;max-width:300px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i8.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i14.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i15.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i16.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table', template: "<div *ngIf=\"data\" class=\"card-body\">\r\n  <div class=\"flex flex-col justify-between gap-6\">\r\n    <!-- UNIFIED CONTROL PANEL: FILTERS, SORT & ACTIONS -->\r\n    <div\r\n      class=\"rounded-xl border border-gray-200 bg-white p-4 shadow-lg\"\r\n      *ngIf=\"\r\n        data.pagination === true &&\r\n        (dropdownItems.length > 0 ||\r\n          sortableDropdownItems.length > 0 ||\r\n          data.actionButton)\r\n      \"\r\n    >\r\n      <!-- PANEL HEADER: Title, Custom Action, and Global Actions -->\r\n      <div\r\n        class=\"mb-4 flex flex-col items-start justify-between gap-4 border-b-2 border-gray-200 pb-4 md:flex-row md:items-center\"\r\n      >\r\n        <!-- Left Side: Title & Main Action Button -->\r\n        <div class=\"flex flex-wrap items-center gap-4\">\r\n          <div class=\"flex items-center gap-2\">\r\n            <i class=\"fa fa-filter text-xl text-blue-500\"></i>\r\n            <span class=\"text-lg font-semibold text-gray-700\"\r\n              >Filtros e A\u00E7\u00F5es</span\r\n            >\r\n          </div>\r\n          <button\r\n            *ngIf=\"data.actionButton && data.actionButton.condition\"\r\n            [ngClass]=\"\r\n              (data.actionButton.colorClass || 'bg-blue-500') +\r\n              ' flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white hover:opacity-70'\r\n            \"\r\n            [routerLink]=\"data.actionButton.routerLink\"\r\n            (click)=\"\r\n              data.actionButton.method ? data.actionButton.method($event) : null\r\n            \"\r\n          >\r\n            <i\r\n              *ngIf=\"data.actionButton.icon\"\r\n              [class]=\"data.actionButton.icon\"\r\n            ></i>\r\n            {{ data.actionButton.label }}\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Right Side: Search, Reset, Export -->\r\n        <div\r\n          class=\"flex flex-wrap gap-3\"\r\n          *ngIf=\"\r\n            this.hasFilterableColumn === true || this.hasSortableColumn === true\r\n          \"\r\n        >\r\n          <button\r\n            (click)=\"search()\"\r\n            type=\"button\"\r\n            class=\"flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700\"\r\n            matTooltip=\"Aplicar filtros\"\r\n          >\r\n            <i class=\"fa fa-search\"></i>\r\n            Pesquisar\r\n          </button>\r\n\r\n          <button\r\n            (click)=\"resetFilter()\"\r\n            class=\"flex items-center gap-2 rounded-lg bg-red-500 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-red-600\"\r\n            matTooltip=\"Limpar filtros\"\r\n          >\r\n            <i class=\"fas fa-redo-alt\"></i>\r\n            Resetar\r\n          </button>\r\n\r\n          <button\r\n            *ngIf=\"data.download !== false && downloadTable\"\r\n            class=\"flex items-center gap-2 rounded-lg bg-orange-500 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-orange-600\"\r\n            matTooltipPosition=\"above\"\r\n            matTooltip=\"Exportar Tabela\"\r\n            [disabled]=\"\r\n              this.dataSource && this.dataSource.filteredData.length <= 0\r\n            \"\r\n            (click)=\"\r\n              $any(arrange) && downloadTable !== undefined\r\n                ? downloadTable($any(arrange), data.conditions || [])\r\n                : null\r\n            \"\r\n          >\r\n            <i class=\"fa fa-download\"></i>\r\n            Exportar\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- FILTERS CONTENT (WITH REFINEMENTS) -->\r\n      <div class=\"mb-4 space-y-3\" *ngIf=\"filtersForm.controls.length > 0\">\r\n        <div\r\n          [formGroup]=\"$any(filterGroup)\"\r\n          *ngFor=\"let filterGroup of filtersForm.controls; let i = index\"\r\n          class=\"flex flex-wrap items-center gap-3 rounded-lg border border-gray-200 p-2\"\r\n        >\r\n          <!-- FILTER TYPE SELECTOR -->\r\n          <div class=\"min-w-[200px] flex-1\" *ngIf=\"dropdownItems.length > 0\">\r\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n              <mat-label>Tipo de filtro</mat-label>\r\n              <mat-select\r\n                placeholder=\"Selecione o tipo...\"\r\n                formControlName=\"selectFilter\"\r\n                (selectionChange)=\"onSelectFilterChange()\"\r\n              >\r\n                <mat-option *ngFor=\"let item of dropdownItems\" [value]=\"item\">\r\n                  <div class=\"flex items-center gap-2\">\r\n                    <i\r\n                      [class]=\"item.icon || 'fa fa-filter'\"\r\n                      class=\"text-sm text-blue-500\"\r\n                    ></i>\r\n                    <span>{{ item.title }}</span>\r\n                  </div>\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <!-- TEXT FILTER -->\r\n          <div\r\n            class=\"min-w-[200px] flex-1\"\r\n            *ngIf=\"\r\n              $any(filterGroup).get('selectFilter')?.value?.arrange === 'filter'\r\n            \"\r\n          >\r\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n              <mat-label class=\"flex items-center gap-2\">\r\n                <i class=\"fa fa-search text-gray-400\"></i>\r\n                <span>{{\r\n                  $any(filterGroup).get(\"selectFilter\")?.value?.title ||\r\n                    \"Filtrar\"\r\n                }}</span>\r\n              </mat-label>\r\n              <input\r\n                (keyup.enter)=\"search()\"\r\n                formControlName=\"typeFilter\"\r\n                matInput\r\n                placeholder=\"Digite para filtrar...\"\r\n                #input\r\n              />\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <!-- DROPDOWN FILTER -->\r\n          <div\r\n            class=\"min-w-[200px] flex-1\"\r\n            *ngIf=\"\r\n              $any(filterGroup).get('selectFilter')?.value &&\r\n              $any(filterGroup)\r\n                .get('selectFilter')\r\n                ?.value.hasOwnProperty('items')\r\n            \"\r\n          >\r\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n              <mat-label>{{\r\n                $any(filterGroup).get(\"selectFilter\")?.value?.title ||\r\n                  \"Selecione\"\r\n              }}</mat-label>\r\n              <mat-select\r\n                placeholder=\"Selecione...\"\r\n                formControlName=\"selectItem\"\r\n                multiple\r\n              >\r\n                <mat-option\r\n                  *ngFor=\"\r\n                    let item of $any(filterGroup).get('selectFilter')?.value\r\n                      .items\r\n                  \"\r\n                  [value]=\"item\"\r\n                >\r\n                  {{ item.label }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <!-- DATE FILTER -->\r\n          <div\r\n            class=\"min-w-[340px] flex-auto\"\r\n            *ngIf=\"\r\n              $any(filterGroup).get('selectFilter')?.value?.arrange ===\r\n              'filterByDate'\r\n            \"\r\n          >\r\n            <div\r\n              class=\"flex flex-col items-stretch gap-3 sm:flex-row sm:items-center\"\r\n            >\r\n              <mat-form-field appearance=\"outline\" class=\"flex-1\">\r\n                <mat-label class=\"flex items-center gap-2\">\r\n                  <i class=\"fa fa-calendar text-gray-400\"></i>\r\n                  <span>Data Inicial</span>\r\n                </mat-label>\r\n                <input\r\n                  matInput\r\n                  (keyup.enter)=\"search()\"\r\n                  formControlName=\"initialDate\"\r\n                  placeholder=\"DD/MM/AAAA\"\r\n                  maxlength=\"10\"\r\n                />\r\n              </mat-form-field>\r\n\r\n              <mat-form-field appearance=\"outline\" class=\"flex-1\">\r\n                <mat-label class=\"flex items-center gap-2\">\r\n                  <i class=\"fa fa-calendar text-gray-400\"></i>\r\n                  <span>Data Final</span>\r\n                </mat-label>\r\n                <input\r\n                  (keyup.enter)=\"search()\"\r\n                  matInput\r\n                  formControlName=\"finalDate\"\r\n                  placeholder=\"DD/MM/AAAA\"\r\n                  maxlength=\"10\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- REMOVE FILTER BUTTON -->\r\n          <div *ngIf=\"filtersForm.length > 1\" class=\"ml-auto flex-shrink-0\">\r\n            <button\r\n              (click)=\"removeFilter(i)\"\r\n              class=\"flex h-10 w-10 items-center justify-center rounded-full transition-colors duration-300 hover:bg-red-100\"\r\n              matTooltip=\"Remover filtro\"\r\n            >\r\n              <i class=\"fa fa-trash text-red-500 hover:text-red-600\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- PANEL FOOTER: Add Filter & Sort -->\r\n      <div\r\n        class=\"-mb-2 flex flex-col items-center justify-between gap-4 border-t border-gray-200 pt-4 sm:flex-row\"\r\n      >\r\n        <!-- Add Filter Button -->\r\n        <div *ngIf=\"dropdownItems.length > 0\">\r\n          <button\r\n            (click)=\"addFilter()\"\r\n            class=\"transform rounded-full border-2 border-blue-300 bg-blue-50 px-6 py-2 text-sm font-medium text-blue-600 transition-all duration-300 hover:-translate-y-0.5 hover:border-blue-400 hover:bg-blue-100 hover:shadow-md\"\r\n            matTooltip=\"Adicionar novo filtro\"\r\n          >\r\n            <i class=\"fa fa-plus mr-2\"></i>\r\n            Adicionar Filtro\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Sort Dropdown -->\r\n        <div\r\n          class=\"w-full sm:w-auto sm:min-w-[250px]\"\r\n          *ngIf=\"sortableDropdownItems.length > 0\"\r\n        >\r\n          <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n            <mat-label>Ordenar por</mat-label>\r\n            <mat-select placeholder=\"Selecione...\" [formControl]=\"selectSort\">\r\n              <mat-option\r\n                *ngFor=\"let item of sortableDropdownItems\"\r\n                [value]=\"item\"\r\n              >\r\n                <div class=\"flex items-center gap-2\">\r\n                  <i class=\"fa fa-sort-alpha-down text-cyan-600\"></i>\r\n                  <span>{{ item.title }}</span>\r\n                </div>\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- SIMPLE SEARCH (for non-paginated tables) -->\r\n    <div\r\n      class=\"rounded-xl border border-gray-200 bg-white p-4 shadow-lg\"\r\n      *ngIf=\"data.pagination === false\"\r\n    >\r\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n        <mat-label class=\"flex items-center gap-2\">\r\n          <i class=\"fa fa-search text-blue-500\"></i>\r\n          Buscar\r\n        </mat-label>\r\n        <input\r\n          matInput\r\n          (keyup.enter)=\"search()\"\r\n          (keyup)=\"applyFilter(filterInput.value)\"\r\n          placeholder=\"Digite para filtrar...\"\r\n          #filterInput\r\n        />\r\n        <mat-icon matSuffix class=\"text-gray-500\">search</mat-icon>\r\n      </mat-form-field>\r\n      <button\r\n        *ngIf=\"data.actionButton\"\r\n        [ngClass]=\"\r\n          (data.actionButton.colorClass || 'bg-blue-500') +\r\n          ' float-right flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white hover:opacity-70'\r\n        \"\r\n        [routerLink]=\"data.actionButton.routerLink\"\r\n        (click)=\"\r\n          data.actionButton.method ? data.actionButton.method($event) : null\r\n        \"\r\n      >\r\n        <i *ngIf=\"data.actionButton.icon\" [class]=\"data.actionButton.icon\"></i>\r\n        {{ data.actionButton.label }}\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"flex flex-col\">\r\n      <div\r\n        class=\"mx-auto flex flex-col\"\r\n        *ngIf=\"data.tabs && data.tabs.tabsData && data.tabs.tabsData.length > 0\"\r\n      >\r\n        <!-- Calcular quantos grupos de 6 tabs existem -->\r\n        <ng-container\r\n          *ngFor=\"\r\n            let groupIndex of getTabGroups(data.tabs.tabsData);\r\n            let i = index\r\n          \"\r\n        >\r\n          <div class=\"mx-auto flex flex-row\">\r\n            <ng-container\r\n              *ngFor=\"\r\n                let tab of getTabGroup(data.tabs.tabsData, groupIndex);\r\n                let j = index\r\n              \"\r\n            >\r\n              <button\r\n                class=\"border-2 border-gray-300 bg-gray-200 px-4 py-2 font-medium transition hover:brightness-95\"\r\n                [ngClass]=\"\r\n                  isTabSelected(getRealTabIndex(i, j))\r\n                    ? 'border-b-0 brightness-110'\r\n                    : ''\r\n                \"\r\n                (click)=\"onTableSelected(i, j)\"\r\n              >\r\n                {{ tab.label }}\r\n                <span\r\n                  *ngIf=\"tab.counter !== undefined\"\r\n                  class=\"ml-2 text-xs font-bold\"\r\n                  [ngClass]=\"tab.counterClass\"\r\n                >\r\n                  {{ tab.counter }}\r\n                </span>\r\n              </button>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"mat-elevation-z8 w-full overflow-x-auto rounded-xl\">\r\n        <table\r\n          mat-table\r\n          [dataSource]=\"dataSource\"\r\n          matSort\r\n          #sort=\"matSort\"\r\n          matSortActive=\"createdAt\"\r\n          matSortDirection=\"desc\"\r\n        >\r\n          <ng-container\r\n            *ngFor=\"let col of data.displayedColumns\"\r\n            matColumnDef=\"{{ col.property }}\"\r\n          >\r\n            <ng-container *matHeaderCellDef>\r\n              <!-- IF THE COLUMN IS NOT SORTABLE, THEN DON'T SHOW THE SORT BUTTONS -->\r\n              <th\r\n                *ngIf=\"!col.isSortable || data.pagination === true\"\r\n                mat-header-cell\r\n                [ngClass]=\"\r\n                  (data?.color?.bg ? ' ' + $any(data.color).bg : '') +\r\n                  (data?.color?.text ? ' ' + $any(data.color).text : '')\r\n                \"\r\n              >\r\n                {{ col.title }}\r\n              </th>\r\n              <!-- IF THE COLUMN IS SORTABLE, THEN SHOW THE SORT BUTTONS -->\r\n              <th\r\n                *ngIf=\"col.isSortable && data.pagination === false\"\r\n                mat-header-cell\r\n                mat-sort-header\r\n                [ngClass]=\"\r\n                  (data?.color?.bg ? ' ' + $any(data.color).bg : '') +\r\n                  (data?.color?.text ? ' ' + $any(data.color).text : '')\r\n                \"\r\n              >\r\n                {{ col.title }}\r\n              </th>\r\n              <td\r\n                mat-cell\r\n                *matCellDef=\"let row\"\r\n                (click)=\"col.method ? col.method(row) : null\"\r\n                (mouseenter)=\"onCellMouseEnter($event, row, col)\"\r\n                (mouseleave)=\"onCellMouseLeave()\"\r\n                (mousemove)=\"onCellMouseMove($event)\"\r\n              >\r\n                <!-- CHECK IF THE COLUMN MUST BE DISPLAYED -->\r\n                <span *ngIf=\"!col.image && !col.iconClass && !col.method\">\r\n                  <ng-container>\r\n                    <span\r\n                      *ngIf=\"\r\n                        col.charLimit &&\r\n                          row[col.property] &&\r\n                          row[col.property].length > col.charLimit;\r\n                        else withinLimit\r\n                      \"\r\n                    >\r\n                      <a\r\n                        *ngIf=\"col.hasLink === true\"\r\n                        [href]=\"row[col.property]\"\r\n                        target=\"_blank\"\r\n                      >\r\n                        {{ getDisplayValue(col, row) }}\r\n                      </a>\r\n                      <a\r\n                        *ngIf=\"col.hasLink && isString(col.hasLink)\"\r\n                        [href]=\"col.hasLink\"\r\n                        target=\"_blank\"\r\n                      >\r\n                        {{ getDisplayValue(col, row) }}\r\n                      </a>\r\n                      <span\r\n                        *ngIf=\"col.hasLink !== true && !isString(col.hasLink)\"\r\n                      >\r\n                        {{ getDisplayValue(col, row) }}\r\n                      </span>\r\n                    </span>\r\n                  </ng-container>\r\n                  <ng-template #withinLimit>\r\n                    <a\r\n                      *ngIf=\"col.hasLink === true\"\r\n                      [href]=\"row[col.property]\"\r\n                      target=\"_blank\"\r\n                    >\r\n                      {{ getDisplayValue(col, row, true) }}\r\n                    </a>\r\n                    <a\r\n                      *ngIf=\"col.hasLink && isString(col.hasLink)\"\r\n                      [href]=\"col.hasLink\"\r\n                      target=\"_blank\"\r\n                    >\r\n                      {{ getDisplayValue(col, row, true) }}\r\n                    </a>\r\n                    <span\r\n                      *ngIf=\"col.hasLink !== true && !isString(col.hasLink)\"\r\n                    >\r\n                      {{ getDisplayValue(col, row, true) }}\r\n                    </span>\r\n                  </ng-template>\r\n                </span>\r\n                <!------------------- IMAGE ------------------>\r\n                <img\r\n                  *ngIf=\"\r\n                    col.image && col.image.path && !col.iconClass && !col.method\r\n                  \"\r\n                  [src]=\"col.image.path + '/' + row[col.property]\"\r\n                  [ngClass]=\"col.image.class\"\r\n                  alt=\"Imagem\"\r\n                />\r\n                <img\r\n                  *ngIf=\"\r\n                    col.image && col.image.url && !col.iconClass && !col.method\r\n                  \"\r\n                  [src]=\"row[col.property]\"\r\n                  [ngClass]=\"col.image.class\"\r\n                  alt=\"Imagem\"\r\n                />\r\n                <ng-container *ngIf=\"col.iconClass\">\r\n                  <button\r\n                    *ngFor=\"let iconClass of col.iconClass\"\r\n                    (click)=\"\r\n                      iconClass.buttonMethod\r\n                        ? iconClass.buttonMethod(row, $event)\r\n                        : $event.stopPropagation()\r\n                    \"\r\n                  >\r\n                    <span\r\n                      [ngClass]=\"iconClass.class\"\r\n                      *ngIf=\"\r\n                        iconClass.condition === undefined ||\r\n                        (iconClass.condition !== undefined &&\r\n                          $any(iconClass.condition)(row))\r\n                      \"\r\n                      >{{ iconClass.text }}</span\r\n                    >\r\n                  </button>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n          <tr mat-header-row *matHeaderRowDef=\"columnProperties\"></tr>\r\n          <tr\r\n            [ngClass]=\"{\r\n              'example-element-row': data.isNotClickable === true,\r\n              'example-element-row cursor-pointer': !data.isNotClickable\r\n            }\"\r\n            mat-row\r\n            *matRowDef=\"let row; columns: columnProperties\"\r\n            (click)=\"goToDetails(row)\"\r\n          ></tr>\r\n\r\n          <!-- ROW SHOWN WHEN THERE IS NO MATCHING DATA. -->\r\n          <tr class=\"mat-row\" *matNoDataRow>\r\n            <td *ngIf=\"!isLoading\" class=\"mat-cell p-4\" colspan=\"4\">\r\n              Nenhum resultado encontrado para a busca\r\n            </td>\r\n          </tr>\r\n        </table>\r\n\r\n        <div class=\"flex justify-center\" *ngIf=\"isLoading\">\r\n          <mat-spinner></mat-spinner>\r\n        </div>\r\n\r\n        <div class=\"paginator-container\">\r\n          <mat-paginator\r\n            #paginator\r\n            [pageSizeOptions]=\"[25, 50, 100]\"\r\n            [pageSize]=\"pageSize\"\r\n            [length]=\"totalItems\"\r\n            showFirstLastButtons\r\n            aria-label=\"Select page of periodic elements\"\r\n            (page)=\"onPageChange($event)\"\r\n            [ngClass]=\"{\r\n              'hide-length':\r\n                ['filter', 'filterByDate', 'equals'].includes(\r\n                  this.currentArrange\r\n                ) || this.data.filterFn,\r\n              'hide-next-button': !hasNextPage && data.pagination === true,\r\n              'hide-last-button':\r\n                (!hasNextPage && data.pagination === true) || this.data.filterFn\r\n            }\"\r\n          >\r\n          </mat-paginator>\r\n          <div\r\n            *ngIf=\"\r\n              !isLoading &&\r\n              dataSource?.data &&\r\n              dataSource.data.length > 0 &&\r\n              data?.filterFn\r\n            \"\r\n            class=\"page-number-display\"\r\n          >\r\n            {{ currentPageNumber }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- TOOLTIP PERSONALIZADO -->\r\n  <div\r\n    *ngIf=\"showTooltip\"\r\n    class=\"fixed z-50 max-w-md break-words rounded-lg bg-gray-800 px-3 py-2 text-sm text-white shadow-lg\"\r\n    [style.left.px]=\"tooltipPosition.x\"\r\n    [style.top.px]=\"tooltipPosition.y\"\r\n    [style.pointer-events]=\"'none'\"\r\n  >\r\n    {{ tooltipContent }}\r\n  </div>\r\n</div>\r\n", styles: ["::ng-deep .hide-length .mat-mdc-paginator-range-label{display:none}::ng-deep .hide-next-button .mat-mdc-tooltip-trigger.mat-mdc-paginator-navigation-next.mdc-icon-button.mat-mdc-icon-button.mat-unthemed.mat-mdc-button-base{visibility:hidden}::ng-deep .hide-next-button .mat-mdc-tooltip-trigger.mat-mdc-paginator-navigation-last.mdc-icon-button.mat-mdc-icon-button.mat-unthemed.mat-mdc-button-base.ng-star-inserted{visibility:hidden}::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field.ng-tns-c162-1.mdc-text-field--filled{width:25dvw}::ng-deep .custom-filter .mat-mdc-text-field-wrapper{width:20dvw;max-width:300px}\n"] }]
+            args: [{ selector: 'lib-table', template: "<div *ngIf=\"data\" class=\"card-body\">\r\n  <div class=\"flex flex-col justify-between gap-6\">\r\n    <!-- UNIFIED CONTROL PANEL: FILTERS, SORT & ACTIONS -->\r\n    <div\r\n      class=\"rounded-xl border border-gray-200 bg-white p-4 shadow-lg\"\r\n      *ngIf=\"\r\n        data.pagination === true &&\r\n        (dropdownItems.length > 0 ||\r\n          sortableDropdownItems.length > 0 ||\r\n          data.actionButton)\r\n      \"\r\n    >\r\n      <!-- PANEL HEADER: Title, Custom Action, and Global Actions -->\r\n      <div\r\n        class=\"mb-4 flex flex-col items-start justify-between gap-4 border-b-2 border-gray-200 pb-4 md:flex-row md:items-center\"\r\n      >\r\n        <!-- Left Side: Title & Main Action Button -->\r\n        <div class=\"flex flex-wrap items-center gap-4\">\r\n          <div class=\"flex items-center gap-2\">\r\n            <i class=\"fa fa-filter text-xl text-blue-500\"></i>\r\n            <span class=\"text-lg font-semibold text-gray-700\"\r\n              >Filtros e A\u00E7\u00F5es</span\r\n            >\r\n          </div>\r\n          <button\r\n            *ngIf=\"data.actionButton && data.actionButton.condition\"\r\n            [ngClass]=\"\r\n              (data.actionButton.colorClass || 'bg-blue-500') +\r\n              ' flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white hover:opacity-70'\r\n            \"\r\n            [routerLink]=\"data.actionButton.routerLink\"\r\n            (click)=\"\r\n              data.actionButton.method ? data.actionButton.method($event) : null\r\n            \"\r\n          >\r\n            <i\r\n              *ngIf=\"data.actionButton.icon\"\r\n              [class]=\"data.actionButton.icon\"\r\n            ></i>\r\n            {{ data.actionButton.label }}\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Right Side: Search, Reset, Export -->\r\n        <div\r\n          class=\"flex flex-wrap gap-3\"\r\n          *ngIf=\"\r\n            this.hasFilterableColumn === true || this.hasSortableColumn === true\r\n          \"\r\n        >\r\n          <button\r\n            (click)=\"search()\"\r\n            type=\"button\"\r\n            class=\"flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700\"\r\n            matTooltip=\"Aplicar filtros\"\r\n          >\r\n            <i class=\"fa fa-search\"></i>\r\n            Pesquisar\r\n          </button>\r\n\r\n          <button\r\n            (click)=\"resetFilter()\"\r\n            class=\"flex items-center gap-2 rounded-lg bg-red-500 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-red-600\"\r\n            matTooltip=\"Limpar filtros\"\r\n          >\r\n            <i class=\"fas fa-redo-alt\"></i>\r\n            Resetar\r\n          </button>\r\n\r\n          <button\r\n            *ngIf=\"data.download !== false && downloadTable\"\r\n            class=\"flex items-center gap-2 rounded-lg bg-orange-500 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-orange-600\"\r\n            matTooltipPosition=\"above\"\r\n            matTooltip=\"Exportar Tabela\"\r\n            [disabled]=\"\r\n              this.dataSource && this.dataSource.filteredData.length <= 0\r\n            \"\r\n            (click)=\"\r\n              $any(arrange) && downloadTable !== undefined\r\n                ? downloadTable($any(arrange), data.conditions || [])\r\n                : null\r\n            \"\r\n          >\r\n            <i class=\"fa fa-download\"></i>\r\n            Exportar\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- FILTERS CONTENT (WITH REFINEMENTS) -->\r\n      <div class=\"mb-4 space-y-3\" *ngIf=\"filtersForm.controls.length > 0\">\r\n        <div\r\n          [formGroup]=\"$any(filterGroup)\"\r\n          *ngFor=\"let filterGroup of filtersForm.controls; let i = index\"\r\n          class=\"flex flex-wrap items-center gap-3 rounded-lg border border-gray-200 p-2\"\r\n        >\r\n          <!-- FILTER TYPE SELECTOR -->\r\n          <div class=\"min-w-[200px] flex-1\" *ngIf=\"dropdownItems.length > 0\">\r\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n              <mat-label>Tipo de filtro</mat-label>\r\n              <mat-select\r\n                placeholder=\"Selecione o tipo...\"\r\n                formControlName=\"selectFilter\"\r\n                (selectionChange)=\"onSelectFilterChange()\"\r\n              >\r\n                <mat-option *ngFor=\"let item of dropdownItems\" [value]=\"item\">\r\n                  <div class=\"flex items-center gap-2\">\r\n                    <i\r\n                      [class]=\"item.icon || 'fa fa-filter'\"\r\n                      class=\"text-sm text-blue-500\"\r\n                    ></i>\r\n                    <span>{{ item.title }}</span>\r\n                  </div>\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <!-- TEXT FILTER -->\r\n          <div\r\n            class=\"min-w-[200px] flex-1\"\r\n            *ngIf=\"\r\n              $any(filterGroup).get('selectFilter')?.value?.arrange === 'filter'\r\n            \"\r\n          >\r\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n              <mat-label class=\"flex items-center gap-2\">\r\n                <i class=\"fa fa-search text-gray-400\"></i>\r\n                <span>{{\r\n                  $any(filterGroup).get(\"selectFilter\")?.value?.title ||\r\n                    \"Filtrar\"\r\n                }}</span>\r\n              </mat-label>\r\n              <input\r\n                (keyup.enter)=\"search()\"\r\n                formControlName=\"typeFilter\"\r\n                matInput\r\n                placeholder=\"Digite para filtrar...\"\r\n                #input\r\n              />\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <!-- DROPDOWN FILTER -->\r\n          <div\r\n            class=\"min-w-[200px] flex-1\"\r\n            *ngIf=\"\r\n              $any(filterGroup).get('selectFilter')?.value &&\r\n              $any(filterGroup)\r\n                .get('selectFilter')\r\n                ?.value.hasOwnProperty('items')\r\n            \"\r\n          >\r\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n              <mat-label>{{\r\n                $any(filterGroup).get(\"selectFilter\")?.value?.title ||\r\n                  \"Selecione\"\r\n              }}</mat-label>\r\n              <mat-select\r\n                placeholder=\"Selecione...\"\r\n                formControlName=\"selectItem\"\r\n                multiple\r\n              >\r\n                <mat-option\r\n                  *ngFor=\"\r\n                    let item of $any(filterGroup).get('selectFilter')?.value\r\n                      .items\r\n                  \"\r\n                  [value]=\"item\"\r\n                >\r\n                  {{ item.label }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <!-- DATE FILTER -->\r\n          <div\r\n            class=\"min-w-[340px] flex-auto\"\r\n            *ngIf=\"\r\n              $any(filterGroup).get('selectFilter')?.value?.arrange ===\r\n              'filterByDate'\r\n            \"\r\n          >\r\n            <div\r\n              class=\"flex flex-col items-stretch gap-3 sm:flex-row sm:items-center\"\r\n            >\r\n              <mat-form-field appearance=\"outline\" class=\"flex-1\">\r\n                <mat-label class=\"flex items-center gap-2\">\r\n                  <i class=\"fa fa-calendar text-gray-400\"></i>\r\n                  <span>Data Inicial</span>\r\n                </mat-label>\r\n                <input\r\n                  matInput\r\n                  (keyup.enter)=\"search()\"\r\n                  formControlName=\"initialDate\"\r\n                  [dropSpecialCharacters]=\"false\"\r\n                  mask=\"d0/M0/0000\"\r\n                  placeholder=\"DD/MM/AAAA\"\r\n                  maxlength=\"10\"\r\n                />\r\n              </mat-form-field>\r\n\r\n              <mat-form-field appearance=\"outline\" class=\"flex-1\">\r\n                <mat-label class=\"flex items-center gap-2\">\r\n                  <i class=\"fa fa-calendar text-gray-400\"></i>\r\n                  <span>Data Final</span>\r\n                </mat-label>\r\n                <input\r\n                  (keyup.enter)=\"search()\"\r\n                  matInput\r\n                  formControlName=\"finalDate\"\r\n                  [dropSpecialCharacters]=\"false\"\r\n                  mask=\"d0/M0/0000\"\r\n                  placeholder=\"DD/MM/AAAA\"\r\n                  maxlength=\"10\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- REMOVE FILTER BUTTON -->\r\n          <div *ngIf=\"filtersForm.length > 1\" class=\"ml-auto flex-shrink-0\">\r\n            <button\r\n              (click)=\"removeFilter(i)\"\r\n              class=\"flex h-10 w-10 items-center justify-center rounded-full transition-colors duration-300 hover:bg-red-100\"\r\n              matTooltip=\"Remover filtro\"\r\n            >\r\n              <i class=\"fa fa-trash text-red-500 hover:text-red-600\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- PANEL FOOTER: Add Filter & Sort -->\r\n      <div\r\n        class=\"-mb-2 flex flex-col items-center justify-between gap-4 border-t border-gray-200 pt-4 sm:flex-row\"\r\n      >\r\n        <!-- Add Filter Button -->\r\n        <div *ngIf=\"dropdownItems.length > 0\">\r\n          <button\r\n            (click)=\"addFilter()\"\r\n            class=\"transform rounded-full border-2 border-blue-300 bg-blue-50 px-6 py-2 text-sm font-medium text-blue-600 transition-all duration-300 hover:-translate-y-0.5 hover:border-blue-400 hover:bg-blue-100 hover:shadow-md\"\r\n            matTooltip=\"Adicionar novo filtro\"\r\n          >\r\n            <i class=\"fa fa-plus mr-2\"></i>\r\n            Adicionar Filtro\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Sort Dropdown -->\r\n        <div\r\n          class=\"w-full sm:w-auto sm:min-w-[250px]\"\r\n          *ngIf=\"sortableDropdownItems.length > 0\"\r\n        >\r\n          <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n            <mat-label>Ordenar por</mat-label>\r\n            <mat-select placeholder=\"Selecione...\" [formControl]=\"selectSort\">\r\n              <mat-option\r\n                *ngFor=\"let item of sortableDropdownItems\"\r\n                [value]=\"item\"\r\n              >\r\n                <div class=\"flex items-center gap-2\">\r\n                  <i class=\"fa fa-sort-alpha-down text-cyan-600\"></i>\r\n                  <span>{{ item.title }}</span>\r\n                </div>\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- SIMPLE SEARCH (for non-paginated tables) -->\r\n    <div\r\n      class=\"rounded-xl border border-gray-200 bg-white p-4 shadow-lg\"\r\n      *ngIf=\"data.pagination === false && hasFilterableColumn === true\"\r\n    >\r\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n        <mat-label class=\"flex items-center gap-2\">\r\n          <i class=\"fa fa-search text-blue-500\"></i>\r\n          Buscar\r\n        </mat-label>\r\n        <input\r\n          matInput\r\n          (keyup.enter)=\"search()\"\r\n          (keyup)=\"applyFilter(filterInput.value)\"\r\n          placeholder=\"Digite para filtrar...\"\r\n          #filterInput\r\n        />\r\n        <mat-icon matSuffix class=\"text-gray-500\">search</mat-icon>\r\n      </mat-form-field>\r\n      <button\r\n        *ngIf=\"data.actionButton\"\r\n        [ngClass]=\"\r\n          (data.actionButton.colorClass || 'bg-blue-500') +\r\n          ' float-right flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white hover:opacity-70'\r\n        \"\r\n        [routerLink]=\"data.actionButton.routerLink\"\r\n        (click)=\"\r\n          data.actionButton.method ? data.actionButton.method($event) : null\r\n        \"\r\n      >\r\n        <i *ngIf=\"data.actionButton.icon\" [class]=\"data.actionButton.icon\"></i>\r\n        {{ data.actionButton.label }}\r\n      </button>\r\n    </div>\r\n\r\n    <!-- FILTERS PANEL (for non-paginated tables) -->\r\n    <div\r\n      class=\"rounded-xl border border-gray-200 bg-white p-4 shadow-lg\"\r\n      *ngIf=\"data.pagination === false && dropdownItems.length > 0\"\r\n    >\r\n      <!-- FILTERS CONTENT -->\r\n      <div class=\"mb-4 space-y-3\" *ngIf=\"filtersForm.controls.length > 0\">\r\n        <div\r\n          [formGroup]=\"$any(filterGroup)\"\r\n          *ngFor=\"let filterGroup of filtersForm.controls; let i = index\"\r\n          class=\"flex flex-wrap items-center gap-3 rounded-lg border border-gray-200 p-2\"\r\n        >\r\n          <!-- FILTER TYPE SELECTOR -->\r\n          <div class=\"min-w-[200px] flex-1\" *ngIf=\"dropdownItems.length > 0\">\r\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n              <mat-label>Tipo de filtro</mat-label>\r\n              <mat-select\r\n                placeholder=\"Selecione o tipo...\"\r\n                formControlName=\"selectFilter\"\r\n                (selectionChange)=\"onSelectFilterChange()\"\r\n              >\r\n                <mat-option *ngFor=\"let item of dropdownItems\" [value]=\"item\">\r\n                  <div class=\"flex items-center gap-2\">\r\n                    <i\r\n                      [class]=\"item.icon || 'fa fa-filter'\"\r\n                      class=\"text-sm text-blue-500\"\r\n                    ></i>\r\n                    <span>{{ item.title }}</span>\r\n                  </div>\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <!-- TEXT FILTER -->\r\n          <div\r\n            class=\"min-w-[200px] flex-1\"\r\n            *ngIf=\"\r\n              $any(filterGroup).get('selectFilter')?.value?.arrange === 'filter'\r\n            \"\r\n          >\r\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n              <mat-label class=\"flex items-center gap-2\">\r\n                <i class=\"fa fa-search text-gray-400\"></i>\r\n                <span>{{\r\n                  $any(filterGroup).get(\"selectFilter\")?.value?.title ||\r\n                    \"Filtrar\"\r\n                }}</span>\r\n              </mat-label>\r\n              <input\r\n                (keyup.enter)=\"search()\"\r\n                formControlName=\"typeFilter\"\r\n                matInput\r\n                placeholder=\"Digite para filtrar...\"\r\n                #input\r\n              />\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <!-- DROPDOWN FILTER -->\r\n          <div\r\n            class=\"min-w-[200px] flex-1\"\r\n            *ngIf=\"\r\n              $any(filterGroup).get('selectFilter')?.value &&\r\n              $any(filterGroup)\r\n                .get('selectFilter')\r\n                ?.value.hasOwnProperty('items')\r\n            \"\r\n          >\r\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n              <mat-label>{{\r\n                $any(filterGroup).get(\"selectFilter\")?.value?.title ||\r\n                  \"Selecione\"\r\n              }}</mat-label>\r\n              <mat-select\r\n                placeholder=\"Selecione...\"\r\n                formControlName=\"selectItem\"\r\n                multiple\r\n              >\r\n                <mat-option\r\n                  *ngFor=\"\r\n                    let item of $any(filterGroup).get('selectFilter')?.value\r\n                      .items\r\n                  \"\r\n                  [value]=\"item\"\r\n                >\r\n                  {{ item.label }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n\r\n          <!-- DATE FILTER -->\r\n          <div\r\n            class=\"min-w-[340px] flex-auto\"\r\n            *ngIf=\"\r\n              $any(filterGroup).get('selectFilter')?.value?.arrange ===\r\n              'filterByDate'\r\n            \"\r\n          >\r\n            <div\r\n              class=\"flex flex-col items-stretch gap-3 sm:flex-row sm:items-center\"\r\n            >\r\n              <mat-form-field appearance=\"outline\" class=\"flex-1\">\r\n                <mat-label class=\"flex items-center gap-2\">\r\n                  <i class=\"fa fa-calendar text-gray-400\"></i>\r\n                  <span>Data Inicial</span>\r\n                </mat-label>\r\n                <input\r\n                  matInput\r\n                  (keyup.enter)=\"search()\"\r\n                  (blur)=\"onDateFilterChange()\"\r\n                  formControlName=\"initialDate\"\r\n                  [dropSpecialCharacters]=\"false\"\r\n                  mask=\"d0/M0/0000\"\r\n                  placeholder=\"DD/MM/AAAA\"\r\n                  maxlength=\"10\"\r\n                />\r\n              </mat-form-field>\r\n\r\n              <mat-form-field appearance=\"outline\" class=\"flex-1\">\r\n                <mat-label class=\"flex items-center gap-2\">\r\n                  <i class=\"fa fa-calendar text-gray-400\"></i>\r\n                  <span>Data Final</span>\r\n                </mat-label>\r\n                <input\r\n                  (keyup.enter)=\"search()\"\r\n                  (blur)=\"onDateFilterChange()\"\r\n                  matInput\r\n                  formControlName=\"finalDate\"\r\n                  [dropSpecialCharacters]=\"false\"\r\n                  mask=\"d0/M0/0000\"\r\n                  placeholder=\"DD/MM/AAAA\"\r\n                  maxlength=\"10\"\r\n                />\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- REMOVE FILTER BUTTON -->\r\n          <div *ngIf=\"filtersForm.length > 1\" class=\"ml-auto flex-shrink-0\">\r\n            <button\r\n              (click)=\"removeFilter(i)\"\r\n              class=\"flex h-10 w-10 items-center justify-center rounded-full transition-colors duration-300 hover:bg-red-100\"\r\n              matTooltip=\"Remover filtro\"\r\n            >\r\n              <i class=\"fa fa-trash text-red-500 hover:text-red-600\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- PANEL FOOTER: Add Filter & Actions -->\r\n      <div\r\n        class=\"-mb-2 flex flex-col items-center justify-between gap-4 border-t border-gray-200 pt-4 sm:flex-row\"\r\n      >\r\n        <!-- Add Filter Button -->\r\n        <div *ngIf=\"dropdownItems.length > 0\">\r\n          <button\r\n            (click)=\"addFilter()\"\r\n            class=\"transform rounded-full border-2 border-blue-300 bg-blue-50 px-6 py-2 text-sm font-medium text-blue-600 transition-all duration-300 hover:-translate-y-0.5 hover:border-blue-400 hover:bg-blue-100 hover:shadow-md\"\r\n            matTooltip=\"Adicionar novo filtro\"\r\n          >\r\n            <i class=\"fa fa-plus mr-2\"></i>\r\n            Adicionar Filtro\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Action Buttons -->\r\n        <div class=\"flex flex-wrap gap-3\">\r\n          <button\r\n            (click)=\"search()\"\r\n            type=\"button\"\r\n            class=\"flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700\"\r\n            matTooltip=\"Aplicar filtros\"\r\n          >\r\n            <i class=\"fa fa-search\"></i>\r\n            Aplicar\r\n          </button>\r\n\r\n          <button\r\n            (click)=\"resetFilter()\"\r\n            class=\"flex items-center gap-2 rounded-lg bg-red-500 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-red-600\"\r\n            matTooltip=\"Limpar filtros\"\r\n          >\r\n            <i class=\"fas fa-redo-alt\"></i>\r\n            Resetar\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"flex flex-col\">\r\n      <div\r\n        class=\"mx-auto flex flex-col\"\r\n        *ngIf=\"data.tabs && data.tabs.tabsData && data.tabs.tabsData.length > 0\"\r\n      >\r\n        <!-- Calcular quantos grupos de 6 tabs existem -->\r\n        <ng-container\r\n          *ngFor=\"\r\n            let groupIndex of getTabGroups(data.tabs.tabsData);\r\n            let i = index\r\n          \"\r\n        >\r\n          <div class=\"mx-auto flex flex-row\">\r\n            <ng-container\r\n              *ngFor=\"\r\n                let tab of getTabGroup(data.tabs.tabsData, groupIndex);\r\n                let j = index\r\n              \"\r\n            >\r\n              <button\r\n                class=\"border-2 border-gray-300 bg-gray-200 px-4 py-2 font-medium transition hover:brightness-95\"\r\n                [ngClass]=\"\r\n                  isTabSelected(getRealTabIndex(i, j))\r\n                    ? 'border-b-0 brightness-110'\r\n                    : ''\r\n                \"\r\n                (click)=\"onTableSelected(i, j)\"\r\n              >\r\n                {{ tab.label }}\r\n                <span\r\n                  *ngIf=\"tab.counter !== undefined\"\r\n                  class=\"ml-2 text-xs font-bold\"\r\n                  [ngClass]=\"tab.counterClass\"\r\n                >\r\n                  {{ tab.counter }}\r\n                </span>\r\n              </button>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"mat-elevation-z8 w-full overflow-x-auto rounded-xl\">\r\n        <table\r\n          mat-table\r\n          [dataSource]=\"dataSource\"\r\n          matSort\r\n          #sort=\"matSort\"\r\n          matSortActive=\"createdAt\"\r\n          matSortDirection=\"desc\"\r\n        >\r\n          <ng-container\r\n            *ngFor=\"let col of data.displayedColumns\"\r\n            matColumnDef=\"{{ col.property }}\"\r\n          >\r\n            <ng-container *matHeaderCellDef>\r\n              <!-- IF THE COLUMN IS NOT SORTABLE, THEN DON'T SHOW THE SORT BUTTONS -->\r\n              <th\r\n                *ngIf=\"!col.isSortable || data.pagination === true\"\r\n                mat-header-cell\r\n                [ngClass]=\"\r\n                  (data.color?.bg ? ' ' + $any(data.color).bg : '') +\r\n                  (data.color?.text ? ' ' + $any(data.color).text : '')\r\n                \"\r\n              >\r\n                {{ col.title }}\r\n              </th>\r\n              <!-- IF THE COLUMN IS SORTABLE, THEN SHOW THE SORT BUTTONS -->\r\n              <th\r\n                *ngIf=\"col.isSortable && data.pagination === false\"\r\n                mat-header-cell\r\n                mat-sort-header\r\n                [ngClass]=\"\r\n                  (data.color?.bg ? ' ' + $any(data.color).bg : '') +\r\n                  (data.color?.text ? ' ' + $any(data.color).text : '')\r\n                \"\r\n              >\r\n                {{ col.title }}\r\n              </th>\r\n              <td\r\n                mat-cell\r\n                *matCellDef=\"let row\"\r\n                (click)=\"col.method ? col.method(row) : null\"\r\n                (mouseenter)=\"onCellMouseEnter($event, row, col)\"\r\n                (mouseleave)=\"onCellMouseLeave()\"\r\n                (mousemove)=\"onCellMouseMove($event)\"\r\n              >\r\n                <!-- CHECK IF THE COLUMN MUST BE DISPLAYED -->\r\n                <span *ngIf=\"!col.image && !col.iconClass && !col.method\">\r\n                  <ng-container>\r\n                    <span\r\n                      *ngIf=\"\r\n                        col.charLimit &&\r\n                          row[col.property] &&\r\n                          row[col.property].length > col.charLimit;\r\n                        else withinLimit\r\n                      \"\r\n                    >\r\n                      <a\r\n                        *ngIf=\"col.hasLink === true\"\r\n                        [href]=\"row[col.property]\"\r\n                        target=\"_blank\"\r\n                      >\r\n                        {{ getDisplayValue(col, row) }}\r\n                      </a>\r\n                      <a\r\n                        *ngIf=\"col.hasLink && isString(col.hasLink)\"\r\n                        [href]=\"col.hasLink\"\r\n                        target=\"_blank\"\r\n                      >\r\n                        {{ getDisplayValue(col, row) }}\r\n                      </a>\r\n                      <span\r\n                        *ngIf=\"col.hasLink !== true && !isString(col.hasLink)\"\r\n                      >\r\n                        {{ getDisplayValue(col, row) }}\r\n                      </span>\r\n                    </span>\r\n                  </ng-container>\r\n                  <ng-template #withinLimit>\r\n                    <a\r\n                      *ngIf=\"col.hasLink === true\"\r\n                      [href]=\"row[col.property]\"\r\n                      target=\"_blank\"\r\n                    >\r\n                      {{ getDisplayValue(col, row, true) }}\r\n                    </a>\r\n                    <a\r\n                      *ngIf=\"col.hasLink && isString(col.hasLink)\"\r\n                      [href]=\"col.hasLink\"\r\n                      target=\"_blank\"\r\n                    >\r\n                      {{ getDisplayValue(col, row, true) }}\r\n                    </a>\r\n                    <span\r\n                      *ngIf=\"col.hasLink !== true && !isString(col.hasLink)\"\r\n                    >\r\n                      {{ getDisplayValue(col, row, true) }}\r\n                    </span>\r\n                  </ng-template>\r\n                </span>\r\n                <!------------------- IMAGE ------------------>\r\n                <img\r\n                  *ngIf=\"\r\n                    col.image && col.image.path && !col.iconClass && !col.method\r\n                  \"\r\n                  [src]=\"col.image.path + '/' + row[col.property]\"\r\n                  [ngClass]=\"col.image.class\"\r\n                  alt=\"Imagem\"\r\n                />\r\n                <img\r\n                  *ngIf=\"\r\n                    col.image && col.image.url && !col.iconClass && !col.method\r\n                  \"\r\n                  [src]=\"row[col.property]\"\r\n                  [ngClass]=\"col.image.class\"\r\n                  alt=\"Imagem\"\r\n                />\r\n                <ng-container *ngIf=\"col.iconClass\">\r\n                  <button\r\n                    *ngFor=\"let iconClass of col.iconClass\"\r\n                    (click)=\"\r\n                      iconClass.buttonMethod\r\n                        ? iconClass.buttonMethod(row, $event)\r\n                        : $event.stopPropagation()\r\n                    \"\r\n                  >\r\n                    <span\r\n                      [ngClass]=\"iconClass.class\"\r\n                      *ngIf=\"\r\n                        iconClass.condition === undefined ||\r\n                        (iconClass.condition !== undefined &&\r\n                          $any(iconClass.condition)(row))\r\n                      \"\r\n                      >{{ iconClass.text }}</span\r\n                    >\r\n                  </button>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n          <tr mat-header-row *matHeaderRowDef=\"columnProperties\"></tr>\r\n          <tr\r\n            [ngClass]=\"{\r\n              'example-element-row': data.isNotClickable === true,\r\n              'example-element-row cursor-pointer': !data.isNotClickable\r\n            }\"\r\n            mat-row\r\n            *matRowDef=\"let row; columns: columnProperties\"\r\n            (click)=\"goToDetails(row)\"\r\n          ></tr>\r\n\r\n          <!-- ROW SHOWN WHEN THERE IS NO MATCHING DATA. -->\r\n          <tr class=\"mat-row\" *matNoDataRow>\r\n            <td *ngIf=\"!isLoading\" class=\"mat-cell p-4\" colspan=\"4\">\r\n              Nenhum resultado encontrado para a busca\r\n            </td>\r\n          </tr>\r\n        </table>\r\n\r\n        <div class=\"flex justify-center\" *ngIf=\"isLoading\">\r\n          <mat-spinner></mat-spinner>\r\n        </div>\r\n\r\n        <div class=\"paginator-container\">\r\n          <mat-paginator\r\n            #paginator\r\n            [pageSizeOptions]=\"[25, 50, 100]\"\r\n            [pageSize]=\"pageSize\"\r\n            [length]=\"totalItems\"\r\n            showFirstLastButtons\r\n            aria-label=\"Select page of periodic elements\"\r\n            (page)=\"onPageChange($event)\"\r\n            [ngClass]=\"{\r\n              'hide-length':\r\n                ['filter', 'filterByDate', 'equals'].includes(\r\n                  this.currentArrange\r\n                ) || this.data.filterFn,\r\n              'hide-next-button': !hasNextPage && data.pagination === true,\r\n              'hide-last-button':\r\n                (!hasNextPage && data.pagination === true) || this.data.filterFn\r\n            }\"\r\n          >\r\n          </mat-paginator>\r\n          <div\r\n            *ngIf=\"\r\n              !isLoading &&\r\n              dataSource?.data &&\r\n              dataSource.data.length > 0 &&\r\n              data?.filterFn\r\n            \"\r\n            class=\"page-number-display\"\r\n          >\r\n            {{ currentPageNumber }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- TOOLTIP PERSONALIZADO -->\r\n  <div\r\n    *ngIf=\"showTooltip\"\r\n    class=\"fixed z-50 max-w-md break-words rounded-lg bg-gray-800 px-3 py-2 text-sm text-white shadow-lg\"\r\n    [style.left.px]=\"tooltipPosition.x\"\r\n    [style.top.px]=\"tooltipPosition.y\"\r\n    [style.pointer-events]=\"'none'\"\r\n  >\r\n    {{ tooltipContent }}\r\n  </div>\r\n</div>\r\n", styles: ["::ng-deep .hide-length .mat-mdc-paginator-range-label{display:none}::ng-deep .hide-next-button .mat-mdc-tooltip-trigger.mat-mdc-paginator-navigation-next.mdc-icon-button.mat-mdc-icon-button.mat-unthemed.mat-mdc-button-base{visibility:hidden}::ng-deep .hide-next-button .mat-mdc-tooltip-trigger.mat-mdc-paginator-navigation-last.mdc-icon-button.mat-mdc-icon-button.mat-unthemed.mat-mdc-button-base.ng-star-inserted{visibility:hidden}::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field.ng-tns-c162-1.mdc-text-field--filled{width:25dvw}::ng-deep .custom-filter .mat-mdc-text-field-wrapper{width:20dvw;max-width:300px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: TableService }, { type: i1.AngularFirestore }]; }, propDecorators: { data: [{
                 type: Input
             }], downloadTable: [{
@@ -1762,8 +2078,10 @@ NgFirebaseTableKxpModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0"
         MatTooltipModule,
         MatProgressSpinnerModule,
         MatIconModule,
-        MatDialogModule], exports: [NgFirebaseTableKxpComponent, TableComponent] });
-NgFirebaseTableKxpModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgFirebaseTableKxpModule, imports: [CommonModule,
+        MatDialogModule,
+        NgxMaskDirective,
+        NgxMaskPipe], exports: [NgFirebaseTableKxpComponent, TableComponent] });
+NgFirebaseTableKxpModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgFirebaseTableKxpModule, providers: [provideNgxMask()], imports: [CommonModule,
         ReactiveFormsModule,
         FormsModule,
         RouterModule,
@@ -1796,8 +2114,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         MatProgressSpinnerModule,
                         MatIconModule,
                         MatDialogModule,
+                        NgxMaskDirective,
+                        NgxMaskPipe,
                     ],
                     exports: [NgFirebaseTableKxpComponent, TableComponent],
+                    providers: [provideNgxMask()],
                 }]
         }] });