mapa-library-ui 2.9.0 → 2.11.0-oldind.1

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, DestroyRef, Input, Output, Directive, effect, SecurityContext, Injectable, Pipe, InjectionToken, Injector, signal, Optional, Inject, Component, TemplateRef, contentChildren, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
+import { EventEmitter, inject, DestroyRef, Input, Output, Directive, effect, SecurityContext, Injectable, Pipe, InjectionToken, Injector, signal, Optional, Inject, Component, TemplateRef, contentChildren, ChangeDetectorRef, viewChild, afterEveryRender, ChangeDetectionStrategy } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { map, startWith } from 'rxjs/operators';
 import * as i1 from '@angular/material/paginator';
@@ -382,6 +382,7 @@ const DEFAULT_MAPA_UI_TEXTS = {
         viewModeLabel: 'Modo de visualização',
         readingInformationTitle: 'Informações de leitura',
         dimensionTitle: 'Dimensão',
+        indicatorTitle: 'Indicador',
         conceptTitle: 'Conceito',
         classificationTitle: 'Classificação',
         resultReadingTitle: 'Leitura do resultado',
@@ -419,6 +420,16 @@ const DEFAULT_MAPA_UI_TEXTS = {
         meterLabel: (name, value) => `${name}: ${value}%`,
         gaugeLabel: (name, value) => `${name}: ${value}%`,
         itemCountLabel: formatItemCount,
+        continueLabel: 'Continuar',
+        newGroupTitle: 'Novo grupo',
+        groupNameHint: 'Esse nome identifica o grupo nas tabelas, gráficos e legendas.',
+        groupNameRequired: 'Informe o nome do grupo.',
+        groupPeopleRequired: 'Selecione pelo menos uma pessoa para criar o grupo.',
+        groupMinimumHint: 'Crie pelo menos dois grupos para comparar.',
+        groupUnsavedHint: 'Salve ou cancele as alterações em edição antes de analisar os resultados.',
+        groupSavedLabel: (name) => `Grupo ${name} salvo.`,
+        groupCountLabel: (count, limit) => `${count} de ${limit} grupos criados`,
+        scaleCountLabel: (count) => `${count} ${count === 1 ? 'escala' : 'escalas'}`,
     },
     paginator: {
         itemsPerPage: 'Itens por página',
@@ -439,6 +450,7 @@ const DEFAULT_MAPA_UI_TEXTS = {
         selectAllVisible: 'Selecionar todos os itens desta página',
         selectionColumn: 'Seleção',
         selectRow: 'Selecionar item',
+        horizontalScrollHint: 'Role horizontalmente para ver todas as colunas →',
         selectNamedRow: (item) => `Selecionar ${item}`,
     },
     validation: {
@@ -815,6 +827,8 @@ class MapaTableComponent {
         this.data = [];
         this.rowKey = 'id';
         this.caption = '';
+        this.responsiveLayout = 'cards';
+        this.stickyFirstColumn = false;
         this.showSelectAll = true;
         this.selectionLabelKey = 'name';
         this.error = false;
@@ -855,6 +869,43 @@ class MapaTableComponent {
         this.i18n = inject(MapaI18nService);
         this.localSort = { active: '', direction: '' };
         this.filterValue = '';
+        this.tableFrame = viewChild('tableFrame', ...(ngDevMode ? [{ debugName: "tableFrame" }] : []));
+        this.horizontalOverflow = false;
+        afterEveryRender(() => this.observeOverflow());
+        this.destroyRef.onDestroy(() => this.resizeObserver?.disconnect());
+    }
+    observeOverflow() {
+        const frame = this.tableFrame()?.nativeElement;
+        if (!frame)
+            return;
+        const table = frame.querySelector('table');
+        if (frame !== this.observedFrame || table !== this.observedTable) {
+            this.resizeObserver?.disconnect();
+            this.observedFrame = frame;
+            this.observedTable = table;
+            if (typeof ResizeObserver !== 'undefined') {
+                this.resizeObserver ??= new ResizeObserver(() => this.measureOverflow());
+                this.resizeObserver.observe(frame);
+                if (table)
+                    this.resizeObserver.observe(table);
+            }
+        }
+        this.measureOverflow();
+    }
+    measureOverflow() {
+        const frame = this.observedFrame;
+        const overflow = this.responsiveLayout === 'scroll' &&
+            !!frame &&
+            frame.scrollWidth > frame.clientWidth + 1;
+        if (this.horizontalOverflow !== overflow) {
+            this.horizontalOverflow = overflow;
+            this.cdr.markForCheck();
+        }
+    }
+    headerDirectionLabel(column) {
+        return column.headerDirection === 'negative'
+            ? this.texts.report.negativeDirectionLabel
+            : this.texts.report.positiveDirectionLabel;
     }
     get texts() {
         return this.i18n.textsSignal();
@@ -1185,13 +1236,13 @@ class MapaTableComponent {
             !!target.closest("a, button, input, select, textarea, [role='button'], [role='menuitem']"));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaTableComponent, isStandalone: true, selector: "mapa-table", inputs: { columns: "columns", data: "data", rowKey: "rowKey", caption: "caption", selectable: "selectable", showSelectAll: "showSelectAll", selectedKeys: "selectedKeys", selectionLabelKey: "selectionLabelKey", checkbox: "checkbox", selection: "selection", loading: "loading", finished: "finished", error: "error", emptyTitle: "emptyTitle", emptySubtitle: "emptySubtitle", errorTitle: "errorTitle", errorSubtitle: "errorSubtitle", retryLabel: "retryLabel", status: "status", empty: "empty", pagination: "pagination", pageIndex: "pageIndex", pageSize: "pageSize", totalCount: "totalCount", pageSizeOptions: "pageSizeOptions", totalPages: "totalPages", showPaginator: "showPaginator", paginatorShowFirstButton: "paginatorShowFirstButton", paginatorShowLastButton: "paginatorShowLastButton", paginatorRenderButtonsNumber: "paginatorRenderButtonsNumber", paginatorHideDefaultArrows: "paginatorHideDefaultArrows", sortActive: "sortActive", sortDirection: "sortDirection", actions: "actions", menuItems: "menuItems", menu: "menu", filterControl: "filterControl" }, outputs: { pageChange: "pageChange", sortChange: "sortChange", selectionChange: "selectionChange", retry: "retry", onChangePage: "onChangePage", onSortChange: "onSortChange", selectedRows: "selectedRows", rowClick: "rowClick" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaTableComponent, isStandalone: true, selector: "mapa-table", inputs: { columns: "columns", data: "data", rowKey: "rowKey", caption: "caption", responsiveLayout: "responsiveLayout", stickyFirstColumn: "stickyFirstColumn", selectable: "selectable", showSelectAll: "showSelectAll", selectedKeys: "selectedKeys", selectionLabelKey: "selectionLabelKey", checkbox: "checkbox", selection: "selection", loading: "loading", finished: "finished", error: "error", emptyTitle: "emptyTitle", emptySubtitle: "emptySubtitle", errorTitle: "errorTitle", errorSubtitle: "errorSubtitle", retryLabel: "retryLabel", status: "status", empty: "empty", pagination: "pagination", pageIndex: "pageIndex", pageSize: "pageSize", totalCount: "totalCount", pageSizeOptions: "pageSizeOptions", totalPages: "totalPages", showPaginator: "showPaginator", paginatorShowFirstButton: "paginatorShowFirstButton", paginatorShowLastButton: "paginatorShowLastButton", paginatorRenderButtonsNumber: "paginatorRenderButtonsNumber", paginatorHideDefaultArrows: "paginatorHideDefaultArrows", sortActive: "sortActive", sortDirection: "sortDirection", actions: "actions", menuItems: "menuItems", menu: "menu", filterControl: "filterControl" }, outputs: { pageChange: "pageChange", sortChange: "sortChange", selectionChange: "selectionChange", retry: "retry", onChangePage: "onChangePage", onSortChange: "onSortChange", selectedRows: "selectedRows", rowClick: "rowClick" }, providers: [
             {
                 provide: MatPaginatorIntl,
                 useFactory: customPaginatorFactory,
                 deps: [MapaI18nService, Injector],
             },
-        ], queries: [{ propertyName: "projectedCells", predicate: MapaTableCellDirective, isSignal: true }], ngImport: i0, template: "<section\n  class=\"mapa-data-table\"\n  [class.mapa-data-table--selectable]=\"isSelectable\"\n>\n  <div class=\"mapa-data-table__frame\">\n    @if (isLoading) {\n      <table class=\"mapa-data-table__table\" aria-hidden=\"true\">\n        <thead>\n          <tr>\n            @if (isSelectable) {\n              <th class=\"mapa-data-table__selection-cell\"></th>\n            }\n            @for (column of columns; track column.key) {\n              <th [style.width]=\"skeletonColumnWidth(column)\">\n                {{ column.label }}\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of skeletonRows; track row) {\n            <tr>\n              @if (isSelectable) {\n                <td class=\"mapa-data-table__selection-cell\">\n                  <span\n                    class=\"mapa-data-table__skeleton mapa-data-table__skeleton--checkbox\"\n                  ></span>\n                </td>\n              }\n              @for (column of columns; track column.key) {\n                <td [style.width]=\"skeletonColumnWidth(column)\">\n                  <span class=\"mapa-data-table__skeleton\"></span>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n      <span class=\"mapa-data-table__sr-only\" role=\"status\">\n        {{ texts.table.loading }}\n      </span>\n    } @else if (error) {\n      <div class=\"mapa-data-table__state\" role=\"alert\">\n        <strong>{{ resolvedErrorTitle }}</strong>\n        @if (resolvedErrorSubtitle) {\n          <span>{{ resolvedErrorSubtitle }}</span>\n        }\n        @if (retry.observed) {\n          <button type=\"button\" (click)=\"retry.emit()\">\n            {{ resolvedRetryLabel }}\n          </button>\n        }\n      </div>\n    } @else if (visibleData.length > 0) {\n      <table class=\"mapa-data-table__table\">\n        @if (caption) {\n          <caption class=\"mapa-data-table__sr-only\">\n            {{\n              caption\n            }}\n          </caption>\n        }\n        <thead>\n          <tr>\n            @if (isSelectable) {\n              <th class=\"mapa-data-table__selection-cell\">\n                @if (showSelectAll) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [checked]=\"allVisibleSelected()\"\n                    [indeterminate]=\"someVisibleSelected()\"\n                    [aria-label]=\"texts.table.selectAllVisible\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleVisibleRows($event.checked)\"\n                  />\n                } @else {\n                  <span class=\"mapa-data-table__sr-only\">\n                    {{ texts.table.selectionColumn }}\n                  </span>\n                }\n              </th>\n            }\n            @for (column of columns; track column.key) {\n              <th\n                [class.mapa-data-table__cell--center]=\"isCenterAligned(column)\"\n                [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n                [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 }); }
+        ], queries: [{ propertyName: "projectedCells", predicate: MapaTableCellDirective, isSignal: true }], viewQueries: [{ propertyName: "tableFrame", first: true, predicate: ["tableFrame"], descendants: true, isSignal: true }], ngImport: i0, template: "<section\n  class=\"mapa-data-table\"\n  [class.mapa-data-table--selectable]=\"isSelectable\"\n  [class.mapa-data-table--scroll]=\"responsiveLayout === 'scroll'\"\n  [class.mapa-data-table--sticky-first]=\"stickyFirstColumn\"\n>\n  <div\n    class=\"mapa-data-table__frame\"\n    #tableFrame\n    [attr.tabindex]=\"horizontalOverflow ? 0 : null\"\n    [attr.role]=\"horizontalOverflow ? 'region' : null\"\n    [attr.aria-label]=\"horizontalOverflow ? caption : null\"\n  >\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                    @if (column.headerDirection) {\n                      <span\n                        class=\"mapa-direction-indicator\"\n                        [attr.aria-label]=\"headerDirectionLabel(column)\"\n                        [attr.title]=\"headerDirectionLabel(column)\"\n                        >{{\n                          column.headerDirection === \"negative\" ? \"\u2193\" : \"\u2191\"\n                        }}</span\n                      >\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                  @if (column.headerDirection) {\n                    <span\n                      class=\"mapa-direction-indicator\"\n                      [attr.aria-label]=\"headerDirectionLabel(column)\"\n                      >{{\n                        column.headerDirection === \"negative\" ? \"\u2193\" : \"\u2191\"\n                      }}</span\n                    >\n                  }\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\n                                  fontSet=\"material-icons-outlined\"\n                                  aria-hidden=\"true\"\n                                  >{{ item.icon }}</mat-icon\n                                >\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\n                                  fontSet=\"material-icons-outlined\"\n                                  aria-hidden=\"true\"\n                                  >{{ item.icon }}</mat-icon\n                                >\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\n                                    fontSet=\"material-icons-outlined\"\n                                    aria-hidden=\"true\"\n                                    >{{ item.icon }}</mat-icon\n                                  >\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\n                                    fontSet=\"material-icons-outlined\"\n                                    aria-hidden=\"true\"\n                                    >{{ item.icon }}</mat-icon\n                                  >\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 (horizontalOverflow) {\n    <p class=\"mapa-data-table__scroll-hint\">\n      {{ texts.table.horizontalScrollHint }}\n    </p>\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: [".mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{display:block}.mapa-data-table{color:var(--mapa-color-text, #1a1a1a);font-family:var(--mapa-font-body, Asap, sans-serif)}.mapa-data-table--scroll{min-width:0}.mapa-data-table--scroll .mapa-data-table__frame{isolation:isolate}.mapa-data-table--sticky-first th:first-child,.mapa-data-table--sticky-first td:first-child{background:var(--mapa-color-surface, #fff);box-shadow:1px 0 var(--mapa-color-border, #e1e5e7);inset-inline-start:0;max-width:var(--mapa-report-ranking-entry-width, 200px);min-width:var(--mapa-report-ranking-entry-width, 200px);position:sticky;width:var(--mapa-report-ranking-entry-width, 200px);z-index:1}.mapa-data-table--sticky-first th:first-child{background:var(--mapa-color-surface-muted, #fafbfc);z-index:2}.mapa-data-table--sticky-first tbody tr:hover td:first-child{background:var(--mapa-color-primary-soft, #fff8f4)}.mapa-data-table__scroll-hint{color:var(--mapa-color-text-subtle, #555);font-size:12px;margin:10px 0 0}.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:not(.mapa-data-table--scroll) .mapa-data-table__frame{border:0;overflow:visible}.mapa-data-table:not(.mapa-data-table--scroll) thead{display:none}.mapa-data-table:not(.mapa-data-table--scroll) tbody{display:grid;gap:.75rem}.mapa-data-table:not(.mapa-data-table--scroll) 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:not(.mapa-data-table--scroll).mapa-data-table--selectable tr{grid-template-columns:auto minmax(0,1fr)}.mapa-data-table:not(.mapa-data-table--scroll) td{border:0;grid-column:1;padding:.375rem .5rem;text-align:left;width:auto}.mapa-data-table:not(.mapa-data-table--scroll).mapa-data-table--selectable td:not(.mapa-data-table__selection-cell){grid-column:2}.mapa-data-table:not(.mapa-data-table--scroll) 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:not(.mapa-data-table--scroll) .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,
@@ -1213,8 +1264,8 @@ 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                [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: [{
+                    ], standalone: true, template: "<section\n  class=\"mapa-data-table\"\n  [class.mapa-data-table--selectable]=\"isSelectable\"\n  [class.mapa-data-table--scroll]=\"responsiveLayout === 'scroll'\"\n  [class.mapa-data-table--sticky-first]=\"stickyFirstColumn\"\n>\n  <div\n    class=\"mapa-data-table__frame\"\n    #tableFrame\n    [attr.tabindex]=\"horizontalOverflow ? 0 : null\"\n    [attr.role]=\"horizontalOverflow ? 'region' : null\"\n    [attr.aria-label]=\"horizontalOverflow ? caption : null\"\n  >\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                    @if (column.headerDirection) {\n                      <span\n                        class=\"mapa-direction-indicator\"\n                        [attr.aria-label]=\"headerDirectionLabel(column)\"\n                        [attr.title]=\"headerDirectionLabel(column)\"\n                        >{{\n                          column.headerDirection === \"negative\" ? \"\u2193\" : \"\u2191\"\n                        }}</span\n                      >\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                  @if (column.headerDirection) {\n                    <span\n                      class=\"mapa-direction-indicator\"\n                      [attr.aria-label]=\"headerDirectionLabel(column)\"\n                      >{{\n                        column.headerDirection === \"negative\" ? \"\u2193\" : \"\u2191\"\n                      }}</span\n                    >\n                  }\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\n                                  fontSet=\"material-icons-outlined\"\n                                  aria-hidden=\"true\"\n                                  >{{ item.icon }}</mat-icon\n                                >\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\n                                  fontSet=\"material-icons-outlined\"\n                                  aria-hidden=\"true\"\n                                  >{{ item.icon }}</mat-icon\n                                >\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\n                                    fontSet=\"material-icons-outlined\"\n                                    aria-hidden=\"true\"\n                                    >{{ item.icon }}</mat-icon\n                                  >\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\n                                    fontSet=\"material-icons-outlined\"\n                                    aria-hidden=\"true\"\n                                    >{{ item.icon }}</mat-icon\n                                  >\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 (horizontalOverflow) {\n    <p class=\"mapa-data-table__scroll-hint\">\n      {{ texts.table.horizontalScrollHint }}\n    </p>\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: [".mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{display:block}.mapa-data-table{color:var(--mapa-color-text, #1a1a1a);font-family:var(--mapa-font-body, Asap, sans-serif)}.mapa-data-table--scroll{min-width:0}.mapa-data-table--scroll .mapa-data-table__frame{isolation:isolate}.mapa-data-table--sticky-first th:first-child,.mapa-data-table--sticky-first td:first-child{background:var(--mapa-color-surface, #fff);box-shadow:1px 0 var(--mapa-color-border, #e1e5e7);inset-inline-start:0;max-width:var(--mapa-report-ranking-entry-width, 200px);min-width:var(--mapa-report-ranking-entry-width, 200px);position:sticky;width:var(--mapa-report-ranking-entry-width, 200px);z-index:1}.mapa-data-table--sticky-first th:first-child{background:var(--mapa-color-surface-muted, #fafbfc);z-index:2}.mapa-data-table--sticky-first tbody tr:hover td:first-child{background:var(--mapa-color-primary-soft, #fff8f4)}.mapa-data-table__scroll-hint{color:var(--mapa-color-text-subtle, #555);font-size:12px;margin:10px 0 0}.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:not(.mapa-data-table--scroll) .mapa-data-table__frame{border:0;overflow:visible}.mapa-data-table:not(.mapa-data-table--scroll) thead{display:none}.mapa-data-table:not(.mapa-data-table--scroll) tbody{display:grid;gap:.75rem}.mapa-data-table:not(.mapa-data-table--scroll) 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:not(.mapa-data-table--scroll).mapa-data-table--selectable tr{grid-template-columns:auto minmax(0,1fr)}.mapa-data-table:not(.mapa-data-table--scroll) td{border:0;grid-column:1;padding:.375rem .5rem;text-align:left;width:auto}.mapa-data-table:not(.mapa-data-table--scroll).mapa-data-table--selectable td:not(.mapa-data-table__selection-cell){grid-column:2}.mapa-data-table:not(.mapa-data-table--scroll) 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:not(.mapa-data-table--scroll) .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"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -1222,6 +1273,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                 type: Input
             }], caption: [{
                 type: Input
+            }], responsiveLayout: [{
+                type: Input
+            }], stickyFirstColumn: [{
+                type: Input
             }], selectable: [{
                 type: Input
             }], showSelectAll: [{
@@ -1304,7 +1359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                 type: Output
             }], rowClick: [{
                 type: Output
-            }], projectedCells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MapaTableCellDirective), { isSignal: true }] }] } });
+            }], projectedCells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MapaTableCellDirective), { isSignal: true }] }], tableFrame: [{ type: i0.ViewChild, args: ['tableFrame', { isSignal: true }] }] } });
 
 /*
  * Public API Surface of mapa-library-ui table