mapa-library-ui 1.1.0 → 1.1.1

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

@@ -626,6 +626,9 @@ class MapaTableComponent {
     get paginatorPageIndex() {
         return Math.max(this.pageIndex - 1, 0);
     }
+    get shouldShowPaginator() {
+        return this.showPaginator && this.totalPages > 1;
+    }
     get resolvedEmptyTitle() {
         return this.empty.title || this.texts.table.emptyTitle;
     }
@@ -1006,7 +1009,7 @@ class MapaTableComponent {
                 useFactory: customPaginatorFactory,
                 deps: [MapaI18nService, Injector],
             },
-        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, read: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (status.loading) {\n  <section class=\"mapa-table mapa-table__skeleton\" aria-hidden=\"true\">\n    <div class=\"mapa-table__skeleton-content mapa__card mapa__card--show-on-desktop\">\n      <div class=\"mapa-table__skeleton-header\">\n        @for (column of columns; track trackColumn($index, column)) {\n          <div\n            class=\"mapa-table__skeleton-cell mapa-table__skeleton-cell--header\"\n            [style.width]=\"getSkeletonColumnWidth(column)\"\n          ></div>\n        }\n      </div>\n      @for (rowIndex of skeletonRows; track rowIndex) {\n        <div class=\"mapa-table__skeleton-row\">\n          @for (column of columns; track trackColumn($index, column)) {\n            <div\n              class=\"mapa-table__skeleton-cell\"\n              [style.width]=\"getSkeletonColumnWidth(column)\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n  </section>\n} @else if (dataSource.data.length > 0) {\n  <section class=\"mapa-table\">\n    <div class=\"mapa-table--show-on-mobile\">\n      @if (checkbox) {\n        <div class=\"mapa-table__select-all\">\n          @if (selection) {\n            <mat-checkbox\n              (change)=\"$event ? toggleAllRows() : null\"\n              [checked]=\"selection.hasValue() && isAllSelected()\"\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n              (click)=\"$event.stopPropagation()\"\n              color=\"primary\"\n            > {{ selectAllLabel }}</mat-checkbox>\n          }\n        </div>\n      }\n      @for (row of dataSource.data; track row) {\n        <div>\n          <div class=\"mapa-table__card mapa__card\">\n            @for (column of columns; track trackColumn($index, column); let isFirst = $first) {\n              <div [ngClass]=\"'mapa-table__card--column-' + column.key\">\n                @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                  <strong\n                    class=\"mapa-table__card--header\"\n                    [class.mapa-table__checkbox--header]=\"isFirst && checkbox\"\n                  >\n                    <div\n                      [ngTemplateOutlet]=\"tableHeader\"\n                      [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox: false }\"\n                      class=\"hidden\"\n                    ></div>\n                  </strong>\n                }\n                <div\n                  class=\"mapa-table__card--column\"\n                  [class.mapa-table__column--center-cell]=\"column?.align === 'center'\"\n                >\n                  @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                    <div class=\"mapa-table__content\">\n                      <div\n                        [style.width]=\"column?.width\"\n                        [class.mapa-table__column--ellipsis]=\"column?.collapse === 'overflow'\"\n                        [class.mapa-table__column--no-wrap]=\"column?.collapse === 'no-wrap'\"\n                        [class.mapa-table__column--wrap]=\"column?.collapse === 'wrap'\"\n                        [ngClass]=\"[hasCustomClass(column, row, column.key) ? getCustomClass(column, row, column.key) : '']\"\n                      >\n                        @if (column?.status?.color) {\n                          <div\n                            class=\"mapa-table__column--status\"\n                            [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n                            [style.color]=\"getTextColor(column, row)\"\n                            [class.mapa-table__column--status-round]=\"column.status?.style == 'round'\"\n                          >\n                            <div\n                              [ngTemplateOutlet]=\"tableContent\"\n                              [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                            ></div>\n                          </div>\n                        } @else {\n                          <div\n                            [ngTemplateOutlet]=\"tableContent\"\n                            [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                          ></div>\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    @if (column.key === \"actions\" && actions) {\n                      <div>\n                        @for (item of getActionItems(row); track item) {\n                          @if (item.route) {\n                            <a [href]=\"item.route\" [routerLink]=\"item.route\">\n                              <button\n                                class=\"mapa-table__column--actions-item\"\n                                [title]=\"item.text\"\n                                mat-icon-button\n                              >\n                                @if (item.icon) {\n                                  <mat-icon>{{ item.icon }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" />\n                                }\n                                @if (item.svg) {\n                                  <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                                }\n                                @if (item.showText) {\n                                  <span>{{ item.text }}</span>\n                                }\n                              </button>\n                            </a>\n                          } @else {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--actions-item\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n\n                    @if (column.key === \"menu\") {\n                      @if (hasIndividualMenu(row)) {\n                        <div class=\"mapa-table__column--menu\">\n                          @for (item of getMenuItems(row); track item) {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--menu-item\"\n                              [class.mapa-table__column--menu-item-disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              <span class=\"mapa-table__column--menu-item-text\">{{ item.text }}</span>\n                            </button>\n                          }\n                        </div>\n                      } @else {\n                        <div class=\"mapa-table__column--menu\">\n                          @for (item of menuItems; track item) {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--menu-item\"\n                              [class.mapa-table__column--menu-item-disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.image)\"></mapa-svg-icon>\n                              }\n                              <span class=\"mapa-table__column--menu-item-text\">{{ item.text }}</span>\n                            </button>\n                          }\n                        </div>\n                      }\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"mapa-table--show-on-desktop\">\n      @if (desktopTableVisible) {\n        <table\n          mat-table\n          [dataSource]=\"dataSource\"\n          matSort\n          (matSortChange)=\"sortDataFunction($event)\"\n        >\n          @for (column of columns; track trackColumn($index, column); let isFirst = $first) {\n            <ng-container [matColumnDef]=\"column.key\">\n              <th\n                mat-header-cell\n                *matHeaderCellDef\n                mat-sort-header\n                [disabled]=\"!(column.key !== 'actions' ? column.sort : null)\"\n              >\n                <div\n                  [ngTemplateOutlet]=\"tableHeader\"\n                  [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox }\"\n                ></div>\n              </th>\n              <td mat-cell *matCellDef=\"let row\" [style.width]=\"column?.width\">\n                <div\n                  class=\"mapa-table__column\"\n                  (click)=\"emitRowClick(row, '')\"\n                  [class.mapa-table__column--center-cell]=\"column?.align === 'center'\"\n                >\n                  @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                    <div class=\"mapa-table__content\">\n                      <div\n                        [style.width]=\"column?.width\"\n                        [class.mapa-table__column--ellipsis]=\"column?.collapse === 'overflow'\"\n                        [class.mapa-table__column--no-wrap]=\"column?.collapse === 'no-wrap'\"\n                        [class.mapa-table__column--wrap]=\"column?.collapse === 'wrap'\"\n                        [ngClass]=\"[hasCustomClass(column, row, column.key) ? getCustomClass(column, row, column.key) : '']\"\n                      >\n                        @if (column?.status?.color) {\n                          <div\n                            class=\"mapa-table__column--status\"\n                            [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n                            [style.color]=\"getTextColor(column, row)\"\n                            [class.mapa-table__column--status-round]=\"column.status?.style == 'round'\"\n                          >\n                            <div\n                              [ngTemplateOutlet]=\"tableContent\"\n                              [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                            ></div>\n                          </div>\n                        } @else {\n                          <div\n                            [ngTemplateOutlet]=\"tableContent\"\n                            [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                          ></div>\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    @if (column.key === \"actions\" && actions) {\n                      <div class=\"mapa-table__column--actions\">\n                        @for (item of getActionItems(row); track item) {\n                          @if (item.route) {\n                            <a [href]=\"item.route\" [routerLink]=\"item.route\">\n                              <button\n                                class=\"mapa-table__column--actions-item\"\n                                [title]=\"item.text\"\n                                mat-icon-button\n                              >\n                                @if (item.icon) {\n                                  <mat-icon>{{ item.icon }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" />\n                                }\n                                @if (item.svg) {\n                                  <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                                }\n                                @if (item.showText) {\n                                  <span>{{ item.text }}</span>\n                                }\n                              </button>\n                            </a>\n                          } @else {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--actions-item\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n                    @if (column.key === \"menu\") {\n                      <div class=\"mapa-table__column--menu\">\n                        @if (hasIndividualMenu(row)) {\n                          <mapa-menu\n                            [items]=\"getMenuItems(row)\"\n                            [data]=\"row\"\n                            (emitMenu)=\"handleMenu($event)\"\n                          ></mapa-menu>\n                        } @else if (menuItems.length > 0) {\n                          <mapa-menu\n                            [items]=\"menuItems\"\n                            [data]=\"row\"\n                            (emitMenu)=\"handleMenu($event)\"\n                          ></mapa-menu>\n                        }\n                      </div>\n                    }\n                  }\n                </div>\n              </td>\n            </ng-container>\n          }\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: displayedColumns;\"\n            class=\"row-hover\"\n          ></tr>\n        </table>\n      }\n    </div>\n\n    @if (showPaginator) {\n      <section>\n        <mat-paginator\n          class=\"mapa-table__paginator\"\n          appBubblePagination\n          [appCustomLength]=\"totalCount\"\n          [bubblePageIndex]=\"paginatorPageIndex\"\n          [pageIndex]=\"paginatorPageIndex\"\n          [showFirstButton]=\"paginatorShowFirstButton\"\n          [showLastButton]=\"paginatorShowLastButton\"\n          [renderButtonsNumber]=\"paginatorRenderButtonsNumber\"\n          [hideDefaultArrows]=\"paginatorHideDefaultArrows\"\n          [length]=\"totalCount\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"[5, 10, 25, 100]\"\n          (page)=\"changePage($event)\"\n        ></mat-paginator>\n      </section>\n    }\n  </section>\n} @else if (status.finished && dataSource.data.length === 0) {\n  <section class=\"mapa-table\">\n    <mapa-empty\n      [title]=\"resolvedEmptyTitle\"\n      [subtitle]=\"resolvedEmptySubtitle\"\n    ></mapa-empty>\n  </section>\n}\n\n<ng-template\n  #tableHeader\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n>\n  @if (isFirst && checkbox) {\n    @if (selection) {\n      <mat-checkbox\n        (change)=\"$event ? toggleAllRows() : null\"\n        [checked]=\"selection.hasValue() && isAllSelected()\"\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n        (click)=\"$event.stopPropagation()\"\n        color=\"primary\"\n      ></mat-checkbox>\n    }\n  }\n  <div>\n    <span [innerHTML]=\"column.label | safeHtml\"></span>\n  </div>\n  @if (column.key !== \"actions\" && column.key !== \"menu\" && column.sort) {\n    <div class=\"mapa-table--show-on-desktop\">\n      <mat-icon>filter_list</mat-icon>\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #tableContent\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n  let-row=\"row\"\n>\n  @if (isFirst && checkbox) {\n    <mat-checkbox\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"$event ? selection?.toggle(row) : null; getSelectedValues()\"\n      [checked]=\"selection?.isSelected(row)\"\n      color=\"primary\"\n      class=\"mapa-table__checkbox\"\n    >\n    </mat-checkbox>\n  }\n  @if (isMaskedData(column, row)) {\n    {{ getValueAsDate(column, row) | date: column.mask }}\n  } @else if (column.status) {\n    <span [innerHTML]=\"getStatusLabel(column, row) | safeHtml\"></span>\n  } @else {\n    <span [innerHTML]=\"getCellContent(row, column.key) | safeHtml\"></span>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .mapa-table .mat-mdc-table{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:100%}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-checkbox{margin:6px 8px 0 0;padding:0}:host ::ng-deep .mapa-table td.mat-mdc-cell{padding:16px 0}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-row .mat-mdc-cell{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;color:#50575e}:host ::ng-deep .mapa-table .row-hover:hover{box-shadow:0 2px 4px #00000021;outline:1px solid rgba(238,238,238,.93);cursor:pointer}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-header-cell{border:none;border-bottom:1px solid #eee;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:600;color:#50575e}:host ::ng-deep .mapa-table .mat-mdc-row,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-header-cell,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{background-color:transparent;border-color:#b6b6b6}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background{background-color:#ea561d;border-color:#ea561d}:host ::ng-deep .mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}:host ::ng-deep .mapa-table ::ng-deep .mat-mdc-paginator-page-size-label{display:none}:host ::ng-deep .mapa-table__paginator .mat-paginator-container,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-container{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;justify-content:flex-start}:host ::ng-deep .mapa-table__paginator .mat-paginator-page-size,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-page-size{margin-right:10vw}:host ::ng-deep .mapa-table__paginator .custom-paginator-container{justify-content:flex-end}:host ::ng-deep .mapa-table__paginator .g-bubble-container{display:flex;align-items:center;justify-content:flex-end;gap:8px}:host ::ng-deep .mapa-table__paginator .g-bubble{border-radius:4px;outline:none;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;background:transparent;color:#50575e;cursor:pointer;margin:.4em 0;font-size:14px;min-width:24px;width:auto;min-height:24px;max-height:24px;padding:1px 6px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mapa-table__paginator .g-bubble:hover{background-color:#dfe3e6}:host ::ng-deep .mapa-table__paginator .g-bubble__active{background-color:#ea561d;color:#fff}:host ::ng-deep .mapa-table__paginator .custom-paginator-counter{white-space:nowrap;margin:0 4px 0 10px!important}:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-previous,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-next{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;color:#999}:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-previous[disabled],:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-next[disabled]{color:#dfe3e6}:host ::ng-deep .hidden{display:none}:host ::ng-deep .mapa-table{width:100%;white-space:nowrap}:host ::ng-deep .mapa-table .mat-mdc-icon-button{width:unset!important;height:unset!important;line-height:unset!important;justify-content:flex-start}:host ::ng-deep .mapa-table .mat-mdc-icon-button .mat-mdc-button-touch-target,:host ::ng-deep .mapa-table .mat-mdc-icon-button .mdc-button__label{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%!important}@media(min-width:1201px){:host ::ng-deep .mapa-table--show-on-mobile{display:none}:host ::ng-deep .mapa-table--show-on-desktop{display:block}}@media(max-width:1200px){:host ::ng-deep .mapa-table--show-on-mobile{padding:20px}:host ::ng-deep .mapa-table--show-on-mobile .mapa__card{width:unset!important}:host ::ng-deep .mapa-table--show-on-desktop{display:none}}:host ::ng-deep .mapa-table__select-all{display:flex;align-items:center;padding:16px 24px;font-size:12px;text-transform:uppercase}@media(max-width:1200px){:host ::ng-deep .mapa-table__checkbox{margin-right:8px}:host ::ng-deep .mapa-table__checkbox--header{padding-left:24px}}:host ::ng-deep .mapa-table__card{position:relative;padding:24px;display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}:host ::ng-deep .mapa-table__card--floating-content{display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;gap:8px}:host ::ng-deep .mapa-table__card--floating-actions{position:absolute;bottom:16px;right:16px;color:#ea561d}:host ::ng-deep .mapa-table__card--header{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;font-size:12px;text-transform:uppercase}:host ::ng-deep .mapa-table__card--header mat-icon{height:16px;width:16px;font-size:16px}:host ::ng-deep .mapa-table__card--column{padding:16px 0}:host ::ng-deep .mapa-table__label{margin-top:4px}:host ::ng-deep .mapa-table__column{padding:15px;align-items:center;display:flex}:host ::ng-deep .mapa-table__column--actions{display:flex}:host ::ng-deep .mapa-table__column--actions .mat-icon{color:#ea561d!important}:host ::ng-deep .mapa-table__column--actions-item{display:flex!important;align-items:center;gap:8px}:host ::ng-deep .mapa-table__column--actions-item span{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-table__column--menu{display:flex;align-items:center;justify-content:center;gap:8px}:host ::ng-deep .mapa-table__column--menu .mapa-table__column--menu-item-text{display:flex;align-items:center;justify-content:center;font-size:12px;line-height:16px!important}:host ::ng-deep .mapa-table__column--menu-item{display:flex;align-items:center;width:unset!important;height:unset!important}:host ::ng-deep .mapa-table__column--menu-item img{margin-right:8px}:host ::ng-deep .mapa-table__column--menu-item button{color:#ea561d!important}:host ::ng-deep .mapa-table__column--menu-item button span{font-size:12px;text-transform:uppercase;display:flex}:host ::ng-deep .mapa-table__column--menu-item-disabled{opacity:.45;cursor:not-allowed}:host ::ng-deep .mapa-table__column--header{width:100%}:host ::ng-deep .mapa-table__column--header .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px;font-size:14px;height:14px;width:14px}:host ::ng-deep .mapa-table__column--status{margin:auto;text-align:center;width:min-content;border-radius:4px;padding:4px 8px}:host ::ng-deep .mapa-table__column--status-round{border-radius:50px}:host ::ng-deep .mapa-table__column--ellipsis{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host ::ng-deep .mapa-table__column--no-wrap{white-space:nowrap}:host ::ng-deep .mapa-table__column--wrap{white-space:pre-wrap}:host ::ng-deep .mapa-table__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-table--column-actions,:host ::ng-deep .mapa-table--column-menu{width:100%}:host ::ng-deep .mapa-table__content--value{color:#fff;font-weight:500}:host ::ng-deep .mapa-table .mat-sort-header-arrow{color:transparent}:host ::ng-deep .mapa-table .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-table .mat-sort-header-content mat-icon{margin-left:24px}:host ::ng-deep .mapa-table .mat-mdc-cell{padding:0 10px!important}:host ::ng-deep .mapa-table .mat-mdc-header-cell{padding:0 24px!important}:host ::ng-deep .mapa-table .mat-mdc-table{width:100%;overflow-x:auto}:host ::ng-deep .mapa-table__skeleton-content{padding:24px}:host ::ng-deep .mapa-table__skeleton-header,:host ::ng-deep .mapa-table__skeleton-row{display:flex;gap:12px}:host ::ng-deep .mapa-table__skeleton-header{margin-bottom:16px}:host ::ng-deep .mapa-table__skeleton-row{margin-bottom:12px}:host ::ng-deep .mapa-table__skeleton-cell{height:16px;border-radius:8px;background:linear-gradient(90deg,#f0f2f4 25%,#e6e9ec,#f0f2f4 75%);background-size:200% 100%;animation:mapa-table-skeleton-shimmer 1.2s infinite linear}:host ::ng-deep .mapa-table__skeleton-cell--header{height:20px}@media(max-width:1000px){:host ::ng-deep .mapa-table .mat-mdc-paginator-range-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}:host ::ng-deep .mapa-table .mat-mdc-paginator-range-label{padding:16px 0;text-align:center;width:100%}:host ::ng-deep .mapa-table .mat-mdc-paginator-container{justify-content:center}}:host ::ng-deep .mapa-table .classification{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center}:host ::ng-deep .mapa-table .roundCell{border-radius:10px}:host ::ng-deep .mapa-table .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}:host ::ng-deep .mapa-table .name{color:#181818;text-align:left;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:400;line-height:20px}:host ::ng-deep .mapa-table .cpf{color:#77838f;text-align:left;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-table .label_report{color:#181818;text-align:center;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}@keyframes mapa-table-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MapaMenuComponent, selector: "mapa-menu", inputs: ["items", "data"], outputs: ["emitMenu"] }, { kind: "component", type: MapaSvgIconComponent, selector: "mapa-svg-icon", inputs: ["name", "color"] }, { kind: "component", type: MapaEmptyStateComponent, selector: "mapa-empty", inputs: ["title", "subtitle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i8.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: BubblePaginationDirective, selector: "[appBubblePagination]", inputs: ["showFirstButton", "showLastButton", "renderButtonsNumber", "appCustomLength", "hideDefaultArrows", "bubblePageIndex"], outputs: ["pageIndexChangeEmitter"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, read: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (status.loading) {\n  <section class=\"mapa-table mapa-table__skeleton\" aria-hidden=\"true\">\n    <div class=\"mapa-table__skeleton-content mapa__card mapa__card--show-on-desktop\">\n      <div class=\"mapa-table__skeleton-header\">\n        @for (column of columns; track trackColumn($index, column)) {\n          <div\n            class=\"mapa-table__skeleton-cell mapa-table__skeleton-cell--header\"\n            [style.width]=\"getSkeletonColumnWidth(column)\"\n          ></div>\n        }\n      </div>\n      @for (rowIndex of skeletonRows; track rowIndex) {\n        <div class=\"mapa-table__skeleton-row\">\n          @for (column of columns; track trackColumn($index, column)) {\n            <div\n              class=\"mapa-table__skeleton-cell\"\n              [style.width]=\"getSkeletonColumnWidth(column)\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n  </section>\n} @else if (dataSource.data.length > 0) {\n  <section class=\"mapa-table\">\n    <div class=\"mapa-table--show-on-mobile\">\n      @if (checkbox) {\n        <div class=\"mapa-table__select-all\">\n          @if (selection) {\n            <mat-checkbox\n              (change)=\"$event ? toggleAllRows() : null\"\n              [checked]=\"selection.hasValue() && isAllSelected()\"\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n              (click)=\"$event.stopPropagation()\"\n              color=\"primary\"\n            > {{ selectAllLabel }}</mat-checkbox>\n          }\n        </div>\n      }\n      @for (row of dataSource.data; track row) {\n        <div>\n          <div class=\"mapa-table__card mapa__card\">\n            @for (column of columns; track trackColumn($index, column); let isFirst = $first) {\n              <div [ngClass]=\"'mapa-table__card--column-' + column.key\">\n                @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                  <strong\n                    class=\"mapa-table__card--header\"\n                    [class.mapa-table__checkbox--header]=\"isFirst && checkbox\"\n                  >\n                    <div\n                      [ngTemplateOutlet]=\"tableHeader\"\n                      [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox: false }\"\n                      class=\"hidden\"\n                    ></div>\n                  </strong>\n                }\n                <div\n                  class=\"mapa-table__card--column\"\n                  [class.mapa-table__column--center-cell]=\"column?.align === 'center'\"\n                >\n                  @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                    <div class=\"mapa-table__content\">\n                      <div\n                        [style.width]=\"column?.width\"\n                        [class.mapa-table__column--ellipsis]=\"column?.collapse === 'overflow'\"\n                        [class.mapa-table__column--no-wrap]=\"column?.collapse === 'no-wrap'\"\n                        [class.mapa-table__column--wrap]=\"column?.collapse === 'wrap'\"\n                        [ngClass]=\"[hasCustomClass(column, row, column.key) ? getCustomClass(column, row, column.key) : '']\"\n                      >\n                        @if (column?.status?.color) {\n                          <div\n                            class=\"mapa-table__column--status\"\n                            [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n                            [style.color]=\"getTextColor(column, row)\"\n                            [class.mapa-table__column--status-round]=\"column.status?.style == 'round'\"\n                          >\n                            <div\n                              [ngTemplateOutlet]=\"tableContent\"\n                              [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                            ></div>\n                          </div>\n                        } @else {\n                          <div\n                            [ngTemplateOutlet]=\"tableContent\"\n                            [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                          ></div>\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    @if (column.key === \"actions\" && actions) {\n                      <div>\n                        @for (item of getActionItems(row); track item) {\n                          @if (item.route) {\n                            <a [href]=\"item.route\" [routerLink]=\"item.route\">\n                              <button\n                                class=\"mapa-table__column--actions-item\"\n                                [title]=\"item.text\"\n                                mat-icon-button\n                              >\n                                @if (item.icon) {\n                                  <mat-icon>{{ item.icon }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" />\n                                }\n                                @if (item.svg) {\n                                  <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                                }\n                                @if (item.showText) {\n                                  <span>{{ item.text }}</span>\n                                }\n                              </button>\n                            </a>\n                          } @else {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--actions-item\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n\n                    @if (column.key === \"menu\") {\n                      @if (hasIndividualMenu(row)) {\n                        <div class=\"mapa-table__column--menu\">\n                          @for (item of getMenuItems(row); track item) {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--menu-item\"\n                              [class.mapa-table__column--menu-item-disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              <span class=\"mapa-table__column--menu-item-text\">{{ item.text }}</span>\n                            </button>\n                          }\n                        </div>\n                      } @else {\n                        <div class=\"mapa-table__column--menu\">\n                          @for (item of menuItems; track item) {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--menu-item\"\n                              [class.mapa-table__column--menu-item-disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.image)\"></mapa-svg-icon>\n                              }\n                              <span class=\"mapa-table__column--menu-item-text\">{{ item.text }}</span>\n                            </button>\n                          }\n                        </div>\n                      }\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"mapa-table--show-on-desktop\">\n      @if (desktopTableVisible) {\n        <table\n          mat-table\n          [dataSource]=\"dataSource\"\n          matSort\n          (matSortChange)=\"sortDataFunction($event)\"\n        >\n          @for (column of columns; track trackColumn($index, column); let isFirst = $first) {\n            <ng-container [matColumnDef]=\"column.key\">\n              <th\n                mat-header-cell\n                *matHeaderCellDef\n                mat-sort-header\n                [disabled]=\"!(column.key !== 'actions' ? column.sort : null)\"\n              >\n                <div\n                  [ngTemplateOutlet]=\"tableHeader\"\n                  [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox }\"\n                ></div>\n              </th>\n              <td mat-cell *matCellDef=\"let row\" [style.width]=\"column?.width\">\n                <div\n                  class=\"mapa-table__column\"\n                  (click)=\"emitRowClick(row, '')\"\n                  [class.mapa-table__column--center-cell]=\"column?.align === 'center'\"\n                >\n                  @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                    <div class=\"mapa-table__content\">\n                      <div\n                        [style.width]=\"column?.width\"\n                        [class.mapa-table__column--ellipsis]=\"column?.collapse === 'overflow'\"\n                        [class.mapa-table__column--no-wrap]=\"column?.collapse === 'no-wrap'\"\n                        [class.mapa-table__column--wrap]=\"column?.collapse === 'wrap'\"\n                        [ngClass]=\"[hasCustomClass(column, row, column.key) ? getCustomClass(column, row, column.key) : '']\"\n                      >\n                        @if (column?.status?.color) {\n                          <div\n                            class=\"mapa-table__column--status\"\n                            [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n                            [style.color]=\"getTextColor(column, row)\"\n                            [class.mapa-table__column--status-round]=\"column.status?.style == 'round'\"\n                          >\n                            <div\n                              [ngTemplateOutlet]=\"tableContent\"\n                              [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                            ></div>\n                          </div>\n                        } @else {\n                          <div\n                            [ngTemplateOutlet]=\"tableContent\"\n                            [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                          ></div>\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    @if (column.key === \"actions\" && actions) {\n                      <div class=\"mapa-table__column--actions\">\n                        @for (item of getActionItems(row); track item) {\n                          @if (item.route) {\n                            <a [href]=\"item.route\" [routerLink]=\"item.route\">\n                              <button\n                                class=\"mapa-table__column--actions-item\"\n                                [title]=\"item.text\"\n                                mat-icon-button\n                              >\n                                @if (item.icon) {\n                                  <mat-icon>{{ item.icon }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" />\n                                }\n                                @if (item.svg) {\n                                  <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                                }\n                                @if (item.showText) {\n                                  <span>{{ item.text }}</span>\n                                }\n                              </button>\n                            </a>\n                          } @else {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--actions-item\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n                    @if (column.key === \"menu\") {\n                      <div class=\"mapa-table__column--menu\">\n                        @if (hasIndividualMenu(row)) {\n                          <mapa-menu\n                            [items]=\"getMenuItems(row)\"\n                            [data]=\"row\"\n                            (emitMenu)=\"handleMenu($event)\"\n                          ></mapa-menu>\n                        } @else if (menuItems.length > 0) {\n                          <mapa-menu\n                            [items]=\"menuItems\"\n                            [data]=\"row\"\n                            (emitMenu)=\"handleMenu($event)\"\n                          ></mapa-menu>\n                        }\n                      </div>\n                    }\n                  }\n                </div>\n              </td>\n            </ng-container>\n          }\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: displayedColumns;\"\n            class=\"row-hover\"\n          ></tr>\n        </table>\n      }\n    </div>\n\n    @if (shouldShowPaginator) {\n      <section>\n        <mat-paginator\n          class=\"mapa-table__paginator\"\n          appBubblePagination\n          [appCustomLength]=\"totalCount\"\n          [bubblePageIndex]=\"paginatorPageIndex\"\n          [pageIndex]=\"paginatorPageIndex\"\n          [showFirstButton]=\"paginatorShowFirstButton\"\n          [showLastButton]=\"paginatorShowLastButton\"\n          [renderButtonsNumber]=\"paginatorRenderButtonsNumber\"\n          [hideDefaultArrows]=\"paginatorHideDefaultArrows\"\n          [length]=\"totalCount\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"[5, 10, 25, 100]\"\n          (page)=\"changePage($event)\"\n        ></mat-paginator>\n      </section>\n    }\n  </section>\n} @else if (status.finished && dataSource.data.length === 0) {\n  <section class=\"mapa-table\">\n    <mapa-empty\n      [title]=\"resolvedEmptyTitle\"\n      [subtitle]=\"resolvedEmptySubtitle\"\n    ></mapa-empty>\n  </section>\n}\n\n<ng-template\n  #tableHeader\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n>\n  @if (isFirst && checkbox) {\n    @if (selection) {\n      <mat-checkbox\n        (change)=\"$event ? toggleAllRows() : null\"\n        [checked]=\"selection.hasValue() && isAllSelected()\"\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n        (click)=\"$event.stopPropagation()\"\n        color=\"primary\"\n      ></mat-checkbox>\n    }\n  }\n  <div>\n    <span [innerHTML]=\"column.label | safeHtml\"></span>\n  </div>\n  @if (column.key !== \"actions\" && column.key !== \"menu\" && column.sort) {\n    <div class=\"mapa-table--show-on-desktop\">\n      <mat-icon>filter_list</mat-icon>\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #tableContent\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n  let-row=\"row\"\n>\n  @if (isFirst && checkbox) {\n    <mat-checkbox\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"$event ? selection?.toggle(row) : null; getSelectedValues()\"\n      [checked]=\"selection?.isSelected(row)\"\n      color=\"primary\"\n      class=\"mapa-table__checkbox\"\n    >\n    </mat-checkbox>\n  }\n  @if (isMaskedData(column, row)) {\n    {{ getValueAsDate(column, row) | date: column.mask }}\n  } @else if (column.status) {\n    <span [innerHTML]=\"getStatusLabel(column, row) | safeHtml\"></span>\n  } @else {\n    <span [innerHTML]=\"getCellContent(row, column.key) | safeHtml\"></span>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .mapa-table .mat-mdc-table{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:100%}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-checkbox{margin:6px 8px 0 0;padding:0}:host ::ng-deep .mapa-table td.mat-mdc-cell{padding:16px 0}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-row .mat-mdc-cell{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;color:#50575e}:host ::ng-deep .mapa-table .row-hover:hover{box-shadow:0 2px 4px #00000021;outline:1px solid rgba(238,238,238,.93);cursor:pointer}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-header-cell{border:none;border-bottom:1px solid #eee;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:600;color:#50575e}:host ::ng-deep .mapa-table .mat-mdc-row,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-header-cell,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{background-color:transparent;border-color:#b6b6b6}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background{background-color:#ea561d;border-color:#ea561d}:host ::ng-deep .mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}:host ::ng-deep .mapa-table ::ng-deep .mat-mdc-paginator-page-size-label{display:none}:host ::ng-deep .mapa-table__paginator .mat-paginator-container,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-container{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;justify-content:flex-start}:host ::ng-deep .mapa-table__paginator .mat-paginator-page-size,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-page-size{margin-right:10vw}:host ::ng-deep .mapa-table__paginator .custom-paginator-container{justify-content:flex-end}:host ::ng-deep .mapa-table__paginator .g-bubble-container{display:flex;align-items:center;justify-content:flex-end;gap:8px}:host ::ng-deep .mapa-table__paginator .g-bubble{border-radius:4px;outline:none;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;background:transparent;color:#50575e;cursor:pointer;margin:.4em 0;font-size:14px;min-width:24px;width:auto;min-height:24px;max-height:24px;padding:1px 6px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mapa-table__paginator .g-bubble:hover{background-color:#dfe3e6}:host ::ng-deep .mapa-table__paginator .g-bubble__active{background-color:#ea561d;color:#fff}:host ::ng-deep .mapa-table__paginator .custom-paginator-counter{white-space:nowrap;margin:0 4px 0 10px!important}:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-previous,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-next{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;color:#999}:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-previous[disabled],:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-next[disabled]{color:#dfe3e6}:host ::ng-deep .hidden{display:none}:host ::ng-deep .mapa-table{width:100%;white-space:nowrap}:host ::ng-deep .mapa-table .mat-mdc-icon-button{width:unset!important;height:unset!important;line-height:unset!important;justify-content:flex-start}:host ::ng-deep .mapa-table .mat-mdc-icon-button .mat-mdc-button-touch-target,:host ::ng-deep .mapa-table .mat-mdc-icon-button .mdc-button__label{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%!important}@media(min-width:1201px){:host ::ng-deep .mapa-table--show-on-mobile{display:none}:host ::ng-deep .mapa-table--show-on-desktop{display:block}}@media(max-width:1200px){:host ::ng-deep .mapa-table--show-on-mobile{padding:20px}:host ::ng-deep .mapa-table--show-on-mobile .mapa__card{width:unset!important}:host ::ng-deep .mapa-table--show-on-desktop{display:none}}:host ::ng-deep .mapa-table__select-all{display:flex;align-items:center;padding:16px 24px;font-size:12px;text-transform:uppercase}@media(max-width:1200px){:host ::ng-deep .mapa-table__checkbox{margin-right:8px}:host ::ng-deep .mapa-table__checkbox--header{padding-left:24px}}:host ::ng-deep .mapa-table__card{position:relative;padding:24px;display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}:host ::ng-deep .mapa-table__card--floating-content{display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;gap:8px}:host ::ng-deep .mapa-table__card--floating-actions{position:absolute;bottom:16px;right:16px;color:#ea561d}:host ::ng-deep .mapa-table__card--header{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;font-size:12px;text-transform:uppercase}:host ::ng-deep .mapa-table__card--header mat-icon{height:16px;width:16px;font-size:16px}:host ::ng-deep .mapa-table__card--column{padding:16px 0}:host ::ng-deep .mapa-table__label{margin-top:4px}:host ::ng-deep .mapa-table__column{padding:15px;align-items:center;display:flex}:host ::ng-deep .mapa-table__column--actions{display:flex}:host ::ng-deep .mapa-table__column--actions .mat-icon{color:#ea561d!important}:host ::ng-deep .mapa-table__column--actions-item{display:flex!important;align-items:center;gap:8px}:host ::ng-deep .mapa-table__column--actions-item span{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-table__column--menu{display:flex;align-items:center;justify-content:center;gap:8px}:host ::ng-deep .mapa-table__column--menu .mapa-table__column--menu-item-text{display:flex;align-items:center;justify-content:center;font-size:12px;line-height:16px!important}:host ::ng-deep .mapa-table__column--menu-item{display:flex;align-items:center;width:unset!important;height:unset!important}:host ::ng-deep .mapa-table__column--menu-item img{margin-right:8px}:host ::ng-deep .mapa-table__column--menu-item button{color:#ea561d!important}:host ::ng-deep .mapa-table__column--menu-item button span{font-size:12px;text-transform:uppercase;display:flex}:host ::ng-deep .mapa-table__column--menu-item-disabled{opacity:.45;cursor:not-allowed}:host ::ng-deep .mapa-table__column--header{width:100%}:host ::ng-deep .mapa-table__column--header .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px;font-size:14px;height:14px;width:14px}:host ::ng-deep .mapa-table__column--status{margin:auto;text-align:center;width:min-content;border-radius:4px;padding:4px 8px}:host ::ng-deep .mapa-table__column--status-round{border-radius:50px}:host ::ng-deep .mapa-table__column--ellipsis{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host ::ng-deep .mapa-table__column--no-wrap{white-space:nowrap}:host ::ng-deep .mapa-table__column--wrap{white-space:pre-wrap}:host ::ng-deep .mapa-table__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-table--column-actions,:host ::ng-deep .mapa-table--column-menu{width:100%}:host ::ng-deep .mapa-table__content--value{color:#fff;font-weight:500}:host ::ng-deep .mapa-table .mat-sort-header-arrow{color:transparent}:host ::ng-deep .mapa-table .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-table .mat-sort-header-content mat-icon{margin-left:24px}:host ::ng-deep .mapa-table .mat-mdc-cell{padding:0 10px!important}:host ::ng-deep .mapa-table .mat-mdc-header-cell{padding:0 24px!important}:host ::ng-deep .mapa-table .mat-mdc-table{width:100%;overflow-x:auto}:host ::ng-deep .mapa-table__skeleton-content{padding:24px}:host ::ng-deep .mapa-table__skeleton-header,:host ::ng-deep .mapa-table__skeleton-row{display:flex;gap:12px}:host ::ng-deep .mapa-table__skeleton-header{margin-bottom:16px}:host ::ng-deep .mapa-table__skeleton-row{margin-bottom:12px}:host ::ng-deep .mapa-table__skeleton-cell{height:16px;border-radius:8px;background:linear-gradient(90deg,#f0f2f4 25%,#e6e9ec,#f0f2f4 75%);background-size:200% 100%;animation:mapa-table-skeleton-shimmer 1.2s infinite linear}:host ::ng-deep .mapa-table__skeleton-cell--header{height:20px}@media(max-width:1000px){:host ::ng-deep .mapa-table .mat-mdc-paginator-range-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}:host ::ng-deep .mapa-table .mat-mdc-paginator-range-label{padding:16px 0;text-align:center;width:100%}:host ::ng-deep .mapa-table .mat-mdc-paginator-container{justify-content:center}}:host ::ng-deep .mapa-table .classification{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center}:host ::ng-deep .mapa-table .roundCell{border-radius:10px}:host ::ng-deep .mapa-table .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}:host ::ng-deep .mapa-table .name{color:#181818;text-align:left;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:400;line-height:20px}:host ::ng-deep .mapa-table .cpf{color:#77838f;text-align:left;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-table .label_report{color:#181818;text-align:center;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}@keyframes mapa-table-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MapaMenuComponent, selector: "mapa-menu", inputs: ["items", "data"], outputs: ["emitMenu"] }, { kind: "component", type: MapaSvgIconComponent, selector: "mapa-svg-icon", inputs: ["name", "color"] }, { kind: "component", type: MapaEmptyStateComponent, selector: "mapa-empty", inputs: ["title", "subtitle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i8.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: BubblePaginationDirective, selector: "[appBubblePagination]", inputs: ["showFirstButton", "showLastButton", "renderButtonsNumber", "appCustomLength", "hideDefaultArrows", "bubblePageIndex"], outputs: ["pageIndexChangeEmitter"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaTableComponent, decorators: [{
             type: Component,
@@ -1030,7 +1033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                             useFactory: customPaginatorFactory,
                             deps: [MapaI18nService, Injector],
                         },
-                    ], standalone: true, template: "@if (status.loading) {\n  <section class=\"mapa-table mapa-table__skeleton\" aria-hidden=\"true\">\n    <div class=\"mapa-table__skeleton-content mapa__card mapa__card--show-on-desktop\">\n      <div class=\"mapa-table__skeleton-header\">\n        @for (column of columns; track trackColumn($index, column)) {\n          <div\n            class=\"mapa-table__skeleton-cell mapa-table__skeleton-cell--header\"\n            [style.width]=\"getSkeletonColumnWidth(column)\"\n          ></div>\n        }\n      </div>\n      @for (rowIndex of skeletonRows; track rowIndex) {\n        <div class=\"mapa-table__skeleton-row\">\n          @for (column of columns; track trackColumn($index, column)) {\n            <div\n              class=\"mapa-table__skeleton-cell\"\n              [style.width]=\"getSkeletonColumnWidth(column)\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n  </section>\n} @else if (dataSource.data.length > 0) {\n  <section class=\"mapa-table\">\n    <div class=\"mapa-table--show-on-mobile\">\n      @if (checkbox) {\n        <div class=\"mapa-table__select-all\">\n          @if (selection) {\n            <mat-checkbox\n              (change)=\"$event ? toggleAllRows() : null\"\n              [checked]=\"selection.hasValue() && isAllSelected()\"\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n              (click)=\"$event.stopPropagation()\"\n              color=\"primary\"\n            > {{ selectAllLabel }}</mat-checkbox>\n          }\n        </div>\n      }\n      @for (row of dataSource.data; track row) {\n        <div>\n          <div class=\"mapa-table__card mapa__card\">\n            @for (column of columns; track trackColumn($index, column); let isFirst = $first) {\n              <div [ngClass]=\"'mapa-table__card--column-' + column.key\">\n                @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                  <strong\n                    class=\"mapa-table__card--header\"\n                    [class.mapa-table__checkbox--header]=\"isFirst && checkbox\"\n                  >\n                    <div\n                      [ngTemplateOutlet]=\"tableHeader\"\n                      [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox: false }\"\n                      class=\"hidden\"\n                    ></div>\n                  </strong>\n                }\n                <div\n                  class=\"mapa-table__card--column\"\n                  [class.mapa-table__column--center-cell]=\"column?.align === 'center'\"\n                >\n                  @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                    <div class=\"mapa-table__content\">\n                      <div\n                        [style.width]=\"column?.width\"\n                        [class.mapa-table__column--ellipsis]=\"column?.collapse === 'overflow'\"\n                        [class.mapa-table__column--no-wrap]=\"column?.collapse === 'no-wrap'\"\n                        [class.mapa-table__column--wrap]=\"column?.collapse === 'wrap'\"\n                        [ngClass]=\"[hasCustomClass(column, row, column.key) ? getCustomClass(column, row, column.key) : '']\"\n                      >\n                        @if (column?.status?.color) {\n                          <div\n                            class=\"mapa-table__column--status\"\n                            [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n                            [style.color]=\"getTextColor(column, row)\"\n                            [class.mapa-table__column--status-round]=\"column.status?.style == 'round'\"\n                          >\n                            <div\n                              [ngTemplateOutlet]=\"tableContent\"\n                              [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                            ></div>\n                          </div>\n                        } @else {\n                          <div\n                            [ngTemplateOutlet]=\"tableContent\"\n                            [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                          ></div>\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    @if (column.key === \"actions\" && actions) {\n                      <div>\n                        @for (item of getActionItems(row); track item) {\n                          @if (item.route) {\n                            <a [href]=\"item.route\" [routerLink]=\"item.route\">\n                              <button\n                                class=\"mapa-table__column--actions-item\"\n                                [title]=\"item.text\"\n                                mat-icon-button\n                              >\n                                @if (item.icon) {\n                                  <mat-icon>{{ item.icon }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" />\n                                }\n                                @if (item.svg) {\n                                  <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                                }\n                                @if (item.showText) {\n                                  <span>{{ item.text }}</span>\n                                }\n                              </button>\n                            </a>\n                          } @else {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--actions-item\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n\n                    @if (column.key === \"menu\") {\n                      @if (hasIndividualMenu(row)) {\n                        <div class=\"mapa-table__column--menu\">\n                          @for (item of getMenuItems(row); track item) {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--menu-item\"\n                              [class.mapa-table__column--menu-item-disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              <span class=\"mapa-table__column--menu-item-text\">{{ item.text }}</span>\n                            </button>\n                          }\n                        </div>\n                      } @else {\n                        <div class=\"mapa-table__column--menu\">\n                          @for (item of menuItems; track item) {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--menu-item\"\n                              [class.mapa-table__column--menu-item-disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.image)\"></mapa-svg-icon>\n                              }\n                              <span class=\"mapa-table__column--menu-item-text\">{{ item.text }}</span>\n                            </button>\n                          }\n                        </div>\n                      }\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"mapa-table--show-on-desktop\">\n      @if (desktopTableVisible) {\n        <table\n          mat-table\n          [dataSource]=\"dataSource\"\n          matSort\n          (matSortChange)=\"sortDataFunction($event)\"\n        >\n          @for (column of columns; track trackColumn($index, column); let isFirst = $first) {\n            <ng-container [matColumnDef]=\"column.key\">\n              <th\n                mat-header-cell\n                *matHeaderCellDef\n                mat-sort-header\n                [disabled]=\"!(column.key !== 'actions' ? column.sort : null)\"\n              >\n                <div\n                  [ngTemplateOutlet]=\"tableHeader\"\n                  [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox }\"\n                ></div>\n              </th>\n              <td mat-cell *matCellDef=\"let row\" [style.width]=\"column?.width\">\n                <div\n                  class=\"mapa-table__column\"\n                  (click)=\"emitRowClick(row, '')\"\n                  [class.mapa-table__column--center-cell]=\"column?.align === 'center'\"\n                >\n                  @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                    <div class=\"mapa-table__content\">\n                      <div\n                        [style.width]=\"column?.width\"\n                        [class.mapa-table__column--ellipsis]=\"column?.collapse === 'overflow'\"\n                        [class.mapa-table__column--no-wrap]=\"column?.collapse === 'no-wrap'\"\n                        [class.mapa-table__column--wrap]=\"column?.collapse === 'wrap'\"\n                        [ngClass]=\"[hasCustomClass(column, row, column.key) ? getCustomClass(column, row, column.key) : '']\"\n                      >\n                        @if (column?.status?.color) {\n                          <div\n                            class=\"mapa-table__column--status\"\n                            [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n                            [style.color]=\"getTextColor(column, row)\"\n                            [class.mapa-table__column--status-round]=\"column.status?.style == 'round'\"\n                          >\n                            <div\n                              [ngTemplateOutlet]=\"tableContent\"\n                              [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                            ></div>\n                          </div>\n                        } @else {\n                          <div\n                            [ngTemplateOutlet]=\"tableContent\"\n                            [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                          ></div>\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    @if (column.key === \"actions\" && actions) {\n                      <div class=\"mapa-table__column--actions\">\n                        @for (item of getActionItems(row); track item) {\n                          @if (item.route) {\n                            <a [href]=\"item.route\" [routerLink]=\"item.route\">\n                              <button\n                                class=\"mapa-table__column--actions-item\"\n                                [title]=\"item.text\"\n                                mat-icon-button\n                              >\n                                @if (item.icon) {\n                                  <mat-icon>{{ item.icon }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" />\n                                }\n                                @if (item.svg) {\n                                  <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                                }\n                                @if (item.showText) {\n                                  <span>{{ item.text }}</span>\n                                }\n                              </button>\n                            </a>\n                          } @else {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--actions-item\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n                    @if (column.key === \"menu\") {\n                      <div class=\"mapa-table__column--menu\">\n                        @if (hasIndividualMenu(row)) {\n                          <mapa-menu\n                            [items]=\"getMenuItems(row)\"\n                            [data]=\"row\"\n                            (emitMenu)=\"handleMenu($event)\"\n                          ></mapa-menu>\n                        } @else if (menuItems.length > 0) {\n                          <mapa-menu\n                            [items]=\"menuItems\"\n                            [data]=\"row\"\n                            (emitMenu)=\"handleMenu($event)\"\n                          ></mapa-menu>\n                        }\n                      </div>\n                    }\n                  }\n                </div>\n              </td>\n            </ng-container>\n          }\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: displayedColumns;\"\n            class=\"row-hover\"\n          ></tr>\n        </table>\n      }\n    </div>\n\n    @if (showPaginator) {\n      <section>\n        <mat-paginator\n          class=\"mapa-table__paginator\"\n          appBubblePagination\n          [appCustomLength]=\"totalCount\"\n          [bubblePageIndex]=\"paginatorPageIndex\"\n          [pageIndex]=\"paginatorPageIndex\"\n          [showFirstButton]=\"paginatorShowFirstButton\"\n          [showLastButton]=\"paginatorShowLastButton\"\n          [renderButtonsNumber]=\"paginatorRenderButtonsNumber\"\n          [hideDefaultArrows]=\"paginatorHideDefaultArrows\"\n          [length]=\"totalCount\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"[5, 10, 25, 100]\"\n          (page)=\"changePage($event)\"\n        ></mat-paginator>\n      </section>\n    }\n  </section>\n} @else if (status.finished && dataSource.data.length === 0) {\n  <section class=\"mapa-table\">\n    <mapa-empty\n      [title]=\"resolvedEmptyTitle\"\n      [subtitle]=\"resolvedEmptySubtitle\"\n    ></mapa-empty>\n  </section>\n}\n\n<ng-template\n  #tableHeader\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n>\n  @if (isFirst && checkbox) {\n    @if (selection) {\n      <mat-checkbox\n        (change)=\"$event ? toggleAllRows() : null\"\n        [checked]=\"selection.hasValue() && isAllSelected()\"\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n        (click)=\"$event.stopPropagation()\"\n        color=\"primary\"\n      ></mat-checkbox>\n    }\n  }\n  <div>\n    <span [innerHTML]=\"column.label | safeHtml\"></span>\n  </div>\n  @if (column.key !== \"actions\" && column.key !== \"menu\" && column.sort) {\n    <div class=\"mapa-table--show-on-desktop\">\n      <mat-icon>filter_list</mat-icon>\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #tableContent\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n  let-row=\"row\"\n>\n  @if (isFirst && checkbox) {\n    <mat-checkbox\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"$event ? selection?.toggle(row) : null; getSelectedValues()\"\n      [checked]=\"selection?.isSelected(row)\"\n      color=\"primary\"\n      class=\"mapa-table__checkbox\"\n    >\n    </mat-checkbox>\n  }\n  @if (isMaskedData(column, row)) {\n    {{ getValueAsDate(column, row) | date: column.mask }}\n  } @else if (column.status) {\n    <span [innerHTML]=\"getStatusLabel(column, row) | safeHtml\"></span>\n  } @else {\n    <span [innerHTML]=\"getCellContent(row, column.key) | safeHtml\"></span>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .mapa-table .mat-mdc-table{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:100%}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-checkbox{margin:6px 8px 0 0;padding:0}:host ::ng-deep .mapa-table td.mat-mdc-cell{padding:16px 0}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-row .mat-mdc-cell{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;color:#50575e}:host ::ng-deep .mapa-table .row-hover:hover{box-shadow:0 2px 4px #00000021;outline:1px solid rgba(238,238,238,.93);cursor:pointer}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-header-cell{border:none;border-bottom:1px solid #eee;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:600;color:#50575e}:host ::ng-deep .mapa-table .mat-mdc-row,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-header-cell,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{background-color:transparent;border-color:#b6b6b6}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background{background-color:#ea561d;border-color:#ea561d}:host ::ng-deep .mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}:host ::ng-deep .mapa-table ::ng-deep .mat-mdc-paginator-page-size-label{display:none}:host ::ng-deep .mapa-table__paginator .mat-paginator-container,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-container{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;justify-content:flex-start}:host ::ng-deep .mapa-table__paginator .mat-paginator-page-size,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-page-size{margin-right:10vw}:host ::ng-deep .mapa-table__paginator .custom-paginator-container{justify-content:flex-end}:host ::ng-deep .mapa-table__paginator .g-bubble-container{display:flex;align-items:center;justify-content:flex-end;gap:8px}:host ::ng-deep .mapa-table__paginator .g-bubble{border-radius:4px;outline:none;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;background:transparent;color:#50575e;cursor:pointer;margin:.4em 0;font-size:14px;min-width:24px;width:auto;min-height:24px;max-height:24px;padding:1px 6px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mapa-table__paginator .g-bubble:hover{background-color:#dfe3e6}:host ::ng-deep .mapa-table__paginator .g-bubble__active{background-color:#ea561d;color:#fff}:host ::ng-deep .mapa-table__paginator .custom-paginator-counter{white-space:nowrap;margin:0 4px 0 10px!important}:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-previous,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-next{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;color:#999}:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-previous[disabled],:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-next[disabled]{color:#dfe3e6}:host ::ng-deep .hidden{display:none}:host ::ng-deep .mapa-table{width:100%;white-space:nowrap}:host ::ng-deep .mapa-table .mat-mdc-icon-button{width:unset!important;height:unset!important;line-height:unset!important;justify-content:flex-start}:host ::ng-deep .mapa-table .mat-mdc-icon-button .mat-mdc-button-touch-target,:host ::ng-deep .mapa-table .mat-mdc-icon-button .mdc-button__label{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%!important}@media(min-width:1201px){:host ::ng-deep .mapa-table--show-on-mobile{display:none}:host ::ng-deep .mapa-table--show-on-desktop{display:block}}@media(max-width:1200px){:host ::ng-deep .mapa-table--show-on-mobile{padding:20px}:host ::ng-deep .mapa-table--show-on-mobile .mapa__card{width:unset!important}:host ::ng-deep .mapa-table--show-on-desktop{display:none}}:host ::ng-deep .mapa-table__select-all{display:flex;align-items:center;padding:16px 24px;font-size:12px;text-transform:uppercase}@media(max-width:1200px){:host ::ng-deep .mapa-table__checkbox{margin-right:8px}:host ::ng-deep .mapa-table__checkbox--header{padding-left:24px}}:host ::ng-deep .mapa-table__card{position:relative;padding:24px;display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}:host ::ng-deep .mapa-table__card--floating-content{display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;gap:8px}:host ::ng-deep .mapa-table__card--floating-actions{position:absolute;bottom:16px;right:16px;color:#ea561d}:host ::ng-deep .mapa-table__card--header{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;font-size:12px;text-transform:uppercase}:host ::ng-deep .mapa-table__card--header mat-icon{height:16px;width:16px;font-size:16px}:host ::ng-deep .mapa-table__card--column{padding:16px 0}:host ::ng-deep .mapa-table__label{margin-top:4px}:host ::ng-deep .mapa-table__column{padding:15px;align-items:center;display:flex}:host ::ng-deep .mapa-table__column--actions{display:flex}:host ::ng-deep .mapa-table__column--actions .mat-icon{color:#ea561d!important}:host ::ng-deep .mapa-table__column--actions-item{display:flex!important;align-items:center;gap:8px}:host ::ng-deep .mapa-table__column--actions-item span{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-table__column--menu{display:flex;align-items:center;justify-content:center;gap:8px}:host ::ng-deep .mapa-table__column--menu .mapa-table__column--menu-item-text{display:flex;align-items:center;justify-content:center;font-size:12px;line-height:16px!important}:host ::ng-deep .mapa-table__column--menu-item{display:flex;align-items:center;width:unset!important;height:unset!important}:host ::ng-deep .mapa-table__column--menu-item img{margin-right:8px}:host ::ng-deep .mapa-table__column--menu-item button{color:#ea561d!important}:host ::ng-deep .mapa-table__column--menu-item button span{font-size:12px;text-transform:uppercase;display:flex}:host ::ng-deep .mapa-table__column--menu-item-disabled{opacity:.45;cursor:not-allowed}:host ::ng-deep .mapa-table__column--header{width:100%}:host ::ng-deep .mapa-table__column--header .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px;font-size:14px;height:14px;width:14px}:host ::ng-deep .mapa-table__column--status{margin:auto;text-align:center;width:min-content;border-radius:4px;padding:4px 8px}:host ::ng-deep .mapa-table__column--status-round{border-radius:50px}:host ::ng-deep .mapa-table__column--ellipsis{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host ::ng-deep .mapa-table__column--no-wrap{white-space:nowrap}:host ::ng-deep .mapa-table__column--wrap{white-space:pre-wrap}:host ::ng-deep .mapa-table__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-table--column-actions,:host ::ng-deep .mapa-table--column-menu{width:100%}:host ::ng-deep .mapa-table__content--value{color:#fff;font-weight:500}:host ::ng-deep .mapa-table .mat-sort-header-arrow{color:transparent}:host ::ng-deep .mapa-table .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-table .mat-sort-header-content mat-icon{margin-left:24px}:host ::ng-deep .mapa-table .mat-mdc-cell{padding:0 10px!important}:host ::ng-deep .mapa-table .mat-mdc-header-cell{padding:0 24px!important}:host ::ng-deep .mapa-table .mat-mdc-table{width:100%;overflow-x:auto}:host ::ng-deep .mapa-table__skeleton-content{padding:24px}:host ::ng-deep .mapa-table__skeleton-header,:host ::ng-deep .mapa-table__skeleton-row{display:flex;gap:12px}:host ::ng-deep .mapa-table__skeleton-header{margin-bottom:16px}:host ::ng-deep .mapa-table__skeleton-row{margin-bottom:12px}:host ::ng-deep .mapa-table__skeleton-cell{height:16px;border-radius:8px;background:linear-gradient(90deg,#f0f2f4 25%,#e6e9ec,#f0f2f4 75%);background-size:200% 100%;animation:mapa-table-skeleton-shimmer 1.2s infinite linear}:host ::ng-deep .mapa-table__skeleton-cell--header{height:20px}@media(max-width:1000px){:host ::ng-deep .mapa-table .mat-mdc-paginator-range-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}:host ::ng-deep .mapa-table .mat-mdc-paginator-range-label{padding:16px 0;text-align:center;width:100%}:host ::ng-deep .mapa-table .mat-mdc-paginator-container{justify-content:center}}:host ::ng-deep .mapa-table .classification{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center}:host ::ng-deep .mapa-table .roundCell{border-radius:10px}:host ::ng-deep .mapa-table .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}:host ::ng-deep .mapa-table .name{color:#181818;text-align:left;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:400;line-height:20px}:host ::ng-deep .mapa-table .cpf{color:#77838f;text-align:left;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-table .label_report{color:#181818;text-align:center;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}@keyframes mapa-table-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
+                    ], standalone: true, template: "@if (status.loading) {\n  <section class=\"mapa-table mapa-table__skeleton\" aria-hidden=\"true\">\n    <div class=\"mapa-table__skeleton-content mapa__card mapa__card--show-on-desktop\">\n      <div class=\"mapa-table__skeleton-header\">\n        @for (column of columns; track trackColumn($index, column)) {\n          <div\n            class=\"mapa-table__skeleton-cell mapa-table__skeleton-cell--header\"\n            [style.width]=\"getSkeletonColumnWidth(column)\"\n          ></div>\n        }\n      </div>\n      @for (rowIndex of skeletonRows; track rowIndex) {\n        <div class=\"mapa-table__skeleton-row\">\n          @for (column of columns; track trackColumn($index, column)) {\n            <div\n              class=\"mapa-table__skeleton-cell\"\n              [style.width]=\"getSkeletonColumnWidth(column)\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n  </section>\n} @else if (dataSource.data.length > 0) {\n  <section class=\"mapa-table\">\n    <div class=\"mapa-table--show-on-mobile\">\n      @if (checkbox) {\n        <div class=\"mapa-table__select-all\">\n          @if (selection) {\n            <mat-checkbox\n              (change)=\"$event ? toggleAllRows() : null\"\n              [checked]=\"selection.hasValue() && isAllSelected()\"\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n              (click)=\"$event.stopPropagation()\"\n              color=\"primary\"\n            > {{ selectAllLabel }}</mat-checkbox>\n          }\n        </div>\n      }\n      @for (row of dataSource.data; track row) {\n        <div>\n          <div class=\"mapa-table__card mapa__card\">\n            @for (column of columns; track trackColumn($index, column); let isFirst = $first) {\n              <div [ngClass]=\"'mapa-table__card--column-' + column.key\">\n                @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                  <strong\n                    class=\"mapa-table__card--header\"\n                    [class.mapa-table__checkbox--header]=\"isFirst && checkbox\"\n                  >\n                    <div\n                      [ngTemplateOutlet]=\"tableHeader\"\n                      [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox: false }\"\n                      class=\"hidden\"\n                    ></div>\n                  </strong>\n                }\n                <div\n                  class=\"mapa-table__card--column\"\n                  [class.mapa-table__column--center-cell]=\"column?.align === 'center'\"\n                >\n                  @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                    <div class=\"mapa-table__content\">\n                      <div\n                        [style.width]=\"column?.width\"\n                        [class.mapa-table__column--ellipsis]=\"column?.collapse === 'overflow'\"\n                        [class.mapa-table__column--no-wrap]=\"column?.collapse === 'no-wrap'\"\n                        [class.mapa-table__column--wrap]=\"column?.collapse === 'wrap'\"\n                        [ngClass]=\"[hasCustomClass(column, row, column.key) ? getCustomClass(column, row, column.key) : '']\"\n                      >\n                        @if (column?.status?.color) {\n                          <div\n                            class=\"mapa-table__column--status\"\n                            [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n                            [style.color]=\"getTextColor(column, row)\"\n                            [class.mapa-table__column--status-round]=\"column.status?.style == 'round'\"\n                          >\n                            <div\n                              [ngTemplateOutlet]=\"tableContent\"\n                              [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                            ></div>\n                          </div>\n                        } @else {\n                          <div\n                            [ngTemplateOutlet]=\"tableContent\"\n                            [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                          ></div>\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    @if (column.key === \"actions\" && actions) {\n                      <div>\n                        @for (item of getActionItems(row); track item) {\n                          @if (item.route) {\n                            <a [href]=\"item.route\" [routerLink]=\"item.route\">\n                              <button\n                                class=\"mapa-table__column--actions-item\"\n                                [title]=\"item.text\"\n                                mat-icon-button\n                              >\n                                @if (item.icon) {\n                                  <mat-icon>{{ item.icon }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" />\n                                }\n                                @if (item.svg) {\n                                  <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                                }\n                                @if (item.showText) {\n                                  <span>{{ item.text }}</span>\n                                }\n                              </button>\n                            </a>\n                          } @else {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--actions-item\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n\n                    @if (column.key === \"menu\") {\n                      @if (hasIndividualMenu(row)) {\n                        <div class=\"mapa-table__column--menu\">\n                          @for (item of getMenuItems(row); track item) {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--menu-item\"\n                              [class.mapa-table__column--menu-item-disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              <span class=\"mapa-table__column--menu-item-text\">{{ item.text }}</span>\n                            </button>\n                          }\n                        </div>\n                      } @else {\n                        <div class=\"mapa-table__column--menu\">\n                          @for (item of menuItems; track item) {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--menu-item\"\n                              [class.mapa-table__column--menu-item-disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.image)\"></mapa-svg-icon>\n                              }\n                              <span class=\"mapa-table__column--menu-item-text\">{{ item.text }}</span>\n                            </button>\n                          }\n                        </div>\n                      }\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"mapa-table--show-on-desktop\">\n      @if (desktopTableVisible) {\n        <table\n          mat-table\n          [dataSource]=\"dataSource\"\n          matSort\n          (matSortChange)=\"sortDataFunction($event)\"\n        >\n          @for (column of columns; track trackColumn($index, column); let isFirst = $first) {\n            <ng-container [matColumnDef]=\"column.key\">\n              <th\n                mat-header-cell\n                *matHeaderCellDef\n                mat-sort-header\n                [disabled]=\"!(column.key !== 'actions' ? column.sort : null)\"\n              >\n                <div\n                  [ngTemplateOutlet]=\"tableHeader\"\n                  [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox }\"\n                ></div>\n              </th>\n              <td mat-cell *matCellDef=\"let row\" [style.width]=\"column?.width\">\n                <div\n                  class=\"mapa-table__column\"\n                  (click)=\"emitRowClick(row, '')\"\n                  [class.mapa-table__column--center-cell]=\"column?.align === 'center'\"\n                >\n                  @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                    <div class=\"mapa-table__content\">\n                      <div\n                        [style.width]=\"column?.width\"\n                        [class.mapa-table__column--ellipsis]=\"column?.collapse === 'overflow'\"\n                        [class.mapa-table__column--no-wrap]=\"column?.collapse === 'no-wrap'\"\n                        [class.mapa-table__column--wrap]=\"column?.collapse === 'wrap'\"\n                        [ngClass]=\"[hasCustomClass(column, row, column.key) ? getCustomClass(column, row, column.key) : '']\"\n                      >\n                        @if (column?.status?.color) {\n                          <div\n                            class=\"mapa-table__column--status\"\n                            [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n                            [style.color]=\"getTextColor(column, row)\"\n                            [class.mapa-table__column--status-round]=\"column.status?.style == 'round'\"\n                          >\n                            <div\n                              [ngTemplateOutlet]=\"tableContent\"\n                              [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                            ></div>\n                          </div>\n                        } @else {\n                          <div\n                            [ngTemplateOutlet]=\"tableContent\"\n                            [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                          ></div>\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    @if (column.key === \"actions\" && actions) {\n                      <div class=\"mapa-table__column--actions\">\n                        @for (item of getActionItems(row); track item) {\n                          @if (item.route) {\n                            <a [href]=\"item.route\" [routerLink]=\"item.route\">\n                              <button\n                                class=\"mapa-table__column--actions-item\"\n                                [title]=\"item.text\"\n                                mat-icon-button\n                              >\n                                @if (item.icon) {\n                                  <mat-icon>{{ item.icon }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" />\n                                }\n                                @if (item.svg) {\n                                  <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                                }\n                                @if (item.showText) {\n                                  <span>{{ item.text }}</span>\n                                }\n                              </button>\n                            </a>\n                          } @else {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--actions-item\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n                    @if (column.key === \"menu\") {\n                      <div class=\"mapa-table__column--menu\">\n                        @if (hasIndividualMenu(row)) {\n                          <mapa-menu\n                            [items]=\"getMenuItems(row)\"\n                            [data]=\"row\"\n                            (emitMenu)=\"handleMenu($event)\"\n                          ></mapa-menu>\n                        } @else if (menuItems.length > 0) {\n                          <mapa-menu\n                            [items]=\"menuItems\"\n                            [data]=\"row\"\n                            (emitMenu)=\"handleMenu($event)\"\n                          ></mapa-menu>\n                        }\n                      </div>\n                    }\n                  }\n                </div>\n              </td>\n            </ng-container>\n          }\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: displayedColumns;\"\n            class=\"row-hover\"\n          ></tr>\n        </table>\n      }\n    </div>\n\n    @if (shouldShowPaginator) {\n      <section>\n        <mat-paginator\n          class=\"mapa-table__paginator\"\n          appBubblePagination\n          [appCustomLength]=\"totalCount\"\n          [bubblePageIndex]=\"paginatorPageIndex\"\n          [pageIndex]=\"paginatorPageIndex\"\n          [showFirstButton]=\"paginatorShowFirstButton\"\n          [showLastButton]=\"paginatorShowLastButton\"\n          [renderButtonsNumber]=\"paginatorRenderButtonsNumber\"\n          [hideDefaultArrows]=\"paginatorHideDefaultArrows\"\n          [length]=\"totalCount\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"[5, 10, 25, 100]\"\n          (page)=\"changePage($event)\"\n        ></mat-paginator>\n      </section>\n    }\n  </section>\n} @else if (status.finished && dataSource.data.length === 0) {\n  <section class=\"mapa-table\">\n    <mapa-empty\n      [title]=\"resolvedEmptyTitle\"\n      [subtitle]=\"resolvedEmptySubtitle\"\n    ></mapa-empty>\n  </section>\n}\n\n<ng-template\n  #tableHeader\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n>\n  @if (isFirst && checkbox) {\n    @if (selection) {\n      <mat-checkbox\n        (change)=\"$event ? toggleAllRows() : null\"\n        [checked]=\"selection.hasValue() && isAllSelected()\"\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n        (click)=\"$event.stopPropagation()\"\n        color=\"primary\"\n      ></mat-checkbox>\n    }\n  }\n  <div>\n    <span [innerHTML]=\"column.label | safeHtml\"></span>\n  </div>\n  @if (column.key !== \"actions\" && column.key !== \"menu\" && column.sort) {\n    <div class=\"mapa-table--show-on-desktop\">\n      <mat-icon>filter_list</mat-icon>\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #tableContent\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n  let-row=\"row\"\n>\n  @if (isFirst && checkbox) {\n    <mat-checkbox\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"$event ? selection?.toggle(row) : null; getSelectedValues()\"\n      [checked]=\"selection?.isSelected(row)\"\n      color=\"primary\"\n      class=\"mapa-table__checkbox\"\n    >\n    </mat-checkbox>\n  }\n  @if (isMaskedData(column, row)) {\n    {{ getValueAsDate(column, row) | date: column.mask }}\n  } @else if (column.status) {\n    <span [innerHTML]=\"getStatusLabel(column, row) | safeHtml\"></span>\n  } @else {\n    <span [innerHTML]=\"getCellContent(row, column.key) | safeHtml\"></span>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .mapa-table .mat-mdc-table{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:100%}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-checkbox{margin:6px 8px 0 0;padding:0}:host ::ng-deep .mapa-table td.mat-mdc-cell{padding:16px 0}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-row .mat-mdc-cell{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;color:#50575e}:host ::ng-deep .mapa-table .row-hover:hover{box-shadow:0 2px 4px #00000021;outline:1px solid rgba(238,238,238,.93);cursor:pointer}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-header-cell{border:none;border-bottom:1px solid #eee;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:600;color:#50575e}:host ::ng-deep .mapa-table .mat-mdc-row,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-header-cell,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{background-color:transparent;border-color:#b6b6b6}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background{background-color:#ea561d;border-color:#ea561d}:host ::ng-deep .mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}:host ::ng-deep .mapa-table ::ng-deep .mat-mdc-paginator-page-size-label{display:none}:host ::ng-deep .mapa-table__paginator .mat-paginator-container,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-container{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;justify-content:flex-start}:host ::ng-deep .mapa-table__paginator .mat-paginator-page-size,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-page-size{margin-right:10vw}:host ::ng-deep .mapa-table__paginator .custom-paginator-container{justify-content:flex-end}:host ::ng-deep .mapa-table__paginator .g-bubble-container{display:flex;align-items:center;justify-content:flex-end;gap:8px}:host ::ng-deep .mapa-table__paginator .g-bubble{border-radius:4px;outline:none;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;background:transparent;color:#50575e;cursor:pointer;margin:.4em 0;font-size:14px;min-width:24px;width:auto;min-height:24px;max-height:24px;padding:1px 6px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mapa-table__paginator .g-bubble:hover{background-color:#dfe3e6}:host ::ng-deep .mapa-table__paginator .g-bubble__active{background-color:#ea561d;color:#fff}:host ::ng-deep .mapa-table__paginator .custom-paginator-counter{white-space:nowrap;margin:0 4px 0 10px!important}:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-previous,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-next{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;color:#999}:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-previous[disabled],:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-next[disabled]{color:#dfe3e6}:host ::ng-deep .hidden{display:none}:host ::ng-deep .mapa-table{width:100%;white-space:nowrap}:host ::ng-deep .mapa-table .mat-mdc-icon-button{width:unset!important;height:unset!important;line-height:unset!important;justify-content:flex-start}:host ::ng-deep .mapa-table .mat-mdc-icon-button .mat-mdc-button-touch-target,:host ::ng-deep .mapa-table .mat-mdc-icon-button .mdc-button__label{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%!important}@media(min-width:1201px){:host ::ng-deep .mapa-table--show-on-mobile{display:none}:host ::ng-deep .mapa-table--show-on-desktop{display:block}}@media(max-width:1200px){:host ::ng-deep .mapa-table--show-on-mobile{padding:20px}:host ::ng-deep .mapa-table--show-on-mobile .mapa__card{width:unset!important}:host ::ng-deep .mapa-table--show-on-desktop{display:none}}:host ::ng-deep .mapa-table__select-all{display:flex;align-items:center;padding:16px 24px;font-size:12px;text-transform:uppercase}@media(max-width:1200px){:host ::ng-deep .mapa-table__checkbox{margin-right:8px}:host ::ng-deep .mapa-table__checkbox--header{padding-left:24px}}:host ::ng-deep .mapa-table__card{position:relative;padding:24px;display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}:host ::ng-deep .mapa-table__card--floating-content{display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;gap:8px}:host ::ng-deep .mapa-table__card--floating-actions{position:absolute;bottom:16px;right:16px;color:#ea561d}:host ::ng-deep .mapa-table__card--header{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;font-size:12px;text-transform:uppercase}:host ::ng-deep .mapa-table__card--header mat-icon{height:16px;width:16px;font-size:16px}:host ::ng-deep .mapa-table__card--column{padding:16px 0}:host ::ng-deep .mapa-table__label{margin-top:4px}:host ::ng-deep .mapa-table__column{padding:15px;align-items:center;display:flex}:host ::ng-deep .mapa-table__column--actions{display:flex}:host ::ng-deep .mapa-table__column--actions .mat-icon{color:#ea561d!important}:host ::ng-deep .mapa-table__column--actions-item{display:flex!important;align-items:center;gap:8px}:host ::ng-deep .mapa-table__column--actions-item span{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-table__column--menu{display:flex;align-items:center;justify-content:center;gap:8px}:host ::ng-deep .mapa-table__column--menu .mapa-table__column--menu-item-text{display:flex;align-items:center;justify-content:center;font-size:12px;line-height:16px!important}:host ::ng-deep .mapa-table__column--menu-item{display:flex;align-items:center;width:unset!important;height:unset!important}:host ::ng-deep .mapa-table__column--menu-item img{margin-right:8px}:host ::ng-deep .mapa-table__column--menu-item button{color:#ea561d!important}:host ::ng-deep .mapa-table__column--menu-item button span{font-size:12px;text-transform:uppercase;display:flex}:host ::ng-deep .mapa-table__column--menu-item-disabled{opacity:.45;cursor:not-allowed}:host ::ng-deep .mapa-table__column--header{width:100%}:host ::ng-deep .mapa-table__column--header .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px;font-size:14px;height:14px;width:14px}:host ::ng-deep .mapa-table__column--status{margin:auto;text-align:center;width:min-content;border-radius:4px;padding:4px 8px}:host ::ng-deep .mapa-table__column--status-round{border-radius:50px}:host ::ng-deep .mapa-table__column--ellipsis{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host ::ng-deep .mapa-table__column--no-wrap{white-space:nowrap}:host ::ng-deep .mapa-table__column--wrap{white-space:pre-wrap}:host ::ng-deep .mapa-table__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-table--column-actions,:host ::ng-deep .mapa-table--column-menu{width:100%}:host ::ng-deep .mapa-table__content--value{color:#fff;font-weight:500}:host ::ng-deep .mapa-table .mat-sort-header-arrow{color:transparent}:host ::ng-deep .mapa-table .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-table .mat-sort-header-content mat-icon{margin-left:24px}:host ::ng-deep .mapa-table .mat-mdc-cell{padding:0 10px!important}:host ::ng-deep .mapa-table .mat-mdc-header-cell{padding:0 24px!important}:host ::ng-deep .mapa-table .mat-mdc-table{width:100%;overflow-x:auto}:host ::ng-deep .mapa-table__skeleton-content{padding:24px}:host ::ng-deep .mapa-table__skeleton-header,:host ::ng-deep .mapa-table__skeleton-row{display:flex;gap:12px}:host ::ng-deep .mapa-table__skeleton-header{margin-bottom:16px}:host ::ng-deep .mapa-table__skeleton-row{margin-bottom:12px}:host ::ng-deep .mapa-table__skeleton-cell{height:16px;border-radius:8px;background:linear-gradient(90deg,#f0f2f4 25%,#e6e9ec,#f0f2f4 75%);background-size:200% 100%;animation:mapa-table-skeleton-shimmer 1.2s infinite linear}:host ::ng-deep .mapa-table__skeleton-cell--header{height:20px}@media(max-width:1000px){:host ::ng-deep .mapa-table .mat-mdc-paginator-range-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}:host ::ng-deep .mapa-table .mat-mdc-paginator-range-label{padding:16px 0;text-align:center;width:100%}:host ::ng-deep .mapa-table .mat-mdc-paginator-container{justify-content:center}}:host ::ng-deep .mapa-table .classification{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center}:host ::ng-deep .mapa-table .roundCell{border-radius:10px}:host ::ng-deep .mapa-table .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}:host ::ng-deep .mapa-table .name{color:#181818;text-align:left;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:400;line-height:20px}:host ::ng-deep .mapa-table .cpf{color:#77838f;text-align:left;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-table .label_report{color:#181818;text-align:center;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}@keyframes mapa-table-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MapaI18nService }], propDecorators: { columns: [{
                 type: Input
             }], data: [{