ng-firebase-table-kxp 1.0.1 → 1.0.2

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

@@ -0,0 +1,1784 @@
+import * as i0 from '@angular/core';
+import { Component, Injectable, Optional, Input, ViewChild, NgModule } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5 from '@angular/forms';
+import { FormControl, FormArray, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i1$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i6 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import * as i7 from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import * as i8 from '@angular/material/sort';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import * as i9 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i10 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i11 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i13 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i14 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i15 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@angular/material/dialog';
+import { MatDialogModule } from '@angular/material/dialog';
+import { firstValueFrom, Subject, debounceTime } from 'rxjs';
+import firebase from 'firebase/compat/app';
+import * as moment from 'moment';
+import * as i1 from '@angular/fire/compat/firestore';
+import * as i3 from 'ngx-toastr';
+import * as i12 from '@angular/material/core';
+
+class FirebaseTableKxpLibComponent {
+}
+FirebaseTableKxpLibComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FirebaseTableKxpLibComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FirebaseTableKxpLibComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FirebaseTableKxpLibComponent, selector: "lib-firebase-table-kxp-lib", ngImport: i0, template: `
+    <p>
+      firebase-table-kxp-lib works!
+    </p>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FirebaseTableKxpLibComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-firebase-table-kxp-lib', template: `
+    <p>
+      firebase-table-kxp-lib 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,
+            includes: (a, b) => a.includes(b),
+        };
+    }
+    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;
+    }
+    /**
+     * Detecta se a query vai precisar de index composto e deve usar fallback client-side
+     */
+    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 (hasConditions && hasArrangeFilters && hasSortBy) {
+            return true;
+        }
+        if (hasConditions && hasArrangeFilters) {
+            return true;
+        }
+        if (hasArrangeFilters && params.arrange.filters.length > 1 && hasSortBy) {
+            return true;
+        }
+        return false;
+    }
+    async getPaginated(params) {
+        // 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) => ['==', '>', '<', '>=', '<='].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) {
+            const equalsFilter = params.arrange.filters.find((f) => f.arrange === 'equals' && f.filter?.filtering);
+            if (equalsFilter && equalsFilter.filter) {
+                query = query.where(equalsFilter.filter.property, '==', equalsFilter.filter.filtering);
+                hasAppliedWhereClause = true;
+                appliedFirestoreFilter = equalsFilter;
+            }
+            else {
+                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');
+        const remainingEqualsFilters = equalsFilters.filter((f) => f !== appliedFirestoreFilter);
+        if (remainingEqualsFilters.length > 0) {
+            items = items.filter((item) => {
+                return remainingEqualsFilters.every((f) => item[f.filter.property] === f.filter.filtering);
+            });
+        }
+        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;
+            });
+        }
+        // Paginação
+        let currentClientPageIndex = 0;
+        if (params.navigation === 'reload') {
+            currentClientPageIndex = params.clientPageIndex || 0;
+        }
+        else if (params.navigation === 'forward') {
+            currentClientPageIndex = (params.clientPageIndex || 0) + 1;
+        }
+        else if (params.navigation === 'backward') {
+            currentClientPageIndex = Math.max(0, (params.clientPageIndex || 0) - 1);
+        }
+        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, dialogComponent) {
+        const dialogRef = this.dialog.open(dialogComponent, {
+            data: {
+                title: 'Você realmente deseja deletar esse item?',
+                description: 'Essa ação é irreversível.',
+            },
+        });
+        const result = await firstValueFrom(dialogRef.afterClosed());
+        if (!result === true) {
+            return false;
+        }
+        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) {
+                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('forward', true);
+            });
+            this.isLoading = true;
+            await this.loadItemsPaginated('forward', 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 (row[col.property] === null || row[col.property] === undefined) {
+            return '';
+        }
+        if (col.calculateValue) {
+            value = String(col.calculateValue(row));
+        }
+        else {
+            value = this.getNestedValue(row, col.property);
+        }
+        // Verifica se é um array e tem arrayField definido
+        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;
+        return withinLimit ? value : 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;
+        }
+        if (reset && ['backward', 'reload'].includes(navigation)) {
+            this.firstDoc = null;
+        }
+        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) {
+            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;
+    }
+}
+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                  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                  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"] }] });
+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                  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                  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 FirebaseTableKxpLibModule {
+}
+FirebaseTableKxpLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FirebaseTableKxpLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FirebaseTableKxpLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FirebaseTableKxpLibModule, declarations: [FirebaseTableKxpLibComponent, TableComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        RouterModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        MatTooltipModule,
+        MatProgressSpinnerModule,
+        MatIconModule,
+        MatDialogModule], exports: [FirebaseTableKxpLibComponent, TableComponent] });
+FirebaseTableKxpLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FirebaseTableKxpLibModule, 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: FirebaseTableKxpLibModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FirebaseTableKxpLibComponent, TableComponent],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        RouterModule,
+                        MatTableModule,
+                        MatPaginatorModule,
+                        MatSortModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatTooltipModule,
+                        MatProgressSpinnerModule,
+                        MatIconModule,
+                        MatDialogModule,
+                    ],
+                    exports: [FirebaseTableKxpLibComponent, TableComponent],
+                }]
+        }] });
+
+class FirebaseTableKxpLibService {
+    constructor() { }
+}
+FirebaseTableKxpLibService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FirebaseTableKxpLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FirebaseTableKxpLibService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FirebaseTableKxpLibService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FirebaseTableKxpLibService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+/*
+ * Public API Surface of firebase-table-kxp-lib
+ */
+// Main module
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FirebaseTableKxpLibComponent, FirebaseTableKxpLibModule, FirebaseTableKxpLibService, TableComponent, TableService };
+//# sourceMappingURL=ng-firebase-table-kxp.mjs.map