mapa-library-ui 2.0.5 → 2.1.1

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

@@ -1,29 +1,1274 @@
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/common';
+import { CommonModule, NgClass, NgTemplateOutlet, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, ViewChild, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
-import * as i2 from '@angular/material/icon';
+import { effect, EventEmitter, inject, DestroyRef, Input, Output, Directive, SecurityContext, Injectable, Pipe, InjectionToken, Injector, signal, Optional, Inject, Component, TemplateRef, contentChildren, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
+import * as i1 from '@angular/material/paginator';
+import { MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import * as i1$3 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 i4 from '@angular/material/sort';
-import { MatSortModule, MatSort } from '@angular/material/sort';
-import * as i3 from '@angular/material/table';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import * as i3 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import { RouterLink } from '@angular/router';
+import { map, startWith } from 'rxjs/operators';
+import * as i1$1 from '@angular/platform-browser';
+import { getStoredAppLanguage, getIntlLocale } from 'mapa-frontend-i18n';
+import * as i1$2 from '@angular/common/http';
+
+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 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.hideDefaultArrows = false;
+        this.buttonsRef = [];
+        this.removeButtonListeners = [];
+        this.rebuildQueued = false;
+        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']) ||
+            (!changes?.['bubblePageSize']?.firstChange && changes?.['bubblePageSize'])) {
+            this.scheduleRebuildButtons();
+        }
+    }
+    ngOnDestroy() {
+        this.clearButtonListeners();
+    }
+    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;
+        }
+        this.clearButtonListeners();
+        while (this.bubbleContainerRef.firstChild) {
+            this.ren.removeChild(this.bubbleContainerRef, this.bubbleContainerRef.firstChild);
+        }
+        this.buttonsRef = [];
+    }
+    createButton(i) {
+        const bubbleButton = this.ren.createElement('button');
+        const text = this.ren.createText(String(i + 1));
+        this.ren.addClass(bubbleButton, 'g-bubble');
+        this.ren.setAttribute(bubbleButton, 'type', 'button');
+        this.ren.setStyle(bubbleButton, 'margin-right', '8px');
+        this.ren.appendChild(bubbleButton, text);
+        const removeClickListener = this.ren.listen(bubbleButton, 'click', () => {
+            this.switchPage(i);
+        });
+        this.removeButtonListeners.push(removeClickListener);
+        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();
+    }
+    scheduleRebuildButtons() {
+        if (this.rebuildQueued) {
+            return;
+        }
+        this.rebuildQueued = true;
+        Promise.resolve().then(() => {
+            this.rebuildQueued = false;
+            if (this.bubbleContainerRef) {
+                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() {
+        const pageSize = this.getPageSize();
+        const length = this.getLength();
+        if (!Number.isFinite(pageSize) || pageSize <= 0) {
+            return 0;
+        }
+        return Math.ceil(length / pageSize);
+    }
+    getActivePageIndex() {
+        return Math.max(this.bubblePageIndex ?? this.matPag.pageIndex ?? 0, 0);
+    }
+    getPageSize() {
+        return this.bubblePageSize || this.matPag.pageSize;
+    }
+    getLength() {
+        return this.appCustomLength ?? this.matPag.length ?? 0;
+    }
+    clearButtonListeners() {
+        this.removeButtonListeners.forEach((removeListener) => removeListener());
+        this.removeButtonListeners = [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", 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.21", type: BubblePaginationDirective, isStandalone: true, selector: "[appBubblePagination], [appStylePaginatorMv]", inputs: { showFirstButton: "showFirstButton", showLastButton: "showLastButton", renderButtonsNumber: "renderButtonsNumber", appCustomLength: "appCustomLength", hideDefaultArrows: "hideDefaultArrows", bubblePageIndex: "bubblePageIndex", bubblePageSize: "bubblePageSize" }, outputs: { pageIndexChangeEmitter: "pageIndexChangeEmitter" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: BubblePaginationDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appBubblePagination], [appStylePaginatorMv]',
+                    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
+            }], bubblePageSize: [{
+                type: Input
+            }] } });
+
+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.21", 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.21", ngImport: i0, type: HtmlSanitizerService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", 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.21", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: HtmlSanitizerService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.21", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "safeHtml",
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: HtmlSanitizerService }] });
+
+const MAPA_UI_TEXTS = new InjectionToken('MAPA_UI_TEXTS');
+function formatPaginatorRange(page, pageSize, length) {
+    if (length === 0 || pageSize === 0) {
+        return `0 de ${length}`;
+    }
+    const safeLength = Math.max(length, 0);
+    const startIndex = page * pageSize;
+    const endIndex = startIndex < safeLength
+        ? Math.min(startIndex + pageSize, safeLength)
+        : startIndex + pageSize;
+    return `${startIndex + 1} - ${endIndex} de ${safeLength}`;
+}
+function formatPaginatorShowingRange(page, pageSize, length) {
+    if (length === 0 || pageSize === 0) {
+        return 'Mostrando 0 - 0 de 0 item';
+    }
+    const safeLength = Math.max(length, 0);
+    const startIndex = page * pageSize;
+    const endIndex = startIndex < safeLength
+        ? Math.min(startIndex + pageSize, safeLength)
+        : startIndex + pageSize;
+    const itemLabel = safeLength === 1 ? 'item' : 'itens';
+    return `Mostrando ${startIndex + 1} - ${endIndex} de ${safeLength} ${itemLabel}`;
+}
+const DEFAULT_MAPA_UI_TEXTS = {
+    common: {
+        selectAll: 'Selecionar todos',
+        retry: 'Tentar novamente',
+    },
+    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: formatPaginatorRange,
+        showingRangeLabel: formatPaginatorShowingRange,
+    },
+    warning: {
+        lowReliabilityTitle: 'Nível baixo de confiabilidade no(s) teste(s):',
+        expirationLimitTitle: 'O prazo de validade do(s) teste(s) está no limite:',
+    },
+    table: {
+        emptyTitle: 'Não foram encontrados resultados',
+        emptySubtitle: '',
+        loading: 'Carregando resultados',
+        errorTitle: 'Não foi possível carregar os resultados.',
+        selectAllVisible: 'Selecionar todos os itens desta página',
+        selectionColumn: 'Seleção',
+        selectRow: 'Selecionar item',
+        selectNamedRow: (item) => `Selecionar ${item}`,
+    },
+    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 mínimo permitido é ${context?.min ?? ''}`.trim(),
+        minLength: (context) => `O mínimo permitido é ${context?.requiredLength ?? ''} caracteres`.trim(),
+        pattern: 'Formato inválido',
+        required: 'Campo obrigatório',
+    },
+};
+function getDefaultTexts() {
+    return DEFAULT_MAPA_UI_TEXTS;
+}
+function mergeMapaUiTexts(customTexts) {
+    const defaults = getDefaultTexts();
+    return {
+        common: { ...defaults.common, ...(customTexts?.common ?? {}) },
+        filters: { ...defaults.filters, ...(customTexts?.filters ?? {}) },
+        datepicker: { ...defaults.datepicker, ...(customTexts?.datepicker ?? {}) },
+        capability: { ...defaults.capability, ...(customTexts?.capability ?? {}) },
+        paginator: { ...defaults.paginator, ...(customTexts?.paginator ?? {}) },
+        warning: { ...defaults.warning, ...(customTexts?.warning ?? {}) },
+        table: { ...defaults.table, ...(customTexts?.table ?? {}) },
+        validation: { ...defaults.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.21", 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.21", ngImport: i0, type: MapaI18nService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", 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})$/;
+const MONTH_DAY_YEAR_PATTERN = /^(\d{2})\/(\d{2})\/(\d{4})$/;
+const ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}([T ].*)?$/;
+const DOCS_LANGUAGE_STORAGE_KEY = "mapa-library-ui-docs-language";
+function isValidDate(date) {
+    return !Number.isNaN(date.getTime());
+}
+function buildUtcDate(date, dayOffset, hours, minutes, seconds, milliseconds) {
+    return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate() + dayOffset, hours, minutes, seconds, milliseconds));
+}
+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 formatDateAsMonthDayYear(date) {
+    const day = `${date.getDate()}`.padStart(2, "0");
+    const month = `${date.getMonth() + 1}`.padStart(2, "0");
+    const year = `${date.getFullYear()}`;
+    return `${month}/${day}/${year}`;
+}
+function normalizeDateLocale(value) {
+    if (typeof value !== "string") {
+        return "pt-BR";
+    }
+    const normalizedValue = value.trim().toLowerCase();
+    if (normalizedValue.startsWith("en")) {
+        return "en";
+    }
+    if (normalizedValue.startsWith("es")) {
+        return "es";
+    }
+    return "pt-BR";
+}
+function getDocsStoredLanguage() {
+    if (typeof window === "undefined") {
+        return null;
+    }
+    try {
+        return window.localStorage.getItem(DOCS_LANGUAGE_STORAGE_KEY);
+    }
+    catch {
+        return null;
+    }
+}
+function getActiveDateLocale() {
+    return normalizeDateLocale(getDocsStoredLanguage() ?? getStoredAppLanguage());
+}
+function isMonthFirstDateLocale(locale = getActiveDateLocale()) {
+    return normalizeDateLocale(locale) === "en";
+}
+function getActiveDateFormat(locale = getActiveDateLocale()) {
+    return isMonthFirstDateLocale(locale) ? "MM/DD/YYYY" : "DD/MM/YYYY";
+}
+function getDateInputMask(_locale = getActiveDateLocale()) {
+    return "00/00/0000";
+}
+function formatDateForLocale(date, locale = getActiveDateLocale()) {
+    return isMonthFirstDateLocale(locale)
+        ? formatDateAsMonthDayYear(date)
+        : formatDateAsDayMonthYear(date);
+}
+function parseOrderedDate(value, pattern, order) {
+    const match = pattern.exec(value.trim());
+    if (!match) {
+        return null;
+    }
+    const [, firstValue, secondValue, yearValue] = match;
+    const year = Number(yearValue);
+    const month = Number(order === "month-first" ? firstValue : secondValue);
+    const day = Number(order === "month-first" ? secondValue : firstValue);
+    const parsedDate = new Date(year, month - 1, day);
+    if (parsedDate.getFullYear() !== year ||
+        parsedDate.getMonth() !== month - 1 ||
+        parsedDate.getDate() !== day) {
+        return null;
+    }
+    return parsedDate;
+}
+function parseLocaleDateValue(value, locale = getActiveDateLocale()) {
+    const normalizedLocale = normalizeDateLocale(locale);
+    const parsers = normalizedLocale === "en"
+        ? [
+            () => parseOrderedDate(value, MONTH_DAY_YEAR_PATTERN, "month-first"),
+            () => parseOrderedDate(value, DAY_MONTH_YEAR_PATTERN, "day-first"),
+        ]
+        : [
+            () => parseOrderedDate(value, DAY_MONTH_YEAR_PATTERN, "day-first"),
+            () => parseOrderedDate(value, MONTH_DAY_YEAR_PATTERN, "month-first"),
+        ];
+    for (const parse of parsers) {
+        const parsedDate = parse();
+        if (parsedDate) {
+            return parsedDate;
+        }
+    }
+    return null;
+}
+function parseDateValue(value, locale = getActiveDateLocale()) {
+    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 localeDate = parseLocaleDateValue(trimmedValue, locale);
+    if (localeDate) {
+        return localeDate;
+    }
+    if (DAY_MONTH_YEAR_PATTERN.test(trimmedValue) || MONTH_DAY_YEAR_PATTERN.test(trimmedValue)) {
+        return null;
+    }
+    const parsedDate = new Date(trimmedValue);
+    return isValidDate(parsedDate) ? parsedDate : null;
+}
+/**
+ * Parse estrito para o texto de um campo de data mascarado.
+ *
+ * Diferente de `parseDateValue`, não cai em `new Date(string)` para qualquer
+ * entrada. O motor de datas do V8 aceita fragmentos numéricos e devolve datas
+ * inventadas — `"2"` vira 01/02/2001 e `"251220"` vira o ano 251220 —, o que
+ * fazia os datepickers moverem o calendário a cada tecla enquanto o usuário
+ * ainda estava digitando.
+ *
+ * Aceita apenas uma data completa no formato do locale ativo (com validação de
+ * faixa de dia/mês) ou uma data ISO-8601, para não quebrar valores vindos de
+ * API que o consumidor grave direto no controle.
+ */
+function parseDateFieldValue(value, locale = getActiveDateLocale()) {
+    if (value instanceof Date || typeof value === "number") {
+        return parseDateValue(value, locale);
+    }
+    if (typeof value !== "string") {
+        return null;
+    }
+    const trimmedValue = value.trim();
+    if (!trimmedValue) {
+        return null;
+    }
+    const localeDate = parseLocaleDateValue(trimmedValue, locale);
+    if (localeDate) {
+        return localeDate;
+    }
+    return ISO_DATE_PATTERN.test(trimmedValue)
+        ? parseDateValue(trimmedValue, locale)
+        : null;
+}
+function isDateValue(value) {
+    return parseDateValue(value) !== null;
+}
+function parseBrazilianDate(value) {
+    return parseOrderedDate(value, DAY_MONTH_YEAR_PATTERN, "day-first");
+}
+function normalizeDateInput(value) {
+    return parseDateValue(value);
+}
+function formatBrazilianDate(value) {
+    const date = normalizeDateInput(value);
+    return date ? formatDateAsDayMonthYear(date) : "";
+}
+function addDays(date, days) {
+    const nextDate = new Date(date);
+    nextDate.setDate(nextDate.getDate() + days);
+    return nextDate;
+}
+function formatLocaleDate(value, dateStyle = "short") {
+    const date = normalizeDateInput(value);
+    if (!date) {
+        return "";
+    }
+    return new Intl.DateTimeFormat(getIntlLocale(getActiveDateLocale()), {
+        dateStyle,
+    }).format(date);
+}
+function formatLocaleDateTime(value, options = {}) {
+    const date = normalizeDateInput(value);
+    if (!date) {
+        return "";
+    }
+    const { dateStyle = "short", timeStyle = "short" } = options;
+    return new Intl.DateTimeFormat(getIntlLocale(getActiveDateLocale()), {
+        dateStyle,
+        timeStyle,
+    }).format(date);
+}
+function getDefaultDateRange(days = 60) {
+    const today = new Date();
+    return {
+        startDate: formatBrazilianDate(addDays(today, -days)),
+        endDate: formatBrazilianDate(today),
+    };
+}
+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 };
+}
+function toUtcRangeStartIso(value) {
+    const date = normalizeDateInput(value);
+    return date ? buildUtcDate(date, 0, 3, 0, 0, 0).toISOString() : undefined;
+}
+function toUtcRangeEndIso(value) {
+    const date = normalizeDateInput(value);
+    return date ? buildUtcDate(date, 1, 2, 59, 59, 999).toISOString() : undefined;
+}
+function toUtcDayExclusiveEndIso(value) {
+    const date = normalizeDateInput(value);
+    return date ? buildUtcDate(date, 1, 3, 0, 0, 0).toISOString() : undefined;
+}
+
+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.21", 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.21", 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.21", 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
+ */
+
+class MapaTableCellDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaTableCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.21", type: MapaTableCellDirective, isStandalone: true, selector: "ng-template[mapaTableCell]", inputs: { columnKey: ["mapaTableCell", "columnKey"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaTableCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[mapaTableCell]',
+                    standalone: true,
+                }]
+        }], propDecorators: { columnKey: [{
+                type: Input,
+                args: [{ required: true, alias: 'mapaTableCell' }]
+            }] } });
+class MapaTableComponent {
+    constructor() {
+        this.columns = [];
+        this.data = [];
+        this.rowKey = 'id';
+        this.caption = '';
+        this.showSelectAll = true;
+        this.selectionLabelKey = 'name';
+        this.error = false;
+        /** @deprecated Prefer the individual state inputs. */
+        this.status = { loading: false, finished: false };
+        /** @deprecated Prefer `emptyTitle` and `emptySubtitle`. */
+        this.empty = { title: '', subtitle: null };
+        this.pageIndex = 1;
+        this.pageSize = 5;
+        this.totalCount = 0;
+        this.pageSizeOptions = [5, 10, 25, 100];
+        /** @deprecated The paginator derives its pages from `totalCount` and `pageSize`. */
+        this.totalPages = 0;
+        /** @deprecated Prefer `pagination`. */
+        this.showPaginator = true;
+        this.paginatorShowFirstButton = true;
+        this.paginatorShowLastButton = true;
+        this.paginatorRenderButtonsNumber = 2;
+        this.paginatorHideDefaultArrows = false;
+        this.sortActive = '';
+        this.sortDirection = '';
+        /** @deprecated Prefer projected cells for new integrations. */
+        this.menuItems = [];
+        this.pageChange = new EventEmitter();
+        this.sortChange = new EventEmitter();
+        this.selectionChange = new EventEmitter();
+        this.retry = new EventEmitter();
+        /** @deprecated Prefer `pageChange`. */
+        this.onChangePage = new EventEmitter();
+        /** @deprecated Prefer `sortChange`. */
+        this.onSortChange = new EventEmitter();
+        /** @deprecated Prefer `selectionChange`. */
+        this.selectedRows = new EventEmitter();
+        this.rowClick = new EventEmitter();
+        this.projectedCells = contentChildren(MapaTableCellDirective, ...(ngDevMode ? [{ debugName: "projectedCells" }] : []));
+        this.cdr = inject(ChangeDetectorRef);
+        this.destroyRef = inject(DestroyRef);
+        this.i18n = inject(MapaI18nService);
+        this.localSort = { active: '', direction: '' };
+        this.filterValue = '';
+    }
+    get texts() {
+        return this.i18n.textsSignal();
+    }
+    get visibleData() {
+        this.observeFilterControl();
+        if (!this.filterValue)
+            return this.data;
+        return this.data.filter((row) => this.getFilterValue(row).includes(this.filterValue));
+    }
+    get isSelectable() {
+        return this.selectable ?? this.checkbox ?? false;
+    }
+    get isLoading() {
+        return this.loading ?? this.status.loading;
+    }
+    get isFinished() {
+        return this.finished ?? this.status.finished;
+    }
+    get resolvedEmptyTitle() {
+        return (this.emptyTitle ?? this.empty.title) || this.texts.table.emptyTitle;
+    }
+    get resolvedEmptySubtitle() {
+        return ((this.emptySubtitle ?? this.empty.subtitle) ||
+            this.texts.table.emptySubtitle ||
+            null);
+    }
+    get resolvedErrorTitle() {
+        return this.errorTitle || this.texts.table.errorTitle;
+    }
+    get resolvedErrorSubtitle() {
+        return this.errorSubtitle ?? null;
+    }
+    get resolvedRetryLabel() {
+        return this.retryLabel || this.texts.common.retry;
+    }
+    get zeroBasedPageIndex() {
+        return Math.max(this.pageIndex - 1, 0);
+    }
+    get shouldShowPaginator() {
+        const enabled = this.pagination ?? this.showPaginator;
+        return (enabled &&
+            !this.isLoading &&
+            !this.error &&
+            this.totalCount > this.data.length);
+    }
+    get skeletonRows() {
+        return Array.from({ length: Math.max(this.pageSize, 0) }, (_, index) => index);
+    }
+    skeletonColumnWidth(column) {
+        return (this.columnWidth(column) ||
+            (this.columns.length ? `${100 / this.columns.length}%` : '100%'));
+    }
+    columnWidth(column) {
+        return column.width || (this.isCompactColumn(column) ? '1%' : null);
+    }
+    rowIdentity(row, index) {
+        return this.getRowKey(row) || row || index;
+    }
+    getRowKey(row) {
+        const value = this.getColumnValue(row, this.rowKey);
+        return value == null ? '' : String(value);
+    }
+    isSelected(row) {
+        if (this.selectedKeys !== undefined) {
+            return new Set(this.selectedKeys.map(String)).has(this.getRowKey(row));
+        }
+        return this.selection?.isSelected(row) ?? false;
+    }
+    allVisibleSelected() {
+        const rows = this.visibleData;
+        return rows.length > 0 && rows.every((row) => this.isSelected(row));
+    }
+    someVisibleSelected() {
+        const selectedCount = this.visibleData.filter((row) => this.isSelected(row)).length;
+        return selectedCount > 0 && selectedCount < this.visibleData.length;
+    }
+    toggleRow(row, selected) {
+        if (this.selectedKeys !== undefined) {
+            const next = new Set(this.selectedKeys.map(String));
+            const key = this.getRowKey(row);
+            if (!key)
+                return;
+            selected ? next.add(key) : next.delete(key);
+            this.selectionChange.emit({ selectedKeys: Array.from(next) });
+            return;
+        }
+        if (!this.selection)
+            return;
+        selected
+            ? this.selection.select(row)
+            : this.selection.deselect(row);
+        this.emitLegacySelection();
+    }
+    toggleVisibleRows(selected) {
+        if (this.selectedKeys !== undefined) {
+            const next = new Set(this.selectedKeys.map(String));
+            for (const row of this.visibleData) {
+                const key = this.getRowKey(row);
+                if (!key)
+                    continue;
+                selected ? next.add(key) : next.delete(key);
+            }
+            this.selectionChange.emit({ selectedKeys: Array.from(next) });
+            return;
+        }
+        if (!this.selection)
+            return;
+        for (const row of this.visibleData) {
+            selected
+                ? this.selection.select(row)
+                : this.selection.deselect(row);
+        }
+        this.emitLegacySelection();
+    }
+    selectionLabel(row) {
+        const value = this.getColumnValue(row, this.selectionLabelKey);
+        return value == null
+            ? this.texts.table.selectRow
+            : this.texts.table.selectNamedRow(String(value));
+    }
+    cellTemplate(columnKey) {
+        return (this.projectedCells().find((cell) => cell.columnKey === columnKey)
+            ?.templateRef ?? null);
+    }
+    isSortable(column) {
+        return column.sortable ?? column.sort ?? false;
+    }
+    ariaSort(column) {
+        if (!this.isSortable(column))
+            return null;
+        if (this.activeSort() !== column.key)
+            return 'none';
+        if (this.activeDirection() === 'asc')
+            return 'ascending';
+        if (this.activeDirection() === 'desc')
+            return 'descending';
+        return 'none';
+    }
+    sortIcon(column) {
+        if (this.activeSort() !== column.key || !this.activeDirection())
+            return 'unfold_more';
+        return this.activeDirection() === 'asc' ? 'arrow_upward' : 'arrow_downward';
+    }
+    changeSort(column) {
+        if (!this.isSortable(column))
+            return;
+        const current = this.activeSort() === column.key ? this.activeDirection() : '';
+        const direction = current === '' ? 'asc' : current === 'asc' ? 'desc' : '';
+        const active = direction ? column.key : '';
+        this.localSort = { active, direction };
+        this.sortChange.emit(this.localSort);
+        this.onSortChange.emit(this.localSort);
+    }
+    handlePage(event) {
+        this.pageChange.emit({
+            pageIndex: event.pageIndex + 1,
+            pageSize: event.pageSize,
+        });
+        this.onChangePage.emit(event);
+    }
+    cellValue(row, column) {
+        const value = this.getColumnValue(row, column.key);
+        if (value == null || value === '')
+            return column.fallback ?? '-';
+        if (typeof value === 'boolean')
+            return value ? 'true' : 'false';
+        if (typeof value === 'string' || typeof value === 'number')
+            return String(value);
+        return '';
+    }
+    dateValue(row, column) {
+        const value = this.getColumnValue(row, column.key);
+        if (typeof value === 'string') {
+            const dateOnly = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value.trim());
+            if (dateOnly) {
+                const [, year, month, day] = dateOnly;
+                const localDate = new Date(Number(year), Number(month) - 1, Number(day));
+                return Number.isNaN(localDate.getTime()) ? null : localDate;
+            }
+        }
+        return isDateValue(value) ? parseDateValue(value) : null;
+    }
+    dateFormat(column) {
+        return column.dateFormat ?? column.mask ?? null;
+    }
+    statusLabel(column, row) {
+        const labels = column.status?.label;
+        if (!labels)
+            return column.fallback ?? '-';
+        return labels[this.statusIndex(row, column.key)] ?? column.fallback ?? '-';
+    }
+    statusBackground(column, row) {
+        return column.status?.color?.[this.statusIndex(row, column.key)] ?? null;
+    }
+    statusTextColor(column, row) {
+        return (column.status?.textColor?.[this.statusIndex(row, column.key)] ?? null);
+    }
+    cellClasses(column, row) {
+        const record = this.asRow(row);
+        const cellClass = record.styleClass?.key === column.key ? record.styleClass.class : '';
+        return [
+            cellClass || column.class || record.rowStyleClass || '',
+            column.collapse
+                ? `mapa-data-table__cell--${this.normalizeCollapse(column.collapse)}`
+                : '',
+        ].filter(Boolean);
+    }
+    isCenterAligned(column) {
+        return column.align === 'center';
+    }
+    isEndAligned(column) {
+        return ['end', 'right', 'flex-end'].includes(column.align ?? '');
+    }
+    getActionItems(row) {
+        const rowActions = this.getMenuActionItems(row, 'actions');
+        return rowActions.length ? rowActions : (this.actions ?? []);
+    }
+    getMenuItems(row) {
+        const rowItems = this.getMenuActionItems(row, 'menu');
+        return rowItems.length ? rowItems : this.menuItems;
+    }
+    emitAction(row, item, event) {
+        event.stopPropagation();
+        if (item.disabled)
+            return;
+        this.rowClick.emit({ row: this.asRow(row), action: item.action });
+    }
+    emitRowInteraction(event, row) {
+        if (!this.rowClick.observed || this.isInteractiveTarget(event.target))
+            return;
+        this.rowClick.emit({ row: this.asRow(row), action: '' });
+    }
+    emitRowKeyboard(event, row) {
+        if (!this.rowClick.observed || !['Enter', ' '].includes(event.key))
+            return;
+        event.preventDefault();
+        this.rowClick.emit({ row: this.asRow(row), action: '' });
+    }
+    route(item) {
+        return item.route ?? null;
+    }
+    queryParams(item) {
+        return item.queryParams ?? null;
+    }
+    svgName(svg) {
+        return svg.split('/').pop()?.split('.')[0] || '';
+    }
+    activeSort() {
+        return this.sortActive || this.localSort.active;
+    }
+    activeDirection() {
+        return this.sortDirection || this.localSort.direction;
+    }
+    emitLegacySelection() {
+        if (!this.selection)
+            return;
+        this.selectedRows.emit(this.selection.selected.map((row) => ({ row })));
+    }
+    observeFilterControl() {
+        if (this.observedFilter === this.filterControl)
+            return;
+        this.filterSubscription?.unsubscribe();
+        this.observedFilter = this.filterControl;
+        this.filterValue = `${this.filterControl?.value ?? ''}`
+            .trim()
+            .toLowerCase();
+        this.filterSubscription = this.filterControl?.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => {
+            this.filterValue = `${value ?? ''}`.trim().toLowerCase();
+            this.cdr.markForCheck();
+        });
+    }
+    getColumnValue(row, key) {
+        if (!row || typeof row !== 'object')
+            return null;
+        return row[key];
+    }
+    statusIndex(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 parsed = Number(value);
+            return Number.isNaN(parsed) ? 0 : parsed;
+        }
+        return 0;
+    }
+    normalizeCollapse(collapse) {
+        return collapse === 'nowrap' ? 'no-wrap' : collapse;
+    }
+    isCompactColumn(column) {
+        return ['actions', 'menu'].includes(column.key);
+    }
+    getFilterValue(value) {
+        if (value == null)
+            return '';
+        if (['string', 'number', 'boolean'].includes(typeof value))
+            return String(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 = this.getColumnValue(row, key);
+        if (!Array.isArray(value))
+            return [];
+        return value.filter((item) => !!item &&
+            typeof item === 'object' &&
+            'action' in item &&
+            'text' in item);
+    }
+    asRow(row) {
+        return row;
+    }
+    isInteractiveTarget(target) {
+        return (target instanceof Element &&
+            !!target.closest("a, button, input, select, textarea, [role='button'], [role='menuitem']"));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaTableComponent, isStandalone: true, selector: "mapa-table", inputs: { columns: "columns", data: "data", rowKey: "rowKey", caption: "caption", selectable: "selectable", showSelectAll: "showSelectAll", selectedKeys: "selectedKeys", selectionLabelKey: "selectionLabelKey", checkbox: "checkbox", selection: "selection", loading: "loading", finished: "finished", error: "error", emptyTitle: "emptyTitle", emptySubtitle: "emptySubtitle", errorTitle: "errorTitle", errorSubtitle: "errorSubtitle", retryLabel: "retryLabel", status: "status", empty: "empty", pagination: "pagination", pageIndex: "pageIndex", pageSize: "pageSize", totalCount: "totalCount", pageSizeOptions: "pageSizeOptions", totalPages: "totalPages", showPaginator: "showPaginator", paginatorShowFirstButton: "paginatorShowFirstButton", paginatorShowLastButton: "paginatorShowLastButton", paginatorRenderButtonsNumber: "paginatorRenderButtonsNumber", paginatorHideDefaultArrows: "paginatorHideDefaultArrows", sortActive: "sortActive", sortDirection: "sortDirection", actions: "actions", menuItems: "menuItems", menu: "menu", filterControl: "filterControl" }, outputs: { pageChange: "pageChange", sortChange: "sortChange", selectionChange: "selectionChange", retry: "retry", onChangePage: "onChangePage", onSortChange: "onSortChange", selectedRows: "selectedRows", rowClick: "rowClick" }, providers: [
+            {
+                provide: MatPaginatorIntl,
+                useFactory: customPaginatorFactory,
+                deps: [MapaI18nService, Injector],
+            },
+        ], queries: [{ propertyName: "projectedCells", predicate: MapaTableCellDirective, isSignal: true }], ngImport: i0, template: "<section\n  class=\"mapa-data-table\"\n  [class.mapa-data-table--selectable]=\"isSelectable\"\n>\n  <div class=\"mapa-data-table__frame\">\n    @if (isLoading) {\n      <table class=\"mapa-data-table__table\" aria-hidden=\"true\">\n        <thead>\n          <tr>\n            @if (isSelectable) {\n              <th class=\"mapa-data-table__selection-cell\"></th>\n            }\n            @for (column of columns; track column.key) {\n              <th [style.width]=\"skeletonColumnWidth(column)\">\n                {{ column.label }}\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of skeletonRows; track row) {\n            <tr>\n              @if (isSelectable) {\n                <td class=\"mapa-data-table__selection-cell\">\n                  <span\n                    class=\"mapa-data-table__skeleton mapa-data-table__skeleton--checkbox\"\n                  ></span>\n                </td>\n              }\n              @for (column of columns; track column.key) {\n                <td [style.width]=\"skeletonColumnWidth(column)\">\n                  <span class=\"mapa-data-table__skeleton\"></span>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n      <span class=\"mapa-data-table__sr-only\" role=\"status\">\n        {{ texts.table.loading }}\n      </span>\n    } @else if (error) {\n      <div class=\"mapa-data-table__state\" role=\"alert\">\n        <strong>{{ resolvedErrorTitle }}</strong>\n        @if (resolvedErrorSubtitle) {\n          <span>{{ resolvedErrorSubtitle }}</span>\n        }\n        @if (retry.observed) {\n          <button type=\"button\" (click)=\"retry.emit()\">\n            {{ resolvedRetryLabel }}\n          </button>\n        }\n      </div>\n    } @else if (visibleData.length > 0) {\n      <table class=\"mapa-data-table__table\">\n        @if (caption) {\n          <caption class=\"mapa-data-table__sr-only\">\n            {{\n              caption\n            }}\n          </caption>\n        }\n        <thead>\n          <tr>\n            @if (isSelectable) {\n              <th class=\"mapa-data-table__selection-cell\">\n                @if (showSelectAll) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [checked]=\"allVisibleSelected()\"\n                    [indeterminate]=\"someVisibleSelected()\"\n                    [aria-label]=\"texts.table.selectAllVisible\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleVisibleRows($event.checked)\"\n                  />\n                } @else {\n                  <span class=\"mapa-data-table__sr-only\">\n                    {{ texts.table.selectionColumn }}\n                  </span>\n                }\n              </th>\n            }\n            @for (column of columns; track column.key) {\n              <th\n                [class.mapa-data-table__cell--center]=\"isCenterAligned(column)\"\n                [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n                [style.width]=\"columnWidth(column)\"\n                [attr.aria-sort]=\"ariaSort(column)\"\n              >\n                @if (isSortable(column)) {\n                  <button\n                    type=\"button\"\n                    class=\"mapa-data-table__sort\"\n                    (click)=\"changeSort(column)\"\n                  >\n                    <span [innerHTML]=\"column.label | safeHtml\"></span>\n                    <mat-icon aria-hidden=\"true\">{{\n                      sortIcon(column)\n                    }}</mat-icon>\n                  </button>\n                } @else {\n                  <span [innerHTML]=\"column.label | safeHtml\"></span>\n                }\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of visibleData; track rowIdentity(row, $index)) {\n            <tr\n              [class.mapa-data-table__row--selected]=\"isSelected(row)\"\n              [class.mapa-data-table__row--interactive]=\"rowClick.observed\"\n              [attr.tabindex]=\"rowClick.observed ? 0 : null\"\n              (click)=\"emitRowInteraction($event, row)\"\n              (keydown)=\"emitRowKeyboard($event, row)\"\n            >\n              @if (isSelectable) {\n                <td class=\"mapa-data-table__selection-cell\">\n                  <mat-checkbox\n                    color=\"primary\"\n                    [checked]=\"isSelected(row)\"\n                    [aria-label]=\"selectionLabel(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleRow(row, $event.checked)\"\n                  />\n                </td>\n              }\n              @for (column of columns; track column.key) {\n                <td\n                  [attr.data-label]=\"column.label\"\n                  [class.mapa-data-table__cell--center]=\"\n                    isCenterAligned(column)\n                  \"\n                  [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n                  [style.width]=\"columnWidth(column)\"\n                >\n                  <div\n                    class=\"mapa-data-table__cell-content\"\n                    [ngClass]=\"cellClasses(column, row)\"\n                  >\n                    @if (cellTemplate(column.key); as template) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: row,\n                          row,\n                          column,\n                        }\"\n                      ></ng-container>\n                    } @else if (column.key === \"actions\") {\n                      <div class=\"mapa-data-table__actions\">\n                        @for (item of getActionItems(row); track item) {\n                          @if (route(item); as actionRoute) {\n                            <a\n                              class=\"mapa-data-table__action\"\n                              [class.mapa-data-table__action--disabled]=\"\n                                item.disabled\n                              \"\n                              [attr.aria-disabled]=\"\n                                item.disabled ? 'true' : null\n                              \"\n                              [attr.tabindex]=\"item.disabled ? -1 : null\"\n                              [title]=\"item.text\"\n                              [routerLink]=\"item.disabled ? null : actionRoute\"\n                              [queryParams]=\"queryParams(item)\"\n                              (click)=\"$event.stopPropagation()\"\n                            >\n                              @if (item.icon) {\n                                <mat-icon aria-hidden=\"true\">{{\n                                  item.icon\n                                }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" alt=\"\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              } @else {\n                                <span class=\"mapa-data-table__sr-only\">{{\n                                  item.text\n                                }}</span>\n                              }\n                            </a>\n                          } @else {\n                            <button\n                              type=\"button\"\n                              class=\"mapa-data-table__action\"\n                              [disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              (click)=\"emitAction(row, item, $event)\"\n                            >\n                              @if (item.icon) {\n                                <mat-icon aria-hidden=\"true\">{{\n                                  item.icon\n                                }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" alt=\"\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              } @else {\n                                <span class=\"mapa-data-table__sr-only\">{{\n                                  item.text\n                                }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    } @else if (column.key === \"menu\") {\n                      @if (getMenuItems(row).length > 0) {\n                        <button\n                          type=\"button\"\n                          class=\"mapa-data-table__menu-trigger\"\n                          [matMenuTriggerFor]=\"rowMenu\"\n                          [attr.aria-label]=\"column.label\"\n                          (click)=\"$event.stopPropagation()\"\n                        >\n                          <mat-icon aria-hidden=\"true\">more_vert</mat-icon>\n                        </button>\n                        <mat-menu #rowMenu=\"matMenu\">\n                          @for (item of getMenuItems(row); track item) {\n                            @if (route(item); as menuRoute) {\n                              <a\n                                mat-menu-item\n                                [disabled]=\"item.disabled\"\n                                [routerLink]=\"item.disabled ? null : menuRoute\"\n                                [queryParams]=\"queryParams(item)\"\n                                (click)=\"$event.stopPropagation()\"\n                              >\n                                @if (item.icon) {\n                                  <mat-icon aria-hidden=\"true\">{{\n                                    item.icon\n                                  }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" alt=\"\" />\n                                }\n                                <span>{{ item.text }}</span>\n                              </a>\n                            } @else {\n                              <button\n                                mat-menu-item\n                                [disabled]=\"item.disabled\"\n                                (click)=\"emitAction(row, item, $event)\"\n                              >\n                                @if (item.icon) {\n                                  <mat-icon aria-hidden=\"true\">{{\n                                    item.icon\n                                  }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" alt=\"\" />\n                                }\n                                <span>{{ item.text }}</span>\n                              </button>\n                            }\n                          }\n                        </mat-menu>\n                      }\n                    } @else if (dateFormat(column); as format) {\n                      @if (dateValue(row, column); as value) {\n                        {{ value | date: format }}\n                      } @else {\n                        {{ column.fallback ?? \"-\" }}\n                      }\n                    } @else if (column.status) {\n                      <span\n                        class=\"mapa-data-table__status\"\n                        [class.mapa-data-table__status--round]=\"\n                          column.status.style === 'round'\n                        \"\n                        [style.background-color]=\"statusBackground(column, row)\"\n                        [style.color]=\"statusTextColor(column, row)\"\n                        [innerHTML]=\"statusLabel(column, row) | safeHtml\"\n                      ></span>\n                    } @else {\n                      <span\n                        [innerHTML]=\"cellValue(row, column) | safeHtml\"\n                      ></span>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    } @else if (isFinished) {\n      <div class=\"mapa-data-table__state\">\n        <strong>{{ resolvedEmptyTitle }}</strong>\n        @if (resolvedEmptySubtitle) {\n          <span>{{ resolvedEmptySubtitle }}</span>\n        }\n      </div>\n    }\n  </div>\n\n  @if (shouldShowPaginator) {\n    <mat-paginator\n      class=\"mapa-data-table__paginator\"\n      appBubblePagination\n      [appCustomLength]=\"totalCount\"\n      [bubblePageIndex]=\"zeroBasedPageIndex\"\n      [pageIndex]=\"zeroBasedPageIndex\"\n      [showFirstButton]=\"paginatorShowFirstButton\"\n      [showLastButton]=\"paginatorShowLastButton\"\n      [renderButtonsNumber]=\"paginatorRenderButtonsNumber\"\n      [hideDefaultArrows]=\"paginatorHideDefaultArrows\"\n      [bubblePageSize]=\"pageSize\"\n      [length]=\"totalCount\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      (page)=\"handlePage($event)\"\n    />\n  }\n</section>\n", styles: [":host{display:block}.mapa-data-table{color:var(--mapa-color-text, #1a1a1a);font-family:var(--mapa-font-body, Asap, sans-serif)}.mapa-data-table__frame{background:var(--mapa-color-surface, #fff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:14px;overflow-x:auto}.mapa-data-table__table{border-collapse:collapse;width:100%}.mapa-data-table th,.mapa-data-table td{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));box-sizing:border-box;font-family:inherit;font-size:13px;font-weight:400;padding:.875rem 1rem;text-align:left;vertical-align:middle}.mapa-data-table th{background:var(--mapa-color-surface-muted, #fafbfc);color:var(--mapa-color-text-subtle, #555);font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}.mapa-data-table td{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table tbody tr:last-child td{border-bottom:0}.mapa-data-table tbody tr:hover,.mapa-data-table__row--selected{background:var(--mapa-color-primary-soft, #FFF8F4)}.mapa-data-table__row--interactive{cursor:pointer}.mapa-data-table__row--interactive:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:-3px}.mapa-data-table__selection-cell{width:4.5rem}.mapa-data-table__cell--center{text-align:center}.mapa-data-table__cell--end{text-align:right}.mapa-data-table__cell-content{min-width:0}.mapa-data-table__cell--ellipsis{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mapa-data-table__cell--no-wrap{white-space:nowrap}.mapa-data-table__cell--wrap{white-space:pre-wrap}.mapa-data-table__sort{align-items:center;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:.25rem;padding:0;text-transform:inherit}.mapa-data-table__sort:focus-visible,.mapa-data-table__state button:focus-visible,.mapa-data-table__action:focus-visible,.mapa-data-table__menu-trigger:focus-visible{outline:2px solid var(--mapa-color-primary-dark, #50575E);outline-offset:3px}.mapa-data-table__sort mat-icon{font-size:1rem;height:1rem;width:1rem}.mapa-data-table__actions{align-items:center;display:inline-flex;gap:.5rem}.mapa-data-table__action,.mapa-data-table__menu-trigger{align-items:center;background:transparent;border:0;border-radius:6px;color:var(--mapa-color-primary-dark, #50575E);cursor:pointer;display:inline-flex;font:inherit;gap:.375rem;justify-content:center;min-height:36px;min-width:36px;padding:.375rem;text-decoration:none}.mapa-data-table__action:hover,.mapa-data-table__menu-trigger:hover{background:var(--mapa-color-primary-soft, #FFF8F4)}.mapa-data-table__action:disabled,.mapa-data-table__action--disabled{cursor:not-allowed;opacity:.45}.mapa-data-table__action img,.mapa-data-table__menu-trigger img{height:1.25rem;width:1.25rem}.mapa-data-table__status{border-radius:4px;display:inline-flex;padding:.25rem .5rem;white-space:nowrap}.mapa-data-table__status--round{border-radius:999px}.mapa-data-table__state{align-items:center;color:var(--mapa-color-text-subtle, #555);display:flex;flex-direction:column;gap:.625rem;justify-content:center;min-height:150px;padding:1.5rem;text-align:center}.mapa-data-table__state strong{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table__state button{background:var(--mapa-color-surface-warm, #fffaf6);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:10px;color:var(--mapa-color-text, #1a1a1a);cursor:pointer;font:inherit;min-height:40px;padding:.5rem .875rem}.mapa-data-table__skeleton{animation:mapa-data-table-shimmer 1.2s linear infinite;background:linear-gradient(90deg,#f0f2f4 25%,#e6e9ec,#f0f2f4 75%);background-size:200% 100%;border-radius:8px;display:block;height:1rem;max-width:14rem}.mapa-data-table__skeleton--checkbox{border-radius:3px;height:1.125rem;width:1.125rem}.mapa-data-table__sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host ::ng-deep .mapa-data-table__paginator{background:transparent;color:var(--mapa-color-text-subtle, #555);font-family:var(--mapa-font-body, Asap, sans-serif)}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{justify-content:space-between;min-height:72px}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:min(10vw,8rem)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-container,:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{align-items:center;display:flex;justify-content:flex-end}:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{gap:.5rem}:host ::ng-deep .mapa-data-table__paginator .g-bubble{align-items:center;background:transparent;border:0;border-radius:4px;color:var(--mapa-color-text-subtle, #555);cursor:pointer;display:flex;font:inherit;justify-content:center;min-height:24px;min-width:24px;padding:1px 6px}:host ::ng-deep .mapa-data-table__paginator .g-bubble:hover{background:var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}:host ::ng-deep .mapa-data-table__paginator .g-bubble:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:2px}:host ::ng-deep .mapa-data-table__paginator .g-bubble__active{background:var(--mapa-color-primary-dark, #cf482b);color:var(--mapa-color-surface, #fff)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-counter{color:var(--mapa-color-text-subtle, #555);margin:0 .25rem 0 .625rem;white-space:nowrap}@media(max-width:760px){.mapa-data-table__frame{border:0;overflow:visible}.mapa-data-table thead{display:none}.mapa-data-table tbody{display:grid;gap:.75rem}.mapa-data-table tr{border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:12px;display:grid;grid-template-columns:minmax(0,1fr);padding:.75rem}.mapa-data-table--selectable tr{grid-template-columns:auto minmax(0,1fr)}.mapa-data-table td{border:0;grid-column:1;padding:.375rem .5rem;text-align:left;width:auto}.mapa-data-table--selectable td:not(.mapa-data-table__selection-cell){grid-column:2}.mapa-data-table td:not(.mapa-data-table__selection-cell):before{color:var(--mapa-color-text-subtle, #555);content:attr(data-label);display:block;font-size:.6875rem;font-weight:600;text-transform:uppercase}.mapa-data-table__selection-cell{grid-column:1;grid-row:1/span 20;width:auto}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container,:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-actions{justify-content:center}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{gap:.75rem;padding:.75rem 0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-label{padding:.5rem 0;text-align:center;width:100%}}@media(prefers-reduced-motion:reduce){.mapa-data-table__skeleton{animation:none}}@keyframes mapa-data-table-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "directive", type: BubblePaginationDirective, selector: "[appBubblePagination], [appStylePaginatorMv]", inputs: ["showFirstButton", "showLastButton", "renderButtonsNumber", "appCustomLength", "hideDefaultArrows", "bubblePageIndex", "bubblePageSize"], outputs: ["pageIndexChangeEmitter"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$3.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: 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"] }, { 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: "component", type: MapaSvgIconComponent, selector: "mapa-svg-icon", inputs: ["name", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mapa-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        BubblePaginationDirective,
+                        DatePipe,
+                        MatCheckboxModule,
+                        MatIconModule,
+                        MatMenuModule,
+                        MatPaginatorModule,
+                        MapaSvgIconComponent,
+                        NgClass,
+                        NgTemplateOutlet,
+                        RouterLink,
+                        SafeHtmlPipe,
+                    ], providers: [
+                        {
+                            provide: MatPaginatorIntl,
+                            useFactory: customPaginatorFactory,
+                            deps: [MapaI18nService, Injector],
+                        },
+                    ], standalone: true, template: "<section\n  class=\"mapa-data-table\"\n  [class.mapa-data-table--selectable]=\"isSelectable\"\n>\n  <div class=\"mapa-data-table__frame\">\n    @if (isLoading) {\n      <table class=\"mapa-data-table__table\" aria-hidden=\"true\">\n        <thead>\n          <tr>\n            @if (isSelectable) {\n              <th class=\"mapa-data-table__selection-cell\"></th>\n            }\n            @for (column of columns; track column.key) {\n              <th [style.width]=\"skeletonColumnWidth(column)\">\n                {{ column.label }}\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of skeletonRows; track row) {\n            <tr>\n              @if (isSelectable) {\n                <td class=\"mapa-data-table__selection-cell\">\n                  <span\n                    class=\"mapa-data-table__skeleton mapa-data-table__skeleton--checkbox\"\n                  ></span>\n                </td>\n              }\n              @for (column of columns; track column.key) {\n                <td [style.width]=\"skeletonColumnWidth(column)\">\n                  <span class=\"mapa-data-table__skeleton\"></span>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n      <span class=\"mapa-data-table__sr-only\" role=\"status\">\n        {{ texts.table.loading }}\n      </span>\n    } @else if (error) {\n      <div class=\"mapa-data-table__state\" role=\"alert\">\n        <strong>{{ resolvedErrorTitle }}</strong>\n        @if (resolvedErrorSubtitle) {\n          <span>{{ resolvedErrorSubtitle }}</span>\n        }\n        @if (retry.observed) {\n          <button type=\"button\" (click)=\"retry.emit()\">\n            {{ resolvedRetryLabel }}\n          </button>\n        }\n      </div>\n    } @else if (visibleData.length > 0) {\n      <table class=\"mapa-data-table__table\">\n        @if (caption) {\n          <caption class=\"mapa-data-table__sr-only\">\n            {{\n              caption\n            }}\n          </caption>\n        }\n        <thead>\n          <tr>\n            @if (isSelectable) {\n              <th class=\"mapa-data-table__selection-cell\">\n                @if (showSelectAll) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [checked]=\"allVisibleSelected()\"\n                    [indeterminate]=\"someVisibleSelected()\"\n                    [aria-label]=\"texts.table.selectAllVisible\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleVisibleRows($event.checked)\"\n                  />\n                } @else {\n                  <span class=\"mapa-data-table__sr-only\">\n                    {{ texts.table.selectionColumn }}\n                  </span>\n                }\n              </th>\n            }\n            @for (column of columns; track column.key) {\n              <th\n                [class.mapa-data-table__cell--center]=\"isCenterAligned(column)\"\n                [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n                [style.width]=\"columnWidth(column)\"\n                [attr.aria-sort]=\"ariaSort(column)\"\n              >\n                @if (isSortable(column)) {\n                  <button\n                    type=\"button\"\n                    class=\"mapa-data-table__sort\"\n                    (click)=\"changeSort(column)\"\n                  >\n                    <span [innerHTML]=\"column.label | safeHtml\"></span>\n                    <mat-icon aria-hidden=\"true\">{{\n                      sortIcon(column)\n                    }}</mat-icon>\n                  </button>\n                } @else {\n                  <span [innerHTML]=\"column.label | safeHtml\"></span>\n                }\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of visibleData; track rowIdentity(row, $index)) {\n            <tr\n              [class.mapa-data-table__row--selected]=\"isSelected(row)\"\n              [class.mapa-data-table__row--interactive]=\"rowClick.observed\"\n              [attr.tabindex]=\"rowClick.observed ? 0 : null\"\n              (click)=\"emitRowInteraction($event, row)\"\n              (keydown)=\"emitRowKeyboard($event, row)\"\n            >\n              @if (isSelectable) {\n                <td class=\"mapa-data-table__selection-cell\">\n                  <mat-checkbox\n                    color=\"primary\"\n                    [checked]=\"isSelected(row)\"\n                    [aria-label]=\"selectionLabel(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleRow(row, $event.checked)\"\n                  />\n                </td>\n              }\n              @for (column of columns; track column.key) {\n                <td\n                  [attr.data-label]=\"column.label\"\n                  [class.mapa-data-table__cell--center]=\"\n                    isCenterAligned(column)\n                  \"\n                  [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n                  [style.width]=\"columnWidth(column)\"\n                >\n                  <div\n                    class=\"mapa-data-table__cell-content\"\n                    [ngClass]=\"cellClasses(column, row)\"\n                  >\n                    @if (cellTemplate(column.key); as template) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: row,\n                          row,\n                          column,\n                        }\"\n                      ></ng-container>\n                    } @else if (column.key === \"actions\") {\n                      <div class=\"mapa-data-table__actions\">\n                        @for (item of getActionItems(row); track item) {\n                          @if (route(item); as actionRoute) {\n                            <a\n                              class=\"mapa-data-table__action\"\n                              [class.mapa-data-table__action--disabled]=\"\n                                item.disabled\n                              \"\n                              [attr.aria-disabled]=\"\n                                item.disabled ? 'true' : null\n                              \"\n                              [attr.tabindex]=\"item.disabled ? -1 : null\"\n                              [title]=\"item.text\"\n                              [routerLink]=\"item.disabled ? null : actionRoute\"\n                              [queryParams]=\"queryParams(item)\"\n                              (click)=\"$event.stopPropagation()\"\n                            >\n                              @if (item.icon) {\n                                <mat-icon aria-hidden=\"true\">{{\n                                  item.icon\n                                }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" alt=\"\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              } @else {\n                                <span class=\"mapa-data-table__sr-only\">{{\n                                  item.text\n                                }}</span>\n                              }\n                            </a>\n                          } @else {\n                            <button\n                              type=\"button\"\n                              class=\"mapa-data-table__action\"\n                              [disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              (click)=\"emitAction(row, item, $event)\"\n                            >\n                              @if (item.icon) {\n                                <mat-icon aria-hidden=\"true\">{{\n                                  item.icon\n                                }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" alt=\"\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              } @else {\n                                <span class=\"mapa-data-table__sr-only\">{{\n                                  item.text\n                                }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    } @else if (column.key === \"menu\") {\n                      @if (getMenuItems(row).length > 0) {\n                        <button\n                          type=\"button\"\n                          class=\"mapa-data-table__menu-trigger\"\n                          [matMenuTriggerFor]=\"rowMenu\"\n                          [attr.aria-label]=\"column.label\"\n                          (click)=\"$event.stopPropagation()\"\n                        >\n                          <mat-icon aria-hidden=\"true\">more_vert</mat-icon>\n                        </button>\n                        <mat-menu #rowMenu=\"matMenu\">\n                          @for (item of getMenuItems(row); track item) {\n                            @if (route(item); as menuRoute) {\n                              <a\n                                mat-menu-item\n                                [disabled]=\"item.disabled\"\n                                [routerLink]=\"item.disabled ? null : menuRoute\"\n                                [queryParams]=\"queryParams(item)\"\n                                (click)=\"$event.stopPropagation()\"\n                              >\n                                @if (item.icon) {\n                                  <mat-icon aria-hidden=\"true\">{{\n                                    item.icon\n                                  }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" alt=\"\" />\n                                }\n                                <span>{{ item.text }}</span>\n                              </a>\n                            } @else {\n                              <button\n                                mat-menu-item\n                                [disabled]=\"item.disabled\"\n                                (click)=\"emitAction(row, item, $event)\"\n                              >\n                                @if (item.icon) {\n                                  <mat-icon aria-hidden=\"true\">{{\n                                    item.icon\n                                  }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" alt=\"\" />\n                                }\n                                <span>{{ item.text }}</span>\n                              </button>\n                            }\n                          }\n                        </mat-menu>\n                      }\n                    } @else if (dateFormat(column); as format) {\n                      @if (dateValue(row, column); as value) {\n                        {{ value | date: format }}\n                      } @else {\n                        {{ column.fallback ?? \"-\" }}\n                      }\n                    } @else if (column.status) {\n                      <span\n                        class=\"mapa-data-table__status\"\n                        [class.mapa-data-table__status--round]=\"\n                          column.status.style === 'round'\n                        \"\n                        [style.background-color]=\"statusBackground(column, row)\"\n                        [style.color]=\"statusTextColor(column, row)\"\n                        [innerHTML]=\"statusLabel(column, row) | safeHtml\"\n                      ></span>\n                    } @else {\n                      <span\n                        [innerHTML]=\"cellValue(row, column) | safeHtml\"\n                      ></span>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    } @else if (isFinished) {\n      <div class=\"mapa-data-table__state\">\n        <strong>{{ resolvedEmptyTitle }}</strong>\n        @if (resolvedEmptySubtitle) {\n          <span>{{ resolvedEmptySubtitle }}</span>\n        }\n      </div>\n    }\n  </div>\n\n  @if (shouldShowPaginator) {\n    <mat-paginator\n      class=\"mapa-data-table__paginator\"\n      appBubblePagination\n      [appCustomLength]=\"totalCount\"\n      [bubblePageIndex]=\"zeroBasedPageIndex\"\n      [pageIndex]=\"zeroBasedPageIndex\"\n      [showFirstButton]=\"paginatorShowFirstButton\"\n      [showLastButton]=\"paginatorShowLastButton\"\n      [renderButtonsNumber]=\"paginatorRenderButtonsNumber\"\n      [hideDefaultArrows]=\"paginatorHideDefaultArrows\"\n      [bubblePageSize]=\"pageSize\"\n      [length]=\"totalCount\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      (page)=\"handlePage($event)\"\n    />\n  }\n</section>\n", styles: [":host{display:block}.mapa-data-table{color:var(--mapa-color-text, #1a1a1a);font-family:var(--mapa-font-body, Asap, sans-serif)}.mapa-data-table__frame{background:var(--mapa-color-surface, #fff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:14px;overflow-x:auto}.mapa-data-table__table{border-collapse:collapse;width:100%}.mapa-data-table th,.mapa-data-table td{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));box-sizing:border-box;font-family:inherit;font-size:13px;font-weight:400;padding:.875rem 1rem;text-align:left;vertical-align:middle}.mapa-data-table th{background:var(--mapa-color-surface-muted, #fafbfc);color:var(--mapa-color-text-subtle, #555);font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}.mapa-data-table td{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table tbody tr:last-child td{border-bottom:0}.mapa-data-table tbody tr:hover,.mapa-data-table__row--selected{background:var(--mapa-color-primary-soft, #FFF8F4)}.mapa-data-table__row--interactive{cursor:pointer}.mapa-data-table__row--interactive:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:-3px}.mapa-data-table__selection-cell{width:4.5rem}.mapa-data-table__cell--center{text-align:center}.mapa-data-table__cell--end{text-align:right}.mapa-data-table__cell-content{min-width:0}.mapa-data-table__cell--ellipsis{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mapa-data-table__cell--no-wrap{white-space:nowrap}.mapa-data-table__cell--wrap{white-space:pre-wrap}.mapa-data-table__sort{align-items:center;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:.25rem;padding:0;text-transform:inherit}.mapa-data-table__sort:focus-visible,.mapa-data-table__state button:focus-visible,.mapa-data-table__action:focus-visible,.mapa-data-table__menu-trigger:focus-visible{outline:2px solid var(--mapa-color-primary-dark, #50575E);outline-offset:3px}.mapa-data-table__sort mat-icon{font-size:1rem;height:1rem;width:1rem}.mapa-data-table__actions{align-items:center;display:inline-flex;gap:.5rem}.mapa-data-table__action,.mapa-data-table__menu-trigger{align-items:center;background:transparent;border:0;border-radius:6px;color:var(--mapa-color-primary-dark, #50575E);cursor:pointer;display:inline-flex;font:inherit;gap:.375rem;justify-content:center;min-height:36px;min-width:36px;padding:.375rem;text-decoration:none}.mapa-data-table__action:hover,.mapa-data-table__menu-trigger:hover{background:var(--mapa-color-primary-soft, #FFF8F4)}.mapa-data-table__action:disabled,.mapa-data-table__action--disabled{cursor:not-allowed;opacity:.45}.mapa-data-table__action img,.mapa-data-table__menu-trigger img{height:1.25rem;width:1.25rem}.mapa-data-table__status{border-radius:4px;display:inline-flex;padding:.25rem .5rem;white-space:nowrap}.mapa-data-table__status--round{border-radius:999px}.mapa-data-table__state{align-items:center;color:var(--mapa-color-text-subtle, #555);display:flex;flex-direction:column;gap:.625rem;justify-content:center;min-height:150px;padding:1.5rem;text-align:center}.mapa-data-table__state strong{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table__state button{background:var(--mapa-color-surface-warm, #fffaf6);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:10px;color:var(--mapa-color-text, #1a1a1a);cursor:pointer;font:inherit;min-height:40px;padding:.5rem .875rem}.mapa-data-table__skeleton{animation:mapa-data-table-shimmer 1.2s linear infinite;background:linear-gradient(90deg,#f0f2f4 25%,#e6e9ec,#f0f2f4 75%);background-size:200% 100%;border-radius:8px;display:block;height:1rem;max-width:14rem}.mapa-data-table__skeleton--checkbox{border-radius:3px;height:1.125rem;width:1.125rem}.mapa-data-table__sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host ::ng-deep .mapa-data-table__paginator{background:transparent;color:var(--mapa-color-text-subtle, #555);font-family:var(--mapa-font-body, Asap, sans-serif)}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{justify-content:space-between;min-height:72px}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:min(10vw,8rem)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-container,:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{align-items:center;display:flex;justify-content:flex-end}:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{gap:.5rem}:host ::ng-deep .mapa-data-table__paginator .g-bubble{align-items:center;background:transparent;border:0;border-radius:4px;color:var(--mapa-color-text-subtle, #555);cursor:pointer;display:flex;font:inherit;justify-content:center;min-height:24px;min-width:24px;padding:1px 6px}:host ::ng-deep .mapa-data-table__paginator .g-bubble:hover{background:var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}:host ::ng-deep .mapa-data-table__paginator .g-bubble:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:2px}:host ::ng-deep .mapa-data-table__paginator .g-bubble__active{background:var(--mapa-color-primary-dark, #cf482b);color:var(--mapa-color-surface, #fff)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-counter{color:var(--mapa-color-text-subtle, #555);margin:0 .25rem 0 .625rem;white-space:nowrap}@media(max-width:760px){.mapa-data-table__frame{border:0;overflow:visible}.mapa-data-table thead{display:none}.mapa-data-table tbody{display:grid;gap:.75rem}.mapa-data-table tr{border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:12px;display:grid;grid-template-columns:minmax(0,1fr);padding:.75rem}.mapa-data-table--selectable tr{grid-template-columns:auto minmax(0,1fr)}.mapa-data-table td{border:0;grid-column:1;padding:.375rem .5rem;text-align:left;width:auto}.mapa-data-table--selectable td:not(.mapa-data-table__selection-cell){grid-column:2}.mapa-data-table td:not(.mapa-data-table__selection-cell):before{color:var(--mapa-color-text-subtle, #555);content:attr(data-label);display:block;font-size:.6875rem;font-weight:600;text-transform:uppercase}.mapa-data-table__selection-cell{grid-column:1;grid-row:1/span 20;width:auto}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container,:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-actions{justify-content:center}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{gap:.75rem;padding:.75rem 0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-label{padding:.5rem 0;text-align:center;width:100%}}@media(prefers-reduced-motion:reduce){.mapa-data-table__skeleton{animation:none}}@keyframes mapa-data-table-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], rowKey: [{
+                type: Input
+            }], caption: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], showSelectAll: [{
+                type: Input
+            }], selectedKeys: [{
+                type: Input
+            }], selectionLabelKey: [{
+                type: Input
+            }], checkbox: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], finished: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], emptyTitle: [{
+                type: Input
+            }], emptySubtitle: [{
+                type: Input
+            }], errorTitle: [{
+                type: Input
+            }], errorSubtitle: [{
+                type: Input
+            }], retryLabel: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }], empty: [{
+                type: Input
+            }], pagination: [{
+                type: Input
+            }], pageIndex: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], totalCount: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], totalPages: [{
+                type: Input
+            }], showPaginator: [{
+                type: Input
+            }], paginatorShowFirstButton: [{
+                type: Input
+            }], paginatorShowLastButton: [{
+                type: Input
+            }], paginatorRenderButtonsNumber: [{
+                type: Input
+            }], paginatorHideDefaultArrows: [{
+                type: Input
+            }], sortActive: [{
+                type: Input
+            }], sortDirection: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], menuItems: [{
+                type: Input
+            }], menu: [{
+                type: Input
+            }], filterControl: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], sortChange: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], retry: [{
+                type: Output
+            }], onChangePage: [{
+                type: Output
+            }], onSortChange: [{
+                type: Output
+            }], selectedRows: [{
+                type: Output
+            }], rowClick: [{
+                type: Output
+            }], projectedCells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MapaTableCellDirective), { isSignal: true }] }] } });
+
+/*
+ * Public API Surface of mapa-library-ui table
+ */
 
 class MapaGroupReportComponent {
     constructor() {
         this.groupReport = [];
         this.showGroupReportGeneral = false;
         this.onSortChange = new EventEmitter();
-        this.dataSource = new MatTableDataSource([]);
         this.displayedColumns = [];
         this.columns = [];
         this.data = [];
-    }
-    ngAfterViewInit() {
-        this.dataSource.sort = this.sort;
+        this.activeSort = { active: '', direction: '' };
     }
     ngOnChanges(changes) {
-        if (changes["groupReport"] || changes["showGroupReportGeneral"]) {
+        if (changes['groupReport'] || changes['showGroupReportGeneral']) {
             this.refreshTableState();
         }
     }
@@ -31,6 +1276,8 @@ class MapaGroupReportComponent {
         return `${index}:${column.key}`;
     }
     handleSortChange(sort) {
+        this.activeSort = sort;
+        this.data = this.sortData(this.generateGroupData(), sort);
         this.onSortChange.emit(sort);
     }
     getDimensionCell(row, key) {
@@ -41,37 +1288,48 @@ class MapaGroupReportComponent {
         return this.getDimensionCell(row, key)?.value?.classification;
     }
     getDimensionLabel(row, key) {
-        return this.getDimensionCell(row, key)?.value?.label ?? "-";
+        return this.getDimensionCell(row, key)?.value?.label ?? '-';
     }
     getGeneralValue(row) {
-        return typeof row.general === "number" ? row.general : null;
+        return typeof row.general === 'number' ? row.general : null;
     }
     refreshTableState() {
         this.columns = this.generateColumns();
-        this.data = this.generateGroupData();
+        this.data = this.sortData(this.generateGroupData(), this.activeSort);
         this.displayedColumns = this.columns.map((column) => column.key);
-        this.dataSource.data = this.data;
-        this.dataSource.sortingDataAccessor = (row, columnKey) => this.getSortValue(row, columnKey);
-        if (this.sort) {
-            this.dataSource.sort = this.sort;
+    }
+    sortData(data, sort) {
+        if (!sort.active || !sort.direction) {
+            return data;
         }
+        const multiplier = sort.direction === 'asc' ? 1 : -1;
+        return [...data].sort((left, right) => {
+            const leftValue = this.getSortValue(left, sort.active);
+            const rightValue = this.getSortValue(right, sort.active);
+            return (String(leftValue).localeCompare(String(rightValue), undefined, {
+                numeric: true,
+                sensitivity: 'base',
+            }) * multiplier);
+        });
     }
     getSortValue(row, columnKey) {
         const cell = row[columnKey];
         if (this.isGroupReportDimensionCell(cell)) {
             return cell.value?.classification?.classificationId ?? 0;
         }
-        return typeof cell === "number" || typeof cell === "string" ? cell : "";
+        return typeof cell === 'number' || typeof cell === 'string' ? cell : '';
     }
     isGroupReportDimensionCell(value) {
-        return typeof value === "object" && value !== null && "direction" in value;
+        return typeof value === 'object' && value !== null && 'direction' in value;
     }
     generateColumns() {
-        const columns = [{ key: "name", label: "", sort: false }];
-        const existingKeys = new Set(["name"]);
+        const columns = [
+            { key: 'name', label: '', sortable: false },
+        ];
+        const existingKeys = new Set(['name']);
         if (this.showGroupReportGeneral) {
-            columns.push({ key: "general", label: "% Geral", sort: false });
-            existingKeys.add("general");
+            columns.push({ key: 'general', label: '% Geral', sortable: false });
+            existingKeys.add('general');
         }
         this.groupReport.forEach((reportItem) => {
             reportItem.dimensions?.forEach((dimension) => {
@@ -81,7 +1339,7 @@ class MapaGroupReportComponent {
                         key,
                         label: dimension.dimensionName,
                         classification: dimension.classification,
-                        sort: true,
+                        sortable: true,
                     });
                     existingKeys.add(key);
                 }
@@ -134,20 +1392,17 @@ class MapaGroupReportComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaGroupReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaGroupReportComponent, isStandalone: true, selector: "mapa-group-report", inputs: { groupReport: "groupReport", showGroupReportGeneral: "showGroupReportGeneral" }, outputs: { onSortChange: "onSortChange" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"mapa-group-report\">\n  <table\n    mat-table\n    [dataSource]=\"dataSource\"\n    matSort\n    (matSortChange)=\"handleSortChange($event)\"\n  >\n    @for (column of columns; track trackColumn($index, column)) {\n      <ng-container [matColumnDef]=\"column.key\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          [disabled]=\"!column.sort\"\n        >\n          <div\n            [ngTemplateOutlet]=\"tableHeader\"\n            [ngTemplateOutletContext]=\"{ column: column }\"\n          ></div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [style.width]=\"column.width\">\n          <div\n            class=\"mapa-group-report__column\"\n            [class.mapa-group-report__column--center-cell]=\"column.align === 'center' || column.key !== 'name'\"\n          >\n            <div class=\"mapa-group-report__content\">\n              @if (column.key === \"name\") {\n                <div class=\"mapa-group-report__content--value\">\n                  <div class=\"mapa-group-report__content--title\">\n                    {{ row.name }}<br />\n                  </div>\n                  <div class=\"mapa-group-report__content--subtitle\">\n                    {{ row.cpf }}\n                  </div>\n                </div>\n              } @else if (column.key === \"general\") {\n                <div class=\"general\">\n                  {{ getGeneralValue(row) | currency:'':'' }}%\n                </div>\n              } @else {\n                <div class=\"mapa-group-report__hover\">\n                  <span class=\"mapa-group-report__hover--main\">\n                    <div\n                      class=\"mapa__tag--bg\"\n                      [class.mapa__tag--contrast]=\"getDimensionClassification(row, column.key)?.classificationId === 1\"\n                      [style.backgroundColor]=\"getDimensionClassification(row, column.key)?.classificationColor\"\n                    >\n                      {{\n                        getDimensionClassification(row, column.key)?.classificationName ||\n                          \"-\"\n                      }}\n                    </div>\n                  </span>\n                  <span class=\"mapa-group-report__hover--hidden\">\n                    {{ getDimensionLabel(row, column.key) }}\n                  </span>\n                </div>\n              }\n            </div>\n          </div>\n        </td>\n      </ng-container>\n    }\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n  </table>\n</section>\n\n<ng-template #tableHeader let-column=\"column\">\n  <div class=\"mapa-group-report__header\">\n    {{ column.label }}\n    @if (column.sort) {\n      <div>\n        <mat-icon>filter_list</mat-icon>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .mapa-group-report{width:100%;white-space:nowrap}:host ::ng-deep .mapa-group-report__header{font-size:14px!important;justify-content:flex-start!important;gap:10px}:host ::ng-deep .mapa-group-report__header mat-icon{font-size:16px!important;height:16px!important;width:16px!important;margin-left:8px}:host ::ng-deep .mapa-group-report__column{display:flex;align-items:center}:host ::ng-deep .mapa-group-report__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report__content--value{margin-right:40px}:host ::ng-deep .mapa-group-report__content--title{color:#000;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-group-report__content--subtitle{color:#77838f;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-group-report__hover:hover--main{display:none}:host ::ng-deep .mapa-group-report__hover:hover--hidden{display:flex}:host ::ng-deep .mapa-group-report__hover--hidden{display:none}:host ::ng-deep .mapa-group-report__header{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report .mat-sort-header-arrow{display:none}:host ::ng-deep .mapa-group-report .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-group-report .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaGroupReportComponent, isStandalone: true, selector: "mapa-group-report", inputs: { groupReport: "groupReport", showGroupReportGeneral: "showGroupReportGeneral" }, outputs: { onSortChange: "onSortChange" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"mapa-group-report\">\n  <mapa-table\n    [columns]=\"columns\"\n    [data]=\"data\"\n    [finished]=\"true\"\n    caption=\"Relat\u00F3rio de grupo por dimens\u00E3o\"\n    (sortChange)=\"handleSortChange($event)\"\n  >\n    <ng-template mapaTableCell=\"name\" let-row>\n      <div class=\"mapa-group-report__content--value\">\n        <div class=\"mapa-group-report__content--title\">\n          {{ $any(row).name }}\n        </div>\n        <div class=\"mapa-group-report__content--subtitle\">\n          {{ $any(row).cpf }}\n        </div>\n      </div>\n    </ng-template>\n\n    @if (showGroupReportGeneral) {\n      <ng-template mapaTableCell=\"general\" let-row>\n        <div\n          class=\"mapa-group-report__column mapa-group-report__column--center-cell\"\n        >\n          <div class=\"general\">\n            {{ getGeneralValue($any(row)) | currency: \"\" : \"\" }}%\n          </div>\n        </div>\n      </ng-template>\n    }\n\n    @for (column of columns; track trackColumn($index, column)) {\n      @if (column.key !== \"name\" && column.key !== \"general\") {\n        <ng-template [mapaTableCell]=\"column.key\" let-row>\n          <div\n            class=\"mapa-group-report__column mapa-group-report__column--center-cell\"\n          >\n            <div class=\"mapa-group-report__hover\">\n              <span class=\"mapa-group-report__hover--main\">\n                <span\n                  class=\"mapa__tag--bg\"\n                  [class.mapa__tag--contrast]=\"\n                    getDimensionClassification($any(row), column.key)\n                      ?.classificationId === 1\n                  \"\n                  [style.backgroundColor]=\"\n                    getDimensionClassification($any(row), column.key)\n                      ?.classificationColor\n                  \"\n                >\n                  {{\n                    getDimensionClassification($any(row), column.key)\n                      ?.classificationName || \"-\"\n                  }}\n                </span>\n              </span>\n              <span class=\"mapa-group-report__hover--hidden\">\n                {{ getDimensionLabel($any(row), column.key) }}\n              </span>\n            </div>\n          </div>\n        </ng-template>\n      }\n    }\n  </mapa-table>\n</section>\n", styles: [":host{display:block}.mapa-group-report{width:100%}.mapa-group-report mapa-table{display:block;width:100%}.mapa-group-report__column{display:flex;align-items:center}.mapa-group-report__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}.mapa-group-report__content--value{margin-right:40px}.mapa-group-report__content--title{color:var(--mapa-color-text, #1a1a1a);text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.mapa-group-report__content--subtitle{color:#77838f;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}.mapa-group-report__hover--hidden{display:none}.mapa-group-report__hover:hover .mapa-group-report__hover--main,.mapa-group-report__hover:focus-within .mapa-group-report__hover--main{display:none}.mapa-group-report__hover:hover .mapa-group-report__hover--hidden,.mapa-group-report__hover:focus-within .mapa-group-report__hover--hidden{display:flex}.mapa-group-report .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: MapaTableCellDirective, selector: "ng-template[mapaTableCell]", inputs: ["mapaTableCell"] }, { kind: "component", type: MapaTableComponent, selector: "mapa-table", inputs: ["columns", "data", "rowKey", "caption", "selectable", "showSelectAll", "selectedKeys", "selectionLabelKey", "checkbox", "selection", "loading", "finished", "error", "emptyTitle", "emptySubtitle", "errorTitle", "errorSubtitle", "retryLabel", "status", "empty", "pagination", "pageIndex", "pageSize", "totalCount", "pageSizeOptions", "totalPages", "showPaginator", "paginatorShowFirstButton", "paginatorShowLastButton", "paginatorRenderButtonsNumber", "paginatorHideDefaultArrows", "sortActive", "sortDirection", "actions", "menuItems", "menu", "filterControl"], outputs: ["pageChange", "sortChange", "selectionChange", "retry", "onChangePage", "onSortChange", "selectedRows", "rowClick"] }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaGroupReportComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-group-report", changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, MatTableModule, MatSortModule], standalone: true, template: "<section class=\"mapa-group-report\">\n  <table\n    mat-table\n    [dataSource]=\"dataSource\"\n    matSort\n    (matSortChange)=\"handleSortChange($event)\"\n  >\n    @for (column of columns; track trackColumn($index, column)) {\n      <ng-container [matColumnDef]=\"column.key\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          [disabled]=\"!column.sort\"\n        >\n          <div\n            [ngTemplateOutlet]=\"tableHeader\"\n            [ngTemplateOutletContext]=\"{ column: column }\"\n          ></div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [style.width]=\"column.width\">\n          <div\n            class=\"mapa-group-report__column\"\n            [class.mapa-group-report__column--center-cell]=\"column.align === 'center' || column.key !== 'name'\"\n          >\n            <div class=\"mapa-group-report__content\">\n              @if (column.key === \"name\") {\n                <div class=\"mapa-group-report__content--value\">\n                  <div class=\"mapa-group-report__content--title\">\n                    {{ row.name }}<br />\n                  </div>\n                  <div class=\"mapa-group-report__content--subtitle\">\n                    {{ row.cpf }}\n                  </div>\n                </div>\n              } @else if (column.key === \"general\") {\n                <div class=\"general\">\n                  {{ getGeneralValue(row) | currency:'':'' }}%\n                </div>\n              } @else {\n                <div class=\"mapa-group-report__hover\">\n                  <span class=\"mapa-group-report__hover--main\">\n                    <div\n                      class=\"mapa__tag--bg\"\n                      [class.mapa__tag--contrast]=\"getDimensionClassification(row, column.key)?.classificationId === 1\"\n                      [style.backgroundColor]=\"getDimensionClassification(row, column.key)?.classificationColor\"\n                    >\n                      {{\n                        getDimensionClassification(row, column.key)?.classificationName ||\n                          \"-\"\n                      }}\n                    </div>\n                  </span>\n                  <span class=\"mapa-group-report__hover--hidden\">\n                    {{ getDimensionLabel(row, column.key) }}\n                  </span>\n                </div>\n              }\n            </div>\n          </div>\n        </td>\n      </ng-container>\n    }\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n  </table>\n</section>\n\n<ng-template #tableHeader let-column=\"column\">\n  <div class=\"mapa-group-report__header\">\n    {{ column.label }}\n    @if (column.sort) {\n      <div>\n        <mat-icon>filter_list</mat-icon>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .mapa-group-report{width:100%;white-space:nowrap}:host ::ng-deep .mapa-group-report__header{font-size:14px!important;justify-content:flex-start!important;gap:10px}:host ::ng-deep .mapa-group-report__header mat-icon{font-size:16px!important;height:16px!important;width:16px!important;margin-left:8px}:host ::ng-deep .mapa-group-report__column{display:flex;align-items:center}:host ::ng-deep .mapa-group-report__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report__content--value{margin-right:40px}:host ::ng-deep .mapa-group-report__content--title{color:#000;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-group-report__content--subtitle{color:#77838f;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-group-report__hover:hover--main{display:none}:host ::ng-deep .mapa-group-report__hover:hover--hidden{display:flex}:host ::ng-deep .mapa-group-report__hover--hidden{display:none}:host ::ng-deep .mapa-group-report__header{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report .mat-sort-header-arrow{display:none}:host ::ng-deep .mapa-group-report .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-group-report .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"] }]
+            args: [{ selector: 'mapa-group-report', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MapaTableCellDirective, MapaTableComponent], standalone: true, template: "<section class=\"mapa-group-report\">\n  <mapa-table\n    [columns]=\"columns\"\n    [data]=\"data\"\n    [finished]=\"true\"\n    caption=\"Relat\u00F3rio de grupo por dimens\u00E3o\"\n    (sortChange)=\"handleSortChange($event)\"\n  >\n    <ng-template mapaTableCell=\"name\" let-row>\n      <div class=\"mapa-group-report__content--value\">\n        <div class=\"mapa-group-report__content--title\">\n          {{ $any(row).name }}\n        </div>\n        <div class=\"mapa-group-report__content--subtitle\">\n          {{ $any(row).cpf }}\n        </div>\n      </div>\n    </ng-template>\n\n    @if (showGroupReportGeneral) {\n      <ng-template mapaTableCell=\"general\" let-row>\n        <div\n          class=\"mapa-group-report__column mapa-group-report__column--center-cell\"\n        >\n          <div class=\"general\">\n            {{ getGeneralValue($any(row)) | currency: \"\" : \"\" }}%\n          </div>\n        </div>\n      </ng-template>\n    }\n\n    @for (column of columns; track trackColumn($index, column)) {\n      @if (column.key !== \"name\" && column.key !== \"general\") {\n        <ng-template [mapaTableCell]=\"column.key\" let-row>\n          <div\n            class=\"mapa-group-report__column mapa-group-report__column--center-cell\"\n          >\n            <div class=\"mapa-group-report__hover\">\n              <span class=\"mapa-group-report__hover--main\">\n                <span\n                  class=\"mapa__tag--bg\"\n                  [class.mapa__tag--contrast]=\"\n                    getDimensionClassification($any(row), column.key)\n                      ?.classificationId === 1\n                  \"\n                  [style.backgroundColor]=\"\n                    getDimensionClassification($any(row), column.key)\n                      ?.classificationColor\n                  \"\n                >\n                  {{\n                    getDimensionClassification($any(row), column.key)\n                      ?.classificationName || \"-\"\n                  }}\n                </span>\n              </span>\n              <span class=\"mapa-group-report__hover--hidden\">\n                {{ getDimensionLabel($any(row), column.key) }}\n              </span>\n            </div>\n          </div>\n        </ng-template>\n      }\n    }\n  </mapa-table>\n</section>\n", styles: [":host{display:block}.mapa-group-report{width:100%}.mapa-group-report mapa-table{display:block;width:100%}.mapa-group-report__column{display:flex;align-items:center}.mapa-group-report__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}.mapa-group-report__content--value{margin-right:40px}.mapa-group-report__content--title{color:var(--mapa-color-text, #1a1a1a);text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.mapa-group-report__content--subtitle{color:#77838f;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}.mapa-group-report__hover--hidden{display:none}.mapa-group-report__hover:hover .mapa-group-report__hover--main,.mapa-group-report__hover:focus-within .mapa-group-report__hover--main{display:none}.mapa-group-report__hover:hover .mapa-group-report__hover--hidden,.mapa-group-report__hover:focus-within .mapa-group-report__hover--hidden{display:flex}.mapa-group-report .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"] }]
         }], propDecorators: { groupReport: [{
                 type: Input
             }], showGroupReportGeneral: [{
                 type: Input
             }], onSortChange: [{
                 type: Output
-            }], sort: [{
-                type: ViewChild,
-                args: [MatSort]
             }] } });
 
 /*