mapa-library-ui 2.1.1 → 2.2.0

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

@@ -1,10 +1,10 @@
 import * as i2 from '@angular/common';
 import { CommonModule, NgClass, NgTemplateOutlet, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-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 { InjectionToken, inject, Injector, signal, Optional, Inject, Injectable, effect, EventEmitter, DestroyRef, Input, Output, Directive, SecurityContext, Pipe, Component, TemplateRef, contentChildren, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 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';
@@ -17,6 +17,188 @@ import * as i1$1 from '@angular/platform-browser';
 import { getStoredAppLanguage, getIntlLocale } from 'mapa-frontend-i18n';
 import * as i1$2 from '@angular/common/http';
 
+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}`;
+}
+function formatItemCount(count) {
+    return `${count} ${count === 1 ? 'item' : 'itens'}`;
+}
+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 |',
+    },
+    report: {
+        summarized: 'Resumida',
+        detailed: 'Detalhada',
+        list: 'Lista',
+        chart: 'Gráfico',
+        viewModeLabel: 'Modo de visualização',
+        readingInformationTitle: 'Informações de leitura',
+        dimensionTitle: 'Dimensão',
+        conceptTitle: 'Conceito',
+        classificationTitle: 'Classificação',
+        resultReadingTitle: 'Leitura do resultado',
+        resultTitle: 'Resultado',
+        globalAverageTitle: 'Média global',
+        factorsTitle: 'Fatores relativos à organização e ao trabalho',
+        strongPointsTitle: 'Pontos fortes',
+        attentionPointsTitle: 'Pontos de atenção',
+        vulnerabilitiesTitle: 'Vulnerabilidades socioemocionais',
+        positiveDirectionLabel: 'Direção positiva',
+        negativeDirectionLabel: 'Direção negativa',
+        lowerIntensityLabel: 'Menos intensamente',
+        higherIntensityLabel: 'Mais intensamente',
+        noClassification: 'Sem classificação',
+        emptyState: 'Não há resultados disponíveis para esta seção.',
+        interpretationTitle: 'Interpretação',
+        detailedListLabel: 'Lista detalhada',
+        groupAverageTitle: 'Média geral do grupo',
+        groupDistributionLabel: 'Distribuição do grupo',
+        overallPercentageTitle: '% Geral',
+        scaleConceptTitle: 'Conceito da escala',
+        psychosocialFactorsTitle: 'Fatores psicossociais',
+        editConclusionLabel: 'Editar conclusão',
+        meterLabel: (name, value) => `${name}: ${value}%`,
+        gaugeLabel: (name, value) => `${name}: ${value}%`,
+        itemCountLabel: formatItemCount,
+    },
+    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 ?? {}) },
+        report: { ...defaults.report, ...(customTexts?.report ?? {}) },
+        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]
+                }] }] });
+
 function customPaginatorFactory(i18n, injector) {
     const customPaginatorIntl = new MatPaginatorIntl();
     effect(() => {
@@ -321,149 +503,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                 }]
         }], 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 ].*)?$/;
@@ -944,9 +983,12 @@ class MapaTableComponent {
             return 'descending';
         return 'none';
     }
+    isSorted(column) {
+        return this.activeSort() === column.key && !!this.activeDirection();
+    }
     sortIcon(column) {
-        if (this.activeSort() !== column.key || !this.activeDirection())
-            return 'unfold_more';
+        if (!this.isSorted(column))
+            return 'swap_vert';
         return this.activeDirection() === 'asc' ? 'arrow_upward' : 'arrow_downward';
     }
     changeSort(column) {
@@ -1138,7 +1180,7 @@ class MapaTableComponent {
                 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 }); }
+        ], 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                [class.mapa-data-table__header--sortable]=\"isSortable(column)\"\n                [class.mapa-data-table__header--sorted]=\"isSorted(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;scrollbar-color:var(--mapa-color-scrollbar, #dbe0e4) transparent;scrollbar-width:thin}.mapa-data-table__frame::-webkit-scrollbar{height:8px;width:8px}.mapa-data-table__frame::-webkit-scrollbar-track,.mapa-data-table__frame::-webkit-scrollbar-corner{background:transparent}.mapa-data-table__frame::-webkit-scrollbar-thumb{background:var(--mapa-color-scrollbar, #dbe0e4);border-radius:999px}.mapa-data-table__frame::-webkit-scrollbar-thumb:hover{background:var(--mapa-color-scrollbar-hover, #c6ced4)}.mapa-data-table__frame::-webkit-scrollbar-button{display:none;height:0;width:0}.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 th.mapa-data-table__header--sortable{transition:background-color .15s ease}.mapa-data-table th.mapa-data-table__header--sortable:hover{background:var(--mapa-color-primary-soft, #fff8f4);color:var(--mapa-color-primary-dark, #d94021)}.mapa-data-table__header--sorted .mapa-data-table__sort{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table__sort{align-items:center;background:transparent;border:0;border-radius:4px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:.25rem;letter-spacing:inherit;padding:0;text-transform:inherit;transition:color .15s ease}.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:focus-visible{outline:2px solid var(--mapa-color-primary-dark, #50575e);outline-offset:-2px}.mapa-data-table__sort mat-icon{color:var(--mapa-color-icon-subtle, #9da5aa);font-size:.875rem;height:.875rem;transition:color .15s ease;width:.875rem}.mapa-data-table__header--sortable:hover .mapa-data-table__sort mat-icon,.mapa-data-table__header--sorted .mapa-data-table__sort mat-icon{color:currentcolor}.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 mat-icon,.mapa-data-table__menu-trigger mat-icon{color:#50575e}.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,
@@ -1160,7 +1202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                             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"] }]
+                    ], 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                [class.mapa-data-table__header--sortable]=\"isSortable(column)\"\n                [class.mapa-data-table__header--sorted]=\"isSorted(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;scrollbar-color:var(--mapa-color-scrollbar, #dbe0e4) transparent;scrollbar-width:thin}.mapa-data-table__frame::-webkit-scrollbar{height:8px;width:8px}.mapa-data-table__frame::-webkit-scrollbar-track,.mapa-data-table__frame::-webkit-scrollbar-corner{background:transparent}.mapa-data-table__frame::-webkit-scrollbar-thumb{background:var(--mapa-color-scrollbar, #dbe0e4);border-radius:999px}.mapa-data-table__frame::-webkit-scrollbar-thumb:hover{background:var(--mapa-color-scrollbar-hover, #c6ced4)}.mapa-data-table__frame::-webkit-scrollbar-button{display:none;height:0;width:0}.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 th.mapa-data-table__header--sortable{transition:background-color .15s ease}.mapa-data-table th.mapa-data-table__header--sortable:hover{background:var(--mapa-color-primary-soft, #fff8f4);color:var(--mapa-color-primary-dark, #d94021)}.mapa-data-table__header--sorted .mapa-data-table__sort{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table__sort{align-items:center;background:transparent;border:0;border-radius:4px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:.25rem;letter-spacing:inherit;padding:0;text-transform:inherit;transition:color .15s ease}.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:focus-visible{outline:2px solid var(--mapa-color-primary-dark, #50575e);outline-offset:-2px}.mapa-data-table__sort mat-icon{color:var(--mapa-color-icon-subtle, #9da5aa);font-size:.875rem;height:.875rem;transition:color .15s ease;width:.875rem}.mapa-data-table__header--sortable:hover .mapa-data-table__sort mat-icon,.mapa-data-table__header--sorted .mapa-data-table__sort mat-icon{color:currentcolor}.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 mat-icon,.mapa-data-table__menu-trigger mat-icon{color:#50575e}.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: [{
@@ -1259,6 +1301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
 
 class MapaGroupReportComponent {
     constructor() {
+        this.i18n = inject(MapaI18nService);
         this.groupReport = [];
         this.showGroupReportGeneral = false;
         this.onSortChange = new EventEmitter();
@@ -1328,7 +1371,11 @@ class MapaGroupReportComponent {
         ];
         const existingKeys = new Set(['name']);
         if (this.showGroupReportGeneral) {
-            columns.push({ key: 'general', label: '% Geral', sortable: false });
+            columns.push({
+                key: 'general',
+                label: this.i18n.texts.report.overallPercentageTitle,
+                sortable: false,
+            });
             existingKeys.add('general');
         }
         this.groupReport.forEach((reportItem) => {