mapa-library-ui 0.90.2 → 1.0.0

package/fesm2022/mapa-library-ui-src-lib-components-table.mjs

@@ -0,0 +1,1052 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, inject, DestroyRef, Input, Output, Directive, effect, ViewChild, Component, SecurityContext, Injectable, Pipe, InjectionToken, Injector, signal, Optional, Inject, ChangeDetectionStrategy } from '@angular/core';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { map, startWith } from 'rxjs/operators';
+import * as i1 from '@angular/material/paginator';
+import { MatPaginatorIntl, MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i8 from '@angular/material/sort';
+import { MatSortModule, MatSort } from '@angular/material/sort';
+import * as i9 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule, MatTable } from '@angular/material/table';
+import * as i3 from '@angular/material/menu';
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
+import * as i4 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i5 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i2$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i1$1 from '@angular/platform-browser';
+import * as i1$2 from '@angular/common/http';
+
+class BubblePaginationDirective {
+    constructor(matPag, elementRef, ren) {
+        this.matPag = matPag;
+        this.elementRef = elementRef;
+        this.ren = ren;
+        this.pageIndexChangeEmitter = new EventEmitter();
+        this.showFirstButton = true;
+        this.showLastButton = true;
+        this.renderButtonsNumber = 2;
+        this.appCustomLength = 0;
+        this.hideDefaultArrows = false;
+        this.bubblePageIndex = 0;
+        this.buttonsRef = [];
+        this.destroyRef = inject(DestroyRef);
+    }
+    ngAfterViewInit() {
+        this.styleDefaultPagination();
+        this.createBubbleDivRef();
+        this.renderButtons();
+    }
+    ngOnChanges(changes) {
+        if (!this.bubbleContainerRef) {
+            return;
+        }
+        if ((!changes?.["appCustomLength"]?.firstChange && changes?.["appCustomLength"]) ||
+            (!changes?.["bubblePageIndex"]?.firstChange && changes?.["bubblePageIndex"])) {
+            this.rebuildButtons();
+        }
+    }
+    renderButtons() {
+        this.rebuildButtons();
+        this.matPag.page
+            .pipe(map((e) => [e.previousPageIndex ?? 0, e.pageIndex]), startWith([this.getActivePageIndex(), this.getActivePageIndex()]), takeUntilDestroyed(this.destroyRef))
+            .subscribe(([prev, curr]) => {
+            this.updateButtonsOnPageEvent(prev, curr);
+        });
+    }
+    changeActiveButtonStyles(previousIndex, newIndex) {
+        if (!this.buttonsRef.length) {
+            return;
+        }
+        const previouslyActive = this.buttonsRef[previousIndex];
+        const currentActive = this.buttonsRef[newIndex];
+        try {
+            this.ren.removeClass(previouslyActive, "g-bubble__active");
+            this.ren.addClass(currentActive, "g-bubble__active");
+        }
+        catch { }
+        this.buttonsRef.forEach((button) => this.ren.setStyle(button, "display", "none"));
+        const renderElements = this.renderButtonsNumber;
+        const endDots = newIndex < this.buttonsRef.length - renderElements - 1;
+        const startDots = newIndex - renderElements > 0;
+        const firstButton = this.buttonsRef[0];
+        const lastButton = this.buttonsRef[this.buttonsRef.length - 1];
+        try {
+            if (this.showLastButton) {
+                this.ren.setStyle(this.dotsEndRef, "display", endDots ? "block" : "none");
+                this.ren.setStyle(lastButton, "display", endDots ? "flex" : "none");
+            }
+        }
+        catch { }
+        try {
+            if (this.showFirstButton) {
+                this.ren.setStyle(this.dotsStartRef, "display", startDots ? "block" : "none");
+                this.ren.setStyle(firstButton, "display", startDots ? "flex" : "none");
+            }
+        }
+        catch { }
+        const startingIndex = startDots ? newIndex - renderElements : 0;
+        const endingIndex = endDots
+            ? newIndex + renderElements
+            : this.buttonsRef.length - 1;
+        for (let i = startingIndex; i <= endingIndex; i++) {
+            const button = this.buttonsRef[i];
+            this.ren.setStyle(button, "display", "flex");
+        }
+    }
+    styleDefaultPagination() {
+        const nativeElement = this.elementRef.nativeElement;
+        const previousButton = nativeElement.querySelector(".mat-mdc-paginator-navigation-previous");
+        const nextButtonDefault = nativeElement.querySelector(".mat-mdc-paginator-navigation-next");
+        if (this.hideDefaultArrows) {
+            this.ren.setStyle(previousButton, "display", "none");
+            this.ren.setStyle(nextButtonDefault, "display", "none");
+        }
+    }
+    createBubbleDivRef() {
+        const actionContainer = this.elementRef.nativeElement.querySelector("div.mat-mdc-paginator-range-actions");
+        const nextButtonDefault = this.elementRef.nativeElement.querySelector("button.mat-mdc-paginator-navigation-next");
+        const pageRange = this.elementRef.nativeElement.querySelector("div.mat-mdc-paginator-range-label");
+        this.bubbleContainerRef = this.ren.createElement("div");
+        this.ren.addClass(this.bubbleContainerRef, "g-bubble-container");
+        if (actionContainer) {
+            this.ren.addClass(actionContainer, "custom-paginator-container");
+        }
+        if (pageRange) {
+            this.ren.addClass(pageRange, "custom-paginator-counter");
+        }
+        if (actionContainer) {
+            this.ren.insertBefore(actionContainer, this.bubbleContainerRef, nextButtonDefault);
+        }
+    }
+    buildButtons(neededButtons) {
+        if (neededButtons <= 1) {
+            return;
+        }
+        this.buttonsRef = [this.createButton(0)];
+        this.dotsStartRef = this.createDotsElement();
+        for (let index = 1; index < neededButtons - 1; index++) {
+            this.buttonsRef = [...this.buttonsRef, this.createButton(index)];
+        }
+        this.dotsEndRef = this.createDotsElement();
+        this.buttonsRef = [
+            ...this.buttonsRef,
+            this.createButton(neededButtons - 1),
+        ];
+    }
+    removeButtons() {
+        if (!this.bubbleContainerRef) {
+            return;
+        }
+        while (this.bubbleContainerRef.firstChild) {
+            this.ren.removeChild(this.bubbleContainerRef, this.bubbleContainerRef.firstChild);
+        }
+        this.buttonsRef = [];
+    }
+    createButton(i) {
+        const bubbleButton = this.ren.createElement("div");
+        const text = this.ren.createText(String(i + 1));
+        this.ren.addClass(bubbleButton, "g-bubble");
+        this.ren.setStyle(bubbleButton, "margin-right", "8px");
+        this.ren.appendChild(bubbleButton, text);
+        this.ren.listen(bubbleButton, "click", () => {
+            this.switchPage(i);
+        });
+        this.ren.appendChild(this.bubbleContainerRef, bubbleButton);
+        this.ren.setStyle(bubbleButton, "display", "none");
+        return bubbleButton;
+    }
+    createDotsElement() {
+        const dotsEl = this.ren.createElement("span");
+        const dotsText = this.ren.createText("...");
+        this.ren.setStyle(dotsEl, "font-size", "18px");
+        this.ren.setStyle(dotsEl, "margin-right", "8px");
+        this.ren.setStyle(dotsEl, "padding-top", "6px");
+        this.ren.setStyle(dotsEl, "color", "#919191");
+        this.ren.appendChild(dotsEl, dotsText);
+        this.ren.appendChild(this.bubbleContainerRef, dotsEl);
+        this.ren.setStyle(dotsEl, "display", "none");
+        return dotsEl;
+    }
+    switchPage(i) {
+        const previousPageIndex = this.matPag.pageIndex;
+        this.matPag.pageIndex = i;
+        this.matPag.page.emit({
+            previousPageIndex,
+            pageIndex: i,
+            pageSize: this.matPag.pageSize,
+            length: this.matPag.length,
+        });
+        this.pageIndexChangeEmitter.emit(i);
+    }
+    updateButtonsOnPageEvent(previousIndex, newIndex) {
+        const neededButtons = this.getNeededButtons();
+        if (neededButtons === this.buttonsRef.length) {
+            this.changeActiveButtonStyles(previousIndex, newIndex);
+            return;
+        }
+        this.rebuildButtons();
+    }
+    rebuildButtons() {
+        const neededButtons = this.getNeededButtons();
+        const activePageIndex = Math.min(this.getActivePageIndex(), Math.max(neededButtons - 1, 0));
+        this.removeButtons();
+        this.matPag.pageIndex = activePageIndex;
+        if (neededButtons <= 1) {
+            return;
+        }
+        this.buildButtons(neededButtons);
+        this.changeActiveButtonStyles(activePageIndex, activePageIndex);
+    }
+    getNeededButtons() {
+        return Math.ceil(this.appCustomLength / this.matPag.pageSize);
+    }
+    getActivePageIndex() {
+        return Math.max(this.bubblePageIndex, this.matPag.pageIndex, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BubblePaginationDirective, deps: [{ token: i1.MatPaginator }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: BubblePaginationDirective, isStandalone: true, selector: "[appBubblePagination]", inputs: { showFirstButton: "showFirstButton", showLastButton: "showLastButton", renderButtonsNumber: "renderButtonsNumber", appCustomLength: "appCustomLength", hideDefaultArrows: "hideDefaultArrows", bubblePageIndex: "bubblePageIndex" }, outputs: { pageIndexChangeEmitter: "pageIndexChangeEmitter" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BubblePaginationDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[appBubblePagination]",
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i1.MatPaginator }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { pageIndexChangeEmitter: [{
+                type: Output
+            }], showFirstButton: [{
+                type: Input
+            }], showLastButton: [{
+                type: Input
+            }], renderButtonsNumber: [{
+                type: Input
+            }], appCustomLength: [{
+                type: Input
+            }], hideDefaultArrows: [{
+                type: Input
+            }], bubblePageIndex: [{
+                type: Input
+            }] } });
+
+function customPaginatorFactory(i18n, injector) {
+    const customPaginatorIntl = new MatPaginatorIntl();
+    effect(() => {
+        const paginatorTexts = i18n.textsSignal().paginator;
+        customPaginatorIntl.itemsPerPageLabel = paginatorTexts.itemsPerPage;
+        customPaginatorIntl.nextPageLabel = paginatorTexts.nextPage;
+        customPaginatorIntl.previousPageLabel = paginatorTexts.previousPage;
+        customPaginatorIntl.getRangeLabel = paginatorTexts.showingRangeLabel;
+        customPaginatorIntl.changes.next();
+    }, { injector });
+    return customPaginatorIntl;
+}
+
+class MapaMenuComponent {
+    constructor() {
+        this.items = [];
+        this.emitMenu = new EventEmitter();
+    }
+    toggleMenu() {
+        this.trigger.openMenu();
+    }
+    clickMenu(item) {
+        this.emitMenu.emit({ action: item.action, data: this.data });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaMenuComponent, isStandalone: true, selector: "mapa-menu", inputs: { items: "items", data: "data" }, outputs: { emitMenu: "emitMenu" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<mat-menu #menu=\"matMenu\" class=\"mapa-menu\">\n  <button\n    *ngFor=\"let item of items\"\n    mat-menu-item\n    (click)=\"clickMenu(item)\"\n    class=\"mapa-menu__item\"\n    [class.mapa-menu__item--disabled]=\"item.disabled\"\n  >\n    <mat-icon *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n    <img *ngIf=\"item.image\" [src]=\"item.image\" />\n    <span>{{item.text}}</span>\n  </button>\n</mat-menu>\n\n<img\n  class=\"outside-menu-icon\"\n  src=\"assets/images/icons/ThreePoints.svg\"\n  (click)=\"toggleMenu()\"\n  [matMenuTriggerFor]=\"menu\"\n/>\n", styles: [".outside-menu-icon{color:#50575e;display:flex;align-items:center;justify-content:center}.mat-mdc-menu-content mat-icon{color:var(--Grey-Grey-60, #50575e);font-size:16px;line-height:28px}.mapa-menu__item{display:flex;align-items:center}.mapa-menu__item img{margin-right:8px}.mapa-menu__item--disabled{opacity:.45;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-menu", imports: [CommonModule, MatIconModule, MatMenuModule], standalone: true, template: "<mat-menu #menu=\"matMenu\" class=\"mapa-menu\">\n  <button\n    *ngFor=\"let item of items\"\n    mat-menu-item\n    (click)=\"clickMenu(item)\"\n    class=\"mapa-menu__item\"\n    [class.mapa-menu__item--disabled]=\"item.disabled\"\n  >\n    <mat-icon *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n    <img *ngIf=\"item.image\" [src]=\"item.image\" />\n    <span>{{item.text}}</span>\n  </button>\n</mat-menu>\n\n<img\n  class=\"outside-menu-icon\"\n  src=\"assets/images/icons/ThreePoints.svg\"\n  (click)=\"toggleMenu()\"\n  [matMenuTriggerFor]=\"menu\"\n/>\n", styles: [".outside-menu-icon{color:#50575e;display:flex;align-items:center;justify-content:center}.mat-mdc-menu-content mat-icon{color:var(--Grey-Grey-60, #50575e);font-size:16px;line-height:28px}.mapa-menu__item{display:flex;align-items:center}.mapa-menu__item img{margin-right:8px}.mapa-menu__item--disabled{opacity:.45;cursor:not-allowed}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], emitMenu: [{
+                type: Output
+            }], trigger: [{
+                type: ViewChild,
+                args: [MatMenuTrigger]
+            }] } });
+
+/*
+ * Public API Surface of mapa-library-ui menu
+ */
+
+function sanitizeHtmlContent(sanitizer, value) {
+    return sanitizer.sanitize(SecurityContext.HTML, value ?? "") ?? "";
+}
+class HtmlSanitizerService {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    sanitize(value) {
+        return sanitizeHtmlContent(this.sanitizer, value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HtmlSanitizerService, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HtmlSanitizerService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HtmlSanitizerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
+
+class SafeHtmlPipe {
+    constructor(htmlSanitizer) {
+        this.htmlSanitizer = htmlSanitizer;
+    }
+    transform(value) {
+        return this.htmlSanitizer.sanitize(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: HtmlSanitizerService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "safeHtml",
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: HtmlSanitizerService }] });
+
+class MapaSvgIconComponent {
+    constructor(httpClient, cdr) {
+        this.httpClient = httpClient;
+        this.cdr = cdr;
+        this.svgIcon = "";
+        this.destroyRef = inject(DestroyRef);
+    }
+    ngOnChanges() {
+        if (!this.name) {
+            this.svgIcon = "";
+            return;
+        }
+        if (this.color) {
+            this.httpClient
+                .get(`images/icons/${this.name}.svg`, { responseType: 'text' })
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe((value) => {
+                this.svgIcon = this.applyColor(value);
+                this.cdr.markForCheck();
+            });
+            return;
+        }
+        this.svgIcon = `<img src="images/icons/${this.name}.svg" alt="${this.name}" />`;
+        this.cdr.markForCheck();
+    }
+    applyColor(value) {
+        if (!this.color) {
+            return value;
+        }
+        return value
+            .replaceAll('fill="#50575E"', `fill="${this.color}"`)
+            .replaceAll('fill="#181818"', `fill="${this.color}"`)
+            .replaceAll('fill="#7def7b"', `fill="${this.color}"`)
+            .replaceAll('stroke="#50575E"', `stroke="${this.color}"`)
+            .replaceAll('stroke="#181818"', `stroke="${this.color}"`)
+            .replaceAll('stroke="#7def7b"', `stroke="${this.color}"`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaSvgIconComponent, deps: [{ token: i1$2.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapaSvgIconComponent, isStandalone: true, selector: "mapa-svg-icon", inputs: { name: "name", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"svgIcon\" class=\"mapa__svg-icon\" [innerHTML]=\"svgIcon | safeHtml\"></span>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaSvgIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-svg-icon", standalone: true, imports: [CommonModule, SafeHtmlPipe], template: "<span *ngIf=\"svgIcon\" class=\"mapa__svg-icon\" [innerHTML]=\"svgIcon | safeHtml\"></span>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i0.ChangeDetectorRef }], propDecorators: { name: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of mapa-library-ui svg-icon
+ */
+
+const MAPA_UI_TEXTS = new InjectionToken("MAPA_UI_TEXTS");
+const MAPA_UI_DEFAULT_TEXTS = {
+    common: {
+        selectAll: "Selecionar todos",
+    },
+    filters: {
+        clear: "Limpar filtros",
+        submit: "Filtrar",
+    },
+    datepicker: {
+        startDatePlaceholder: "Data inicial",
+        endDatePlaceholder: "Data final",
+    },
+    capability: {
+        groupAverageTitle: "Média geral do grupo",
+        individualAverageTitle: "Média geral do indivíduo",
+        conceptTitle: "Conceito",
+        resultTitle: "Resultado",
+        positiveIndicatorsTitle: "Indicadores positivos",
+        negativeIndicatorsTitle: "Indicadores negativos",
+        riskIndicatorsTitle: "Indicadores de risco",
+        precipitationRiskTitle: "Risco de acidente por precipitação",
+        negligenceRiskTitle: "Risco de acidente por negligência",
+        negativeDirectionLabel: "Direção Negativa |",
+        positiveDirectionLabel: "Direção Positiva |",
+    },
+    paginator: {
+        itemsPerPage: "Itens por página",
+        nextPage: "Próxima página",
+        previousPage: "Página anterior",
+        rangeLabel: (page, pageSize, length) => {
+            if (length === 0 || pageSize === 0) {
+                return `0 de ${length}`;
+            }
+            const startIndex = page * pageSize;
+            const endIndex = startIndex < length
+                ? Math.min(startIndex + pageSize, length)
+                : startIndex + pageSize;
+            return `${startIndex + 1} - ${endIndex} de ${length}`;
+        },
+        showingRangeLabel: (page, pageSize, length) => {
+            if (length === 0) {
+                return "Mostrando 0 - 0 de 0 item";
+            }
+            const startIndex = page * pageSize;
+            const endIndex = startIndex < length
+                ? Math.min(startIndex + pageSize, length)
+                : startIndex + pageSize;
+            const itemLabel = length === 1 ? "item" : "itens";
+            return `Mostrando ${startIndex + 1} - ${endIndex} de ${length} ${itemLabel}`;
+        },
+    },
+    validation: {
+        cnpj: "CNPJ inválido",
+        cpf: "CPF inválido",
+        email: "E-mail inválido",
+        max: (context) => `O valor máximo permitido é ${context?.max ?? ""}`.trim(),
+        maxLength: (context) => `O máximo permitido é ${context?.requiredLength ?? ""} caracteres`.trim(),
+        min: (context) => `O valor minimo permitido é ${context?.min ?? ""}`.trim(),
+        minLength: (context) => `O mínimo permitido é ${context?.requiredLength ?? ""} caracteres`.trim(),
+        pattern: "Formato inválido",
+        required: "Campo obrigatório",
+    },
+};
+function mergeMapaUiTexts(customTexts) {
+    return {
+        common: {
+            ...MAPA_UI_DEFAULT_TEXTS.common,
+            ...(customTexts?.common ?? {}),
+        },
+        filters: {
+            ...MAPA_UI_DEFAULT_TEXTS.filters,
+            ...(customTexts?.filters ?? {}),
+        },
+        datepicker: {
+            ...MAPA_UI_DEFAULT_TEXTS.datepicker,
+            ...(customTexts?.datepicker ?? {}),
+        },
+        capability: {
+            ...MAPA_UI_DEFAULT_TEXTS.capability,
+            ...(customTexts?.capability ?? {}),
+        },
+        paginator: {
+            ...MAPA_UI_DEFAULT_TEXTS.paginator,
+            ...(customTexts?.paginator ?? {}),
+        },
+        validation: {
+            ...MAPA_UI_DEFAULT_TEXTS.validation,
+            ...(customTexts?.validation ?? {}),
+        },
+    };
+}
+function provideMapaUiTexts(texts) {
+    return {
+        provide: MAPA_UI_TEXTS,
+        useValue: texts,
+    };
+}
+
+class MapaI18nService {
+    constructor(customTexts) {
+        this.injector = inject(Injector);
+        this.textsState = signal(mergeMapaUiTexts(), ...(ngDevMode ? [{ debugName: "textsState" }] : []));
+        this.textsSignal = this.textsState.asReadonly();
+        this.texts$ = toObservable(this.textsSignal, { injector: this.injector });
+        if (customTexts) {
+            this.textsState.set(mergeMapaUiTexts(customTexts));
+        }
+    }
+    get texts() {
+        return this.textsState();
+    }
+    setTexts(texts) {
+        this.textsState.set(mergeMapaUiTexts(texts));
+    }
+    resolveValidationText(key, context) {
+        return this.resolveText(this.texts.validation[key], context);
+    }
+    resolveText(value, context) {
+        return typeof value === "function" ? value(context) : value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaI18nService, deps: [{ token: MAPA_UI_TEXTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaI18nService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaI18nService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAPA_UI_TEXTS]
+                }] }] });
+
+const DAY_MONTH_YEAR_PATTERN = /^(\d{2})\/(\d{2})\/(\d{4})$/;
+function isValidDate(date) {
+    return !Number.isNaN(date.getTime());
+}
+function formatDateAsDayMonthYear(date) {
+    const day = `${date.getDate()}`.padStart(2, "0");
+    const month = `${date.getMonth() + 1}`.padStart(2, "0");
+    const year = `${date.getFullYear()}`;
+    return `${day}/${month}/${year}`;
+}
+function parseDateValue(value) {
+    if (value instanceof Date) {
+        return isValidDate(value) ? new Date(value.getTime()) : null;
+    }
+    if (typeof value === "number") {
+        const parsedDate = new Date(value);
+        return isValidDate(parsedDate) ? parsedDate : null;
+    }
+    if (typeof value !== "string") {
+        return null;
+    }
+    const trimmedValue = value.trim();
+    if (!trimmedValue) {
+        return null;
+    }
+    const dayMonthYearMatch = DAY_MONTH_YEAR_PATTERN.exec(trimmedValue);
+    if (dayMonthYearMatch) {
+        const [, dayValue, monthValue, yearValue] = dayMonthYearMatch;
+        const day = Number(dayValue);
+        const month = Number(monthValue);
+        const year = Number(yearValue);
+        const parsedDate = new Date(year, month - 1, day);
+        if (parsedDate.getFullYear() === year &&
+            parsedDate.getMonth() === month - 1 &&
+            parsedDate.getDate() === day) {
+            return parsedDate;
+        }
+        return null;
+    }
+    const parsedDate = new Date(trimmedValue);
+    return isValidDate(parsedDate) ? parsedDate : null;
+}
+function isDateValue(value) {
+    return parseDateValue(value) !== null;
+}
+function getRelativeDateRange(daysBack) {
+    const endDate = new Date();
+    endDate.setHours(23, 59, 59, 999);
+    const startDate = new Date();
+    startDate.setHours(0, 0, 0, 0);
+    startDate.setDate(startDate.getDate() - daysBack);
+    return { startDate, endDate };
+}
+
+class MapaTableComponent {
+    constructor(cdr, i18n) {
+        this.cdr = cdr;
+        this.i18n = i18n;
+        this.columns = [];
+        this.data = [];
+        this.pageIndex = 1;
+        this.pageSize = 5;
+        this.totalCount = 0;
+        this.totalPages = 0;
+        this.menuItems = [];
+        this.showPaginator = true;
+        this.paginatorShowFirstButton = true;
+        this.paginatorShowLastButton = true;
+        this.paginatorRenderButtonsNumber = 2;
+        this.paginatorHideDefaultArrows = false;
+        this.rowClick = new EventEmitter();
+        this.selectedRows = new EventEmitter();
+        this.onChangePage = new EventEmitter();
+        this.onSortChange = new EventEmitter();
+        this.dataSource = new MatTableDataSource([]);
+        this.displayedColumns = [];
+        this.desktopTableVisible = true;
+        this.destroyRef = inject(DestroyRef);
+    }
+    get texts() {
+        return this.i18n.textsSignal();
+    }
+    get selectAllLabel() {
+        return this.texts.common.selectAll;
+    }
+    get paginatorPageIndex() {
+        return Math.max(this.pageIndex - 1, 0);
+    }
+    ngAfterViewInit() {
+        this.dataSource.sort = this.sort;
+        this.cdr.markForCheck();
+    }
+    ngOnChanges(changes) {
+        if ((changes["data"] || changes["columns"]) && this.dataSource) {
+            if (changes["data"]) {
+                this.data = changes["data"].currentValue;
+            }
+            if (changes["columns"]) {
+                this.columns = changes["columns"].currentValue;
+            }
+            this.refreshTableState();
+            if (changes["columns"]) {
+                this.rebuildDesktopTable();
+            }
+            this.cdr.markForCheck();
+        }
+        if (changes["filterControl"] && this.filterControl) {
+            this.setupFilter();
+        }
+    }
+    refreshTableState() {
+        this.dataSource = new MatTableDataSource(this.data);
+        this.dataSource.sort = this.sort;
+        this.displayedColumns = this.columns.map((column) => column.key);
+        if (this.filterControl) {
+            this.setupFilter();
+            this.dataSource.filter = `${this.filterControl.value ?? ""}`.trim().toLowerCase();
+        }
+        this.table?.renderRows();
+    }
+    rebuildDesktopTable() {
+        this.desktopTableVisible = false;
+        this.cdr.detectChanges();
+        this.desktopTableVisible = true;
+        this.cdr.detectChanges();
+    }
+    trackColumn(index, column) {
+        return `${index}:${column.key}:${column.label}`;
+    }
+    setupFilter() {
+        this.filterControlSubscription?.unsubscribe();
+        if (!this.dataSource || !this.filterControl) {
+            return;
+        }
+        this.filterControlSubscription = this.filterControl.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => {
+            this.dataSource.filter = (value ?? "").trim().toLowerCase();
+            this.cdr.markForCheck();
+        });
+        this.dataSource.filterPredicate = (data, filter) => {
+            const dataStr = Object.keys(data)
+                .reduce((currentTerm, key) => {
+                return `${currentTerm}${this.getFilterValue(data[key])} `;
+            }, "")
+                .trim()
+                .toLowerCase();
+            return dataStr.indexOf(filter) !== -1;
+        };
+    }
+    isAllSelected() {
+        if (this.selection) {
+            const numSelected = this.selection.selected.length;
+            const numRows = this.dataSource.data.length;
+            return numSelected === numRows;
+        }
+        return false;
+    }
+    toggleAllRows() {
+        if (this.selection) {
+            if (this.isAllSelected()) {
+                this.selection.clear();
+                this.getSelectedValues();
+            }
+            else {
+                this.dataSource.data.forEach((row) => this.selection?.select(row));
+                this.getSelectedValues();
+            }
+        }
+    }
+    checkboxLabel(row) {
+        if (this.selection) {
+            if (!row) {
+                return `${this.isAllSelected() ? "deselect" : "select"} all`;
+            }
+            const rowPosition = typeof row.position === "number" ? row.position + 1 : 1;
+            return `${this.selection.isSelected(row) ? "deselect" : "select"} row ${rowPosition}`;
+        }
+        return "";
+    }
+    sortData(column) {
+        if (column.sort) {
+            const sort = { active: column.key, direction: "asc" };
+            if (this.currentSort &&
+                this.currentSort.active === column.key &&
+                this.currentSort.direction === "asc") {
+                sort.direction = "desc";
+            }
+            this.currentSort = sort;
+            this.sortDataFunction(sort);
+        }
+    }
+    sortDataFunction(sort) {
+        this.onSortChange.emit(sort);
+    }
+    emitRowClick(row, action) {
+        const rowData = { row, action };
+        this.rowClick.emit(rowData);
+    }
+    toggleSelection(row) {
+        if (this.selection) {
+            if (this.selection.isSelected(row)) {
+                this.selection.deselect(row);
+            }
+            else {
+                this.selection.select(row);
+            }
+            this.getSelectedValues();
+        }
+    }
+    getSelectedValues() {
+        if (this.selection) {
+            const selectedRows = this.selection.selected.map((row) => {
+                return { row };
+            });
+            this.selectedRows.emit(selectedRows);
+        }
+    }
+    generateColumns() {
+        const columns = [{ key: "name", label: "", sort: false }];
+        this.columns = columns;
+    }
+    columnExists(columns, key) {
+        return columns.some((column) => column.key === key);
+    }
+    generateGroupData() {
+        const result = [];
+        this.data = result;
+    }
+    isBoolean(column, row) {
+        return typeof this.getColumnValue(row, column.key) === "boolean";
+    }
+    isMaskedData(column, row) {
+        return !!column.mask && isDateValue(this.getColumnValue(row, column.key));
+    }
+    getValueAsDate(column, row) {
+        return parseDateValue(this.getColumnValue(row, column.key)) ?? new Date("");
+    }
+    getCellClass(column, row) {
+        if (column.key === "name" ||
+            column.key === "cpf" ||
+            column.key === "general") {
+            return "";
+        }
+        try {
+            return `classification`;
+        }
+        catch {
+            return "";
+        }
+    }
+    getCellBg(column, row) {
+        if (column.key === "name" ||
+            column.key === "cpf" ||
+            column.key === "general") {
+            return "";
+        }
+        try {
+            return this.getRecordStringValue(this.getColumnRecord(row, column.key), "classificationColor");
+        }
+        catch {
+            return "";
+        }
+    }
+    getCellTextColor(column, row) {
+        if (column.key === "name" ||
+            column.key === "cpf" ||
+            column.key === "general") {
+            return "";
+        }
+        try {
+            return this.getRecordStringValue(this.getColumnRecord(row, column.key), "classificationTextColor");
+        }
+        catch {
+            return "";
+        }
+    }
+    getValue(row) {
+        try {
+            if (row.value !== undefined && row.value !== null && row.value !== "") {
+                return row.value + "%";
+            }
+            return "-";
+        }
+        catch {
+            return "-";
+        }
+    }
+    changePage(event) {
+        this.onChangePage.emit(event);
+    }
+    toggleMenu() {
+        this.trigger.openMenu();
+    }
+    getBackgroundColor(column, row) {
+        return column.status?.color?.[this.getStatusIndex(row, column.key)] || "";
+    }
+    getTextColor(column, row) {
+        return column.status?.textColor?.[this.getStatusIndex(row, column.key)] || "";
+    }
+    hasCustomClass(column, row, key) {
+        if (column?.class ||
+            row?.rowStyleClass ||
+            this.hasCellStyleClass(row, key)) {
+            return true;
+        }
+        return false;
+    }
+    getCustomClass(column, row, key) {
+        if (this.hasCellStyleClass(row, key)) {
+            return this.getCellStyleClass(row, column.key);
+        }
+        else if (column?.class) {
+            return column.class;
+        }
+        else if (row?.rowStyleClass) {
+            return row.rowStyleClass;
+        }
+        return "";
+    }
+    hasCellStyleClass(row, key) {
+        return row.styleClass?.key === key;
+    }
+    getCellStyleClass(row, key) {
+        return row.styleClass?.key === key ? row.styleClass?.class : "";
+    }
+    handleMenu(selected) {
+        if (this.isTableRowData(selected.data)) {
+            this.emitRowClick(selected.data, selected.action);
+        }
+    }
+    hasIndividualMenu(row) {
+        return this.getMenuItems(row).length > 0;
+    }
+    getMenuItems(row) {
+        return this.getMenuActionItems(row, "menu");
+    }
+    getActionItems(row) {
+        const rowActions = this.getMenuActionItems(row, "actions");
+        return rowActions.length > 0 ? rowActions : (this.actions ?? []);
+    }
+    getStatusLabel(column, row) {
+        const labels = column.status?.label;
+        if (!labels) {
+            return "-";
+        }
+        const value = this.getColumnValue(row, column.key);
+        if (typeof value === "boolean") {
+            return labels[value ? 1 : 0] ?? "-";
+        }
+        if (typeof value === "number") {
+            return labels[value] ?? "-";
+        }
+        if (typeof value === "string") {
+            const numericIndex = Number(value);
+            return Number.isNaN(numericIndex) ? labels[0] ?? "-" : labels[numericIndex] ?? "-";
+        }
+        return "-";
+    }
+    getCellContent(row, key) {
+        const value = this.getColumnValue(row, key);
+        if (value === null || value === undefined) {
+            return "";
+        }
+        if (typeof value === "string" || typeof value === "number") {
+            return `${value}`;
+        }
+        if (typeof value === "boolean") {
+            return value ? "true" : "false";
+        }
+        return "";
+    }
+    hasActionsColumn() {
+        return this.columns.some((column) => column.key.includes('actions'));
+    }
+    hasMenuColumn() {
+        return this.columns.some((column) => column.key.includes('menu'));
+    }
+    setSvgName(image) {
+        return image.split('/').pop()?.split('.')[0] || '';
+    }
+    getColumnValue(row, key) {
+        return row[key];
+    }
+    getColumnRecord(row, key) {
+        const value = this.getColumnValue(row, key);
+        if (!value || typeof value !== "object" || Array.isArray(value)) {
+            return undefined;
+        }
+        return value;
+    }
+    getRecordStringValue(value, key) {
+        const recordValue = value?.[key];
+        return typeof recordValue === "string" ? recordValue : "";
+    }
+    getStatusIndex(row, key) {
+        const value = this.getColumnValue(row, key);
+        if (typeof value === "boolean") {
+            return value ? 1 : 0;
+        }
+        if (typeof value === "number") {
+            return value;
+        }
+        if (typeof value === "string") {
+            const parsedValue = Number(value);
+            return Number.isNaN(parsedValue) ? 0 : parsedValue;
+        }
+        return 0;
+    }
+    getFilterValue(value) {
+        if (value === null || value === undefined) {
+            return "";
+        }
+        if (typeof value === "string" ||
+            typeof value === "number" ||
+            typeof value === "boolean") {
+            return `${value}`.toLowerCase();
+        }
+        if (Array.isArray(value)) {
+            return value.map((item) => this.getFilterValue(item)).join(" ");
+        }
+        if (typeof value === "object") {
+            return Object.values(value).map((item) => this.getFilterValue(item)).join(" ");
+        }
+        return "";
+    }
+    getMenuActionItems(row, key) {
+        const value = row?.[key];
+        if (!Array.isArray(value)) {
+            return [];
+        }
+        return value.filter((item) => this.isMenuItem(item));
+    }
+    isMenuItem(value) {
+        return (!!value &&
+            typeof value === "object" &&
+            "action" in value &&
+            "text" in value);
+    }
+    isTableRowData(value) {
+        return !!value && typeof value === "object" && !Array.isArray(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: MapaTableComponent, isStandalone: true, selector: "mapa-table", inputs: { columns: "columns", data: "data", pageIndex: "pageIndex", pageSize: "pageSize", totalCount: "totalCount", totalPages: "totalPages", checkbox: "checkbox", selection: "selection", actions: "actions", filterControl: "filterControl", menuItems: "menuItems", menu: "menu", showPaginator: "showPaginator", paginatorShowFirstButton: "paginatorShowFirstButton", paginatorShowLastButton: "paginatorShowLastButton", paginatorRenderButtonsNumber: "paginatorRenderButtonsNumber", paginatorHideDefaultArrows: "paginatorHideDefaultArrows" }, outputs: { rowClick: "rowClick", selectedRows: "selectedRows", onChangePage: "onChangePage", onSortChange: "onSortChange" }, providers: [
+            {
+                provide: MatPaginatorIntl,
+                useFactory: customPaginatorFactory,
+                deps: [MapaI18nService, Injector],
+            },
+        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, read: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (dataSource.data.length > 0) {\n  <section class=\"mapa-table\">\n    <div class=\"mapa-table--show-on-mobile\">\n      @if (checkbox) {\n        <div class=\"mapa-table__select-all\">\n          @if (selection) {\n            <mat-checkbox\n              (change)=\"$event ? toggleAllRows() : null\"\n              [checked]=\"selection.hasValue() && isAllSelected()\"\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n              (click)=\"$event.stopPropagation()\"\n              color=\"primary\"\n            > {{ selectAllLabel }}</mat-checkbox>\n          }\n        </div>\n      }\n      @for (row of dataSource.data; track row) {\n        <div>\n          <div class=\"mapa-table__card mapa__card\">\n            @for (column of columns; track trackColumn($index, column); let isFirst = $first) {\n              <div [ngClass]=\"'mapa-table__card--column-' + column.key\">\n                @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                  <strong\n                    class=\"mapa-table__card--header\"\n                    [class.mapa-table__checkbox--header]=\"isFirst && checkbox\"\n                  >\n                    <div\n                      [ngTemplateOutlet]=\"tableHeader\"\n                      [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox: false }\"\n                      class=\"hidden\"\n                    ></div>\n                  </strong>\n                }\n                <div\n                  class=\"mapa-table__card--column\"\n                  [class.mapa-table__column--center-cell]=\"column?.align === 'center'\"\n                >\n                  @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                    <div class=\"mapa-table__content\">\n                      <div\n                        [style.width]=\"column?.width\"\n                        [class.mapa-table__column--ellipsis]=\"column?.collapse === 'overflow'\"\n                        [class.mapa-table__column--no-wrap]=\"column?.collapse === 'no-wrap'\"\n                        [class.mapa-table__column--wrap]=\"column?.collapse === 'wrap'\"\n                        [ngClass]=\"[hasCustomClass(column, row, column.key) ? getCustomClass(column, row, column.key) : '']\"\n                      >\n                        @if (column?.status?.color) {\n                          <div\n                            class=\"mapa-table__column--status\"\n                            [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n                            [style.color]=\"getTextColor(column, row)\"\n                            [class.mapa-table__column--status-round]=\"column.status?.style == 'round'\"\n                          >\n                            <div\n                              [ngTemplateOutlet]=\"tableContent\"\n                              [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                            ></div>\n                          </div>\n                        } @else {\n                          <div\n                            [ngTemplateOutlet]=\"tableContent\"\n                            [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                          ></div>\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    @if (column.key === \"actions\" && actions) {\n                      <div>\n                        @for (item of getActionItems(row); track item) {\n                          @if (item.route) {\n                            <a [href]=\"item.route\" [routerLink]=\"item.route\">\n                              <button\n                                class=\"mapa-table__column--actions-item\"\n                                [title]=\"item.text\"\n                                mat-icon-button\n                              >\n                                @if (item.icon) {\n                                  <mat-icon>{{ item.icon }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" />\n                                }\n                                @if (item.svg) {\n                                  <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                                }\n                                @if (item.showText) {\n                                  <span>{{ item.text }}</span>\n                                }\n                              </button>\n                            </a>\n                          } @else {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--actions-item\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n\n                    @if (column.key === \"menu\") {\n                      @if (hasIndividualMenu(row)) {\n                        <div class=\"mapa-table__column--menu\">\n                          @for (item of getMenuItems(row); track item) {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--menu-item\"\n                              [class.mapa-table__column--menu-item-disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              <span class=\"mapa-table__column--menu-item-text\">{{ item.text }}</span>\n                            </button>\n                          }\n                        </div>\n                      } @else {\n                        <div class=\"mapa-table__column--menu\">\n                          @for (item of menuItems; track item) {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--menu-item\"\n                              [class.mapa-table__column--menu-item-disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.image)\"></mapa-svg-icon>\n                              }\n                              <span class=\"mapa-table__column--menu-item-text\">{{ item.text }}</span>\n                            </button>\n                          }\n                        </div>\n                      }\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"mapa-table--show-on-desktop\">\n      @if (desktopTableVisible) {\n        <table\n          mat-table\n          [dataSource]=\"dataSource\"\n          matSort\n          (matSortChange)=\"sortDataFunction($event)\"\n        >\n          @for (column of columns; track trackColumn($index, column); let isFirst = $first) {\n            <ng-container [matColumnDef]=\"column.key\">\n              <th\n                mat-header-cell\n                *matHeaderCellDef\n                mat-sort-header\n                [disabled]=\"!(column.key !== 'actions' ? column.sort : null)\"\n              >\n                <div\n                  [ngTemplateOutlet]=\"tableHeader\"\n                  [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox }\"\n                ></div>\n              </th>\n              <td mat-cell *matCellDef=\"let row\" [style.width]=\"column?.width\">\n                <div\n                  class=\"mapa-table__column\"\n                  (click)=\"emitRowClick(row, '')\"\n                  [class.mapa-table__column--center-cell]=\"column?.align === 'center'\"\n                >\n                  @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                    <div class=\"mapa-table__content\">\n                      <div\n                        [style.width]=\"column?.width\"\n                        [class.mapa-table__column--ellipsis]=\"column?.collapse === 'overflow'\"\n                        [class.mapa-table__column--no-wrap]=\"column?.collapse === 'no-wrap'\"\n                        [class.mapa-table__column--wrap]=\"column?.collapse === 'wrap'\"\n                        [ngClass]=\"[hasCustomClass(column, row, column.key) ? getCustomClass(column, row, column.key) : '']\"\n                      >\n                        @if (column?.status?.color) {\n                          <div\n                            class=\"mapa-table__column--status\"\n                            [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n                            [style.color]=\"getTextColor(column, row)\"\n                            [class.mapa-table__column--status-round]=\"column.status?.style == 'round'\"\n                          >\n                            <div\n                              [ngTemplateOutlet]=\"tableContent\"\n                              [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                            ></div>\n                          </div>\n                        } @else {\n                          <div\n                            [ngTemplateOutlet]=\"tableContent\"\n                            [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                          ></div>\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    @if (column.key === \"actions\" && actions) {\n                      <div class=\"mapa-table__column--actions\">\n                        @for (item of getActionItems(row); track item) {\n                          @if (item.route) {\n                            <a [href]=\"item.route\" [routerLink]=\"item.route\">\n                              <button\n                                class=\"mapa-table__column--actions-item\"\n                                [title]=\"item.text\"\n                                mat-icon-button\n                              >\n                                @if (item.icon) {\n                                  <mat-icon>{{ item.icon }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" />\n                                }\n                                @if (item.svg) {\n                                  <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                                }\n                                @if (item.showText) {\n                                  <span>{{ item.text }}</span>\n                                }\n                              </button>\n                            </a>\n                          } @else {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--actions-item\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n                    @if (column.key === \"menu\") {\n                      <div class=\"mapa-table__column--menu\">\n                        @if (hasIndividualMenu(row)) {\n                          <mapa-menu\n                            [items]=\"getMenuItems(row)\"\n                            [data]=\"row\"\n                            (emitMenu)=\"handleMenu($event)\"\n                          ></mapa-menu>\n                        } @else if (menuItems.length > 0) {\n                          <mapa-menu\n                            [items]=\"menuItems\"\n                            [data]=\"row\"\n                            (emitMenu)=\"handleMenu($event)\"\n                          ></mapa-menu>\n                        }\n                      </div>\n                    }\n                  }\n                </div>\n              </td>\n            </ng-container>\n          }\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: displayedColumns;\"\n            class=\"row-hover\"\n          ></tr>\n        </table>\n      }\n    </div>\n\n    @if (showPaginator) {\n      <section>\n        <mat-paginator\n          class=\"mapa-table__paginator\"\n          appBubblePagination\n          [appCustomLength]=\"totalCount\"\n          [bubblePageIndex]=\"paginatorPageIndex\"\n          [pageIndex]=\"paginatorPageIndex\"\n          [showFirstButton]=\"paginatorShowFirstButton\"\n          [showLastButton]=\"paginatorShowLastButton\"\n          [renderButtonsNumber]=\"paginatorRenderButtonsNumber\"\n          [hideDefaultArrows]=\"paginatorHideDefaultArrows\"\n          [length]=\"totalCount\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"[5, 10, 25, 100]\"\n          (page)=\"changePage($event)\"\n        ></mat-paginator>\n      </section>\n    }\n  </section>\n}\n\n<ng-template\n  #tableHeader\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n>\n  @if (isFirst && checkbox) {\n    @if (selection) {\n      <mat-checkbox\n        (change)=\"$event ? toggleAllRows() : null\"\n        [checked]=\"selection.hasValue() && isAllSelected()\"\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n        (click)=\"$event.stopPropagation()\"\n        color=\"primary\"\n      ></mat-checkbox>\n    }\n  }\n  <div>\n    <span [innerHTML]=\"column.label | safeHtml\"></span>\n  </div>\n  @if (column.key !== \"actions\" && column.key !== \"menu\" && column.sort) {\n    <div class=\"mapa-table--show-on-desktop\">\n      <mat-icon>filter_list</mat-icon>\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #tableContent\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n  let-row=\"row\"\n>\n  @if (isFirst && checkbox) {\n    <mat-checkbox\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"$event ? selection?.toggle(row) : null; getSelectedValues()\"\n      [checked]=\"selection?.isSelected(row)\"\n      color=\"primary\"\n      class=\"mapa-table__checkbox\"\n    >\n    </mat-checkbox>\n  }\n  @if (isMaskedData(column, row)) {\n    {{ getValueAsDate(column, row) | date: column.mask }}\n  } @else if (column.status) {\n    <span [innerHTML]=\"getStatusLabel(column, row) | safeHtml\"></span>\n  } @else {\n    <span [innerHTML]=\"getCellContent(row, column.key) | safeHtml\"></span>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .mapa-table .mat-mdc-table{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:100%}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-checkbox{margin:6px 8px 0 0;padding:0}:host ::ng-deep .mapa-table td.mat-mdc-cell{padding:16px 0}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-row .mat-mdc-cell{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;color:#50575e}:host ::ng-deep .mapa-table .row-hover:hover{box-shadow:0 2px 4px #00000021;outline:1px solid rgba(238,238,238,.93);cursor:pointer}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-header-cell{border:none;border-bottom:1px solid #eee;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:600;color:#50575e}:host ::ng-deep .mapa-table .mat-mdc-row,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-header-cell,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{background-color:transparent;border-color:#b6b6b6}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background{background-color:#ea561d;border-color:#ea561d}:host ::ng-deep .mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}:host ::ng-deep .mapa-table ::ng-deep .mat-mdc-paginator-page-size-label{display:none}:host ::ng-deep .mapa-table__paginator .mat-paginator-container,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-container{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;justify-content:flex-start}:host ::ng-deep .mapa-table__paginator .mat-paginator-page-size,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-page-size{margin-right:10vw}:host ::ng-deep .mapa-table__paginator .custom-paginator-container{justify-content:flex-end}:host ::ng-deep .mapa-table__paginator .g-bubble-container{display:flex;align-items:center;justify-content:flex-end;gap:8px}:host ::ng-deep .mapa-table__paginator .g-bubble{border-radius:4px;outline:none;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;background:transparent;color:#50575e;cursor:pointer;margin:.4em 0;font-size:14px;min-width:24px;width:auto;min-height:24px;max-height:24px;padding:1px 6px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mapa-table__paginator .g-bubble:hover{background-color:#dfe3e6}:host ::ng-deep .mapa-table__paginator .g-bubble__active{background-color:#ea561d;color:#fff}:host ::ng-deep .mapa-table__paginator .custom-paginator-counter{white-space:nowrap;margin:0 4px 0 10px!important}:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-previous,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-next{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;color:#999}:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-previous[disabled],:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-next[disabled]{color:#dfe3e6}:host ::ng-deep .hidden{display:none}:host ::ng-deep .mapa-table{width:100%;white-space:nowrap}:host ::ng-deep .mapa-table .mat-mdc-icon-button{width:unset!important;height:unset!important;line-height:unset!important;justify-content:flex-start}:host ::ng-deep .mapa-table .mat-mdc-icon-button .mat-mdc-button-touch-target,:host ::ng-deep .mapa-table .mat-mdc-icon-button .mdc-button__label{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%!important}@media (min-width: 1201px){:host ::ng-deep .mapa-table--show-on-mobile{display:none}:host ::ng-deep .mapa-table--show-on-desktop{display:block}}@media (max-width: 1200px){:host ::ng-deep .mapa-table--show-on-mobile{padding:20px}:host ::ng-deep .mapa-table--show-on-mobile .mapa__card{width:unset!important}:host ::ng-deep .mapa-table--show-on-desktop{display:none}}:host ::ng-deep .mapa-table__select-all{display:flex;align-items:center;padding:16px 24px;font-size:12px;text-transform:uppercase}@media (max-width: 1200px){:host ::ng-deep .mapa-table__checkbox{margin-right:8px}:host ::ng-deep .mapa-table__checkbox--header{padding-left:24px}}:host ::ng-deep .mapa-table__card{position:relative;padding:24px;display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}:host ::ng-deep .mapa-table__card--floating-content{display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;gap:8px}:host ::ng-deep .mapa-table__card--floating-actions{position:absolute;bottom:16px;right:16px;color:#ea561d}:host ::ng-deep .mapa-table__card--header{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;font-size:12px;text-transform:uppercase}:host ::ng-deep .mapa-table__card--header mat-icon{height:16px;width:16px;font-size:16px}:host ::ng-deep .mapa-table__card--column{padding:16px 0}:host ::ng-deep .mapa-table__label{margin-top:4px}:host ::ng-deep .mapa-table__column{padding:15px;align-items:center;display:flex}:host ::ng-deep .mapa-table__column--actions{display:flex}:host ::ng-deep .mapa-table__column--actions .mat-icon{color:#ea561d!important}:host ::ng-deep .mapa-table__column--actions-item{display:flex!important;align-items:center;gap:8px}:host ::ng-deep .mapa-table__column--actions-item span{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-table__column--menu{display:flex;align-items:center;justify-content:center;gap:8px}:host ::ng-deep .mapa-table__column--menu .mapa-table__column--menu-item-text{display:flex;align-items:center;justify-content:center;font-size:12px;line-height:16px!important}:host ::ng-deep .mapa-table__column--menu-item{display:flex;align-items:center;width:unset!important;height:unset!important}:host ::ng-deep .mapa-table__column--menu-item img{margin-right:8px}:host ::ng-deep .mapa-table__column--menu-item button{color:#ea561d!important}:host ::ng-deep .mapa-table__column--menu-item button span{font-size:12px;text-transform:uppercase;display:flex}:host ::ng-deep .mapa-table__column--menu-item-disabled{opacity:.45;cursor:not-allowed}:host ::ng-deep .mapa-table__column--header{width:100%}:host ::ng-deep .mapa-table__column--header .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px;font-size:14px;height:14px;width:14px}:host ::ng-deep .mapa-table__column--status{margin:auto;text-align:center;width:min-content;border-radius:4px;padding:4px 8px}:host ::ng-deep .mapa-table__column--status-round{border-radius:50px}:host ::ng-deep .mapa-table__column--ellipsis{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host ::ng-deep .mapa-table__column--no-wrap{white-space:nowrap}:host ::ng-deep .mapa-table__column--wrap{white-space:pre-wrap}:host ::ng-deep .mapa-table__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-table--column-actions,:host ::ng-deep .mapa-table--column-menu{width:100%}:host ::ng-deep .mapa-table__content--value{color:#fff;font-weight:500}:host ::ng-deep .mapa-table .mat-sort-header-arrow{color:transparent}:host ::ng-deep .mapa-table .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-table .mat-sort-header-content mat-icon{margin-left:24px}:host ::ng-deep .mapa-table .mat-mdc-cell{padding:0 10px!important}:host ::ng-deep .mapa-table .mat-mdc-header-cell{padding:0 24px!important}:host ::ng-deep .mapa-table .mat-mdc-table{width:100%;overflow-x:auto}@media (max-width: 1000px){:host ::ng-deep .mapa-table .mat-mdc-paginator-range-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}:host ::ng-deep .mapa-table .mat-mdc-paginator-range-label{padding:16px 0;text-align:center;width:100%}:host ::ng-deep .mapa-table .mat-mdc-paginator-container{justify-content:center}}:host ::ng-deep .mapa-table .classification{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center}:host ::ng-deep .mapa-table .roundCell{border-radius:10px}:host ::ng-deep .mapa-table .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}:host ::ng-deep .mapa-table .name{color:#181818;text-align:left;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:400;line-height:20px}:host ::ng-deep .mapa-table .cpf{color:#77838f;text-align:left;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-table .label_report{color:#181818;text-align:center;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MapaMenuComponent, selector: "mapa-menu", inputs: ["items", "data"], outputs: ["emitMenu"] }, { kind: "component", type: MapaSvgIconComponent, selector: "mapa-svg-icon", inputs: ["name", "color"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i8.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: BubblePaginationDirective, selector: "[appBubblePagination]", inputs: ["showFirstButton", "showLastButton", "renderButtonsNumber", "appCustomLength", "hideDefaultArrows", "bubblePageIndex"], outputs: ["pageIndexChangeEmitter"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapaTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-table", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        RouterModule,
+                        MapaMenuComponent,
+                        MapaSvgIconComponent,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatIconModule,
+                        MatPaginatorModule,
+                        MatSortModule,
+                        MatTableModule,
+                        BubblePaginationDirective,
+                        SafeHtmlPipe,
+                    ], providers: [
+                        {
+                            provide: MatPaginatorIntl,
+                            useFactory: customPaginatorFactory,
+                            deps: [MapaI18nService, Injector],
+                        },
+                    ], standalone: true, template: "@if (dataSource.data.length > 0) {\n  <section class=\"mapa-table\">\n    <div class=\"mapa-table--show-on-mobile\">\n      @if (checkbox) {\n        <div class=\"mapa-table__select-all\">\n          @if (selection) {\n            <mat-checkbox\n              (change)=\"$event ? toggleAllRows() : null\"\n              [checked]=\"selection.hasValue() && isAllSelected()\"\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n              (click)=\"$event.stopPropagation()\"\n              color=\"primary\"\n            > {{ selectAllLabel }}</mat-checkbox>\n          }\n        </div>\n      }\n      @for (row of dataSource.data; track row) {\n        <div>\n          <div class=\"mapa-table__card mapa__card\">\n            @for (column of columns; track trackColumn($index, column); let isFirst = $first) {\n              <div [ngClass]=\"'mapa-table__card--column-' + column.key\">\n                @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                  <strong\n                    class=\"mapa-table__card--header\"\n                    [class.mapa-table__checkbox--header]=\"isFirst && checkbox\"\n                  >\n                    <div\n                      [ngTemplateOutlet]=\"tableHeader\"\n                      [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox: false }\"\n                      class=\"hidden\"\n                    ></div>\n                  </strong>\n                }\n                <div\n                  class=\"mapa-table__card--column\"\n                  [class.mapa-table__column--center-cell]=\"column?.align === 'center'\"\n                >\n                  @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                    <div class=\"mapa-table__content\">\n                      <div\n                        [style.width]=\"column?.width\"\n                        [class.mapa-table__column--ellipsis]=\"column?.collapse === 'overflow'\"\n                        [class.mapa-table__column--no-wrap]=\"column?.collapse === 'no-wrap'\"\n                        [class.mapa-table__column--wrap]=\"column?.collapse === 'wrap'\"\n                        [ngClass]=\"[hasCustomClass(column, row, column.key) ? getCustomClass(column, row, column.key) : '']\"\n                      >\n                        @if (column?.status?.color) {\n                          <div\n                            class=\"mapa-table__column--status\"\n                            [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n                            [style.color]=\"getTextColor(column, row)\"\n                            [class.mapa-table__column--status-round]=\"column.status?.style == 'round'\"\n                          >\n                            <div\n                              [ngTemplateOutlet]=\"tableContent\"\n                              [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                            ></div>\n                          </div>\n                        } @else {\n                          <div\n                            [ngTemplateOutlet]=\"tableContent\"\n                            [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                          ></div>\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    @if (column.key === \"actions\" && actions) {\n                      <div>\n                        @for (item of getActionItems(row); track item) {\n                          @if (item.route) {\n                            <a [href]=\"item.route\" [routerLink]=\"item.route\">\n                              <button\n                                class=\"mapa-table__column--actions-item\"\n                                [title]=\"item.text\"\n                                mat-icon-button\n                              >\n                                @if (item.icon) {\n                                  <mat-icon>{{ item.icon }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" />\n                                }\n                                @if (item.svg) {\n                                  <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                                }\n                                @if (item.showText) {\n                                  <span>{{ item.text }}</span>\n                                }\n                              </button>\n                            </a>\n                          } @else {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--actions-item\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n\n                    @if (column.key === \"menu\") {\n                      @if (hasIndividualMenu(row)) {\n                        <div class=\"mapa-table__column--menu\">\n                          @for (item of getMenuItems(row); track item) {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--menu-item\"\n                              [class.mapa-table__column--menu-item-disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              <span class=\"mapa-table__column--menu-item-text\">{{ item.text }}</span>\n                            </button>\n                          }\n                        </div>\n                      } @else {\n                        <div class=\"mapa-table__column--menu\">\n                          @for (item of menuItems; track item) {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--menu-item\"\n                              [class.mapa-table__column--menu-item-disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.image)\"></mapa-svg-icon>\n                              }\n                              <span class=\"mapa-table__column--menu-item-text\">{{ item.text }}</span>\n                            </button>\n                          }\n                        </div>\n                      }\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"mapa-table--show-on-desktop\">\n      @if (desktopTableVisible) {\n        <table\n          mat-table\n          [dataSource]=\"dataSource\"\n          matSort\n          (matSortChange)=\"sortDataFunction($event)\"\n        >\n          @for (column of columns; track trackColumn($index, column); let isFirst = $first) {\n            <ng-container [matColumnDef]=\"column.key\">\n              <th\n                mat-header-cell\n                *matHeaderCellDef\n                mat-sort-header\n                [disabled]=\"!(column.key !== 'actions' ? column.sort : null)\"\n              >\n                <div\n                  [ngTemplateOutlet]=\"tableHeader\"\n                  [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox }\"\n                ></div>\n              </th>\n              <td mat-cell *matCellDef=\"let row\" [style.width]=\"column?.width\">\n                <div\n                  class=\"mapa-table__column\"\n                  (click)=\"emitRowClick(row, '')\"\n                  [class.mapa-table__column--center-cell]=\"column?.align === 'center'\"\n                >\n                  @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                    <div class=\"mapa-table__content\">\n                      <div\n                        [style.width]=\"column?.width\"\n                        [class.mapa-table__column--ellipsis]=\"column?.collapse === 'overflow'\"\n                        [class.mapa-table__column--no-wrap]=\"column?.collapse === 'no-wrap'\"\n                        [class.mapa-table__column--wrap]=\"column?.collapse === 'wrap'\"\n                        [ngClass]=\"[hasCustomClass(column, row, column.key) ? getCustomClass(column, row, column.key) : '']\"\n                      >\n                        @if (column?.status?.color) {\n                          <div\n                            class=\"mapa-table__column--status\"\n                            [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n                            [style.color]=\"getTextColor(column, row)\"\n                            [class.mapa-table__column--status-round]=\"column.status?.style == 'round'\"\n                          >\n                            <div\n                              [ngTemplateOutlet]=\"tableContent\"\n                              [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                            ></div>\n                          </div>\n                        } @else {\n                          <div\n                            [ngTemplateOutlet]=\"tableContent\"\n                            [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                          ></div>\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    @if (column.key === \"actions\" && actions) {\n                      <div class=\"mapa-table__column--actions\">\n                        @for (item of getActionItems(row); track item) {\n                          @if (item.route) {\n                            <a [href]=\"item.route\" [routerLink]=\"item.route\">\n                              <button\n                                class=\"mapa-table__column--actions-item\"\n                                [title]=\"item.text\"\n                                mat-icon-button\n                              >\n                                @if (item.icon) {\n                                  <mat-icon>{{ item.icon }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" />\n                                }\n                                @if (item.svg) {\n                                  <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                                }\n                                @if (item.showText) {\n                                  <span>{{ item.text }}</span>\n                                }\n                              </button>\n                            </a>\n                          } @else {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--actions-item\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n                    @if (column.key === \"menu\") {\n                      <div class=\"mapa-table__column--menu\">\n                        @if (hasIndividualMenu(row)) {\n                          <mapa-menu\n                            [items]=\"getMenuItems(row)\"\n                            [data]=\"row\"\n                            (emitMenu)=\"handleMenu($event)\"\n                          ></mapa-menu>\n                        } @else if (menuItems.length > 0) {\n                          <mapa-menu\n                            [items]=\"menuItems\"\n                            [data]=\"row\"\n                            (emitMenu)=\"handleMenu($event)\"\n                          ></mapa-menu>\n                        }\n                      </div>\n                    }\n                  }\n                </div>\n              </td>\n            </ng-container>\n          }\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: displayedColumns;\"\n            class=\"row-hover\"\n          ></tr>\n        </table>\n      }\n    </div>\n\n    @if (showPaginator) {\n      <section>\n        <mat-paginator\n          class=\"mapa-table__paginator\"\n          appBubblePagination\n          [appCustomLength]=\"totalCount\"\n          [bubblePageIndex]=\"paginatorPageIndex\"\n          [pageIndex]=\"paginatorPageIndex\"\n          [showFirstButton]=\"paginatorShowFirstButton\"\n          [showLastButton]=\"paginatorShowLastButton\"\n          [renderButtonsNumber]=\"paginatorRenderButtonsNumber\"\n          [hideDefaultArrows]=\"paginatorHideDefaultArrows\"\n          [length]=\"totalCount\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"[5, 10, 25, 100]\"\n          (page)=\"changePage($event)\"\n        ></mat-paginator>\n      </section>\n    }\n  </section>\n}\n\n<ng-template\n  #tableHeader\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n>\n  @if (isFirst && checkbox) {\n    @if (selection) {\n      <mat-checkbox\n        (change)=\"$event ? toggleAllRows() : null\"\n        [checked]=\"selection.hasValue() && isAllSelected()\"\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n        (click)=\"$event.stopPropagation()\"\n        color=\"primary\"\n      ></mat-checkbox>\n    }\n  }\n  <div>\n    <span [innerHTML]=\"column.label | safeHtml\"></span>\n  </div>\n  @if (column.key !== \"actions\" && column.key !== \"menu\" && column.sort) {\n    <div class=\"mapa-table--show-on-desktop\">\n      <mat-icon>filter_list</mat-icon>\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #tableContent\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n  let-row=\"row\"\n>\n  @if (isFirst && checkbox) {\n    <mat-checkbox\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"$event ? selection?.toggle(row) : null; getSelectedValues()\"\n      [checked]=\"selection?.isSelected(row)\"\n      color=\"primary\"\n      class=\"mapa-table__checkbox\"\n    >\n    </mat-checkbox>\n  }\n  @if (isMaskedData(column, row)) {\n    {{ getValueAsDate(column, row) | date: column.mask }}\n  } @else if (column.status) {\n    <span [innerHTML]=\"getStatusLabel(column, row) | safeHtml\"></span>\n  } @else {\n    <span [innerHTML]=\"getCellContent(row, column.key) | safeHtml\"></span>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .mapa-table .mat-mdc-table{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:100%}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-checkbox{margin:6px 8px 0 0;padding:0}:host ::ng-deep .mapa-table td.mat-mdc-cell{padding:16px 0}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-row .mat-mdc-cell{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;color:#50575e}:host ::ng-deep .mapa-table .row-hover:hover{box-shadow:0 2px 4px #00000021;outline:1px solid rgba(238,238,238,.93);cursor:pointer}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-header-cell{border:none;border-bottom:1px solid #eee;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:600;color:#50575e}:host ::ng-deep .mapa-table .mat-mdc-row,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-header-cell,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{background-color:transparent;border-color:#b6b6b6}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background{background-color:#ea561d;border-color:#ea561d}:host ::ng-deep .mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}:host ::ng-deep .mapa-table ::ng-deep .mat-mdc-paginator-page-size-label{display:none}:host ::ng-deep .mapa-table__paginator .mat-paginator-container,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-container{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;justify-content:flex-start}:host ::ng-deep .mapa-table__paginator .mat-paginator-page-size,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-page-size{margin-right:10vw}:host ::ng-deep .mapa-table__paginator .custom-paginator-container{justify-content:flex-end}:host ::ng-deep .mapa-table__paginator .g-bubble-container{display:flex;align-items:center;justify-content:flex-end;gap:8px}:host ::ng-deep .mapa-table__paginator .g-bubble{border-radius:4px;outline:none;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;background:transparent;color:#50575e;cursor:pointer;margin:.4em 0;font-size:14px;min-width:24px;width:auto;min-height:24px;max-height:24px;padding:1px 6px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mapa-table__paginator .g-bubble:hover{background-color:#dfe3e6}:host ::ng-deep .mapa-table__paginator .g-bubble__active{background-color:#ea561d;color:#fff}:host ::ng-deep .mapa-table__paginator .custom-paginator-counter{white-space:nowrap;margin:0 4px 0 10px!important}:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-previous,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-next{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;color:#999}:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-previous[disabled],:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-next[disabled]{color:#dfe3e6}:host ::ng-deep .hidden{display:none}:host ::ng-deep .mapa-table{width:100%;white-space:nowrap}:host ::ng-deep .mapa-table .mat-mdc-icon-button{width:unset!important;height:unset!important;line-height:unset!important;justify-content:flex-start}:host ::ng-deep .mapa-table .mat-mdc-icon-button .mat-mdc-button-touch-target,:host ::ng-deep .mapa-table .mat-mdc-icon-button .mdc-button__label{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%!important}@media (min-width: 1201px){:host ::ng-deep .mapa-table--show-on-mobile{display:none}:host ::ng-deep .mapa-table--show-on-desktop{display:block}}@media (max-width: 1200px){:host ::ng-deep .mapa-table--show-on-mobile{padding:20px}:host ::ng-deep .mapa-table--show-on-mobile .mapa__card{width:unset!important}:host ::ng-deep .mapa-table--show-on-desktop{display:none}}:host ::ng-deep .mapa-table__select-all{display:flex;align-items:center;padding:16px 24px;font-size:12px;text-transform:uppercase}@media (max-width: 1200px){:host ::ng-deep .mapa-table__checkbox{margin-right:8px}:host ::ng-deep .mapa-table__checkbox--header{padding-left:24px}}:host ::ng-deep .mapa-table__card{position:relative;padding:24px;display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}:host ::ng-deep .mapa-table__card--floating-content{display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;gap:8px}:host ::ng-deep .mapa-table__card--floating-actions{position:absolute;bottom:16px;right:16px;color:#ea561d}:host ::ng-deep .mapa-table__card--header{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;font-size:12px;text-transform:uppercase}:host ::ng-deep .mapa-table__card--header mat-icon{height:16px;width:16px;font-size:16px}:host ::ng-deep .mapa-table__card--column{padding:16px 0}:host ::ng-deep .mapa-table__label{margin-top:4px}:host ::ng-deep .mapa-table__column{padding:15px;align-items:center;display:flex}:host ::ng-deep .mapa-table__column--actions{display:flex}:host ::ng-deep .mapa-table__column--actions .mat-icon{color:#ea561d!important}:host ::ng-deep .mapa-table__column--actions-item{display:flex!important;align-items:center;gap:8px}:host ::ng-deep .mapa-table__column--actions-item span{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-table__column--menu{display:flex;align-items:center;justify-content:center;gap:8px}:host ::ng-deep .mapa-table__column--menu .mapa-table__column--menu-item-text{display:flex;align-items:center;justify-content:center;font-size:12px;line-height:16px!important}:host ::ng-deep .mapa-table__column--menu-item{display:flex;align-items:center;width:unset!important;height:unset!important}:host ::ng-deep .mapa-table__column--menu-item img{margin-right:8px}:host ::ng-deep .mapa-table__column--menu-item button{color:#ea561d!important}:host ::ng-deep .mapa-table__column--menu-item button span{font-size:12px;text-transform:uppercase;display:flex}:host ::ng-deep .mapa-table__column--menu-item-disabled{opacity:.45;cursor:not-allowed}:host ::ng-deep .mapa-table__column--header{width:100%}:host ::ng-deep .mapa-table__column--header .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px;font-size:14px;height:14px;width:14px}:host ::ng-deep .mapa-table__column--status{margin:auto;text-align:center;width:min-content;border-radius:4px;padding:4px 8px}:host ::ng-deep .mapa-table__column--status-round{border-radius:50px}:host ::ng-deep .mapa-table__column--ellipsis{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host ::ng-deep .mapa-table__column--no-wrap{white-space:nowrap}:host ::ng-deep .mapa-table__column--wrap{white-space:pre-wrap}:host ::ng-deep .mapa-table__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-table--column-actions,:host ::ng-deep .mapa-table--column-menu{width:100%}:host ::ng-deep .mapa-table__content--value{color:#fff;font-weight:500}:host ::ng-deep .mapa-table .mat-sort-header-arrow{color:transparent}:host ::ng-deep .mapa-table .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-table .mat-sort-header-content mat-icon{margin-left:24px}:host ::ng-deep .mapa-table .mat-mdc-cell{padding:0 10px!important}:host ::ng-deep .mapa-table .mat-mdc-header-cell{padding:0 24px!important}:host ::ng-deep .mapa-table .mat-mdc-table{width:100%;overflow-x:auto}@media (max-width: 1000px){:host ::ng-deep .mapa-table .mat-mdc-paginator-range-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}:host ::ng-deep .mapa-table .mat-mdc-paginator-range-label{padding:16px 0;text-align:center;width:100%}:host ::ng-deep .mapa-table .mat-mdc-paginator-container{justify-content:center}}:host ::ng-deep .mapa-table .classification{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center}:host ::ng-deep .mapa-table .roundCell{border-radius:10px}:host ::ng-deep .mapa-table .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}:host ::ng-deep .mapa-table .name{color:#181818;text-align:left;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:400;line-height:20px}:host ::ng-deep .mapa-table .cpf{color:#77838f;text-align:left;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-table .label_report{color:#181818;text-align:center;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MapaI18nService }], propDecorators: { columns: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], pageIndex: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], totalCount: [{
+                type: Input
+            }], totalPages: [{
+                type: Input
+            }], checkbox: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], filterControl: [{
+                type: Input
+            }], menuItems: [{
+                type: Input
+            }], menu: [{
+                type: Input
+            }], showPaginator: [{
+                type: Input
+            }], paginatorShowFirstButton: [{
+                type: Input
+            }], paginatorShowLastButton: [{
+                type: Input
+            }], paginatorRenderButtonsNumber: [{
+                type: Input
+            }], paginatorHideDefaultArrows: [{
+                type: Input
+            }], trigger: [{
+                type: ViewChild,
+                args: [MatMenuTrigger]
+            }], table: [{
+                type: ViewChild,
+                args: [MatTable]
+            }], rowClick: [{
+                type: Output
+            }], selectedRows: [{
+                type: Output
+            }], onChangePage: [{
+                type: Output
+            }], onSortChange: [{
+                type: Output
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator, { read: true }]
+            }], sort: [{
+                type: ViewChild,
+                args: [MatSort]
+            }] } });
+
+/*
+ * Public API Surface of mapa-library-ui table
+ */
+
+/*
+ * Public API Surface of mapa-library-ui table
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BubblePaginationDirective, MapaTableComponent, customPaginatorFactory };
+//# sourceMappingURL=mapa-library-ui-src-lib-components-table.mjs.map