ng-firebase-table-kxp 1.0.8 → 1.0.9

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

@@ -35,1980 +35,2082 @@ import * as i1 from '@angular/fire/compat/firestore';
 import * as i3 from 'ngx-toastr';
 import * as i12 from '@angular/material/core';
 
-class NgFirebaseTableKxpComponent {
-}
-NgFirebaseTableKxpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgFirebaseTableKxpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgFirebaseTableKxpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NgFirebaseTableKxpComponent, selector: "lib-ng-firebase-table-kxp", ngImport: i0, template: ` <p>ng-firebase-table-kxp works!</p> `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgFirebaseTableKxpComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-ng-firebase-table-kxp', template: ` <p>ng-firebase-table-kxp works!</p> ` }]
+class NgFirebaseTableKxpComponent {
+}
+NgFirebaseTableKxpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgFirebaseTableKxpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgFirebaseTableKxpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NgFirebaseTableKxpComponent, selector: "lib-ng-firebase-table-kxp", ngImport: i0, template: ` <p>ng-firebase-table-kxp works!</p> `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgFirebaseTableKxpComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-ng-firebase-table-kxp', template: ` <p>ng-firebase-table-kxp works!</p> ` }]
         }] });
 
-class TableService {
-    constructor(ngFire, dialog, toastr) {
-        this.ngFire = ngFire;
-        this.dialog = dialog;
-        this.toastr = toastr;
-        this.operators = {
-            '==': (a, b) => a === b,
-            '!=': (a, b) => a !== b,
-            '>': (a, b) => a > b,
-            '<': (a, b) => a < b,
-            '>=': (a, b) => a >= b,
-            '<=': (a, b) => a <= b,
-            in: (a, b) => Array.isArray(b) && b.includes(a),
-            'not-in': (a, b) => Array.isArray(b) && !b.includes(a),
-            'array-contains': (a, b) => Array.isArray(a) && a.includes(b),
-            'array-contains-any': (a, b) => Array.isArray(a) &&
-                Array.isArray(b) &&
-                b.some((item) => a.includes(item)),
-            includes: (a, b) => a.includes(b), // Para strings ou arrays
-        };
-    }
-    async getItems(collection) {
-        try {
-            const querySnapshot = await collection.get();
-            return querySnapshot.docs.map((doc) => {
-                return { ...doc.data(), id: doc.id };
-            });
-        }
-        catch (error) {
-            console.warn('Collection não encontrada:', error);
-            return [];
-        }
-    }
-    async executeQuery(params) {
-        if (params.filterFn) {
-            // Lógica com filtro no cliente (filterFn)
-            const BATCH_FETCH_SIZE = params.batchSize;
-            const GOAL_SIZE = params.batchSize + 1;
-            if (params.navigation === 'forward' || params.navigation === 'reload') {
-                if (params.navigation === 'reload' && params.doc) {
-                    params.doc.lastDoc = null;
-                }
-                let lastDocCursor = params.doc ? params.doc.lastDoc : null;
-                let pageResults = [];
-                let allFetchedDocs = [];
-                let hasMoreDocsInDb = true;
-                while (pageResults.length < GOAL_SIZE && hasMoreDocsInDb) {
-                    let query = this.ngFire.collection(params.collection).ref;
-                    query = this.applyFilters(query, params.arrange, params.conditions);
-                    if (lastDocCursor) {
-                        query = query.startAfter(lastDocCursor);
-                    }
-                    query = query.limit(BATCH_FETCH_SIZE);
-                    const snapshot = await query.get();
-                    if (snapshot.empty) {
-                        hasMoreDocsInDb = false;
-                        break;
-                    }
-                    lastDocCursor = snapshot.docs[snapshot.docs.length - 1];
-                    allFetchedDocs.push(...snapshot.docs);
-                    const batchUsers = snapshot.docs
-                        .map((doc) => ({
-                        id: doc.id,
-                        ...doc.data(),
-                    }))
-                        .filter(params.filterFn);
-                    pageResults.push(...batchUsers);
-                    if (snapshot.size < BATCH_FETCH_SIZE) {
-                        hasMoreDocsInDb = false;
-                    }
-                }
-                const hasNextPage = pageResults.length > params.batchSize;
-                const finalItems = pageResults.slice(0, params.batchSize);
-                const firstDocOfPage = allFetchedDocs.find((doc) => doc.id === finalItems[0]?.id) || null;
-                const lastDocOfPage = allFetchedDocs.find((doc) => doc.id === finalItems[finalItems.length - 1]?.id) || null;
-                return {
-                    items: finalItems,
-                    filterLength: null,
-                    firstDoc: firstDocOfPage,
-                    lastDoc: lastDocOfPage,
-                    hasNextPage: hasNextPage,
-                    hasPreviousPage: !!(params.doc && params.doc.lastDoc) &&
-                        params.navigation !== 'reload',
-                    currentClientPageIndex: undefined,
-                };
-            }
-            // Lógica para trás (backward)
-            else if (params.navigation === 'backward') {
-                if (!params.doc || !params.doc.firstDoc) {
-                    return {
-                        items: [],
-                        filterLength: null,
-                        firstDoc: null,
-                        lastDoc: null,
-                        hasNextPage: true,
-                        hasPreviousPage: false,
-                        currentClientPageIndex: undefined,
-                    };
-                }
-                let pageResults = [];
-                let allFetchedDocs = [];
-                let hasMoreDocsInDb = true;
-                let boundaryDoc = params.doc.firstDoc;
-                while (pageResults.length < GOAL_SIZE && hasMoreDocsInDb) {
-                    let query = this.ngFire.collection(params.collection).ref;
-                    query = this.applyFilters(query, params.arrange, params.conditions);
-                    query = query.endBefore(boundaryDoc);
-                    query = query.limitToLast(BATCH_FETCH_SIZE);
-                    const snapshot = await query.get();
-                    if (snapshot.empty) {
-                        hasMoreDocsInDb = false;
-                        break;
-                    }
-                    boundaryDoc = snapshot.docs[0];
-                    allFetchedDocs = [...snapshot.docs, ...allFetchedDocs];
-                    const batchUsers = snapshot.docs
-                        .map((doc) => ({
-                        id: doc.id,
-                        ...doc.data(),
-                    }))
-                        .filter(params.filterFn);
-                    pageResults = [...batchUsers, ...pageResults];
-                    if (snapshot.size < BATCH_FETCH_SIZE) {
-                        hasMoreDocsInDb = false;
-                    }
-                }
-                const finalItems = pageResults.slice(0, params.batchSize);
-                const firstDocOfPage = allFetchedDocs.find((doc) => doc.id === finalItems[0]?.id) || null;
-                const lastDocOfPage = allFetchedDocs.find((doc) => doc.id === finalItems[finalItems.length - 1]?.id) || null;
-                return {
-                    items: finalItems,
-                    filterLength: null,
-                    firstDoc: firstDocOfPage,
-                    lastDoc: lastDocOfPage,
-                    hasNextPage: true,
-                    currentClientPageIndex: undefined,
-                };
-            }
-        }
-        else {
-            let items = [];
-            let docs = [];
-            let hasNextPage = false;
-            let filterLength = null;
-            let query = this.ngFire.collection(params.collection).ref;
-            if (params.conditions) {
-                params.conditions.forEach((c) => {
-                    if (c.operator === '!=') {
-                        query = query.orderBy(c.firestoreProperty);
-                    }
-                });
-            }
-            query = this.applyFilters(query, params.arrange, params.conditions);
-            if (params.navigation === 'reload') {
-                query = query.limit(params.batchSize + 1);
-                if (params.doc && params.doc.firstDoc) {
-                    query = query.startAt(params.doc.firstDoc);
-                }
-            }
-            else if (params.navigation === 'forward') {
-                query = query.limit(params.batchSize + 1);
-                if (params.doc && params.doc.lastDoc) {
-                    query = query.startAfter(params.doc.lastDoc);
-                }
-            }
-            else {
-                // backward
-                query = query.limitToLast(params.batchSize + 1);
-                if (params.doc && params.doc.firstDoc) {
-                    query = query.endBefore(params.doc.firstDoc);
-                }
-            }
-            const itemCol = await query.get();
-            itemCol.docs.forEach((doc) => docs.push(doc));
-            const itemPromises = docs.map(async (item) => {
-                const itemData = item.data();
-                items.push({ id: item.id, ...itemData });
-            });
-            let lastDoc = docs[docs.length - 1] || null;
-            let firstDoc = docs[0];
-            if ((items.length > params.batchSize && params.navigation === 'forward') ||
-                (params.navigation === 'reload' && items.length > params.batchSize)) {
-                lastDoc = docs[docs.length - 2] || null;
-                items.pop();
-                hasNextPage = true;
-            }
-            if (items.length > params.batchSize && params.navigation === 'backward') {
-                firstDoc = docs[1];
-                items.shift();
-                hasNextPage = true;
-            }
-            await Promise.all(itemPromises);
-            return {
-                items,
-                filterLength,
-                lastDoc,
-                firstDoc,
-                hasNextPage,
-                currentClientPageIndex: undefined,
-            };
-        }
-        // Fallback para garantir que sempre retornamos algo
-        return {
-            items: [],
-            filterLength: null,
-            firstDoc: null,
-            lastDoc: null,
-            hasNextPage: false,
-            currentClientPageIndex: undefined,
-        };
-    }
-    applyFilters(query, arrange, conditions) {
-        if (conditions) {
-            conditions.map((cond) => {
-                query = query.where(cond.firestoreProperty, cond.operator, cond.dashProperty);
-            });
-        }
-        let hasFilterSpecificOrderBy = false;
-        let appliedOrderByField = null;
-        const equalsFilters = arrange.filters.filter((f) => f.arrange === 'equals' && f.filter);
-        const otherFilters = arrange.filters.filter((f) => f.arrange !== 'equals');
-        const equalsGroupedByProperty = equalsFilters.reduce((acc, current) => {
-            const prop = current.filter.property;
-            if (!acc[prop]) {
-                acc[prop] = [];
-            }
-            acc[prop].push(current.filter.filtering);
-            return acc;
-        }, {});
-        for (const prop in equalsGroupedByProperty) {
-            const values = equalsGroupedByProperty[prop];
-            if (values.length > 0) {
-                query = query.where(prop, 'in', values);
-            }
-        }
-        otherFilters.forEach((filterItem) => {
-            // Aplicar filtragem por busca
-            if (filterItem.filter?.filtering &&
-                filterItem.filter?.property !== '' &&
-                filterItem.arrange === 'filter') {
-                query = query
-                    .where(filterItem.filter.property, '>=', filterItem.filter.filtering.trim().toUpperCase())
-                    .where(filterItem.filter.property, '<=', filterItem.filter.filtering.trim().toUpperCase() + '\uf8ff');
-                if (!hasFilterSpecificOrderBy) {
-                    query = query.orderBy(filterItem.filter.property);
-                    hasFilterSpecificOrderBy = true;
-                    appliedOrderByField = filterItem.filter.property;
-                }
-            }
-            // Aplicar filtro do tipo "filterByDate"
-            if (filterItem.dateFilter && filterItem.arrange === 'filterByDate') {
-                query = query
-                    .where(arrange.sortBy.field, '>=', filterItem.dateFilter.initial)
-                    .where(arrange.sortBy.field, '<=', filterItem.dateFilter.final);
-                if (!hasFilterSpecificOrderBy) {
-                    query = query.orderBy(arrange.sortBy.field);
-                    hasFilterSpecificOrderBy = true;
-                    appliedOrderByField = arrange.sortBy.field;
-                }
-            }
-        });
-        // Aplicar sortBy
-        if (arrange.sortBy && arrange.sortBy.field && arrange.sortBy.order) {
-            if (appliedOrderByField !== arrange.sortBy.field) {
-                query = query.orderBy(arrange.sortBy.field, arrange.sortBy.order);
-            }
-        }
-        return query;
-    }
-    getIdFilter(params) {
-        if (!params.arrange?.filters)
-            return null;
-        const idFilter = params.arrange.filters.find((f) => f.arrange === 'filter' &&
-            f.filter?.property === 'id' &&
-            f.filter?.filtering);
-        return idFilter?.filter?.filtering?.trim() || null;
-    }
-    async getDocumentById(collection, docId) {
-        try {
-            const docRef = this.ngFire.collection(collection).doc(docId);
-            const docSnapshot = await docRef.get().toPromise();
-            if (docSnapshot && docSnapshot.exists) {
-                return {
-                    id: docSnapshot.id,
-                    ...docSnapshot.data(),
-                };
-            }
-            return null;
-        }
-        catch (error) {
-            console.warn('Erro ao buscar documento por ID:', error);
-            return null;
-        }
-    }
-    async searchByIdPartial(params, searchTerm) {
-        const exactMatch = await 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 = {
-            ...params,
-            arrange: {
-                ...params.arrange,
-                filters: params.arrange.filters.filter((f) => !(f.arrange === 'filter' && f.filter?.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 (params.arrange?.sortBy?.field && params.arrange?.sortBy?.order) {
-            query = query.orderBy(params.arrange.sortBy.field, params.arrange.sortBy.order);
-        }
-        const snapshot = await query.get();
-        let items = snapshot.docs
-            .map((doc) => ({
-            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) => f.arrange !== 'equals' &&
-            (f.arrange !== 'filter' || f.filter?.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) => {
-            if (filterItem.arrange === 'filter' &&
-                filterItem.filter?.filtering &&
-                filterItem.filter?.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) {
-        const hasConditions = params.conditions && params.conditions.length > 0;
-        const hasArrangeFilters = params.arrange?.filters && params.arrange.filters.length > 0;
-        const hasSortBy = params.arrange?.sortBy?.field;
-        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;
-        }
-        if (hasConditions && hasArrangeFilters) {
-            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;
-    }
-    async getPaginated(params) {
-        const idFilterValue = this.getIdFilter(params);
-        if (idFilterValue) {
-            const result = await this.searchByIdPartial(params, idFilterValue);
-            return result;
-        }
-        // Detectar preventivamente se deve usar fallback
-        if (this.shouldUseClientSideFallback(params)) {
-            await this.trackMissingIndexPreventive(params.collection, params.arrange, params.conditions);
-            const result = await this.executeClientSideQuery(params);
-            console.log('📊 [TABLE] Resultados paginados via fallback client-side:', {
-                totalItems: result.filterLength,
-                returnedItems: result.items.length,
-                hasNextPage: result.hasNextPage,
-                currentPage: (result.currentClientPageIndex || 0) + 1,
-            });
-            return result;
-        }
-        try {
-            const result = await this.executeQuery(params);
-            console.log('📊 [TABLE] Resultados paginados via Firestore:', {
-                totalItems: result.filterLength || 'N/A',
-                returnedItems: result.items.length,
-                hasNextPage: result.hasNextPage,
-            });
-            return result;
-        }
-        catch (error) {
-            if (error && error.code === 'failed-precondition') {
-                await this.trackMissingIndex(error, params.collection, params.arrange, params.conditions);
-                const result = await this.executeClientSideQuery(params);
-                console.log('📊 [TABLE] Resultados paginados via fallback (erro de index):', {
-                    totalItems: result.filterLength,
-                    returnedItems: result.items.length,
-                    hasNextPage: result.hasNextPage,
-                    currentPage: (result.currentClientPageIndex || 0) + 1,
-                });
-                return result;
-            }
-            else if (error && error.code === 'invalid-argument') {
-                await this.trackMissingIndex(error, params.collection, params.arrange, params.conditions);
-                const result = await this.executeClientSideQuery(params);
-                console.log('📊 [TABLE] Resultados paginados via fallback (argumento inválido):', {
-                    totalItems: result.filterLength,
-                    returnedItems: result.items.length,
-                    hasNextPage: result.hasNextPage,
-                    currentPage: (result.currentClientPageIndex || 0) + 1,
-                });
-                return result;
-            }
-            else {
-                throw error;
-            }
-        }
-    }
-    async executeClientSideQuery(params) {
-        // Otimizar usando pelo menos uma cláusula .where() quando possível
-        let query = this.ngFire.collection(params.collection).ref;
-        let appliedCondition = null;
-        let hasAppliedWhereClause = false;
-        // Primeiro, tenta aplicar condições simples
-        if (params.conditions && params.conditions.length > 0) {
-            const simpleCondition = params.conditions.find((cond) => ['==', '>', '<', '>=', '<=', 'in', 'array-contains'].includes(cond.operator));
-            if (simpleCondition) {
-                query = query.where(simpleCondition.firestoreProperty, simpleCondition.operator, simpleCondition.dashProperty);
-                appliedCondition = simpleCondition;
-                hasAppliedWhereClause = true;
-            }
-        }
-        // Se não há condições disponíveis, tenta aplicar filtros do arrange
-        let appliedFirestoreFilter = null;
-        if (!hasAppliedWhereClause && params.arrange?.filters) {
-            // 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;
-                // Marcar TODOS os equals filters dessa propriedade como aplicados
-                appliedFirestoreFilter = 'all-equals';
-            }
-            else if (properties.length === 0) {
-                const otherFilter = params.arrange.filters.find((f) => (f.arrange === 'filter' &&
-                    f.filter?.filtering &&
-                    f.filter?.property) ||
-                    (f.arrange === 'filterByDate' &&
-                        f.dateFilter?.initial &&
-                        f.dateFilter?.final));
-                if (otherFilter) {
-                    if (otherFilter.arrange === 'filter' && otherFilter.filter) {
-                        const filterValue = otherFilter.filter.filtering
-                            .trim()
-                            .toUpperCase();
-                        query = query
-                            .where(otherFilter.filter.property, '>=', filterValue)
-                            .where(otherFilter.filter.property, '<=', filterValue + '\uf8ff');
-                        hasAppliedWhereClause = true;
-                        appliedFirestoreFilter = otherFilter;
-                    }
-                    else if (otherFilter.arrange === 'filterByDate' &&
-                        otherFilter.dateFilter &&
-                        params.arrange.sortBy?.field) {
-                        query = query
-                            .where(params.arrange.sortBy.field, '>=', otherFilter.dateFilter.initial)
-                            .where(params.arrange.sortBy.field, '<=', otherFilter.dateFilter.final);
-                        hasAppliedWhereClause = true;
-                        appliedFirestoreFilter = otherFilter;
-                    }
-                }
-            }
-        }
-        const allDocsSnapshot = await query.get();
-        let items = allDocsSnapshot.docs.map((doc) => ({
-            id: doc.id,
-            ...doc.data(),
-        }));
-        // Aplicar condições restantes
-        if (params.conditions) {
-            const remainingConditions = params.conditions.filter((cond) => cond !== appliedCondition);
-            if (remainingConditions.length > 0) {
-                const operators = this.operators;
-                items = items.filter((item) => {
-                    return remainingConditions.every((cond) => {
-                        const operatorFn = operators[cond.operator];
-                        return operatorFn
-                            ? operatorFn(item[cond.firestoreProperty], cond.dashProperty)
-                            : false;
-                    });
-                });
-            }
-        }
-        const { filters, sortBy } = params.arrange;
-        // Track which filter was already applied in Firestore to avoid double filtering
-        if (hasAppliedWhereClause && !appliedCondition && params.arrange?.filters) {
-            const equalsFilter = params.arrange.filters.find((f) => f.arrange === 'equals' && f.filter?.filtering);
-            if (equalsFilter) {
-                appliedFirestoreFilter = equalsFilter;
-            }
-            else {
-                appliedFirestoreFilter = params.arrange.filters.find((f) => (f.arrange === 'filter' &&
-                    f.filter?.filtering &&
-                    f.filter?.property) ||
-                    (f.arrange === 'filterByDate' &&
-                        f.dateFilter?.initial &&
-                        f.dateFilter?.final));
-            }
-        }
-        const equalsFilters = filters.filter((f) => f.arrange === 'equals');
-        const otherFilters = filters.filter((f) => f.arrange !== 'equals');
-        // 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 Object.entries(groupedByProperty).every(([prop, values]) => {
-                    return values.includes(item[prop]);
-                });
-            });
-        }
-        otherFilters.forEach((filterItem) => {
-            if (appliedFirestoreFilter === filterItem) {
-                return;
-            }
-            if (filterItem.arrange === 'filter' &&
-                filterItem.filter?.filtering &&
-                filterItem.filter?.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);
-                });
-            }
-            if (filterItem.arrange === 'filterByDate' &&
-                filterItem.dateFilter?.initial &&
-                filterItem.dateFilter?.final &&
-                sortBy.field) {
-                items = items.filter((item) => {
-                    try {
-                        const fieldValue = item[sortBy.field];
-                        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 >= filterItem.dateFilter.initial &&
-                            itemDate <= filterItem.dateFilter.final);
-                    }
-                    catch (error) {
-                        console.warn('Erro ao processar filtro de data para o item:', item.id, error);
-                        return false;
-                    }
-                });
-            }
-        });
-        // Aplicar filterFn se existir
-        if (params.filterFn) {
-            items = items.filter(params.filterFn);
-        }
-        if (sortBy && sortBy.field && sortBy.order) {
-            items.sort((a, b) => {
-                const valA = a[sortBy.field];
-                const valB = b[sortBy.field];
-                if (valA < valB) {
-                    return sortBy.order === 'asc' ? -1 : 1;
-                }
-                if (valA > valB) {
-                    return sortBy.order === 'asc' ? 1 : -1;
-                }
-                return 0;
-            });
-        }
-        // Implementação adequada da paginação
-        let currentClientPageIndex = 0;
-        // Determinar a página atual baseada na navegação
-        if (params.navigation === 'reload') {
-            currentClientPageIndex = 0;
-        }
-        else {
-            currentClientPageIndex = params.clientPageIndex || 0;
-        }
-        const pageSize = params.batchSize;
-        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,
-            lastDoc: null,
-            firstDoc: null,
-            hasNextPage: hasNextPage,
-            hasPreviousPage: hasPreviousPage,
-            currentClientPageIndex: currentClientPageIndex,
-            totalPages: totalPages,
-        };
-    }
-    async getItemsData(collection, arrange, conditions = undefined) {
-        try {
-            let query = this.ngFire.collection(collection).ref;
-            query = this.applyFilters(query, arrange, conditions);
-            const snapshot = await query.get();
-            return await Promise.all(snapshot.docs.map(async (doc) => {
-                const data = doc.data();
-                const id = doc.id;
-                return {
-                    id,
-                    ...data,
-                };
-            }));
-        }
-        catch (e) {
-            throw e;
-        }
-    }
-    async deleteIndex(id, col) {
-        try {
-            const batch = this.ngFire.firestore.batch();
-            const docRef = this.ngFire.collection(col).doc(id);
-            const docSnapshot = (await firstValueFrom(docRef.get()));
-            const doc = docSnapshot.data();
-            batch.delete(docRef.ref);
-            if (doc && typeof doc.index === 'number') {
-                await this.reindex(doc.index, col, batch);
-            }
-            await batch.commit();
-            this.toastr.success('Item excluído com sucesso!');
-            return true;
-        }
-        catch (e) {
-            const error = e;
-            console.error('Erro ao deletar item:', error);
-            this.toastr.error('Erro ao deletar item.');
-            return false;
-        }
-    }
-    async reindex(index, col, batch) {
-        try {
-            const snapshot = (await firstValueFrom(this.ngFire.collection(col).get()));
-            const docs = snapshot.docs;
-            for (let doc of docs) {
-                const data = doc.data();
-                if (data && typeof data.index === 'number' && data.index > index) {
-                    data.index--;
-                    const docRef = this.ngFire.collection(col).doc(doc.id).ref;
-                    batch.update(docRef, data);
-                }
-            }
-        }
-        catch (error) {
-            console.error('Erro ao reindexar:', error);
-        }
-        return;
-    }
-    dateFormatValidator() {
-        return (control) => {
-            if (!control.value) {
-                return null;
-            }
-            const dateStr = control.value.trim();
-            const datePattern = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
-            if (!datePattern.test(dateStr)) {
-                return { invalidFormat: true };
-            }
-            const parts = dateStr.split('/');
-            const day = parts[0].padStart(2, '0');
-            const month = parts[1].padStart(2, '0');
-            const year = parts[2];
-            const normalizedDate = `${day}/${month}/${year}`;
-            const date = moment(normalizedDate, 'DD/MM/YYYY', true);
-            if (!date.isValid()) {
-                return { invalidDate: true };
-            }
-            return null;
-        };
-    }
-    async updateIndex(index, id, col) {
-        await this.ngFire.collection(col).doc(id).update({ index });
-    }
-    /**
-     * Extrai o link de criação de índice da mensagem de erro do Firestore
-     */
-    extractIndexLink(error) {
-        if (!error || !error.message)
-            return null;
-        const linkMatch = error.message.match(/(https:\/\/console\.firebase\.google\.com\/[^\s]+)/);
-        return linkMatch ? linkMatch[1] : null;
-    }
-    /**
-     * Rastreia índices ausentes ao usar fallback preventivo
-     */
-    async trackMissingIndexPreventive(collection, arrange, conditions = undefined) {
-        try {
-            const querySignature = this.generateQuerySignature(collection, arrange, conditions);
-            const docId = `${collection}_${querySignature}`;
-            const indexLink = this.generateIndexLink(collection, arrange, conditions);
-            const indexInstructions = this.generateIndexInstructions(collection, arrange, conditions);
-            const trackingData = {
-                collection,
-                indexLink,
-                indexInstructions,
-                arrange: {
-                    sortBy: arrange.sortBy,
-                    filters: arrange.filters?.map((f) => ({
-                        arrange: f.arrange,
-                        property: f.filter?.property || null,
-                        dateField: f.arrange === 'filterByDate' ? arrange.sortBy?.field : null,
-                    })) || [],
-                },
-                conditions: conditions?.map((c) => ({
-                    property: c.firestoreProperty,
-                    operator: c.operator,
-                })) || [],
-                errorMessage: `Fallback preventivo usado para a collection ${collection}. A query exigiria índice composto.`,
-                updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
-            };
-            console.log('📄 [INDEX LINK] Dados que serão salvos no documento:', {
-                docId,
-                collection: trackingData.collection,
-                indexLink: trackingData.indexLink,
-                arrange: trackingData.arrange,
-                conditions: trackingData.conditions,
-                errorMessage: trackingData.errorMessage,
-            });
-            const docRef = this.ngFire.collection('missingIndexes').doc(docId);
-            const doc = await docRef.get().toPromise();
-            if (doc && doc.exists) {
-                await docRef.update({
-                    count: firebase.firestore.FieldValue.increment(1),
-                    updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
-                    lastError: trackingData.errorMessage,
-                });
-            }
-            else {
-                await docRef.set({
-                    ...trackingData,
-                    count: 1,
-                    createdAt: firebase.firestore.FieldValue.serverTimestamp(),
-                });
-            }
-        }
-        catch (trackingError) {
-            console.warn('Falha ao rastrear fallback preventivo:', trackingError);
-        }
-    }
-    /**
-     * Gera uma assinatura única para uma query
-     */
-    generateQuerySignature(collection, arrange, conditions = undefined) {
-        const signature = {
-            collection,
-            sortBy: arrange.sortBy,
-            filters: arrange.filters?.map((f) => ({
-                arrange: f.arrange,
-                property: f.filter?.property || null,
-            })) || [],
-            conditions: conditions?.map((c) => ({
-                property: c.firestoreProperty,
-                operator: c.operator,
-            })) || [],
-        };
-        return btoa(JSON.stringify(signature))
-            .replace(/[^a-zA-Z0-9]/g, '')
-            .substring(0, 20);
-    }
-    /**
-     * Gera instruções claras para criar o índice manualmente
-     */
-    generateIndexInstructions(collection, arrange, conditions = undefined) {
-        const instructions = {
-            summary: '',
-            collection: collection,
-            fields: [],
-            queryExample: '',
-            stepByStep: [],
-            notes: [],
-        };
-        const fields = [];
-        if (conditions && conditions.length > 0) {
-            conditions.forEach((condition) => {
-                if (condition.firestoreProperty) {
-                    fields.push({
-                        field: condition.firestoreProperty,
-                        order: 'Ascending',
-                        type: 'WHERE clause',
-                        operator: condition.operator,
-                        description: `Filtrar por ${condition.firestoreProperty} usando operador ${condition.operator}`,
-                    });
-                }
-            });
-        }
-        if (arrange.filters && arrange.filters.length > 0) {
-            arrange.filters.forEach((filter) => {
-                if (filter.filter?.property) {
-                    fields.push({
-                        field: filter.filter.property,
-                        order: 'Ascending',
-                        type: 'WHERE clause (filter)',
-                        operator: filter.arrange === 'filter' ? 'CONTAINS' : 'RANGE',
-                        description: `Filtrar por ${filter.filter.property} usando filtro ${filter.arrange}`,
-                    });
-                }
-            });
-        }
-        if (arrange.sortBy?.field) {
-            fields.push({
-                field: arrange.sortBy.field,
-                order: arrange.sortBy.order === 'desc' ? 'Descending' : 'Ascending',
-                type: 'ORDER BY clause',
-                operator: 'N/A',
-                description: `Ordenar resultados por ${arrange.sortBy.field} em ordem ${arrange.sortBy.order}`,
-            });
-        }
-        instructions.fields = fields;
-        const fieldNames = fields.map((f) => f.field).join(' + ');
-        instructions.summary = `Criar índice composto para ${collection}: ${fieldNames}`;
-        let queryExample = `db.collection('${collection}')`;
-        fields.forEach((field, index) => {
-            if (field.type.includes('WHERE')) {
-                if (field.operator === '==') {
-                    queryExample += `\n  .where('${field.field}', '==', 'value')`;
-                }
-                else if (field.operator === 'CONTAINS') {
-                    queryExample += `\n  .where('${field.field}', '>=', 'searchText')`;
-                }
-                else {
-                    queryExample += `\n  .where('${field.field}', '${field.operator}', 'value')`;
-                }
-            }
-        });
-        const orderByField = fields.find((f) => f.type.includes('ORDER BY'));
-        if (orderByField) {
-            queryExample += `\n  .orderBy('${orderByField.field}', '${orderByField.order.toLowerCase()}')`;
-        }
-        instructions.queryExample = queryExample;
-        instructions.stepByStep = [
-            '1. Ir para Firebase Console → Firestore → Indexes',
-            '2. Clicar em "Create Index"',
-            `3. Definir Collection ID: ${collection}`,
-            '4. Configurar campos nesta ORDEM EXATA:',
-            ...fields.map((field, index) => `   ${index + 1}. Campo: ${field.field}, Order: ${field.order}, Array: No`),
-            '5. Definir Query scopes: Collection',
-            '6. Clicar em "Create" e aguardar conclusão',
-        ];
-        instructions.notes = [
-            '⚠️ A ordem dos campos é CRÍTICA - deve corresponder exatamente à ordem da query',
-            '⚠️ As cláusulas WHERE devem vir ANTES do campo ORDER BY',
-            '⚠️ Este índice só funcionará para queries com esta combinação EXATA de campos',
-            '⚠️ A criação do índice pode levar vários minutos',
-        ];
-        return instructions;
-    }
-    /**
-     * Gera um link de índice baseado na estrutura da query
-     */
-    generateIndexLink(collection, arrange, conditions = undefined) {
-        try {
-            const indexFields = [];
-            if (conditions && conditions.length > 0) {
-                conditions.forEach((condition) => {
-                    if (condition.firestoreProperty) {
-                        indexFields.push(condition.firestoreProperty);
-                    }
-                });
-            }
-            if (arrange.filters && arrange.filters.length > 0) {
-                arrange.filters.forEach((filter) => {
-                    if (filter.filter?.property) {
-                        indexFields.push(filter.filter.property);
-                    }
-                });
-            }
-            if (arrange.sortBy?.field) {
-                indexFields.push(arrange.sortBy.field);
-            }
-            if (indexFields.length > 1) {
-                const baseUrl = 'https://console.firebase.google.com/project/toppayy-dev/firestore/indexes';
-                const queryParams = new URLSearchParams({
-                    create_composite: `collection=${collection}&fields=${indexFields.join(',')}`,
-                });
-                const finalLink = `${baseUrl}?${queryParams.toString()}`;
-                return finalLink;
-            }
-            return null;
-        }
-        catch (error) {
-            console.warn('Falha ao gerar link de índice:', error);
-            return null;
-        }
-    }
-    async trackMissingIndex(error, collection, arrange, conditions = undefined) {
-        try {
-            const indexLink = this.extractIndexLink(error);
-            if (!indexLink)
-                return;
-            const linkHash = btoa(indexLink)
-                .replace(/[^a-zA-Z0-9]/g, '')
-                .substring(0, 20);
-            const docId = `${collection}_${linkHash}`;
-            const indexInstructions = this.generateIndexInstructions(collection, arrange, conditions);
-            const trackingData = {
-                collection,
-                indexLink,
-                indexInstructions,
-                arrange: {
-                    sortBy: arrange.sortBy,
-                    filters: arrange.filters?.map((f) => ({
-                        arrange: f.arrange,
-                        property: f.filter?.property || null,
-                        dateField: f.arrange === 'filterByDate' ? arrange.sortBy?.field : null,
-                    })) || [],
-                },
-                conditions: conditions?.map((c) => ({
-                    property: c.firestoreProperty,
-                    operator: c.operator,
-                })) || [],
-                errorMessage: error.message,
-                updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
-            };
-            const docRef = this.ngFire.collection('missingIndexes').doc(docId);
-            const doc = await docRef.get().toPromise();
-            if (doc && doc.exists) {
-                await docRef.update({
-                    count: firebase.firestore.FieldValue.increment(1),
-                    updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
-                    lastError: error.message,
-                });
-            }
-            else {
-                await docRef.set({
-                    ...trackingData,
-                    count: 1,
-                    createdAt: firebase.firestore.FieldValue.serverTimestamp(),
-                });
-            }
-        }
-        catch (trackingError) {
-            console.warn('Falha ao rastrear índice ausente:', trackingError);
-        }
-    }
-}
-TableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableService, deps: [{ token: i1.AngularFirestore, optional: true }, { token: i2.MatDialog, optional: true }, { token: i3.ToastrService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-TableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i1.AngularFirestore, decorators: [{
-                    type: Optional
-                }] }, { type: i2.MatDialog, decorators: [{
-                    type: Optional
-                }] }, { type: i3.ToastrService, decorators: [{
-                    type: Optional
+class TableService {
+    constructor(ngFire, dialog, toastr) {
+        this.ngFire = ngFire;
+        this.dialog = dialog;
+        this.toastr = toastr;
+        this.operators = {
+            '==': (a, b) => a === b,
+            '!=': (a, b) => a !== b,
+            '>': (a, b) => a > b,
+            '<': (a, b) => a < b,
+            '>=': (a, b) => a >= b,
+            '<=': (a, b) => a <= b,
+            in: (a, b) => Array.isArray(b) && b.includes(a),
+            'not-in': (a, b) => Array.isArray(b) && !b.includes(a),
+            'array-contains': (a, b) => Array.isArray(a) && a.includes(b),
+            'array-contains-any': (a, b) => Array.isArray(a) &&
+                Array.isArray(b) &&
+                b.some((item) => a.includes(item)),
+            includes: (a, b) => a.includes(b), // Para strings ou arrays
+        };
+    }
+    async getItems(collection) {
+        try {
+            const querySnapshot = await collection.get();
+            return querySnapshot.docs.map((doc) => {
+                return { ...doc.data(), id: doc.id };
+            });
+        }
+        catch (error) {
+            console.warn('Collection não encontrada:', error);
+            return [];
+        }
+    }
+    async executeQuery(params) {
+        if (params.filterFn) {
+            // Lógica com filtro no cliente (filterFn)
+            const BATCH_FETCH_SIZE = params.batchSize;
+            const GOAL_SIZE = params.batchSize + 1;
+            if (params.navigation === 'forward' || params.navigation === 'reload') {
+                if (params.navigation === 'reload' && params.doc) {
+                    params.doc.lastDoc = null;
+                }
+                let lastDocCursor = params.doc ? params.doc.lastDoc : null;
+                let pageResults = [];
+                let allFetchedDocs = [];
+                let hasMoreDocsInDb = true;
+                while (pageResults.length < GOAL_SIZE && hasMoreDocsInDb) {
+                    let query = this.ngFire.collection(params.collection).ref;
+                    query = this.applyFilters(query, params.arrange, params.conditions);
+                    if (lastDocCursor) {
+                        query = query.startAfter(lastDocCursor);
+                    }
+                    query = query.limit(BATCH_FETCH_SIZE);
+                    const snapshot = await query.get();
+                    if (snapshot.empty) {
+                        hasMoreDocsInDb = false;
+                        break;
+                    }
+                    lastDocCursor = snapshot.docs[snapshot.docs.length - 1];
+                    allFetchedDocs.push(...snapshot.docs);
+                    const batchUsers = snapshot.docs
+                        .map((doc) => ({
+                        id: doc.id,
+                        ...doc.data(),
+                    }))
+                        .filter(params.filterFn);
+                    pageResults.push(...batchUsers);
+                    if (snapshot.size < BATCH_FETCH_SIZE) {
+                        hasMoreDocsInDb = false;
+                    }
+                }
+                const hasNextPage = pageResults.length > params.batchSize;
+                const finalItems = pageResults.slice(0, params.batchSize);
+                const firstDocOfPage = allFetchedDocs.find((doc) => doc.id === finalItems[0]?.id) || null;
+                const lastDocOfPage = allFetchedDocs.find((doc) => doc.id === finalItems[finalItems.length - 1]?.id) || null;
+                return {
+                    items: finalItems,
+                    filterLength: null,
+                    firstDoc: firstDocOfPage,
+                    lastDoc: lastDocOfPage,
+                    hasNextPage: hasNextPage,
+                    hasPreviousPage: !!(params.doc && params.doc.lastDoc) &&
+                        params.navigation !== 'reload',
+                    currentClientPageIndex: undefined,
+                };
+            }
+            // Lógica para trás (backward)
+            else if (params.navigation === 'backward') {
+                if (!params.doc || !params.doc.firstDoc) {
+                    return {
+                        items: [],
+                        filterLength: null,
+                        firstDoc: null,
+                        lastDoc: null,
+                        hasNextPage: true,
+                        hasPreviousPage: false,
+                        currentClientPageIndex: undefined,
+                    };
+                }
+                let pageResults = [];
+                let allFetchedDocs = [];
+                let hasMoreDocsInDb = true;
+                let boundaryDoc = params.doc.firstDoc;
+                while (pageResults.length < GOAL_SIZE && hasMoreDocsInDb) {
+                    let query = this.ngFire.collection(params.collection).ref;
+                    query = this.applyFilters(query, params.arrange, params.conditions);
+                    query = query.endBefore(boundaryDoc);
+                    query = query.limitToLast(BATCH_FETCH_SIZE);
+                    const snapshot = await query.get();
+                    if (snapshot.empty) {
+                        hasMoreDocsInDb = false;
+                        break;
+                    }
+                    boundaryDoc = snapshot.docs[0];
+                    allFetchedDocs = [...snapshot.docs, ...allFetchedDocs];
+                    const batchUsers = snapshot.docs
+                        .map((doc) => ({
+                        id: doc.id,
+                        ...doc.data(),
+                    }))
+                        .filter(params.filterFn);
+                    pageResults = [...batchUsers, ...pageResults];
+                    if (snapshot.size < BATCH_FETCH_SIZE) {
+                        hasMoreDocsInDb = false;
+                    }
+                }
+                const finalItems = pageResults.slice(0, params.batchSize);
+                const firstDocOfPage = allFetchedDocs.find((doc) => doc.id === finalItems[0]?.id) || null;
+                const lastDocOfPage = allFetchedDocs.find((doc) => doc.id === finalItems[finalItems.length - 1]?.id) || null;
+                return {
+                    items: finalItems,
+                    filterLength: null,
+                    firstDoc: firstDocOfPage,
+                    lastDoc: lastDocOfPage,
+                    hasNextPage: true,
+                    currentClientPageIndex: undefined,
+                };
+            }
+        }
+        else {
+            let items = [];
+            let docs = [];
+            let hasNextPage = false;
+            let filterLength = null;
+            let query = this.ngFire.collection(params.collection).ref;
+            if (params.conditions) {
+                params.conditions.forEach((c) => {
+                    if (c.operator === '!=') {
+                        query = query.orderBy(c.firestoreProperty);
+                    }
+                });
+            }
+            query = this.applyFilters(query, params.arrange, params.conditions);
+            if (params.navigation === 'reload') {
+                query = query.limit(params.batchSize + 1);
+                if (params.doc && params.doc.firstDoc) {
+                    query = query.startAt(params.doc.firstDoc);
+                }
+            }
+            else if (params.navigation === 'forward') {
+                query = query.limit(params.batchSize + 1);
+                if (params.doc && params.doc.lastDoc) {
+                    query = query.startAfter(params.doc.lastDoc);
+                }
+            }
+            else {
+                // backward
+                query = query.limitToLast(params.batchSize + 1);
+                if (params.doc && params.doc.firstDoc) {
+                    query = query.endBefore(params.doc.firstDoc);
+                }
+            }
+            const itemCol = await query.get();
+            itemCol.docs.forEach((doc) => docs.push(doc));
+            const itemPromises = docs.map(async (item) => {
+                const itemData = item.data();
+                items.push({ id: item.id, ...itemData });
+            });
+            let lastDoc = docs[docs.length - 1] || null;
+            let firstDoc = docs[0];
+            if ((items.length > params.batchSize && params.navigation === 'forward') ||
+                (params.navigation === 'reload' && items.length > params.batchSize)) {
+                lastDoc = docs[docs.length - 2] || null;
+                items.pop();
+                hasNextPage = true;
+            }
+            if (items.length > params.batchSize && params.navigation === 'backward') {
+                firstDoc = docs[1];
+                items.shift();
+                hasNextPage = true;
+            }
+            await Promise.all(itemPromises);
+            return {
+                items,
+                filterLength,
+                lastDoc,
+                firstDoc,
+                hasNextPage,
+                currentClientPageIndex: undefined,
+            };
+        }
+        // Fallback para garantir que sempre retornamos algo
+        return {
+            items: [],
+            filterLength: null,
+            firstDoc: null,
+            lastDoc: null,
+            hasNextPage: false,
+            currentClientPageIndex: undefined,
+        };
+    }
+    applyFilters(query, arrange, conditions) {
+        if (conditions) {
+            conditions.map((cond) => {
+                query = query.where(cond.firestoreProperty, cond.operator, cond.dashProperty);
+            });
+        }
+        let hasFilterSpecificOrderBy = false;
+        let appliedOrderByField = null;
+        const equalsFilters = arrange.filters.filter((f) => f.arrange === 'equals' && f.filter);
+        const otherFilters = arrange.filters.filter((f) => f.arrange !== 'equals');
+        const equalsGroupedByProperty = equalsFilters.reduce((acc, current) => {
+            const prop = current.filter.property;
+            if (!acc[prop]) {
+                acc[prop] = [];
+            }
+            acc[prop].push(current.filter.filtering);
+            return acc;
+        }, {});
+        for (const prop in equalsGroupedByProperty) {
+            const values = equalsGroupedByProperty[prop];
+            if (values.length > 0) {
+                query = query.where(prop, 'in', values);
+            }
+        }
+        otherFilters.forEach((filterItem) => {
+            // Aplicar filtragem por busca
+            if (filterItem.filter?.filtering &&
+                filterItem.filter?.property !== '' &&
+                filterItem.arrange === 'filter') {
+                query = query
+                    .where(filterItem.filter.property, '>=', filterItem.filter.filtering.trim().toUpperCase())
+                    .where(filterItem.filter.property, '<=', filterItem.filter.filtering.trim().toUpperCase() + '\uf8ff');
+                if (!hasFilterSpecificOrderBy) {
+                    query = query.orderBy(filterItem.filter.property);
+                    hasFilterSpecificOrderBy = true;
+                    appliedOrderByField = filterItem.filter.property;
+                }
+            }
+            // Aplicar filtro do tipo "filterByDate"
+            if (filterItem.dateFilter && filterItem.arrange === 'filterByDate') {
+                query = query
+                    .where(arrange.sortBy.field, '>=', filterItem.dateFilter.initial)
+                    .where(arrange.sortBy.field, '<=', filterItem.dateFilter.final);
+                if (!hasFilterSpecificOrderBy) {
+                    query = query.orderBy(arrange.sortBy.field);
+                    hasFilterSpecificOrderBy = true;
+                    appliedOrderByField = arrange.sortBy.field;
+                }
+            }
+        });
+        // Aplicar sortBy
+        if (arrange.sortBy && arrange.sortBy.field && arrange.sortBy.order) {
+            if (appliedOrderByField !== arrange.sortBy.field) {
+                query = query.orderBy(arrange.sortBy.field, arrange.sortBy.order);
+            }
+        }
+        return query;
+    }
+    getIdFilter(params) {
+        if (!params.arrange?.filters)
+            return null;
+        const idFilter = params.arrange.filters.find((f) => f.arrange === 'filter' &&
+            f.filter?.property === 'id' &&
+            f.filter?.filtering);
+        return idFilter?.filter?.filtering?.trim() || null;
+    }
+    async getDocumentById(collection, docId) {
+        try {
+            const docRef = this.ngFire.collection(collection).doc(docId);
+            const docSnapshot = await docRef.get().toPromise();
+            if (docSnapshot && docSnapshot.exists) {
+                return {
+                    id: docSnapshot.id,
+                    ...docSnapshot.data(),
+                };
+            }
+            return null;
+        }
+        catch (error) {
+            console.warn('Erro ao buscar documento por ID:', error);
+            return null;
+        }
+    }
+    async searchByIdPartial(params, searchTerm) {
+        const exactMatch = await 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 = {
+            ...params,
+            arrange: {
+                ...params.arrange,
+                filters: params.arrange.filters.filter((f) => !(f.arrange === 'filter' && f.filter?.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 (params.arrange?.sortBy?.field && params.arrange?.sortBy?.order) {
+            query = query.orderBy(params.arrange.sortBy.field, params.arrange.sortBy.order);
+        }
+        const snapshot = await query.get();
+        let items = snapshot.docs
+            .map((doc) => ({
+            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) => f.arrange !== 'equals' &&
+            (f.arrange !== 'filter' || f.filter?.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) => {
+            if (filterItem.arrange === 'filter' &&
+                filterItem.filter?.filtering &&
+                filterItem.filter?.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) {
+        const hasConditions = params.conditions && params.conditions.length > 0;
+        const hasArrangeFilters = params.arrange?.filters && params.arrange.filters.length > 0;
+        const hasSortBy = params.arrange?.sortBy?.field;
+        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;
+        }
+        if (hasConditions && hasArrangeFilters) {
+            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;
+    }
+    async getPaginated(params) {
+        const idFilterValue = this.getIdFilter(params);
+        if (idFilterValue) {
+            const result = await this.searchByIdPartial(params, idFilterValue);
+            return result;
+        }
+        // Detectar preventivamente se deve usar fallback
+        if (this.shouldUseClientSideFallback(params)) {
+            await this.trackMissingIndexPreventive(params.collection, params.arrange, params.conditions);
+            const result = await this.executeClientSideQuery(params);
+            console.log('📊 [TABLE] Resultados paginados via fallback client-side:', {
+                totalItems: result.filterLength,
+                returnedItems: result.items.length,
+                hasNextPage: result.hasNextPage,
+                currentPage: (result.currentClientPageIndex || 0) + 1,
+            });
+            return result;
+        }
+        try {
+            const result = await this.executeQuery(params);
+            console.log('📊 [TABLE] Resultados paginados via Firestore:', {
+                totalItems: result.filterLength || 'N/A',
+                returnedItems: result.items.length,
+                hasNextPage: result.hasNextPage,
+            });
+            return result;
+        }
+        catch (error) {
+            if (error && error.code === 'failed-precondition') {
+                await this.trackMissingIndex(error, params.collection, params.arrange, params.conditions);
+                const result = await this.executeClientSideQuery(params);
+                console.log('📊 [TABLE] Resultados paginados via fallback (erro de index):', {
+                    totalItems: result.filterLength,
+                    returnedItems: result.items.length,
+                    hasNextPage: result.hasNextPage,
+                    currentPage: (result.currentClientPageIndex || 0) + 1,
+                });
+                return result;
+            }
+            else if (error && error.code === 'invalid-argument') {
+                await this.trackMissingIndex(error, params.collection, params.arrange, params.conditions);
+                const result = await this.executeClientSideQuery(params);
+                console.log('📊 [TABLE] Resultados paginados via fallback (argumento inválido):', {
+                    totalItems: result.filterLength,
+                    returnedItems: result.items.length,
+                    hasNextPage: result.hasNextPage,
+                    currentPage: (result.currentClientPageIndex || 0) + 1,
+                });
+                return result;
+            }
+            else {
+                throw error;
+            }
+        }
+    }
+    async executeClientSideQuery(params) {
+        // Otimizar usando pelo menos uma cláusula .where() quando possível
+        let query = this.ngFire.collection(params.collection).ref;
+        let appliedCondition = null;
+        let hasAppliedWhereClause = false;
+        // Primeiro, tenta aplicar condições simples
+        if (params.conditions && params.conditions.length > 0) {
+            const simpleCondition = params.conditions.find((cond) => ['==', '>', '<', '>=', '<=', 'in', 'array-contains'].includes(cond.operator));
+            if (simpleCondition) {
+                query = query.where(simpleCondition.firestoreProperty, simpleCondition.operator, simpleCondition.dashProperty);
+                appliedCondition = simpleCondition;
+                hasAppliedWhereClause = true;
+            }
+        }
+        // Se não há condições disponíveis, tenta aplicar filtros do arrange
+        let appliedFirestoreFilter = null;
+        if (!hasAppliedWhereClause && params.arrange?.filters) {
+            // 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;
+                // Marcar TODOS os equals filters dessa propriedade como aplicados
+                appliedFirestoreFilter = 'all-equals';
+            }
+            else if (properties.length === 0) {
+                const otherFilter = params.arrange.filters.find((f) => (f.arrange === 'filter' &&
+                    f.filter?.filtering &&
+                    f.filter?.property) ||
+                    (f.arrange === 'filterByDate' &&
+                        f.dateFilter?.initial &&
+                        f.dateFilter?.final));
+                if (otherFilter) {
+                    if (otherFilter.arrange === 'filter' && otherFilter.filter) {
+                        const filterValue = otherFilter.filter.filtering
+                            .trim()
+                            .toUpperCase();
+                        query = query
+                            .where(otherFilter.filter.property, '>=', filterValue)
+                            .where(otherFilter.filter.property, '<=', filterValue + '\uf8ff');
+                        hasAppliedWhereClause = true;
+                        appliedFirestoreFilter = otherFilter;
+                    }
+                    else if (otherFilter.arrange === 'filterByDate' &&
+                        otherFilter.dateFilter &&
+                        params.arrange.sortBy?.field) {
+                        query = query
+                            .where(params.arrange.sortBy.field, '>=', otherFilter.dateFilter.initial)
+                            .where(params.arrange.sortBy.field, '<=', otherFilter.dateFilter.final);
+                        hasAppliedWhereClause = true;
+                        appliedFirestoreFilter = otherFilter;
+                    }
+                }
+            }
+        }
+        const allDocsSnapshot = await query.get();
+        let items = allDocsSnapshot.docs.map((doc) => ({
+            id: doc.id,
+            ...doc.data(),
+        }));
+        // Aplicar condições restantes
+        if (params.conditions) {
+            const remainingConditions = params.conditions.filter((cond) => cond !== appliedCondition);
+            if (remainingConditions.length > 0) {
+                const operators = this.operators;
+                items = items.filter((item) => {
+                    return remainingConditions.every((cond) => {
+                        const operatorFn = operators[cond.operator];
+                        return operatorFn
+                            ? operatorFn(item[cond.firestoreProperty], cond.dashProperty)
+                            : false;
+                    });
+                });
+            }
+        }
+        const { filters, sortBy } = params.arrange;
+        // Track which filter was already applied in Firestore to avoid double filtering
+        if (hasAppliedWhereClause && !appliedCondition && params.arrange?.filters) {
+            const equalsFilter = params.arrange.filters.find((f) => f.arrange === 'equals' && f.filter?.filtering);
+            if (equalsFilter) {
+                appliedFirestoreFilter = equalsFilter;
+            }
+            else {
+                appliedFirestoreFilter = params.arrange.filters.find((f) => (f.arrange === 'filter' &&
+                    f.filter?.filtering &&
+                    f.filter?.property) ||
+                    (f.arrange === 'filterByDate' &&
+                        f.dateFilter?.initial &&
+                        f.dateFilter?.final));
+            }
+        }
+        const equalsFilters = filters.filter((f) => f.arrange === 'equals');
+        const otherFilters = filters.filter((f) => f.arrange !== 'equals');
+        // 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 Object.entries(groupedByProperty).every(([prop, values]) => {
+                    return values.includes(item[prop]);
+                });
+            });
+        }
+        otherFilters.forEach((filterItem) => {
+            if (appliedFirestoreFilter === filterItem) {
+                return;
+            }
+            if (filterItem.arrange === 'filter' &&
+                filterItem.filter?.filtering &&
+                filterItem.filter?.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);
+                });
+            }
+            if (filterItem.arrange === 'filterByDate' &&
+                filterItem.dateFilter?.initial &&
+                filterItem.dateFilter?.final &&
+                sortBy.field) {
+                items = items.filter((item) => {
+                    try {
+                        const fieldValue = item[sortBy.field];
+                        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 >= filterItem.dateFilter.initial &&
+                            itemDate <= filterItem.dateFilter.final);
+                    }
+                    catch (error) {
+                        console.warn('Erro ao processar filtro de data para o item:', item.id, error);
+                        return false;
+                    }
+                });
+            }
+        });
+        // Aplicar filterFn se existir
+        if (params.filterFn) {
+            items = items.filter(params.filterFn);
+        }
+        if (sortBy && sortBy.field && sortBy.order) {
+            items.sort((a, b) => {
+                const valA = a[sortBy.field];
+                const valB = b[sortBy.field];
+                if (valA < valB) {
+                    return sortBy.order === 'asc' ? -1 : 1;
+                }
+                if (valA > valB) {
+                    return sortBy.order === 'asc' ? 1 : -1;
+                }
+                return 0;
+            });
+        }
+        // Implementação adequada da paginação
+        let currentClientPageIndex = 0;
+        // Determinar a página atual baseada na navegação
+        if (params.navigation === 'reload') {
+            currentClientPageIndex = 0;
+        }
+        else {
+            currentClientPageIndex = params.clientPageIndex || 0;
+        }
+        const pageSize = params.batchSize;
+        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,
+            lastDoc: null,
+            firstDoc: null,
+            hasNextPage: hasNextPage,
+            hasPreviousPage: hasPreviousPage,
+            currentClientPageIndex: currentClientPageIndex,
+            totalPages: totalPages,
+        };
+    }
+    async getItemsData(collection, arrange, conditions = undefined) {
+        try {
+            let query = this.ngFire.collection(collection).ref;
+            query = this.applyFilters(query, arrange, conditions);
+            const snapshot = await query.get();
+            return await Promise.all(snapshot.docs.map(async (doc) => {
+                const data = doc.data();
+                const id = doc.id;
+                return {
+                    id,
+                    ...data,
+                };
+            }));
+        }
+        catch (e) {
+            throw e;
+        }
+    }
+    async deleteIndex(id, col) {
+        try {
+            const batch = this.ngFire.firestore.batch();
+            const docRef = this.ngFire.collection(col).doc(id);
+            const docSnapshot = (await firstValueFrom(docRef.get()));
+            const doc = docSnapshot.data();
+            batch.delete(docRef.ref);
+            if (doc && typeof doc.index === 'number') {
+                await this.reindex(doc.index, col, batch);
+            }
+            await batch.commit();
+            this.toastr.success('Item excluído com sucesso!');
+            return true;
+        }
+        catch (e) {
+            const error = e;
+            console.error('Erro ao deletar item:', error);
+            this.toastr.error('Erro ao deletar item.');
+            return false;
+        }
+    }
+    async reindex(index, col, batch) {
+        try {
+            const snapshot = (await firstValueFrom(this.ngFire.collection(col).get()));
+            const docs = snapshot.docs;
+            for (let doc of docs) {
+                const data = doc.data();
+                if (data && typeof data.index === 'number' && data.index > index) {
+                    data.index--;
+                    const docRef = this.ngFire.collection(col).doc(doc.id).ref;
+                    batch.update(docRef, data);
+                }
+            }
+        }
+        catch (error) {
+            console.error('Erro ao reindexar:', error);
+        }
+        return;
+    }
+    dateFormatValidator() {
+        return (control) => {
+            if (!control.value) {
+                return null;
+            }
+            const dateStr = control.value.trim();
+            const datePattern = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
+            if (!datePattern.test(dateStr)) {
+                return { invalidFormat: true };
+            }
+            const parts = dateStr.split('/');
+            const day = parts[0].padStart(2, '0');
+            const month = parts[1].padStart(2, '0');
+            const year = parts[2];
+            const normalizedDate = `${day}/${month}/${year}`;
+            const date = moment(normalizedDate, 'DD/MM/YYYY', true);
+            if (!date.isValid()) {
+                return { invalidDate: true };
+            }
+            return null;
+        };
+    }
+    async updateIndex(index, id, col) {
+        await this.ngFire.collection(col).doc(id).update({ index });
+    }
+    /**
+     * Extrai o link de criação de índice da mensagem de erro do Firestore
+     */
+    extractIndexLink(error) {
+        if (!error || !error.message)
+            return null;
+        const linkMatch = error.message.match(/(https:\/\/console\.firebase\.google\.com\/[^\s]+)/);
+        return linkMatch ? linkMatch[1] : null;
+    }
+    /**
+     * Rastreia índices ausentes ao usar fallback preventivo
+     */
+    async trackMissingIndexPreventive(collection, arrange, conditions = undefined) {
+        try {
+            const querySignature = this.generateQuerySignature(collection, arrange, conditions);
+            const docId = `${collection}_${querySignature}`;
+            const indexLink = this.generateIndexLink(collection, arrange, conditions);
+            const indexInstructions = this.generateIndexInstructions(collection, arrange, conditions);
+            const trackingData = {
+                collection,
+                indexLink,
+                indexInstructions,
+                arrange: {
+                    sortBy: arrange.sortBy,
+                    filters: arrange.filters?.map((f) => ({
+                        arrange: f.arrange,
+                        property: f.filter?.property || null,
+                        dateField: f.arrange === 'filterByDate' ? arrange.sortBy?.field : null,
+                    })) || [],
+                },
+                conditions: conditions?.map((c) => ({
+                    property: c.firestoreProperty,
+                    operator: c.operator,
+                })) || [],
+                errorMessage: `Fallback preventivo usado para a collection ${collection}. A query exigiria índice composto.`,
+                updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
+            };
+            console.log('📄 [INDEX LINK] Dados que serão salvos no documento:', {
+                docId,
+                collection: trackingData.collection,
+                indexLink: trackingData.indexLink,
+                arrange: trackingData.arrange,
+                conditions: trackingData.conditions,
+                errorMessage: trackingData.errorMessage,
+            });
+            const docRef = this.ngFire.collection('missingIndexes').doc(docId);
+            const doc = await docRef.get().toPromise();
+            if (doc && doc.exists) {
+                await docRef.update({
+                    count: firebase.firestore.FieldValue.increment(1),
+                    updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
+                    lastError: trackingData.errorMessage,
+                });
+            }
+            else {
+                await docRef.set({
+                    ...trackingData,
+                    count: 1,
+                    createdAt: firebase.firestore.FieldValue.serverTimestamp(),
+                });
+            }
+        }
+        catch (trackingError) {
+            console.warn('Falha ao rastrear fallback preventivo:', trackingError);
+        }
+    }
+    /**
+     * Gera uma assinatura única para uma query
+     */
+    generateQuerySignature(collection, arrange, conditions = undefined) {
+        const signature = {
+            collection,
+            sortBy: arrange.sortBy,
+            filters: arrange.filters?.map((f) => ({
+                arrange: f.arrange,
+                property: f.filter?.property || null,
+            })) || [],
+            conditions: conditions?.map((c) => ({
+                property: c.firestoreProperty,
+                operator: c.operator,
+            })) || [],
+        };
+        return btoa(JSON.stringify(signature))
+            .replace(/[^a-zA-Z0-9]/g, '')
+            .substring(0, 20);
+    }
+    /**
+     * Gera instruções claras para criar o índice manualmente
+     */
+    generateIndexInstructions(collection, arrange, conditions = undefined) {
+        const instructions = {
+            summary: '',
+            collection: collection,
+            fields: [],
+            queryExample: '',
+            stepByStep: [],
+            notes: [],
+        };
+        const fields = [];
+        if (conditions && conditions.length > 0) {
+            conditions.forEach((condition) => {
+                if (condition.firestoreProperty) {
+                    fields.push({
+                        field: condition.firestoreProperty,
+                        order: 'Ascending',
+                        type: 'WHERE clause',
+                        operator: condition.operator,
+                        description: `Filtrar por ${condition.firestoreProperty} usando operador ${condition.operator}`,
+                    });
+                }
+            });
+        }
+        if (arrange.filters && arrange.filters.length > 0) {
+            arrange.filters.forEach((filter) => {
+                if (filter.filter?.property) {
+                    fields.push({
+                        field: filter.filter.property,
+                        order: 'Ascending',
+                        type: 'WHERE clause (filter)',
+                        operator: filter.arrange === 'filter' ? 'CONTAINS' : 'RANGE',
+                        description: `Filtrar por ${filter.filter.property} usando filtro ${filter.arrange}`,
+                    });
+                }
+            });
+        }
+        if (arrange.sortBy?.field) {
+            fields.push({
+                field: arrange.sortBy.field,
+                order: arrange.sortBy.order === 'desc' ? 'Descending' : 'Ascending',
+                type: 'ORDER BY clause',
+                operator: 'N/A',
+                description: `Ordenar resultados por ${arrange.sortBy.field} em ordem ${arrange.sortBy.order}`,
+            });
+        }
+        instructions.fields = fields;
+        const fieldNames = fields.map((f) => f.field).join(' + ');
+        instructions.summary = `Criar índice composto para ${collection}: ${fieldNames}`;
+        let queryExample = `db.collection('${collection}')`;
+        fields.forEach((field, index) => {
+            if (field.type.includes('WHERE')) {
+                if (field.operator === '==') {
+                    queryExample += `\n  .where('${field.field}', '==', 'value')`;
+                }
+                else if (field.operator === 'CONTAINS') {
+                    queryExample += `\n  .where('${field.field}', '>=', 'searchText')`;
+                }
+                else {
+                    queryExample += `\n  .where('${field.field}', '${field.operator}', 'value')`;
+                }
+            }
+        });
+        const orderByField = fields.find((f) => f.type.includes('ORDER BY'));
+        if (orderByField) {
+            queryExample += `\n  .orderBy('${orderByField.field}', '${orderByField.order.toLowerCase()}')`;
+        }
+        instructions.queryExample = queryExample;
+        instructions.stepByStep = [
+            '1. Ir para Firebase Console → Firestore → Indexes',
+            '2. Clicar em "Create Index"',
+            `3. Definir Collection ID: ${collection}`,
+            '4. Configurar campos nesta ORDEM EXATA:',
+            ...fields.map((field, index) => `   ${index + 1}. Campo: ${field.field}, Order: ${field.order}, Array: No`),
+            '5. Definir Query scopes: Collection',
+            '6. Clicar em "Create" e aguardar conclusão',
+        ];
+        instructions.notes = [
+            '⚠️ A ordem dos campos é CRÍTICA - deve corresponder exatamente à ordem da query',
+            '⚠️ As cláusulas WHERE devem vir ANTES do campo ORDER BY',
+            '⚠️ Este índice só funcionará para queries com esta combinação EXATA de campos',
+            '⚠️ A criação do índice pode levar vários minutos',
+        ];
+        return instructions;
+    }
+    /**
+     * Gera um link de índice baseado na estrutura da query
+     */
+    generateIndexLink(collection, arrange, conditions = undefined) {
+        try {
+            const indexFields = [];
+            if (conditions && conditions.length > 0) {
+                conditions.forEach((condition) => {
+                    if (condition.firestoreProperty) {
+                        indexFields.push(condition.firestoreProperty);
+                    }
+                });
+            }
+            if (arrange.filters && arrange.filters.length > 0) {
+                arrange.filters.forEach((filter) => {
+                    if (filter.filter?.property) {
+                        indexFields.push(filter.filter.property);
+                    }
+                });
+            }
+            if (arrange.sortBy?.field) {
+                indexFields.push(arrange.sortBy.field);
+            }
+            if (indexFields.length > 1) {
+                const baseUrl = 'https://console.firebase.google.com/project/toppayy-dev/firestore/indexes';
+                const queryParams = new URLSearchParams({
+                    create_composite: `collection=${collection}&fields=${indexFields.join(',')}`,
+                });
+                const finalLink = `${baseUrl}?${queryParams.toString()}`;
+                return finalLink;
+            }
+            return null;
+        }
+        catch (error) {
+            console.warn('Falha ao gerar link de índice:', error);
+            return null;
+        }
+    }
+    async trackMissingIndex(error, collection, arrange, conditions = undefined) {
+        try {
+            const indexLink = this.extractIndexLink(error);
+            if (!indexLink)
+                return;
+            const linkHash = btoa(indexLink)
+                .replace(/[^a-zA-Z0-9]/g, '')
+                .substring(0, 20);
+            const docId = `${collection}_${linkHash}`;
+            const indexInstructions = this.generateIndexInstructions(collection, arrange, conditions);
+            const trackingData = {
+                collection,
+                indexLink,
+                indexInstructions,
+                arrange: {
+                    sortBy: arrange.sortBy,
+                    filters: arrange.filters?.map((f) => ({
+                        arrange: f.arrange,
+                        property: f.filter?.property || null,
+                        dateField: f.arrange === 'filterByDate' ? arrange.sortBy?.field : null,
+                    })) || [],
+                },
+                conditions: conditions?.map((c) => ({
+                    property: c.firestoreProperty,
+                    operator: c.operator,
+                })) || [],
+                errorMessage: error.message,
+                updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
+            };
+            const docRef = this.ngFire.collection('missingIndexes').doc(docId);
+            const doc = await docRef.get().toPromise();
+            if (doc && doc.exists) {
+                await docRef.update({
+                    count: firebase.firestore.FieldValue.increment(1),
+                    updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
+                    lastError: error.message,
+                });
+            }
+            else {
+                await docRef.set({
+                    ...trackingData,
+                    count: 1,
+                    createdAt: firebase.firestore.FieldValue.serverTimestamp(),
+                });
+            }
+        }
+        catch (trackingError) {
+            console.warn('Falha ao rastrear índice ausente:', trackingError);
+        }
+    }
+}
+TableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableService, deps: [{ token: i1.AngularFirestore, optional: true }, { token: i2.MatDialog, optional: true }, { token: i3.ToastrService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+TableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.AngularFirestore, decorators: [{
+                    type: Optional
+                }] }, { type: i2.MatDialog, decorators: [{
+                    type: Optional
+                }] }, { type: i3.ToastrService, decorators: [{
+                    type: Optional
                 }] }]; } });
 
-class TableComponent {
-    // CONSTRUCTOR
-    constructor(router, tableService, firestore) {
-        this.router = router;
-        this.tableService = tableService;
-        this.firestore = firestore;
-        this.arrange = null;
-        this.currentPageNumber = 1;
-        this.currentClientPageIndex = 0;
-        this.items = [];
-        this.isLoading = false;
-        this.lastDoc = null;
-        this.firstDoc = null;
-        this.sortBy = {
-            field: 'createdAt',
-            order: 'desc',
-        };
-        this.columnProperties = [];
-        this.selectSort = new FormControl('');
-        this.currentArrange = '';
-        this.hasNextPage = false;
-        this.dropdownItems = [];
-        this.sortableDropdownItems = [];
-        this.pageSize = 25;
-        this.totalItems = 0;
-        this.filterValue = null;
-        this.hasFilterableColumn = false;
-        this.hasSortableColumn = false;
-        this.filterSubject = new Subject();
-        this.debounceTimeMs = 500;
-        this.selectedTab = 0;
-        // Propriedades para controle do tooltip
-        this.hoveredCell = null;
-        this.showTooltip = false;
-        this.tooltipContent = '';
-        this.tooltipPosition = { x: 0, y: 0 };
-        this.filtersForm = new FormArray([this.createFilterGroup()]);
-    }
-    createFilterGroup() {
-        return new FormGroup({
-            selectFilter: new FormControl(''),
-            typeFilter: new FormControl(''),
-            selectItem: new FormControl(''),
-            initialDate: new FormControl('', this.tableService.dateFormatValidator()),
-            finalDate: new FormControl('', this.tableService.dateFormatValidator()),
-        });
-    }
-    addFilter(filterData) {
-        const newFilterGroup = this.createFilterGroup();
-        if (filterData) {
-            if (filterData.selectFilter) {
-                newFilterGroup.get('selectFilter')?.setValue(filterData.selectFilter);
-            }
-            if (filterData.typeFilter) {
-                newFilterGroup.get('typeFilter')?.setValue(filterData.typeFilter);
-            }
-            if (filterData.selectItem) {
-                newFilterGroup.get('selectItem')?.setValue(filterData.selectItem);
-            }
-            if (filterData.initialDate) {
-                newFilterGroup.get('initialDate')?.setValue(filterData.initialDate);
-            }
-            if (filterData.finalDate) {
-                newFilterGroup.get('finalDate')?.setValue(filterData.finalDate);
-            }
-        }
-        this.filtersForm.push(newFilterGroup);
-    }
-    onSelectFilterChange() {
-        const lastIndex = this.filtersForm.length - 1;
-        const lastFilter = this.filtersForm.at(lastIndex);
-        if (lastFilter.get('selectFilter')?.value) {
-            this.addFilter();
-        }
-    }
-    removeFilter(index) {
-        this.filtersForm.removeAt(index);
-        if (this.filtersForm.length === 0) {
-            this.addFilter();
-        }
-    }
-    removeAllFilters() {
-        this.filtersForm.clear();
-        this.addFilter();
-        this.resetFilter();
-    }
-    // METHODS
-    async ngOnInit() {
-        if (!this.data.color)
-            this.data.color = { bg: 'bg-primary', text: 'text-black' };
-        this.columnProperties = this.data.displayedColumns.map((column) => {
-            return column.property;
-        });
-        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({
-                        ...col,
-                        arrange: 'filter',
-                        title: col.title,
-                    });
-                }
-                if (col.isSortable) {
-                    if (this.hasSortableColumn === false)
-                        this.hasSortableColumn = true;
-                    this.sortableDropdownItems.push({
-                        ...col,
-                        arrange: 'ascending',
-                        title: col.title + ': crescente',
-                    });
-                    this.sortableDropdownItems.push({
-                        ...col,
-                        arrange: 'descending',
-                        title: col.title + ': decrescente',
-                    });
-                }
-                if (col.isFilterableByDate) {
-                    this.dropdownItems.push({
-                        ...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({ ...option, arrange: 'equals' }));
-            }
-        }
-        // Sem paginação
-        if (this.data.pagination === false) {
-            await this.loadItems();
-        }
-        // Com paginação
-        if (this.data.pagination === true) {
-            if (this.data.sortBy)
-                this.sortBy = {
-                    field: this.data.sortBy.field,
-                    order: this.data.sortBy.order,
-                };
-            this.filterSubject
-                .pipe(debounceTime(this.debounceTimeMs))
-                .subscribe(() => {
-                this.loadItemsPaginated('reload', true);
-            });
-            this.isLoading = true;
-            await this.loadItemsPaginated('reload', true);
-            this.sort.active = 'createdAt';
-            this.sort.direction = 'desc';
-            this.dataSource.paginator = this.paginator;
-            this.dataSource.sort = this.sort;
-            this.totalItems = 0;
-            if (this.data.totalRef) {
-                for (const totalRef of this.data.totalRef) {
-                    const totalRefDoc = await totalRef.ref.get();
-                    const docData = totalRefDoc.data();
-                    if (docData && docData[totalRef.field])
-                        this.totalItems = (this.totalItems +
-                            docData[totalRef.field]);
-                }
-            }
-            this.isLoading = false;
-        }
-    }
-    getDisplayValue(col, row, withinLimit = false) {
-        let value;
-        if (col.calculateValue) {
-            value = col.calculateValue(row);
-        }
-        else {
-            value = this.getNestedValue(row, col.property);
-        }
-        if (Array.isArray(value) && col.arrayField) {
-            value = this.formatArrayValue(value, col.arrayField);
-        }
-        if (col.queryLength && row[col.property]) {
-            value = row[col.property];
-        }
-        value = col.pipe ? col.pipe.transform(value) : value;
-        if (value === null || value === undefined) {
-            value = '';
-        }
-        else {
-            value = String(value);
-        }
-        if (typeof value !== 'string') {
-            value = '';
-        }
-        if (withinLimit || !col.charLimit) {
-            return value;
-        }
-        return value.substring(0, col.charLimit) + '...';
-    }
-    getNestedValue(obj, path) {
-        if (!path)
-            return undefined;
-        const properties = path.split('.');
-        return properties.reduce((acc, currentPart) => acc && acc[currentPart], obj);
-    }
-    formatArrayValue(array, field) {
-        if (!Array.isArray(array) || array.length === 0) {
-            return '';
-        }
-        const values = array
-            .map((item) => {
-            if (typeof item === 'object' && item !== null) {
-                return item[field] || '';
-            }
-            return String(item);
-        })
-            .filter((value) => value !== '' && value !== null && value !== undefined);
-        return values.join(', ');
-    }
-    // Métodos sem paginação
-    async loadItems() {
-        this.items = await this.tableService.getItems(this.data.collectionRef);
-        if (this.data.conditions) {
-            this.filterItems();
-        }
-        await this.loadRelations();
-        await this.loadQueryLengths();
-        this.totalItems = this.items.length;
-        this.dataSource = new MatTableDataSource(this.items);
-        this.dataSource.paginator = this.paginator;
-        this.dataSource.sort = this.sort;
-        if (this.data.sortBy) {
-            this.dataSource.sort.active = this.data.sortBy.field;
-            this.dataSource.sort.direction = this.data.sortBy.order;
-            this.dataSource.sort.sortChange.emit();
-        }
-        this.dataSource.filterPredicate = (data, filter) => {
-            return this.data.displayedColumns.some((col) => {
-                if (col.filterPredicates) {
-                    return col.filterPredicates.some((predicate) => {
-                        const propertyValue = data[col.property];
-                        if (!propertyValue || typeof propertyValue !== 'object') {
-                            return false;
-                        }
-                        const predicateValue = propertyValue[predicate];
-                        if (predicateValue === null || predicateValue === undefined) {
-                            return false;
-                        }
-                        return String(predicateValue)
-                            .trim()
-                            .toLocaleLowerCase()
-                            .includes(filter);
-                    });
-                }
-                if (col.property && col.isFilterable) {
-                    const propertyValue = data[col.property];
-                    if (propertyValue === null || propertyValue === undefined) {
-                        return false;
-                    }
-                    return String(propertyValue)
-                        .trim()
-                        .toLocaleLowerCase()
-                        .includes(filter);
-                }
-                return false;
-            });
-        };
-        this.filterPredicate = this.dataSource.filterPredicate;
-    }
-    // Métodos com paginação
-    async loadItemsPaginated(navigation = 'reload', reset = false) {
-        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) => {
-            const group = control;
-            const selectedFilter = group.get('selectFilter')?.value;
-            if (!selectedFilter)
-                return [];
-            const arrange = selectedFilter.arrange;
-            if (arrange === 'filter') {
-                const filterValue = group.get('typeFilter')?.value;
-                if (!filterValue)
-                    return [];
-                return {
-                    arrange,
-                    filter: {
-                        property: selectedFilter.property,
-                        filtering: filterValue,
-                    },
-                    dateFilter: undefined,
-                };
-            }
-            if (arrange === 'filterByDate') {
-                const initial = group.get('initialDate')?.value;
-                const final = group.get('finalDate')?.value;
-                if (initial && final) {
-                    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);
-                    return {
-                        arrange,
-                        filter: undefined,
-                        dateFilter: {
-                            initial: initialDate,
-                            final: finalDate,
-                        },
-                    };
-                }
-                return [];
-            }
-            if (selectedFilter.hasOwnProperty('items') && arrange === 'equals') {
-                const selectedItems = group.get('selectItem')?.value;
-                if (Array.isArray(selectedItems) && selectedItems.length > 0) {
-                    return selectedItems.map((item) => ({
-                        arrange,
-                        filter: {
-                            property: item.property,
-                            filtering: item.value,
-                        },
-                        dateFilter: undefined,
-                    }));
-                }
-            }
-            return [];
-        })
-            .filter((f) => f && (f.filter?.filtering !== undefined || f.dateFilter));
-        this.arrange = {
-            filters: activeFilters,
-            sortBy: this.sortBy,
-        };
-        const paginated = {
-            batchSize: this.pageSize,
-            collection: this.data.collection,
-            doc: { lastDoc: this.lastDoc, firstDoc: this.firstDoc },
-            navigation,
-            arrange: this.arrange,
-            conditions: this.data.conditions,
-            size: this.totalItems,
-            filterFn: this.data.filterFn,
-            clientPageIndex: this.currentClientPageIndex,
-        };
-        const result = await this.tableService.getPaginated(paginated);
-        this.items = result.items;
-        await this.loadRelations();
-        await this.loadQueryLengths();
-        this.lastDoc = result.lastDoc;
-        this.firstDoc = result.firstDoc;
-        // Atualizar currentClientPageIndex se retornado pelo fallback
-        if (result.currentClientPageIndex !== undefined) {
-            this.currentClientPageIndex = result.currentClientPageIndex;
-        }
-        let sum = 0;
-        if (this.data.totalRef) {
-            for (const totalRef of this.data.totalRef) {
-                const totalRefDoc = await totalRef.ref.get();
-                const docData = totalRefDoc.data();
-                if (docData || result.filterLength) {
-                    sum =
-                        result.filterLength ??
-                            (sum + (docData ? docData[totalRef.field] : 0));
-                }
-            }
-            this.totalItems = sum;
-        }
-        this.hasNextPage = result.hasNextPage;
-        this.dataSource = new MatTableDataSource(this.items);
-        this.filterPredicate = this.dataSource.filterPredicate;
-    }
-    async onPageChange(event) {
-        if (this.data.pagination === true && event) {
-            this.isLoading = true;
-            const previousPageIndex = event.previousPageIndex ?? 0;
-            const pageIndex = event.pageIndex;
-            const currentComponentPageSize = this.pageSize;
-            const eventPageSize = event.pageSize;
-            const totalItems = this.totalItems;
-            let navigationDirection;
-            let resetDocs = false;
-            let originalPageSize = null;
-            const lastPageIndex = Math.max(0, Math.ceil(totalItems / eventPageSize) - 1);
-            // Atualizar currentClientPageIndex sempre para o fallback
-            this.currentClientPageIndex = pageIndex;
-            if (previousPageIndex !== undefined && pageIndex > previousPageIndex) {
-                this.currentPageNumber++;
-            }
-            else if (previousPageIndex !== undefined &&
-                pageIndex < previousPageIndex) {
-                this.currentPageNumber = Math.max(1, this.currentPageNumber - 1);
-            }
-            if (eventPageSize !== currentComponentPageSize) {
-                console.log('Alterou a quantidade de elementos exibidos por página');
-                this.pageSize = eventPageSize;
-                navigationDirection = 'forward';
-                resetDocs = true;
-                this.currentClientPageIndex = 0;
-            }
-            else if (pageIndex === 0 &&
-                previousPageIndex !== undefined &&
-                pageIndex < previousPageIndex) {
-                console.log('Pulou para a primeira página');
-                navigationDirection = 'forward';
-                this.currentPageNumber = 1;
-                this.currentClientPageIndex = 0;
-                resetDocs = true;
-            }
-            else if (pageIndex === lastPageIndex &&
-                previousPageIndex !== undefined &&
-                pageIndex > previousPageIndex &&
-                pageIndex - previousPageIndex > 1) {
-                console.log('Pulou para a ultima página');
-                navigationDirection = 'backward';
-                resetDocs = true;
-                const itemsExpectedInLastPage = totalItems - lastPageIndex * eventPageSize;
-                if (itemsExpectedInLastPage > 0 &&
-                    itemsExpectedInLastPage < eventPageSize) {
-                    originalPageSize = this.pageSize;
-                    this.pageSize = itemsExpectedInLastPage;
-                }
-            }
-            else if (previousPageIndex !== undefined &&
-                pageIndex > previousPageIndex) {
-                console.log('Procedendo');
-                navigationDirection = 'forward';
-                resetDocs = false;
-            }
-            else if (previousPageIndex !== undefined &&
-                pageIndex < previousPageIndex) {
-                console.log('Retrocedendo.');
-                navigationDirection = 'backward';
-                resetDocs = false;
-            }
-            else if (previousPageIndex !== undefined &&
-                pageIndex === previousPageIndex) {
-                console.log('Recarregando.');
-                navigationDirection = 'reload';
-                resetDocs = false;
-            }
-            else if (previousPageIndex === undefined && pageIndex === 0) {
-                console.log('Evento inicial do paginador para pág 0. ngOnInit carregou.');
-                this.isLoading = false;
-                if (event)
-                    this.pageEvent = event;
-                return;
-            }
-            else {
-                console.warn('INESPERADO! Condição de navegação não tratada:', event);
-                this.isLoading = false;
-                if (event)
-                    this.pageEvent = event;
-                return;
-            }
-            if (navigationDirection) {
-                try {
-                    await this.loadItemsPaginated(navigationDirection, resetDocs);
-                }
-                catch (error) {
-                    console.error('Erro ao carregar itens paginados:', error);
-                }
-                finally {
-                    if (originalPageSize !== null) {
-                        this.pageSize = originalPageSize;
-                    }
-                }
-            }
-            if (event)
-                this.pageEvent = event;
-            this.isLoading = false;
-        }
-    }
-    // Outros métodos
-    applyFilter(value) {
-        // Sem paginação
-        if (this.data.pagination === false) {
-            this.dataSource.filter = String(value).trim().toLowerCase();
-        }
-        // Com paginação
-        if (this.data.pagination === true) {
-            this.filterValue = value;
-            this.filterSubject.next(this.filterValue);
-        }
-    }
-    goToDetails(row) {
-        if (this.data.isNotClickable) {
-            return;
-        }
-        const urlPath = this.data.url || this.data.name;
-        const url = this.router.serializeUrl(this.router.createUrlTree([`/${urlPath}`, row.id]));
-        window.open(url, '_blank');
-    }
-    async getRelation(params) {
-        try {
-            let snapshot;
-            if (params.id !== '' &&
-                params.id !== undefined &&
-                params.collection !== undefined &&
-                params.collection !== '') {
-                snapshot = await firstValueFrom(this.firestore.collection(params.collection).doc(params.id).get());
-            }
-            if (snapshot && snapshot.exists) {
-                const data = snapshot.data();
-                return data?.[params.newProperty] ?? '';
-            }
-            return '';
-        }
-        catch (e) {
-            console.log(e);
-            return '';
-        }
-    }
-    async loadRelations() {
-        const relationPromises = this.data.displayedColumns
-            .filter((col) => col.relation)
-            .flatMap((col) => this.items.map(async (item) => {
-            if (col.relation) {
-                item[col.property] = await this.getRelation({
-                    id: item[col.relation.property],
-                    collection: col.relation.collection,
-                    newProperty: col.relation.newProperty,
-                });
-            }
-        }));
-        await Promise.all(relationPromises);
-    }
-    async getQueryLength(params) {
-        const snapshot = await this.firestore
-            .collection(params.relation.collection)
-            .ref.where(params.relation.property, params.relation.operator, params.item[params.relation.value])
-            .get();
-        return snapshot.size;
-    }
-    async loadQueryLengths() {
-        const lengthPromises = this.data.displayedColumns
-            .filter((col) => col.queryLength)
-            .flatMap((col) => this.items.map(async (item) => {
-            if (col.queryLength) {
-                item[col.property] = await this.getQueryLength({
-                    item: item,
-                    relation: col.queryLength,
-                });
-            }
-        }));
-        await Promise.all(lengthPromises);
-    }
-    filterItems() {
-        if (this.data.conditions) {
-            this.data.conditions.forEach((cond) => {
-                this.items = this.items.filter((item) => {
-                    const operatorFunction = this.tableService.operators[cond.operator];
-                    if (operatorFunction) {
-                        return operatorFunction(item[cond.firestoreProperty], cond.dashProperty);
-                    }
-                    return false;
-                });
-            });
-        }
-    }
-    // Filtro de data
-    async search() {
-        if (this.selectSort.value) {
-            if (this.selectSort.value.arrange === 'ascending') {
-                this.sortBy = {
-                    field: this.selectSort.value.property,
-                    order: 'asc',
-                };
-            }
-            if (this.selectSort.value.arrange === 'descending') {
-                this.sortBy = {
-                    field: this.selectSort.value.property,
-                    order: 'desc',
-                };
-            }
-        }
-        await this.loadItemsPaginated('reload', true);
-        this.currentArrange =
-            this.filtersForm.length > 0
-                ? this.filtersForm.at(0).get('selectFilter')?.value?.arrange ?? ''
-                : '';
-        this.paginator.firstPage();
-    }
-    async resetFilter() {
-        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.filtersForm.clear();
-        this.addFilter();
-        this.selectSort.patchValue('');
-        this.sortBy = {
-            order: this.data.sortBy ? this.data.sortBy.order : 'desc',
-            field: this.data.sortBy ? this.data.sortBy.field : 'createdAt',
-        };
-        await this.loadItemsPaginated('reload', true);
-        this.currentArrange = '';
-        this.paginator.firstPage();
-    }
-    // Método público para recarregar a tabela
-    async reloadTable() {
-        if (this.data.pagination) {
-            await this.loadItemsPaginated('reload', true);
-            this.paginator.firstPage();
-        }
-        else {
-            await this.loadItems();
-        }
-    }
-    updateDisplayedColumns() {
-        if (this.dataSource) {
-            this.dataSource = new MatTableDataSource([]);
-        }
-        this.columnProperties = this.data.displayedColumns.map((column) => {
-            return column.property;
-        });
-        this.dropdownItems = [];
-        this.sortableDropdownItems = [];
-        this.data.displayedColumns.forEach((col) => {
-            if (col.isFilterable) {
-                this.dropdownItems.push({
-                    ...col,
-                    arrange: 'filter',
-                    title: col.title,
-                });
-            }
-            if (col.isSortable) {
-                this.sortableDropdownItems.push({
-                    ...col,
-                    arrange: 'ascending',
-                    title: col.title + ': crescente',
-                });
-                this.sortableDropdownItems.push({
-                    ...col,
-                    arrange: 'descending',
-                    title: col.title + ': decrescente',
-                });
-            }
-            if (col.isFilterableByDate) {
-                this.dropdownItems.push({
-                    ...col,
-                    arrange: 'filterByDate',
-                    title: col.title + ': filtro por data',
-                });
-            }
-        });
-        if (this.data.filterableOptions &&
-            Array.isArray(this.data.filterableOptions)) {
-            this.data.filterableOptions.forEach((option) => this.dropdownItems.push({ ...option, arrange: 'equals' }));
-        }
-    }
-    isString(value) {
-        return typeof value === 'string';
-    }
-    // Métodos para controle do tooltip
-    onCellMouseEnter(event, row, col) {
-        // Só mostrar tooltip se a coluna tiver charLimit definido
-        if (!col.charLimit) {
-            return;
-        }
-        const fullValue = this.getDisplayValue(col, row, true);
-        // Só mostrar tooltip se o valor completo for maior que o limite
-        if (fullValue.length <= col.charLimit) {
-            return;
-        }
-        this.hoveredCell = { row, col };
-        this.tooltipContent = fullValue;
-        // Definir posição do tooltip
-        this.tooltipPosition = {
-            x: event.clientX + 10,
-            y: event.clientY - 10,
-        };
-        // Timeout para mostrar o tooltip
-        this.tooltipTimeout = setTimeout(() => {
-            if (this.hoveredCell &&
-                this.hoveredCell.row === row &&
-                this.hoveredCell.col === col) {
-                this.showTooltip = true;
-            }
-        }, 500);
-    }
-    onCellMouseLeave() {
-        if (this.tooltipTimeout) {
-            clearTimeout(this.tooltipTimeout);
-            this.tooltipTimeout = null;
-        }
-        this.showTooltip = false;
-        this.hoveredCell = null;
-        this.tooltipContent = '';
-    }
-    onCellMouseMove(event) {
-        if (this.showTooltip) {
-            this.tooltipPosition = {
-                x: event.clientX + 10,
-                y: event.clientY - 10,
-            };
-        }
-    }
-    // Métodos para inversão vertical dos tabs
-    getTabGroups(tabs) {
-        if (!tabs || tabs.length === 0)
-            return [];
-        const totalGroups = Math.ceil(tabs.length / 6);
-        const groups = [];
-        // Criar array de índices invertidos (último grupo primeiro)
-        for (let i = totalGroups - 1; i >= 0; i--) {
-            groups.push(i);
-        }
-        return groups;
-    }
-    getTabGroup(tabs, groupIndex) {
-        if (!tabs || tabs.length === 0)
-            return [];
-        const startIndex = groupIndex * 6;
-        const endIndex = Math.min(startIndex + 6, tabs.length);
-        return tabs.slice(startIndex, endIndex);
-    }
-    getRealTabIndex(groupIndex, tabIndexInGroup) {
-        if (!this.data.tabs?.tabsData)
-            return 0;
-        const totalGroups = Math.ceil(this.data.tabs.tabsData.length / 6);
-        const realGroupIndex = totalGroups - 1 - groupIndex;
-        return realGroupIndex * 6 + tabIndexInGroup;
-    }
-    onTableSelected(i, j) {
-        if (!this.data.tabs?.tabsData || !this.data.tabs.method)
-            return;
-        this.selectedTab = this.getRealTabIndex(i, j);
-        const tab = this.data.tabs.tabsData[this.selectedTab];
-        if (tab) {
-            this.data.tabs.method(tab, this.selectedTab);
-        }
-    }
-    isTabSelected(originalIndex) {
-        return this.selectedTab === originalIndex;
-    }
-    shouldShowActionButton() {
-        if (!this.data?.actionButton) {
-            return false;
-        }
-        if (!this.data.actionButton.condition) {
-            return true;
-        }
-        try {
-            return this.data.actionButton.condition(null) ?? true;
-        }
-        catch {
-            return true;
-        }
-    }
-}
-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\">\n  <div class=\"flex flex-col justify-between gap-6\">\n    <!-- UNIFIED CONTROL PANEL: FILTERS, SORT & ACTIONS -->\n    <div\n      class=\"rounded-xl border border-gray-200 bg-white p-4 shadow-lg\"\n      *ngIf=\"\n        data.pagination === true &&\n        (dropdownItems.length > 0 ||\n          sortableDropdownItems.length > 0 ||\n          data.actionButton)\n      \"\n    >\n      <!-- PANEL HEADER: Title, Custom Action, and Global Actions -->\n      <div\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\"\n      >\n        <!-- Left Side: Title & Main Action Button -->\n        <div class=\"flex flex-wrap items-center gap-4\">\n          <div class=\"flex items-center gap-2\">\n            <i class=\"fa fa-filter text-xl text-blue-500\"></i>\n            <span class=\"text-lg font-semibold text-gray-700\"\n              >Filtros e A\u00E7\u00F5es</span\n            >\n          </div>\n          <button\n            *ngIf=\"data.actionButton && data.actionButton.condition\"\n            [ngClass]=\"\n              (data.actionButton.colorClass || 'bg-blue-500') +\n              ' flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white hover:opacity-70'\n            \"\n            [routerLink]=\"data.actionButton.routerLink\"\n            (click)=\"\n              data.actionButton.method ? data.actionButton.method($event) : null\n            \"\n          >\n            <i\n              *ngIf=\"data.actionButton.icon\"\n              [class]=\"data.actionButton.icon\"\n            ></i>\n            {{ data.actionButton.label }}\n          </button>\n        </div>\n\n        <!-- Right Side: Search, Reset, Export -->\n        <div\n          class=\"flex flex-wrap gap-3\"\n          *ngIf=\"\n            this.hasFilterableColumn === true || this.hasSortableColumn === true\n          \"\n        >\n          <button\n            (click)=\"search()\"\n            type=\"button\"\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\"\n            matTooltip=\"Aplicar filtros\"\n          >\n            <i class=\"fa fa-search\"></i>\n            Pesquisar\n          </button>\n\n          <button\n            (click)=\"resetFilter()\"\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\"\n            matTooltip=\"Limpar filtros\"\n          >\n            <i class=\"fas fa-redo-alt\"></i>\n            Resetar\n          </button>\n\n          <button\n            *ngIf=\"data.download !== false && downloadTable\"\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\"\n            matTooltipPosition=\"above\"\n            matTooltip=\"Exportar Tabela\"\n            [disabled]=\"\n              this.dataSource && this.dataSource.filteredData.length <= 0\n            \"\n            (click)=\"\n              $any(arrange) && downloadTable !== undefined\n                ? downloadTable($any(arrange), data.conditions || [])\n                : null\n            \"\n          >\n            <i class=\"fa fa-download\"></i>\n            Exportar\n          </button>\n        </div>\n      </div>\n\n      <!-- FILTERS CONTENT (WITH REFINEMENTS) -->\n      <div class=\"mb-4 space-y-3\" *ngIf=\"filtersForm.controls.length > 0\">\n        <div\n          [formGroup]=\"$any(filterGroup)\"\n          *ngFor=\"let filterGroup of filtersForm.controls; let i = index\"\n          class=\"flex flex-wrap items-center gap-3 rounded-lg border border-gray-200 p-2\"\n        >\n          <!-- FILTER TYPE SELECTOR -->\n          <div class=\"min-w-[200px] flex-1\" *ngIf=\"dropdownItems.length > 0\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n              <mat-label>Tipo de filtro</mat-label>\n              <mat-select\n                placeholder=\"Selecione o tipo...\"\n                formControlName=\"selectFilter\"\n                (selectionChange)=\"onSelectFilterChange()\"\n              >\n                <mat-option *ngFor=\"let item of dropdownItems\" [value]=\"item\">\n                  <div class=\"flex items-center gap-2\">\n                    <i\n                      [class]=\"item.icon || 'fa fa-filter'\"\n                      class=\"text-sm text-blue-500\"\n                    ></i>\n                    <span>{{ item.title }}</span>\n                  </div>\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n\n          <!-- TEXT FILTER -->\n          <div\n            class=\"min-w-[200px] flex-1\"\n            *ngIf=\"\n              $any(filterGroup).get('selectFilter')?.value?.arrange === 'filter'\n            \"\n          >\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n              <mat-label class=\"flex items-center gap-2\">\n                <i class=\"fa fa-search text-gray-400\"></i>\n                <span>{{\n                  $any(filterGroup).get(\"selectFilter\")?.value?.title ||\n                    \"Filtrar\"\n                }}</span>\n              </mat-label>\n              <input\n                (keyup.enter)=\"search()\"\n                formControlName=\"typeFilter\"\n                matInput\n                placeholder=\"Digite para filtrar...\"\n                #input\n              />\n            </mat-form-field>\n          </div>\n\n          <!-- DROPDOWN FILTER -->\n          <div\n            class=\"min-w-[200px] flex-1\"\n            *ngIf=\"\n              $any(filterGroup).get('selectFilter')?.value &&\n              $any(filterGroup)\n                .get('selectFilter')\n                ?.value.hasOwnProperty('items')\n            \"\n          >\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n              <mat-label>{{\n                $any(filterGroup).get(\"selectFilter\")?.value?.title ||\n                  \"Selecione\"\n              }}</mat-label>\n              <mat-select\n                placeholder=\"Selecione...\"\n                formControlName=\"selectItem\"\n                multiple\n              >\n                <mat-option\n                  *ngFor=\"\n                    let item of $any(filterGroup).get('selectFilter')?.value\n                      .items\n                  \"\n                  [value]=\"item\"\n                >\n                  {{ item.label }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n\n          <!-- DATE FILTER -->\n          <div\n            class=\"min-w-[340px] flex-auto\"\n            *ngIf=\"\n              $any(filterGroup).get('selectFilter')?.value?.arrange ===\n              'filterByDate'\n            \"\n          >\n            <div\n              class=\"flex flex-col items-stretch gap-3 sm:flex-row sm:items-center\"\n            >\n              <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                <mat-label class=\"flex items-center gap-2\">\n                  <i class=\"fa fa-calendar text-gray-400\"></i>\n                  <span>Data Inicial</span>\n                </mat-label>\n                <input\n                  matInput\n                  (keyup.enter)=\"search()\"\n                  formControlName=\"initialDate\"\n                  [dropSpecialCharacters]=\"false\"\n                  mask=\"d0/M0/0000\"\n                  placeholder=\"DD/MM/AAAA\"\n                  maxlength=\"10\"\n                />\n              </mat-form-field>\n\n              <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                <mat-label class=\"flex items-center gap-2\">\n                  <i class=\"fa fa-calendar text-gray-400\"></i>\n                  <span>Data Final</span>\n                </mat-label>\n                <input\n                  (keyup.enter)=\"search()\"\n                  matInput\n                  formControlName=\"finalDate\"\n                  [dropSpecialCharacters]=\"false\"\n                  mask=\"d0/M0/0000\"\n                  placeholder=\"DD/MM/AAAA\"\n                  maxlength=\"10\"\n                />\n              </mat-form-field>\n            </div>\n          </div>\n\n          <!-- REMOVE FILTER BUTTON -->\n          <div *ngIf=\"filtersForm.length > 1\" class=\"ml-auto flex-shrink-0\">\n            <button\n              (click)=\"removeFilter(i)\"\n              class=\"flex h-10 w-10 items-center justify-center rounded-full transition-colors duration-300 hover:bg-red-100\"\n              matTooltip=\"Remover filtro\"\n            >\n              <i class=\"fa fa-trash text-red-500 hover:text-red-600\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- PANEL FOOTER: Add Filter & Sort -->\n      <div\n        class=\"-mb-2 flex flex-col items-center justify-between gap-4 border-t border-gray-200 pt-4 sm:flex-row\"\n      >\n        <!-- Add Filter Button -->\n        <div *ngIf=\"dropdownItems.length > 0\">\n          <button\n            (click)=\"addFilter()\"\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\"\n            matTooltip=\"Adicionar novo filtro\"\n          >\n            <i class=\"fa fa-plus mr-2\"></i>\n            Adicionar Filtro\n          </button>\n        </div>\n\n        <!-- Sort Dropdown -->\n        <div\n          class=\"w-full sm:w-auto sm:min-w-[250px]\"\n          *ngIf=\"sortableDropdownItems.length > 0\"\n        >\n          <mat-form-field appearance=\"outline\" class=\"w-full\">\n            <mat-label>Ordenar por</mat-label>\n            <mat-select placeholder=\"Selecione...\" [formControl]=\"selectSort\">\n              <mat-option\n                *ngFor=\"let item of sortableDropdownItems\"\n                [value]=\"item\"\n              >\n                <div class=\"flex items-center gap-2\">\n                  <i class=\"fa fa-sort-alpha-down text-cyan-600\"></i>\n                  <span>{{ item.title }}</span>\n                </div>\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n\n    <!-- SIMPLE SEARCH (for non-paginated tables) -->\n    <div\n      class=\"rounded-xl border border-gray-200 bg-white p-4 shadow-lg\"\n      *ngIf=\"data.pagination === false\"\n    >\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label class=\"flex items-center gap-2\">\n          <i class=\"fa fa-search text-blue-500\"></i>\n          Buscar\n        </mat-label>\n        <input\n          matInput\n          (keyup.enter)=\"search()\"\n          (keyup)=\"applyFilter(filterInput.value)\"\n          placeholder=\"Digite para filtrar...\"\n          #filterInput\n        />\n        <mat-icon matSuffix class=\"text-gray-500\">search</mat-icon>\n      </mat-form-field>\n      <button\n        *ngIf=\"data.actionButton\"\n        [ngClass]=\"\n          (data.actionButton.colorClass || 'bg-blue-500') +\n          ' float-right flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white hover:opacity-70'\n        \"\n        [routerLink]=\"data.actionButton.routerLink\"\n        (click)=\"\n          data.actionButton.method ? data.actionButton.method($event) : null\n        \"\n      >\n        <i *ngIf=\"data.actionButton.icon\" [class]=\"data.actionButton.icon\"></i>\n        {{ data.actionButton.label }}\n      </button>\n    </div>\n\n    <div class=\"flex flex-col\">\n      <div\n        class=\"mx-auto flex flex-col\"\n        *ngIf=\"data.tabs && data.tabs.tabsData && data.tabs.tabsData.length > 0\"\n      >\n        <!-- Calcular quantos grupos de 6 tabs existem -->\n        <ng-container\n          *ngFor=\"\n            let groupIndex of getTabGroups(data.tabs.tabsData);\n            let i = index\n          \"\n        >\n          <div class=\"mx-auto flex flex-row\">\n            <ng-container\n              *ngFor=\"\n                let tab of getTabGroup(data.tabs.tabsData, groupIndex);\n                let j = index\n              \"\n            >\n              <button\n                class=\"border-2 border-gray-300 bg-gray-200 px-4 py-2 font-medium transition hover:brightness-95\"\n                [ngClass]=\"\n                  isTabSelected(getRealTabIndex(i, j))\n                    ? 'border-b-0 brightness-110'\n                    : ''\n                \"\n                (click)=\"onTableSelected(i, j)\"\n              >\n                {{ tab.label }}\n                <span\n                  *ngIf=\"tab.counter !== undefined\"\n                  class=\"ml-2 text-xs font-bold\"\n                  [ngClass]=\"tab.counterClass\"\n                >\n                  {{ tab.counter }}\n                </span>\n              </button>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"mat-elevation-z8 w-full overflow-x-auto rounded-xl\">\n        <table\n          mat-table\n          [dataSource]=\"dataSource\"\n          matSort\n          #sort=\"matSort\"\n          matSortActive=\"createdAt\"\n          matSortDirection=\"desc\"\n        >\n          <ng-container\n            *ngFor=\"let col of data.displayedColumns\"\n            matColumnDef=\"{{ col.property }}\"\n          >\n            <ng-container *matHeaderCellDef>\n              <!-- IF THE COLUMN IS NOT SORTABLE, THEN DON'T SHOW THE SORT BUTTONS -->\n              <th\n                *ngIf=\"!col.isSortable || data.pagination === true\"\n                mat-header-cell\n                [ngClass]=\"\n                  (data?.color?.bg ? ' ' + $any(data.color).bg : '') +\n                  (data?.color?.text ? ' ' + $any(data.color).text : '')\n                \"\n              >\n                {{ col.title }}\n              </th>\n              <!-- IF THE COLUMN IS SORTABLE, THEN SHOW THE SORT BUTTONS -->\n              <th\n                *ngIf=\"col.isSortable && data.pagination === false\"\n                mat-header-cell\n                mat-sort-header\n                [ngClass]=\"\n                  (data?.color?.bg ? ' ' + $any(data.color).bg : '') +\n                  (data?.color?.text ? ' ' + $any(data.color).text : '')\n                \"\n              >\n                {{ col.title }}\n              </th>\n              <td\n                mat-cell\n                *matCellDef=\"let row\"\n                (click)=\"col.method ? col.method(row) : null\"\n                (mouseenter)=\"onCellMouseEnter($event, row, col)\"\n                (mouseleave)=\"onCellMouseLeave()\"\n                (mousemove)=\"onCellMouseMove($event)\"\n              >\n                <!-- CHECK IF THE COLUMN MUST BE DISPLAYED -->\n                <span *ngIf=\"!col.image && !col.iconClass && !col.method\">\n                  <ng-container>\n                    <span\n                      *ngIf=\"\n                        col.charLimit &&\n                          row[col.property] &&\n                          row[col.property].length > col.charLimit;\n                        else withinLimit\n                      \"\n                    >\n                      <a\n                        *ngIf=\"col.hasLink === true\"\n                        [href]=\"row[col.property]\"\n                        target=\"_blank\"\n                      >\n                        {{ getDisplayValue(col, row) }}\n                      </a>\n                      <a\n                        *ngIf=\"col.hasLink && isString(col.hasLink)\"\n                        [href]=\"col.hasLink\"\n                        target=\"_blank\"\n                      >\n                        {{ getDisplayValue(col, row) }}\n                      </a>\n                      <span\n                        *ngIf=\"col.hasLink !== true && !isString(col.hasLink)\"\n                      >\n                        {{ getDisplayValue(col, row) }}\n                      </span>\n                    </span>\n                  </ng-container>\n                  <ng-template #withinLimit>\n                    <a\n                      *ngIf=\"col.hasLink === true\"\n                      [href]=\"row[col.property]\"\n                      target=\"_blank\"\n                    >\n                      {{ getDisplayValue(col, row, true) }}\n                    </a>\n                    <a\n                      *ngIf=\"col.hasLink && isString(col.hasLink)\"\n                      [href]=\"col.hasLink\"\n                      target=\"_blank\"\n                    >\n                      {{ getDisplayValue(col, row, true) }}\n                    </a>\n                    <span\n                      *ngIf=\"col.hasLink !== true && !isString(col.hasLink)\"\n                    >\n                      {{ getDisplayValue(col, row, true) }}\n                    </span>\n                  </ng-template>\n                </span>\n                <!------------------- IMAGE ------------------>\n                <img\n                  *ngIf=\"\n                    col.image && col.image.path && !col.iconClass && !col.method\n                  \"\n                  [src]=\"col.image.path + '/' + row[col.property]\"\n                  [ngClass]=\"col.image.class\"\n                  alt=\"Imagem\"\n                />\n                <img\n                  *ngIf=\"\n                    col.image && col.image.url && !col.iconClass && !col.method\n                  \"\n                  [src]=\"row[col.property]\"\n                  [ngClass]=\"col.image.class\"\n                  alt=\"Imagem\"\n                />\n                <ng-container *ngIf=\"col.iconClass\">\n                  <button\n                    *ngFor=\"let iconClass of col.iconClass\"\n                    (click)=\"\n                      iconClass.buttonMethod\n                        ? iconClass.buttonMethod(row, $event)\n                        : $event.stopPropagation()\n                    \"\n                  >\n                    <span\n                      [ngClass]=\"iconClass.class\"\n                      *ngIf=\"\n                        iconClass.condition === undefined ||\n                        (iconClass.condition !== undefined &&\n                          $any(iconClass.condition)(row))\n                      \"\n                      >{{ iconClass.text }}</span\n                    >\n                  </button>\n                </ng-container>\n              </td>\n            </ng-container>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"columnProperties\"></tr>\n          <tr\n            [ngClass]=\"{\n              'example-element-row': data.isNotClickable === true,\n              'example-element-row cursor-pointer': !data.isNotClickable\n            }\"\n            mat-row\n            *matRowDef=\"let row; columns: columnProperties\"\n            (click)=\"goToDetails(row)\"\n          ></tr>\n\n          <!-- ROW SHOWN WHEN THERE IS NO MATCHING DATA. -->\n          <tr class=\"mat-row\" *matNoDataRow>\n            <td *ngIf=\"!isLoading\" class=\"mat-cell p-4\" colspan=\"4\">\n              Nenhum resultado encontrado para a busca\n            </td>\n          </tr>\n        </table>\n\n        <div class=\"flex justify-center\" *ngIf=\"isLoading\">\n          <mat-spinner></mat-spinner>\n        </div>\n\n        <div class=\"paginator-container\">\n          <mat-paginator\n            #paginator\n            [pageSizeOptions]=\"[25, 50, 100]\"\n            [pageSize]=\"pageSize\"\n            [length]=\"totalItems\"\n            showFirstLastButtons\n            aria-label=\"Select page of periodic elements\"\n            (page)=\"onPageChange($event)\"\n            [ngClass]=\"{\n              'hide-length':\n                ['filter', 'filterByDate', 'equals'].includes(\n                  this.currentArrange\n                ) || this.data.filterFn,\n              'hide-next-button': !hasNextPage && data.pagination === true,\n              'hide-last-button':\n                (!hasNextPage && data.pagination === true) || this.data.filterFn\n            }\"\n          >\n          </mat-paginator>\n          <div\n            *ngIf=\"\n              !isLoading &&\n              dataSource?.data &&\n              dataSource.data.length > 0 &&\n              data?.filterFn\n            \"\n            class=\"page-number-display\"\n          >\n            {{ currentPageNumber }}\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- TOOLTIP PERSONALIZADO -->\n  <div\n    *ngIf=\"showTooltip\"\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\"\n    [style.left.px]=\"tooltipPosition.x\"\n    [style.top.px]=\"tooltipPosition.y\"\n    [style.pointer-events]=\"'none'\"\n  >\n    {{ tooltipContent }}\n  </div>\n</div>\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\">\n  <div class=\"flex flex-col justify-between gap-6\">\n    <!-- UNIFIED CONTROL PANEL: FILTERS, SORT & ACTIONS -->\n    <div\n      class=\"rounded-xl border border-gray-200 bg-white p-4 shadow-lg\"\n      *ngIf=\"\n        data.pagination === true &&\n        (dropdownItems.length > 0 ||\n          sortableDropdownItems.length > 0 ||\n          data.actionButton)\n      \"\n    >\n      <!-- PANEL HEADER: Title, Custom Action, and Global Actions -->\n      <div\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\"\n      >\n        <!-- Left Side: Title & Main Action Button -->\n        <div class=\"flex flex-wrap items-center gap-4\">\n          <div class=\"flex items-center gap-2\">\n            <i class=\"fa fa-filter text-xl text-blue-500\"></i>\n            <span class=\"text-lg font-semibold text-gray-700\"\n              >Filtros e A\u00E7\u00F5es</span\n            >\n          </div>\n          <button\n            *ngIf=\"data.actionButton && data.actionButton.condition\"\n            [ngClass]=\"\n              (data.actionButton.colorClass || 'bg-blue-500') +\n              ' flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white hover:opacity-70'\n            \"\n            [routerLink]=\"data.actionButton.routerLink\"\n            (click)=\"\n              data.actionButton.method ? data.actionButton.method($event) : null\n            \"\n          >\n            <i\n              *ngIf=\"data.actionButton.icon\"\n              [class]=\"data.actionButton.icon\"\n            ></i>\n            {{ data.actionButton.label }}\n          </button>\n        </div>\n\n        <!-- Right Side: Search, Reset, Export -->\n        <div\n          class=\"flex flex-wrap gap-3\"\n          *ngIf=\"\n            this.hasFilterableColumn === true || this.hasSortableColumn === true\n          \"\n        >\n          <button\n            (click)=\"search()\"\n            type=\"button\"\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\"\n            matTooltip=\"Aplicar filtros\"\n          >\n            <i class=\"fa fa-search\"></i>\n            Pesquisar\n          </button>\n\n          <button\n            (click)=\"resetFilter()\"\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\"\n            matTooltip=\"Limpar filtros\"\n          >\n            <i class=\"fas fa-redo-alt\"></i>\n            Resetar\n          </button>\n\n          <button\n            *ngIf=\"data.download !== false && downloadTable\"\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\"\n            matTooltipPosition=\"above\"\n            matTooltip=\"Exportar Tabela\"\n            [disabled]=\"\n              this.dataSource && this.dataSource.filteredData.length <= 0\n            \"\n            (click)=\"\n              $any(arrange) && downloadTable !== undefined\n                ? downloadTable($any(arrange), data.conditions || [])\n                : null\n            \"\n          >\n            <i class=\"fa fa-download\"></i>\n            Exportar\n          </button>\n        </div>\n      </div>\n\n      <!-- FILTERS CONTENT (WITH REFINEMENTS) -->\n      <div class=\"mb-4 space-y-3\" *ngIf=\"filtersForm.controls.length > 0\">\n        <div\n          [formGroup]=\"$any(filterGroup)\"\n          *ngFor=\"let filterGroup of filtersForm.controls; let i = index\"\n          class=\"flex flex-wrap items-center gap-3 rounded-lg border border-gray-200 p-2\"\n        >\n          <!-- FILTER TYPE SELECTOR -->\n          <div class=\"min-w-[200px] flex-1\" *ngIf=\"dropdownItems.length > 0\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n              <mat-label>Tipo de filtro</mat-label>\n              <mat-select\n                placeholder=\"Selecione o tipo...\"\n                formControlName=\"selectFilter\"\n                (selectionChange)=\"onSelectFilterChange()\"\n              >\n                <mat-option *ngFor=\"let item of dropdownItems\" [value]=\"item\">\n                  <div class=\"flex items-center gap-2\">\n                    <i\n                      [class]=\"item.icon || 'fa fa-filter'\"\n                      class=\"text-sm text-blue-500\"\n                    ></i>\n                    <span>{{ item.title }}</span>\n                  </div>\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n\n          <!-- TEXT FILTER -->\n          <div\n            class=\"min-w-[200px] flex-1\"\n            *ngIf=\"\n              $any(filterGroup).get('selectFilter')?.value?.arrange === 'filter'\n            \"\n          >\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n              <mat-label class=\"flex items-center gap-2\">\n                <i class=\"fa fa-search text-gray-400\"></i>\n                <span>{{\n                  $any(filterGroup).get(\"selectFilter\")?.value?.title ||\n                    \"Filtrar\"\n                }}</span>\n              </mat-label>\n              <input\n                (keyup.enter)=\"search()\"\n                formControlName=\"typeFilter\"\n                matInput\n                placeholder=\"Digite para filtrar...\"\n                #input\n              />\n            </mat-form-field>\n          </div>\n\n          <!-- DROPDOWN FILTER -->\n          <div\n            class=\"min-w-[200px] flex-1\"\n            *ngIf=\"\n              $any(filterGroup).get('selectFilter')?.value &&\n              $any(filterGroup)\n                .get('selectFilter')\n                ?.value.hasOwnProperty('items')\n            \"\n          >\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n              <mat-label>{{\n                $any(filterGroup).get(\"selectFilter\")?.value?.title ||\n                  \"Selecione\"\n              }}</mat-label>\n              <mat-select\n                placeholder=\"Selecione...\"\n                formControlName=\"selectItem\"\n                multiple\n              >\n                <mat-option\n                  *ngFor=\"\n                    let item of $any(filterGroup).get('selectFilter')?.value\n                      .items\n                  \"\n                  [value]=\"item\"\n                >\n                  {{ item.label }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n\n          <!-- DATE FILTER -->\n          <div\n            class=\"min-w-[340px] flex-auto\"\n            *ngIf=\"\n              $any(filterGroup).get('selectFilter')?.value?.arrange ===\n              'filterByDate'\n            \"\n          >\n            <div\n              class=\"flex flex-col items-stretch gap-3 sm:flex-row sm:items-center\"\n            >\n              <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                <mat-label class=\"flex items-center gap-2\">\n                  <i class=\"fa fa-calendar text-gray-400\"></i>\n                  <span>Data Inicial</span>\n                </mat-label>\n                <input\n                  matInput\n                  (keyup.enter)=\"search()\"\n                  formControlName=\"initialDate\"\n                  [dropSpecialCharacters]=\"false\"\n                  mask=\"d0/M0/0000\"\n                  placeholder=\"DD/MM/AAAA\"\n                  maxlength=\"10\"\n                />\n              </mat-form-field>\n\n              <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                <mat-label class=\"flex items-center gap-2\">\n                  <i class=\"fa fa-calendar text-gray-400\"></i>\n                  <span>Data Final</span>\n                </mat-label>\n                <input\n                  (keyup.enter)=\"search()\"\n                  matInput\n                  formControlName=\"finalDate\"\n                  [dropSpecialCharacters]=\"false\"\n                  mask=\"d0/M0/0000\"\n                  placeholder=\"DD/MM/AAAA\"\n                  maxlength=\"10\"\n                />\n              </mat-form-field>\n            </div>\n          </div>\n\n          <!-- REMOVE FILTER BUTTON -->\n          <div *ngIf=\"filtersForm.length > 1\" class=\"ml-auto flex-shrink-0\">\n            <button\n              (click)=\"removeFilter(i)\"\n              class=\"flex h-10 w-10 items-center justify-center rounded-full transition-colors duration-300 hover:bg-red-100\"\n              matTooltip=\"Remover filtro\"\n            >\n              <i class=\"fa fa-trash text-red-500 hover:text-red-600\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- PANEL FOOTER: Add Filter & Sort -->\n      <div\n        class=\"-mb-2 flex flex-col items-center justify-between gap-4 border-t border-gray-200 pt-4 sm:flex-row\"\n      >\n        <!-- Add Filter Button -->\n        <div *ngIf=\"dropdownItems.length > 0\">\n          <button\n            (click)=\"addFilter()\"\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\"\n            matTooltip=\"Adicionar novo filtro\"\n          >\n            <i class=\"fa fa-plus mr-2\"></i>\n            Adicionar Filtro\n          </button>\n        </div>\n\n        <!-- Sort Dropdown -->\n        <div\n          class=\"w-full sm:w-auto sm:min-w-[250px]\"\n          *ngIf=\"sortableDropdownItems.length > 0\"\n        >\n          <mat-form-field appearance=\"outline\" class=\"w-full\">\n            <mat-label>Ordenar por</mat-label>\n            <mat-select placeholder=\"Selecione...\" [formControl]=\"selectSort\">\n              <mat-option\n                *ngFor=\"let item of sortableDropdownItems\"\n                [value]=\"item\"\n              >\n                <div class=\"flex items-center gap-2\">\n                  <i class=\"fa fa-sort-alpha-down text-cyan-600\"></i>\n                  <span>{{ item.title }}</span>\n                </div>\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n\n    <!-- SIMPLE SEARCH (for non-paginated tables) -->\n    <div\n      class=\"rounded-xl border border-gray-200 bg-white p-4 shadow-lg\"\n      *ngIf=\"data.pagination === false\"\n    >\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label class=\"flex items-center gap-2\">\n          <i class=\"fa fa-search text-blue-500\"></i>\n          Buscar\n        </mat-label>\n        <input\n          matInput\n          (keyup.enter)=\"search()\"\n          (keyup)=\"applyFilter(filterInput.value)\"\n          placeholder=\"Digite para filtrar...\"\n          #filterInput\n        />\n        <mat-icon matSuffix class=\"text-gray-500\">search</mat-icon>\n      </mat-form-field>\n      <button\n        *ngIf=\"data.actionButton\"\n        [ngClass]=\"\n          (data.actionButton.colorClass || 'bg-blue-500') +\n          ' float-right flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white hover:opacity-70'\n        \"\n        [routerLink]=\"data.actionButton.routerLink\"\n        (click)=\"\n          data.actionButton.method ? data.actionButton.method($event) : null\n        \"\n      >\n        <i *ngIf=\"data.actionButton.icon\" [class]=\"data.actionButton.icon\"></i>\n        {{ data.actionButton.label }}\n      </button>\n    </div>\n\n    <div class=\"flex flex-col\">\n      <div\n        class=\"mx-auto flex flex-col\"\n        *ngIf=\"data.tabs && data.tabs.tabsData && data.tabs.tabsData.length > 0\"\n      >\n        <!-- Calcular quantos grupos de 6 tabs existem -->\n        <ng-container\n          *ngFor=\"\n            let groupIndex of getTabGroups(data.tabs.tabsData);\n            let i = index\n          \"\n        >\n          <div class=\"mx-auto flex flex-row\">\n            <ng-container\n              *ngFor=\"\n                let tab of getTabGroup(data.tabs.tabsData, groupIndex);\n                let j = index\n              \"\n            >\n              <button\n                class=\"border-2 border-gray-300 bg-gray-200 px-4 py-2 font-medium transition hover:brightness-95\"\n                [ngClass]=\"\n                  isTabSelected(getRealTabIndex(i, j))\n                    ? 'border-b-0 brightness-110'\n                    : ''\n                \"\n                (click)=\"onTableSelected(i, j)\"\n              >\n                {{ tab.label }}\n                <span\n                  *ngIf=\"tab.counter !== undefined\"\n                  class=\"ml-2 text-xs font-bold\"\n                  [ngClass]=\"tab.counterClass\"\n                >\n                  {{ tab.counter }}\n                </span>\n              </button>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"mat-elevation-z8 w-full overflow-x-auto rounded-xl\">\n        <table\n          mat-table\n          [dataSource]=\"dataSource\"\n          matSort\n          #sort=\"matSort\"\n          matSortActive=\"createdAt\"\n          matSortDirection=\"desc\"\n        >\n          <ng-container\n            *ngFor=\"let col of data.displayedColumns\"\n            matColumnDef=\"{{ col.property }}\"\n          >\n            <ng-container *matHeaderCellDef>\n              <!-- IF THE COLUMN IS NOT SORTABLE, THEN DON'T SHOW THE SORT BUTTONS -->\n              <th\n                *ngIf=\"!col.isSortable || data.pagination === true\"\n                mat-header-cell\n                [ngClass]=\"\n                  (data?.color?.bg ? ' ' + $any(data.color).bg : '') +\n                  (data?.color?.text ? ' ' + $any(data.color).text : '')\n                \"\n              >\n                {{ col.title }}\n              </th>\n              <!-- IF THE COLUMN IS SORTABLE, THEN SHOW THE SORT BUTTONS -->\n              <th\n                *ngIf=\"col.isSortable && data.pagination === false\"\n                mat-header-cell\n                mat-sort-header\n                [ngClass]=\"\n                  (data?.color?.bg ? ' ' + $any(data.color).bg : '') +\n                  (data?.color?.text ? ' ' + $any(data.color).text : '')\n                \"\n              >\n                {{ col.title }}\n              </th>\n              <td\n                mat-cell\n                *matCellDef=\"let row\"\n                (click)=\"col.method ? col.method(row) : null\"\n                (mouseenter)=\"onCellMouseEnter($event, row, col)\"\n                (mouseleave)=\"onCellMouseLeave()\"\n                (mousemove)=\"onCellMouseMove($event)\"\n              >\n                <!-- CHECK IF THE COLUMN MUST BE DISPLAYED -->\n                <span *ngIf=\"!col.image && !col.iconClass && !col.method\">\n                  <ng-container>\n                    <span\n                      *ngIf=\"\n                        col.charLimit &&\n                          row[col.property] &&\n                          row[col.property].length > col.charLimit;\n                        else withinLimit\n                      \"\n                    >\n                      <a\n                        *ngIf=\"col.hasLink === true\"\n                        [href]=\"row[col.property]\"\n                        target=\"_blank\"\n                      >\n                        {{ getDisplayValue(col, row) }}\n                      </a>\n                      <a\n                        *ngIf=\"col.hasLink && isString(col.hasLink)\"\n                        [href]=\"col.hasLink\"\n                        target=\"_blank\"\n                      >\n                        {{ getDisplayValue(col, row) }}\n                      </a>\n                      <span\n                        *ngIf=\"col.hasLink !== true && !isString(col.hasLink)\"\n                      >\n                        {{ getDisplayValue(col, row) }}\n                      </span>\n                    </span>\n                  </ng-container>\n                  <ng-template #withinLimit>\n                    <a\n                      *ngIf=\"col.hasLink === true\"\n                      [href]=\"row[col.property]\"\n                      target=\"_blank\"\n                    >\n                      {{ getDisplayValue(col, row, true) }}\n                    </a>\n                    <a\n                      *ngIf=\"col.hasLink && isString(col.hasLink)\"\n                      [href]=\"col.hasLink\"\n                      target=\"_blank\"\n                    >\n                      {{ getDisplayValue(col, row, true) }}\n                    </a>\n                    <span\n                      *ngIf=\"col.hasLink !== true && !isString(col.hasLink)\"\n                    >\n                      {{ getDisplayValue(col, row, true) }}\n                    </span>\n                  </ng-template>\n                </span>\n                <!------------------- IMAGE ------------------>\n                <img\n                  *ngIf=\"\n                    col.image && col.image.path && !col.iconClass && !col.method\n                  \"\n                  [src]=\"col.image.path + '/' + row[col.property]\"\n                  [ngClass]=\"col.image.class\"\n                  alt=\"Imagem\"\n                />\n                <img\n                  *ngIf=\"\n                    col.image && col.image.url && !col.iconClass && !col.method\n                  \"\n                  [src]=\"row[col.property]\"\n                  [ngClass]=\"col.image.class\"\n                  alt=\"Imagem\"\n                />\n                <ng-container *ngIf=\"col.iconClass\">\n                  <button\n                    *ngFor=\"let iconClass of col.iconClass\"\n                    (click)=\"\n                      iconClass.buttonMethod\n                        ? iconClass.buttonMethod(row, $event)\n                        : $event.stopPropagation()\n                    \"\n                  >\n                    <span\n                      [ngClass]=\"iconClass.class\"\n                      *ngIf=\"\n                        iconClass.condition === undefined ||\n                        (iconClass.condition !== undefined &&\n                          $any(iconClass.condition)(row))\n                      \"\n                      >{{ iconClass.text }}</span\n                    >\n                  </button>\n                </ng-container>\n              </td>\n            </ng-container>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"columnProperties\"></tr>\n          <tr\n            [ngClass]=\"{\n              'example-element-row': data.isNotClickable === true,\n              'example-element-row cursor-pointer': !data.isNotClickable\n            }\"\n            mat-row\n            *matRowDef=\"let row; columns: columnProperties\"\n            (click)=\"goToDetails(row)\"\n          ></tr>\n\n          <!-- ROW SHOWN WHEN THERE IS NO MATCHING DATA. -->\n          <tr class=\"mat-row\" *matNoDataRow>\n            <td *ngIf=\"!isLoading\" class=\"mat-cell p-4\" colspan=\"4\">\n              Nenhum resultado encontrado para a busca\n            </td>\n          </tr>\n        </table>\n\n        <div class=\"flex justify-center\" *ngIf=\"isLoading\">\n          <mat-spinner></mat-spinner>\n        </div>\n\n        <div class=\"paginator-container\">\n          <mat-paginator\n            #paginator\n            [pageSizeOptions]=\"[25, 50, 100]\"\n            [pageSize]=\"pageSize\"\n            [length]=\"totalItems\"\n            showFirstLastButtons\n            aria-label=\"Select page of periodic elements\"\n            (page)=\"onPageChange($event)\"\n            [ngClass]=\"{\n              'hide-length':\n                ['filter', 'filterByDate', 'equals'].includes(\n                  this.currentArrange\n                ) || this.data.filterFn,\n              'hide-next-button': !hasNextPage && data.pagination === true,\n              'hide-last-button':\n                (!hasNextPage && data.pagination === true) || this.data.filterFn\n            }\"\n          >\n          </mat-paginator>\n          <div\n            *ngIf=\"\n              !isLoading &&\n              dataSource?.data &&\n              dataSource.data.length > 0 &&\n              data?.filterFn\n            \"\n            class=\"page-number-display\"\n          >\n            {{ currentPageNumber }}\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- TOOLTIP PERSONALIZADO -->\n  <div\n    *ngIf=\"showTooltip\"\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\"\n    [style.left.px]=\"tooltipPosition.x\"\n    [style.top.px]=\"tooltipPosition.y\"\n    [style.pointer-events]=\"'none'\"\n  >\n    {{ tooltipContent }}\n  </div>\n</div>\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: [{
-                type: Input
-            }], paginator: [{
-                type: ViewChild,
-                args: [MatPaginator]
-            }], sort: [{
-                type: ViewChild,
-                args: [MatSort]
+class TableComponent {
+    // CONSTRUCTOR
+    constructor(router, tableService, firestore) {
+        this.router = router;
+        this.tableService = tableService;
+        this.firestore = firestore;
+        this.arrange = null;
+        this.currentPageNumber = 1;
+        this.currentClientPageIndex = 0;
+        this.items = [];
+        this.isLoading = false;
+        this.lastDoc = null;
+        this.firstDoc = null;
+        this.sortBy = {
+            field: 'createdAt',
+            order: 'desc',
+        };
+        this.columnProperties = [];
+        this.selectSort = new FormControl('');
+        this.currentArrange = '';
+        this.hasNextPage = false;
+        this.dropdownItems = [];
+        this.sortableDropdownItems = [];
+        this.pageSize = 25;
+        this.totalItems = 0;
+        this.filterValue = null;
+        this.hasFilterableColumn = false;
+        this.hasSortableColumn = false;
+        this.filterSubject = new Subject();
+        this.debounceTimeMs = 500;
+        this.selectedTab = 0;
+        // Propriedades para controle do tooltip
+        this.hoveredCell = null;
+        this.showTooltip = false;
+        this.tooltipContent = '';
+        this.tooltipPosition = { x: 0, y: 0 };
+        this.filtersForm = new FormArray([this.createFilterGroup()]);
+    }
+    createFilterGroup() {
+        return new FormGroup({
+            selectFilter: new FormControl(''),
+            typeFilter: new FormControl(''),
+            selectItem: new FormControl(''),
+            initialDate: new FormControl('', this.tableService.dateFormatValidator()),
+            finalDate: new FormControl('', this.tableService.dateFormatValidator()),
+        });
+    }
+    addFilter(filterData) {
+        const newFilterGroup = this.createFilterGroup();
+        if (filterData) {
+            if (filterData.selectFilter) {
+                newFilterGroup.get('selectFilter')?.setValue(filterData.selectFilter);
+            }
+            if (filterData.typeFilter) {
+                newFilterGroup.get('typeFilter')?.setValue(filterData.typeFilter);
+            }
+            if (filterData.selectItem) {
+                newFilterGroup.get('selectItem')?.setValue(filterData.selectItem);
+            }
+            if (filterData.initialDate) {
+                newFilterGroup.get('initialDate')?.setValue(filterData.initialDate);
+            }
+            if (filterData.finalDate) {
+                newFilterGroup.get('finalDate')?.setValue(filterData.finalDate);
+            }
+        }
+        this.filtersForm.push(newFilterGroup);
+    }
+    onSelectFilterChange() {
+        const lastIndex = this.filtersForm.length - 1;
+        const lastFilter = this.filtersForm.at(lastIndex);
+        if (lastFilter.get('selectFilter')?.value) {
+            this.addFilter();
+        }
+    }
+    removeFilter(index) {
+        this.filtersForm.removeAt(index);
+        if (this.filtersForm.length === 0) {
+            this.addFilter();
+        }
+    }
+    removeAllFilters() {
+        this.filtersForm.clear();
+        this.addFilter();
+        this.resetFilter();
+    }
+    // METHODS
+    async ngOnInit() {
+        if (!this.data.color)
+            this.data.color = { bg: 'bg-primary', text: 'text-black' };
+        this.columnProperties = this.data.displayedColumns.map((column) => {
+            return column.property;
+        });
+        if (this.data.actionButton && !this.data.actionButton.condition) {
+            this.data.actionButton.condition = (_row) => true;
+        }
+        this.data.displayedColumns.forEach((col) => {
+            if (col.isFilterable) {
+                if (this.hasFilterableColumn === false)
+                    this.hasFilterableColumn = true;
+                this.dropdownItems.push({
+                    ...col,
+                    arrange: 'filter',
+                    title: col.title,
+                });
+            }
+            if (col.isSortable) {
+                if (this.hasSortableColumn === false)
+                    this.hasSortableColumn = true;
+                this.sortableDropdownItems.push({
+                    ...col,
+                    arrange: 'ascending',
+                    title: col.title + ': crescente',
+                });
+                this.sortableDropdownItems.push({
+                    ...col,
+                    arrange: 'descending',
+                    title: col.title + ': decrescente',
+                });
+            }
+            if (col.isFilterableByDate) {
+                this.dropdownItems.push({
+                    ...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({ ...option, arrange: 'equals' }));
+        }
+        // Sem paginação
+        if (this.data.pagination === false) {
+            await this.loadItems();
+        }
+        // Com paginação
+        if (this.data.pagination === true) {
+            if (this.data.sortBy)
+                this.sortBy = {
+                    field: this.data.sortBy.field,
+                    order: this.data.sortBy.order,
+                };
+            this.filterSubject
+                .pipe(debounceTime(this.debounceTimeMs))
+                .subscribe(() => {
+                this.loadItemsPaginated('reload', true);
+            });
+            this.isLoading = true;
+            await this.loadItemsPaginated('reload', true);
+            this.sort.active = 'createdAt';
+            this.sort.direction = 'desc';
+            this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
+            this.totalItems = 0;
+            if (this.data.totalRef) {
+                for (const totalRef of this.data.totalRef) {
+                    const totalRefDoc = await totalRef.ref.get();
+                    const docData = totalRefDoc.data();
+                    if (docData && docData[totalRef.field])
+                        this.totalItems = (this.totalItems +
+                            docData[totalRef.field]);
+                }
+            }
+            this.isLoading = false;
+        }
+    }
+    getDisplayValue(col, row, withinLimit = false) {
+        let value;
+        if (col.calculateValue) {
+            value = col.calculateValue(row);
+        }
+        else {
+            value = this.getNestedValue(row, col.property);
+        }
+        if (Array.isArray(value) && col.arrayField) {
+            value = this.formatArrayValue(value, col.arrayField);
+        }
+        if (col.queryLength && row[col.property]) {
+            value = row[col.property];
+        }
+        value = col.pipe ? col.pipe.transform(value) : value;
+        if (value === null || value === undefined) {
+            value = '';
+        }
+        else {
+            value = String(value);
+        }
+        if (typeof value !== 'string') {
+            value = '';
+        }
+        if (withinLimit || !col.charLimit) {
+            return value;
+        }
+        return value.substring(0, col.charLimit) + '...';
+    }
+    getNestedValue(obj, path) {
+        if (!path)
+            return undefined;
+        const properties = path.split('.');
+        return properties.reduce((acc, currentPart) => acc && acc[currentPart], obj);
+    }
+    formatArrayValue(array, field) {
+        if (!Array.isArray(array) || array.length === 0) {
+            return '';
+        }
+        const values = array
+            .map((item) => {
+            if (typeof item === 'object' && item !== null) {
+                return item[field] || '';
+            }
+            return String(item);
+        })
+            .filter((value) => value !== '' && value !== null && value !== undefined);
+        return values.join(', ');
+    }
+    // Métodos sem paginação
+    async loadItems() {
+        this.items = await this.tableService.getItems(this.data.collectionRef);
+        if (this.data.conditions) {
+            this.filterItems();
+        }
+        await this.loadRelations();
+        await this.loadQueryLengths();
+        this.totalItems = this.items.length;
+        // 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) {
+            this.dataSource.sort.active = this.data.sortBy.field;
+            this.dataSource.sort.direction = this.data.sortBy.order;
+            this.dataSource.sort.sortChange.emit();
+        }
+        this.dataSource.filterPredicate = (data, filter) => {
+            return this.data.displayedColumns.some((col) => {
+                if (col.filterPredicates) {
+                    return col.filterPredicates.some((predicate) => {
+                        const propertyValue = data[col.property];
+                        if (!propertyValue || typeof propertyValue !== 'object') {
+                            return false;
+                        }
+                        const predicateValue = propertyValue[predicate];
+                        if (predicateValue === null || predicateValue === undefined) {
+                            return false;
+                        }
+                        return String(predicateValue)
+                            .trim()
+                            .toLocaleLowerCase()
+                            .includes(filter);
+                    });
+                }
+                if (col.property && col.isFilterable) {
+                    const propertyValue = data[col.property];
+                    if (propertyValue === null || propertyValue === undefined) {
+                        return false;
+                    }
+                    return String(propertyValue)
+                        .trim()
+                        .toLocaleLowerCase()
+                        .includes(filter);
+                }
+                return false;
+            });
+        };
+        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) => {
+            const group = control;
+            const selectedFilter = group.get('selectFilter')?.value;
+            if (!selectedFilter)
+                return;
+            const arrange = selectedFilter.arrange;
+            if (arrange === 'filterByDate') {
+                const initial = group.get('initialDate')?.value;
+                const final = group.get('finalDate')?.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
+    async loadItemsPaginated(navigation = 'reload', reset = false) {
+        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) => {
+            const group = control;
+            const selectedFilter = group.get('selectFilter')?.value;
+            if (!selectedFilter)
+                return [];
+            const arrange = selectedFilter.arrange;
+            if (arrange === 'filter') {
+                const filterValue = group.get('typeFilter')?.value;
+                if (!filterValue)
+                    return [];
+                return {
+                    arrange,
+                    filter: {
+                        property: selectedFilter.property,
+                        filtering: filterValue,
+                    },
+                    dateFilter: undefined,
+                };
+            }
+            if (arrange === 'filterByDate') {
+                const initial = group.get('initialDate')?.value;
+                const final = group.get('finalDate')?.value;
+                if (initial && final) {
+                    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);
+                    return {
+                        arrange,
+                        filter: undefined,
+                        dateFilter: {
+                            initial: initialDate,
+                            final: finalDate,
+                        },
+                    };
+                }
+                return [];
+            }
+            if (selectedFilter.hasOwnProperty('items') && arrange === 'equals') {
+                const selectedItems = group.get('selectItem')?.value;
+                if (Array.isArray(selectedItems) && selectedItems.length > 0) {
+                    return selectedItems.map((item) => ({
+                        arrange,
+                        filter: {
+                            property: item.property,
+                            filtering: item.value,
+                        },
+                        dateFilter: undefined,
+                    }));
+                }
+            }
+            return [];
+        })
+            .filter((f) => f && (f.filter?.filtering !== undefined || f.dateFilter));
+        this.arrange = {
+            filters: activeFilters,
+            sortBy: this.sortBy,
+        };
+        const paginated = {
+            batchSize: this.pageSize,
+            collection: this.data.collection,
+            doc: { lastDoc: this.lastDoc, firstDoc: this.firstDoc },
+            navigation,
+            arrange: this.arrange,
+            conditions: this.data.conditions,
+            size: this.totalItems,
+            filterFn: this.data.filterFn,
+            clientPageIndex: this.currentClientPageIndex,
+        };
+        const result = await this.tableService.getPaginated(paginated);
+        this.items = result.items;
+        await this.loadRelations();
+        await this.loadQueryLengths();
+        this.lastDoc = result.lastDoc;
+        this.firstDoc = result.firstDoc;
+        // Atualizar currentClientPageIndex se retornado pelo fallback
+        if (result.currentClientPageIndex !== undefined) {
+            this.currentClientPageIndex = result.currentClientPageIndex;
+        }
+        let sum = 0;
+        if (this.data.totalRef) {
+            for (const totalRef of this.data.totalRef) {
+                const totalRefDoc = await totalRef.ref.get();
+                const docData = totalRefDoc.data();
+                if (docData || result.filterLength) {
+                    sum =
+                        result.filterLength ??
+                            (sum + (docData ? docData[totalRef.field] : 0));
+                }
+            }
+            this.totalItems = sum;
+        }
+        this.hasNextPage = result.hasNextPage;
+        this.dataSource = new MatTableDataSource(this.items);
+        this.filterPredicate = this.dataSource.filterPredicate;
+    }
+    async onPageChange(event) {
+        if (this.data.pagination === true && event) {
+            this.isLoading = true;
+            const previousPageIndex = event.previousPageIndex ?? 0;
+            const pageIndex = event.pageIndex;
+            const currentComponentPageSize = this.pageSize;
+            const eventPageSize = event.pageSize;
+            const totalItems = this.totalItems;
+            let navigationDirection;
+            let resetDocs = false;
+            let originalPageSize = null;
+            const lastPageIndex = Math.max(0, Math.ceil(totalItems / eventPageSize) - 1);
+            // Atualizar currentClientPageIndex sempre para o fallback
+            this.currentClientPageIndex = pageIndex;
+            if (previousPageIndex !== undefined && pageIndex > previousPageIndex) {
+                this.currentPageNumber++;
+            }
+            else if (previousPageIndex !== undefined &&
+                pageIndex < previousPageIndex) {
+                this.currentPageNumber = Math.max(1, this.currentPageNumber - 1);
+            }
+            if (eventPageSize !== currentComponentPageSize) {
+                console.log('Alterou a quantidade de elementos exibidos por página');
+                this.pageSize = eventPageSize;
+                navigationDirection = 'forward';
+                resetDocs = true;
+                this.currentClientPageIndex = 0;
+            }
+            else if (pageIndex === 0 &&
+                previousPageIndex !== undefined &&
+                pageIndex < previousPageIndex) {
+                console.log('Pulou para a primeira página');
+                navigationDirection = 'forward';
+                this.currentPageNumber = 1;
+                this.currentClientPageIndex = 0;
+                resetDocs = true;
+            }
+            else if (pageIndex === lastPageIndex &&
+                previousPageIndex !== undefined &&
+                pageIndex > previousPageIndex &&
+                pageIndex - previousPageIndex > 1) {
+                console.log('Pulou para a ultima página');
+                navigationDirection = 'backward';
+                resetDocs = true;
+                const itemsExpectedInLastPage = totalItems - lastPageIndex * eventPageSize;
+                if (itemsExpectedInLastPage > 0 &&
+                    itemsExpectedInLastPage < eventPageSize) {
+                    originalPageSize = this.pageSize;
+                    this.pageSize = itemsExpectedInLastPage;
+                }
+            }
+            else if (previousPageIndex !== undefined &&
+                pageIndex > previousPageIndex) {
+                console.log('Procedendo');
+                navigationDirection = 'forward';
+                resetDocs = false;
+            }
+            else if (previousPageIndex !== undefined &&
+                pageIndex < previousPageIndex) {
+                console.log('Retrocedendo.');
+                navigationDirection = 'backward';
+                resetDocs = false;
+            }
+            else if (previousPageIndex !== undefined &&
+                pageIndex === previousPageIndex) {
+                console.log('Recarregando.');
+                navigationDirection = 'reload';
+                resetDocs = false;
+            }
+            else if (previousPageIndex === undefined && pageIndex === 0) {
+                console.log('Evento inicial do paginador para pág 0. ngOnInit carregou.');
+                this.isLoading = false;
+                if (event)
+                    this.pageEvent = event;
+                return;
+            }
+            else {
+                console.warn('INESPERADO! Condição de navegação não tratada:', event);
+                this.isLoading = false;
+                if (event)
+                    this.pageEvent = event;
+                return;
+            }
+            if (navigationDirection) {
+                try {
+                    await this.loadItemsPaginated(navigationDirection, resetDocs);
+                }
+                catch (error) {
+                    console.error('Erro ao carregar itens paginados:', error);
+                }
+                finally {
+                    if (originalPageSize !== null) {
+                        this.pageSize = originalPageSize;
+                    }
+                }
+            }
+            if (event)
+                this.pageEvent = event;
+            this.isLoading = false;
+        }
+    }
+    // Outros métodos
+    applyFilter(value) {
+        // Sem paginação
+        if (this.data.pagination === false) {
+            this.dataSource.filter = String(value).trim().toLowerCase();
+        }
+        // Com paginação
+        if (this.data.pagination === true) {
+            this.filterValue = value;
+            this.filterSubject.next(this.filterValue);
+        }
+    }
+    goToDetails(row) {
+        if (this.data.isNotClickable) {
+            return;
+        }
+        const urlPath = this.data.url || this.data.name;
+        const url = this.router.serializeUrl(this.router.createUrlTree([`/${urlPath}`, row.id]));
+        window.open(url, '_blank');
+    }
+    async getRelation(params) {
+        try {
+            let snapshot;
+            if (params.id !== '' &&
+                params.id !== undefined &&
+                params.collection !== undefined &&
+                params.collection !== '') {
+                snapshot = await firstValueFrom(this.firestore.collection(params.collection).doc(params.id).get());
+            }
+            if (snapshot && snapshot.exists) {
+                const data = snapshot.data();
+                return data?.[params.newProperty] ?? '';
+            }
+            return '';
+        }
+        catch (e) {
+            console.log(e);
+            return '';
+        }
+    }
+    async loadRelations() {
+        const relationPromises = this.data.displayedColumns
+            .filter((col) => col.relation)
+            .flatMap((col) => this.items.map(async (item) => {
+            if (col.relation) {
+                item[col.property] = await this.getRelation({
+                    id: item[col.relation.property],
+                    collection: col.relation.collection,
+                    newProperty: col.relation.newProperty,
+                });
+            }
+        }));
+        await Promise.all(relationPromises);
+    }
+    async getQueryLength(params) {
+        const snapshot = await this.firestore
+            .collection(params.relation.collection)
+            .ref.where(params.relation.property, params.relation.operator, params.item[params.relation.value])
+            .get();
+        return snapshot.size;
+    }
+    async loadQueryLengths() {
+        const lengthPromises = this.data.displayedColumns
+            .filter((col) => col.queryLength)
+            .flatMap((col) => this.items.map(async (item) => {
+            if (col.queryLength) {
+                item[col.property] = await this.getQueryLength({
+                    item: item,
+                    relation: col.queryLength,
+                });
+            }
+        }));
+        await Promise.all(lengthPromises);
+    }
+    filterItems() {
+        if (this.data.conditions) {
+            this.data.conditions.forEach((cond) => {
+                this.items = this.items.filter((item) => {
+                    const operatorFunction = this.tableService.operators[cond.operator];
+                    if (operatorFunction) {
+                        return operatorFunction(item[cond.firestoreProperty], cond.dashProperty);
+                    }
+                    return false;
+                });
+            });
+        }
+    }
+    // Filtro de data
+    async search() {
+        if (this.selectSort.value) {
+            if (this.selectSort.value.arrange === 'ascending') {
+                this.sortBy = {
+                    field: this.selectSort.value.property,
+                    order: 'asc',
+                };
+            }
+            if (this.selectSort.value.arrange === 'descending') {
+                this.sortBy = {
+                    field: this.selectSort.value.property,
+                    order: 'desc',
+                };
+            }
+        }
+        // Sem paginação: aplicar filtros client-side
+        if (this.data.pagination === false) {
+            this.applyFiltersToDataSource();
+            this.currentArrange =
+                this.filtersForm.length > 0
+                    ? this.filtersForm.at(0).get('selectFilter')?.value?.arrange ?? ''
+                    : '';
+        }
+        else {
+            // Com paginação: comportamento original
+            await this.loadItemsPaginated('reload', true);
+            this.currentArrange =
+                this.filtersForm.length > 0
+                    ? this.filtersForm.at(0).get('selectFilter')?.value?.arrange ?? ''
+                    : '';
+            this.paginator.firstPage();
+        }
+    }
+    async resetFilter() {
+        this.dataSource.filter = '';
+        if (this.filterPredicate) {
+            this.dataSource.filterPredicate = this.filterPredicate;
+        }
+        this.filtersForm.clear();
+        this.addFilter();
+        this.selectSort.patchValue('');
+        this.sortBy = {
+            order: this.data.sortBy ? this.data.sortBy.order : 'desc',
+            field: this.data.sortBy ? this.data.sortBy.field : 'createdAt',
+        };
+        // 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
+            await this.loadItemsPaginated('reload', true);
+            this.currentArrange = '';
+            this.paginator.firstPage();
+        }
+    }
+    // Método público para recarregar a tabela
+    async reloadTable() {
+        if (this.data.pagination) {
+            await this.loadItemsPaginated('reload', true);
+            this.paginator.firstPage();
+        }
+        else {
+            await this.loadItems();
+        }
+    }
+    updateDisplayedColumns() {
+        if (this.dataSource) {
+            this.dataSource = new MatTableDataSource([]);
+        }
+        this.columnProperties = this.data.displayedColumns.map((column) => {
+            return column.property;
+        });
+        this.dropdownItems = [];
+        this.sortableDropdownItems = [];
+        this.data.displayedColumns.forEach((col) => {
+            if (col.isFilterable) {
+                this.dropdownItems.push({
+                    ...col,
+                    arrange: 'filter',
+                    title: col.title,
+                });
+            }
+            if (col.isSortable) {
+                this.sortableDropdownItems.push({
+                    ...col,
+                    arrange: 'ascending',
+                    title: col.title + ': crescente',
+                });
+                this.sortableDropdownItems.push({
+                    ...col,
+                    arrange: 'descending',
+                    title: col.title + ': decrescente',
+                });
+            }
+            if (col.isFilterableByDate) {
+                this.dropdownItems.push({
+                    ...col,
+                    arrange: 'filterByDate',
+                    title: col.title + ': filtro por data',
+                });
+            }
+        });
+        if (this.data.filterableOptions &&
+            Array.isArray(this.data.filterableOptions)) {
+            this.data.filterableOptions.forEach((option) => this.dropdownItems.push({ ...option, arrange: 'equals' }));
+        }
+    }
+    isString(value) {
+        return typeof value === 'string';
+    }
+    // Métodos para controle do tooltip
+    onCellMouseEnter(event, row, col) {
+        // Só mostrar tooltip se a coluna tiver charLimit definido
+        if (!col.charLimit) {
+            return;
+        }
+        const fullValue = this.getDisplayValue(col, row, true);
+        // Só mostrar tooltip se o valor completo for maior que o limite
+        if (fullValue.length <= col.charLimit) {
+            return;
+        }
+        this.hoveredCell = { row, col };
+        this.tooltipContent = fullValue;
+        // Definir posição do tooltip
+        this.tooltipPosition = {
+            x: event.clientX + 10,
+            y: event.clientY - 10,
+        };
+        // Timeout para mostrar o tooltip
+        this.tooltipTimeout = setTimeout(() => {
+            if (this.hoveredCell &&
+                this.hoveredCell.row === row &&
+                this.hoveredCell.col === col) {
+                this.showTooltip = true;
+            }
+        }, 500);
+    }
+    onCellMouseLeave() {
+        if (this.tooltipTimeout) {
+            clearTimeout(this.tooltipTimeout);
+            this.tooltipTimeout = null;
+        }
+        this.showTooltip = false;
+        this.hoveredCell = null;
+        this.tooltipContent = '';
+    }
+    onCellMouseMove(event) {
+        if (this.showTooltip) {
+            this.tooltipPosition = {
+                x: event.clientX + 10,
+                y: event.clientY - 10,
+            };
+        }
+    }
+    // Métodos para inversão vertical dos tabs
+    getTabGroups(tabs) {
+        if (!tabs || tabs.length === 0)
+            return [];
+        const totalGroups = Math.ceil(tabs.length / 6);
+        const groups = [];
+        // Criar array de índices invertidos (último grupo primeiro)
+        for (let i = totalGroups - 1; i >= 0; i--) {
+            groups.push(i);
+        }
+        return groups;
+    }
+    getTabGroup(tabs, groupIndex) {
+        if (!tabs || tabs.length === 0)
+            return [];
+        const startIndex = groupIndex * 6;
+        const endIndex = Math.min(startIndex + 6, tabs.length);
+        return tabs.slice(startIndex, endIndex);
+    }
+    getRealTabIndex(groupIndex, tabIndexInGroup) {
+        if (!this.data.tabs?.tabsData)
+            return 0;
+        const totalGroups = Math.ceil(this.data.tabs.tabsData.length / 6);
+        const realGroupIndex = totalGroups - 1 - groupIndex;
+        return realGroupIndex * 6 + tabIndexInGroup;
+    }
+    onTableSelected(i, j) {
+        if (!this.data.tabs?.tabsData || !this.data.tabs.method)
+            return;
+        this.selectedTab = this.getRealTabIndex(i, j);
+        const tab = this.data.tabs.tabsData[this.selectedTab];
+        if (tab) {
+            this.data.tabs.method(tab, this.selectedTab);
+        }
+    }
+    isTabSelected(originalIndex) {
+        return this.selectedTab === originalIndex;
+    }
+    shouldShowActionButton() {
+        if (!this.data?.actionButton) {
+            return false;
+        }
+        if (!this.data.actionButton.condition) {
+            return true;
+        }
+        try {
+            return this.data.actionButton.condition(null) ?? true;
+        }
+        catch {
+            return true;
+        }
+    }
+}
+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                  [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                  [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: [{
+                type: Input
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator]
+            }], sort: [{
+                type: ViewChild,
+                args: [MatSort]
             }] } });
 
-class NgFirebaseTableKxpModule {
-}
-NgFirebaseTableKxpModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgFirebaseTableKxpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgFirebaseTableKxpModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: NgFirebaseTableKxpModule, declarations: [NgFirebaseTableKxpComponent, TableComponent], imports: [CommonModule,
-        ReactiveFormsModule,
-        FormsModule,
-        RouterModule,
-        MatTableModule,
-        MatPaginatorModule,
-        MatSortModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule,
-        MatTooltipModule,
-        MatProgressSpinnerModule,
-        MatIconModule,
-        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,
-        MatTableModule,
-        MatPaginatorModule,
-        MatSortModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule,
-        MatTooltipModule,
-        MatProgressSpinnerModule,
-        MatIconModule,
-        MatDialogModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgFirebaseTableKxpModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NgFirebaseTableKxpComponent, TableComponent],
-                    imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        FormsModule,
-                        RouterModule,
-                        MatTableModule,
-                        MatPaginatorModule,
-                        MatSortModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatSelectModule,
-                        MatTooltipModule,
-                        MatProgressSpinnerModule,
-                        MatIconModule,
-                        MatDialogModule,
-                        NgxMaskDirective,
-                        NgxMaskPipe,
-                    ],
-                    exports: [NgFirebaseTableKxpComponent, TableComponent],
-                    providers: [provideNgxMask()],
-                }]
+class NgFirebaseTableKxpModule {
+}
+NgFirebaseTableKxpModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgFirebaseTableKxpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgFirebaseTableKxpModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: NgFirebaseTableKxpModule, declarations: [NgFirebaseTableKxpComponent, TableComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        RouterModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        MatTooltipModule,
+        MatProgressSpinnerModule,
+        MatIconModule,
+        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,
+        MatTableModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        MatTooltipModule,
+        MatProgressSpinnerModule,
+        MatIconModule,
+        MatDialogModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgFirebaseTableKxpModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NgFirebaseTableKxpComponent, TableComponent],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        RouterModule,
+                        MatTableModule,
+                        MatPaginatorModule,
+                        MatSortModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatTooltipModule,
+                        MatProgressSpinnerModule,
+                        MatIconModule,
+                        MatDialogModule,
+                        NgxMaskDirective,
+                        NgxMaskPipe,
+                    ],
+                    exports: [NgFirebaseTableKxpComponent, TableComponent],
+                    providers: [provideNgxMask()],
+                }]
         }] });
 
-class NgFirebaseTableKxpService {
-    constructor() { }
-}
-NgFirebaseTableKxpService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgFirebaseTableKxpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NgFirebaseTableKxpService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgFirebaseTableKxpService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgFirebaseTableKxpService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+class NgFirebaseTableKxpService {
+    constructor() { }
+}
+NgFirebaseTableKxpService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgFirebaseTableKxpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NgFirebaseTableKxpService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgFirebaseTableKxpService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgFirebaseTableKxpService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }], ctorParameters: function () { return []; } });
 
-/*
- * Public API Surface of ng-firebase-table-kxp
- */
+/*
+ * Public API Surface of ng-firebase-table-kxp
+ */
 // Main module
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { NgFirebaseTableKxpComponent, NgFirebaseTableKxpModule, NgFirebaseTableKxpService, TableComponent, TableService };