mapa-library-ui 0.10.1 → 0.11.1

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

@@ -2,7 +2,6 @@ import * as i0 from '@angular/core';
 import { Directive, Host, Self, Optional, EventEmitter, Component, ViewEncapsulation, Input, Output, ViewChild, NgModule } from '@angular/core';
 import * as i1 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
-import { SelectionModel } from '@angular/cdk/collections';
 import moment from 'moment';
 import * as i6 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
@@ -241,14 +240,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }] }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }]; } });
 
 class MapaTableComponent {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this.columns = [];
         this.data = [];
+        this.pageIndex = 1;
+        this.pageSize = 5;
+        this.totalCount = 0;
+        this.totalPages = 0;
+        this.groupReport = [];
         this.rowClick = new EventEmitter();
         this.selectedRows = new EventEmitter();
-        this.groupReport = [];
+        this.onChangePage = new EventEmitter();
         this.displayedColumns = [];
-        this.selection = new SelectionModel(true, []);
     }
     ngOnInit() {
         if (this.isGroupReport) {
@@ -258,48 +262,66 @@ class MapaTableComponent {
     }
     ngAfterViewInit() {
         this.dataSource = new MatTableDataSource(this.data);
-        this.dataSource.paginator = this.paginator;
         this.dataSource.sort = this.sort;
-        this.displayedColumns = this.columns.map(column => column.key);
+        this.displayedColumns = this.columns.map((column) => column.key);
     }
     ngOnChanges(changes) {
-        if (changes['filterControl'] && this.filterControl) {
+        if (changes["data"]) {
+            this.data = changes["data"].currentValue;
+            this.dataSource.data = this.data;
+            this.cdr.detectChanges();
+        }
+        if (changes["filterControl"] && this.filterControl) {
             this.setupFilter();
         }
     }
     setupFilter() {
-        this.filterControl.valueChanges.subscribe((value) => {
-            this.dataSource.filter = value.trim().toLowerCase();
-        });
-        this.dataSource.filterPredicate = (data, filter) => {
-            const dataStr = Object.keys(data)
-                .reduce((currentTerm, key) => {
-                return currentTerm + (data[key] && data[key].toString().toLowerCase() || '') + ' ';
-            }, '').trim().toLowerCase();
-            return dataStr.indexOf(filter) !== -1;
-        };
+        if (this.dataSource) {
+            this.filterControl.valueChanges.subscribe((value) => {
+                this.dataSource.filter = value.trim().toLowerCase();
+            });
+            this.dataSource.filterPredicate = (data, filter) => {
+                const dataStr = Object.keys(data)
+                    .reduce((currentTerm, key) => {
+                    return (currentTerm +
+                        ((data[key] && data[key].toString().toLowerCase()) || "") +
+                        " ");
+                }, "")
+                    .trim()
+                    .toLowerCase();
+                return dataStr.indexOf(filter) !== -1;
+            };
+        }
     }
     isAllSelected() {
-        const numSelected = this.selection.selected.length;
-        const numRows = this.dataSource.data.length;
-        return numSelected === numRows;
+        if (this.selection) {
+            const numSelected = this.selection.selected.length;
+            const numRows = this.dataSource.data.length;
+            return numSelected === numRows;
+        }
+        return false;
     }
     toggleAllRows() {
-        if (this.isAllSelected()) {
-            this.selection.clear();
-            this.getSelectedValues();
-        }
-        else {
-            const dataAsPeriodicElements = this.dataSource.data;
-            dataAsPeriodicElements.forEach((row) => this.selection.select(row));
-            this.getSelectedValues();
+        if (this.selection) {
+            if (this.isAllSelected()) {
+                this.selection.clear();
+                this.getSelectedValues();
+            }
+            else {
+                const dataAsPeriodicElements = this.dataSource.data;
+                dataAsPeriodicElements.forEach((row) => this.selection?.select(row));
+                this.getSelectedValues();
+            }
         }
     }
     checkboxLabel(row) {
-        if (!row) {
-            return `${this.isAllSelected() ? "deselect" : "select"} all`;
+        if (this.selection) {
+            if (!row) {
+                return `${this.isAllSelected() ? "deselect" : "select"} all`;
+            }
+            return `${this.selection.isSelected(row) ? "deselect" : "select"} row ${row.position + 1}`;
         }
-        return `${this.selection.isSelected(row) ? "deselect" : "select"} row ${row.position + 1}`;
+        return '';
     }
     sortData(column) {
         if (column.sort) {
@@ -335,46 +357,58 @@ class MapaTableComponent {
         this.rowClick.emit(rowData);
     }
     toggleSelection(row) {
-        if (this.selection.isSelected(row)) {
-            this.selection.deselect(row);
-        }
-        else {
-            this.selection.select(row);
+        if (this.selection) {
+            if (this.selection.isSelected(row)) {
+                this.selection.deselect(row);
+            }
+            else {
+                this.selection.select(row);
+            }
+            this.getSelectedValues();
         }
-        this.getSelectedValues();
     }
     getSelectedValues() {
-        const selectedRows = this.selection.selected.map((row) => {
-            return { row };
-        });
-        this.selectedRows.emit(selectedRows);
-        console.log(selectedRows);
+        if (this.selection) {
+            const selectedRows = this.selection.selected.map((row) => {
+                return { row };
+            });
+            this.selectedRows.emit(selectedRows);
+            console.log(selectedRows);
+        }
     }
     generateColumns() {
         const columns = [
-            { key: 'name', label: '', sort: false },
-            { key: 'general', label: '% Geral', sort: false }
+            { key: "name", label: "", sort: false },
+            { key: "general", label: "% Geral", sort: false },
         ];
-        this.groupReport.forEach(reportItem => {
-            reportItem.dimensions.forEach(dimension => {
+        this.groupReport.forEach((reportItem) => {
+            reportItem.dimensions.forEach((dimension) => {
                 const dimensionKey = dimension.dimensionName.toLowerCase();
                 const dimensionLabel = dimension.dimensionName;
                 if (!this.columnExists(columns, dimensionKey)) {
-                    columns.push({ key: dimensionKey, label: dimensionLabel, sort: dimension.sort || false });
+                    columns.push({
+                        key: dimensionKey,
+                        label: dimensionLabel,
+                        sort: dimension.sort || false,
+                    });
                 }
             });
-            reportItem.indicators.forEach(indicator => {
+            reportItem.indicators.forEach((indicator) => {
                 const indicatorKey = indicator.name.toLowerCase();
                 const indicatorLabel = indicator.name;
                 if (!this.columnExists(columns, indicatorKey)) {
-                    columns.push({ key: indicatorKey, label: indicatorLabel, sort: indicator.sort || false });
+                    columns.push({
+                        key: indicatorKey,
+                        label: indicatorLabel,
+                        sort: indicator.sort || false,
+                    });
                 }
             });
         });
         this.columns = columns;
     }
     columnExists(columns, key) {
-        return columns.some(column => column.key === key);
+        return columns.some((column) => column.key === key);
     }
     generateGroupData() {
         const result = [];
@@ -382,18 +416,18 @@ class MapaTableComponent {
             const dataItem = {
                 name: item.candidate.name,
                 cpf: item.candidate.cpf,
-                general: item.candidate.general
+                general: item.candidate.general,
             };
-            item.dimensions.forEach(dimension => {
+            item.dimensions.forEach((dimension) => {
                 dataItem[dimension.dimensionName.toLowerCase()] = {
                     scoreT: dimension.escoreT,
-                    direction: dimension.direction
+                    direction: dimension.direction,
                 };
             });
-            item.indicators.forEach(indicator => {
+            item.indicators.forEach((indicator) => {
                 dataItem[indicator.name.toLowerCase()] = {
                     interval: indicator.interval,
-                    direction: indicator.direction
+                    direction: indicator.direction,
                 };
             });
             result.push(dataItem);
@@ -402,7 +436,7 @@ class MapaTableComponent {
         console.log(this.data);
     }
     isBoolean(column, row) {
-        return typeof row[column.key] === 'boolean';
+        return typeof row[column.key] === "boolean";
     }
     isMaskedData(column, row) {
         const formats = [moment.ISO_8601, "MM/DD/YYYY  :)  HH*mm*ss"];
@@ -416,53 +450,70 @@ class MapaTableComponent {
         if (!this.isGroupReport) {
             return {};
         }
-        const value = row[column.key].interval ? row[column.key].interval : row[column.key].scoreT;
+        const value = row[column.key].interval
+            ? row[column.key].interval
+            : row[column.key].scoreT;
         const direction = row[column.key].direction;
         const classes = {
-            'red-0-25': value >= 0 && value <= 25 && direction === 'Negativa',
-            'red-26-50': value >= 26 && value <= 50 && direction === 'Negativa',
-            'red-51-75': value >= 51 && value <= 75 && direction === 'Negativa',
-            'red-76-100': value >= 76 && value <= 100 && direction === 'Negativa',
-            'blue-0-20': value >= 0 && value <= 20 && direction === 'Positiva',
-            'blue-21-40': value >= 21 && value <= 40 && direction === 'Positiva',
-            'blue-41-60': value >= 41 && value <= 60 && direction === 'Positiva',
-            'blue-61-80': value >= 61 && value <= 80 && direction === 'Positiva',
-            'blue-81-100': value >= 81 && value <= 100 && direction === 'Positiva',
+            "red-0-25": value >= 0 && value <= 25 && direction === "Negativa",
+            "red-26-50": value >= 26 && value <= 50 && direction === "Negativa",
+            "red-51-75": value >= 51 && value <= 75 && direction === "Negativa",
+            "red-76-100": value >= 76 && value <= 100 && direction === "Negativa",
+            "blue-0-20": value >= 0 && value <= 20 && direction === "Positiva",
+            "blue-21-40": value >= 21 && value <= 40 && direction === "Positiva",
+            "blue-41-60": value >= 41 && value <= 60 && direction === "Positiva",
+            "blue-61-80": value >= 61 && value <= 80 && direction === "Positiva",
+            "blue-81-100": value >= 81 && value <= 100 && direction === "Positiva",
         };
         return classes;
     }
     getRowClass() {
         return {
-            'row-hover': !this.isGroupReport
+            "row-hover": !this.isGroupReport,
         };
     }
+    changePage(event) {
+        this.onChangePage.emit(event);
+    }
 }
-MapaTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaTableComponent, selector: "mapa-table", inputs: { columns: "columns", data: "data", checkbox: "checkbox", actions: "actions", filterControl: "filterControl", groupReport: "groupReport", isGroupReport: "isGroupReport" }, outputs: { rowClick: "rowClick", selectedRows: "selectedRows" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"mapa-table\">\n  <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"sortDataFunction($event)\">\n    <ng-container\n      *ngFor=\"let column of columns; let isFirst = first\"\n      [matColumnDef]=\"column.key\" \n    >\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\">\n        <div \n          class=\"mapa-table__column\"\n          (click)=\"emitRowClick(row, '')\"\n          *ngIf=\"column.key !== 'actions'; else columnActions\"\n        > \n          <ng-container *ngIf=\"isFirst && checkbox\">\n            <mat-checkbox\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"$event ? selection.toggle(row) : null; getSelectedValues()\"\n              [checked]=\"selection.isSelected(row)\"\n            >\n            </mat-checkbox>\n          </ng-container>\n          <div class=\"table__column\" [ngClass]=\"{ 'center-cell': isGroupReport }\">\n            <div *ngIf=\"!isGroupReport\">\n              <ng-container *ngIf=\"isMaskedData(column, row); else statusContent\">\n                {{ getValueAsDate(column, row) | date: column.mask }}\n              </ng-container>\n              <ng-template #statusContent>\n                <ng-container *ngIf=\"column.statusLabel; else commonContent\">\n                  <ng-container *ngIf=\"isBoolean(column, row); else commonStatus\">\n                    {{ column.statusLabel[row[column.key] ? 1 : 0] }}\n                  </ng-container>\n                  <ng-template #commonStatus>{{ column.statusLabel[row[column.key] - 1] }}</ng-template>\n                </ng-container>\n                <ng-template #commonContent>{{ row[column.key] }}</ng-template>\n              </ng-template>\n              <ng-template #statusContent>\n                <ng-template #commonContent>{{ row[column.key] }}</ng-template>\n              </ng-template>\n            </div>\n            <div *ngIf=\"isGroupReport\">\n              <div [ngClass]=\"getCellClass(column, row)\">\n                <ng-container *ngIf=\"column.key === 'name' || column.key === 'cpf' || column.key === 'general'; else scoreOrIntervalContent\">\n                  <div *ngIf=\"column.key === 'name'\">\n                    <div class=\"name\">\n                      {{ row.name }}<br>\n                    </div>\n                    <div class=\"cpf\">\n                      {{row.cpf}}\n                    </div>\n                  </div>\n                  <div *ngIf=\"column.key === 'general'\" class=\"general\">\n                    {{ row[column.key] }}%\n                  </div>\n                </ng-container>\n                <ng-template #scoreOrIntervalContent>\n                  <ng-container *ngIf=\"row[column.key] && row[column.key].scoreT; else intervalContent\">\n                    {{ row[column.key].scoreT }}%\n                  </ng-container>\n                  <ng-template #intervalContent>\n                    {{ row[column.key]?.interval }}%\n                  </ng-template>\n                </ng-template>\n              </div>\n            </div>\n          </div>\n        </div>\n        <ng-template #columnActions>\n          <div class=\"mapa-table__column--actions\">\n            <mat-icon (click)=\"emitRowClick(row, 'edit')\">edit</mat-icon>\n            <mat-icon (click)=\"emitRowClick(row, 'delete')\">delete</mat-icon>\n            <mat-icon (click)=\"emitRowClick(row, 'visibility')\">visibility</mat-icon>\n          </div>\n        </ng-template>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"getRowClass()\"></tr>\n  </table>\n  <mat-paginator \n    class=\"mapa-table__paginator-legacy\"\n    itemsPerPageLabel=\"Item por p\u00E1gina\"\n    appStylePaginatorMv\n    [length]=\"dataSource ? dataSource.data.length : 0\"\n    [pageSize]=\"5\"\n    [pageSizeOptions]=\"[5, 10, 25, 100]\"\n  >\n  </mat-paginator>\n</div>\n\n<ng-template\n  #tableHeader\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n>\n  <div class=\"mapa-table__column mapa-table__column--header\">\n    <ng-container *ngIf=\"isFirst && checkbox\">\n      <mat-checkbox\n        (change)=\"$event ? toggleAllRows() : null\"\n        [checked]=\"selection.hasValue() && isAllSelected()\"\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n        (click)=\"$event.stopPropagation()\"\n      >\n      </mat-checkbox>\n    </ng-container>\n    <div class=\"mapa-table__label\" [ngClass]=\"{ 'label_report': isGroupReport }\">\n      {{ column.label }}\n    </div>\n    <div *ngIf=\"column.key !== 'actions' && column.sort\">\n      <mat-icon>filter_list</mat-icon>\n    </div>\n  </div>\n</ng-template>\n", styles: [".mapa-table .mat-table{font-family:SF-Pro;width:100%}.mapa-table .mat-table .mat-checkbox{margin:6px 8px 0 0;padding:0}.mapa-table td.mat-cell{padding:16px 0}.mapa-table .mat-table .mat-row .mat-cell{font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400;color:#50575e}.mapa-table .row-hover:hover{box-shadow:0 2px 4px #00000021;outline:1px solid rgba(238,238,238,.93);cursor:pointer}.mapa-table .mat-table .mat-header-cell{border:none;border-bottom:1px solid #eee;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:600;color:#50575e}.mapa-table .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px 0 0;font-size:14px;height:14px;width:14px}.mapa-table .mat-mdc-row,.mapa-table .mdc-data-table__content,.mapa-table .mat-mdc-header-cell{--mat-table-row-item-label-text-font: \"SF-Pro\"}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#b6b6b6}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-frame{border-color:#ea561d}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-background{background-color:transparent}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-background{background-color:#ea561d}.mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}.mapa-table ::ng-deep .mat-mdc-paginator-page-size-label{display:none}.mapa-table__paginator-legacy .mat-paginator-container{font-family:SF-Pro!important;justify-content:flex-start}.mapa-table__paginator-legacy .mat-paginator-page-size{margin-right:10vw}.mapa-table__paginator-legacy .custom-paginator-container{justify-content:flex-end}.mapa-table__paginator-legacy .custom-paginator-counter{white-space:nowrap;margin:0 4px 0 10px!important}.mapa-table__paginator-legacy .custom-paginator-page{border-radius:4px;outline:none;border:none;margin:.4em;font-size:14px;min-width:24px;width:auto;min-height:24px;max-height:24px;padding:1px 6px}.mapa-table__paginator-legacy .custom-paginator-page-enabled{color:#50575e;background:transparent;cursor:pointer}.mapa-table__paginator-legacy .custom-paginator-page-enabled:hover{background-color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-page-disabled{background-color:#ea561d;color:#fff}.mapa-table__paginator-legacy .custom-paginator-arrow-disabled{color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-arrow-enabled{color:#999}.mapa-table{width:100%;white-space:nowrap}.mapa-table__label{margin-top:4px}.mapa-table__column{padding:15px;align-items:center;display:flex}.mapa-table__column--actions{display:flex}.mapa-table__column--actions .mat-icon{color:#ea561d!important}.mapa-table__column--header{width:100%}.mapa-table__column--header .mat-icon{margin:0 7px}.mapa-table .mat-sort-header-arrow{color:transparent}.mapa-table .mat-sort-header-content{width:100%}.mapa-table .mat-cell,.mapa-table .mat-header-cell{padding:0 10px!important}.mapa-table .mat-table{width:100%;overflow-x:auto}.mapa-table .red-0-25{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#f598a7;color:#000}.mapa-table .red-26-50{width:43px;height:43px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#f56580;color:#000}.mapa-table .red-51-75{width:46px;height:46px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#f4284e;color:#fff}.mapa-table .red-76-100{width:48px;height:48px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#c11c2f;color:#fff}.mapa-table .blue-0-20{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#96f2ee;color:#fff}.mapa-table .blue-21-40{width:42px;height:42px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#68ceee;color:#fff}.mapa-table .blue-41-60{width:44px;height:44px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#2d9ced;color:#fff}.mapa-table .blue-61-80{width:46px;height:46px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#0e6ece;color:#fff}.mapa-table .blue-81-100{width:48px;height:48px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#073e92;color:#fff}.mapa-table .roundCell{border-radius:10px}.mapa-table .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}.mapa-table .name{color:#181818;text-align:left;font-family:SF-Pro;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.mapa-table .cpf{color:var(--Grey-Grey-30, #8c8f94);text-align:left;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.mapa-table .center-cell{margin:auto}.mapa-table .label_report{color:#181818;text-align:center;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:400;line-height:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: PaginatorLegacyDirective, selector: "[appStylePaginatorMv]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None });
+MapaTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MapaTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaTableComponent, selector: "mapa-table", inputs: { columns: "columns", data: "data", pageIndex: "pageIndex", pageSize: "pageSize", totalCount: "totalCount", totalPages: "totalPages", checkbox: "checkbox", selection: "selection", actions: "actions", filterControl: "filterControl", groupReport: "groupReport", isGroupReport: "isGroupReport" }, outputs: { rowClick: "rowClick", selectedRows: "selectedRows", onChangePage: "onChangePage" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, read: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"mapa-table\">\n  <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"sortDataFunction($event)\">\n    <ng-container\n      *ngFor=\"let column of columns; let isFirst = first\"\n      [matColumnDef]=\"column.key\" \n    >\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\">\n        <div \n          class=\"mapa-table__column\"\n          (click)=\"emitRowClick(row, '')\"\n          *ngIf=\"column.key !== 'actions'; else columnActions\"\n        > \n          <ng-container *ngIf=\"isFirst && checkbox\">\n            <mat-checkbox\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"$event ? selection?.toggle(row) : null; getSelectedValues()\"\n              [checked]=\"selection?.isSelected(row)\"\n            >\n            </mat-checkbox>\n          </ng-container>\n          <div class=\"table__column\" [ngClass]=\"{ 'center-cell': isGroupReport }\">\n            <div *ngIf=\"!isGroupReport\">\n              <ng-container *ngIf=\"isMaskedData(column, row); else statusContent\">\n                {{ getValueAsDate(column, row) | date: column.mask }}\n              </ng-container>\n              <ng-template #statusContent>\n                <ng-container *ngIf=\"column.statusLabel; else commonContent\">\n                  <ng-container *ngIf=\"isBoolean(column, row); else commonStatus\">\n                    {{ column.statusLabel[row[column.key] ? 1 : 0] }}\n                  </ng-container>\n                  <ng-template #commonStatus>{{ column.statusLabel[row[column.key] - 1] }}</ng-template>\n                </ng-container>\n                <ng-template #commonContent>{{ row[column.key] }}</ng-template>\n              </ng-template>\n              <ng-template #statusContent>\n                <ng-template #commonContent>{{ row[column.key] }}</ng-template>\n              </ng-template>\n            </div>\n            <div *ngIf=\"isGroupReport\">\n              <div [ngClass]=\"getCellClass(column, row)\">\n                <ng-container *ngIf=\"column.key === 'name' || column.key === 'cpf' || column.key === 'general'; else scoreOrIntervalContent\">\n                  <div *ngIf=\"column.key === 'name'\">\n                    <div class=\"name\">\n                      {{ row.name }}<br>\n                    </div>\n                    <div class=\"cpf\">\n                      {{row.cpf}}\n                    </div>\n                  </div>\n                  <div *ngIf=\"column.key === 'general'\" class=\"general\">\n                    {{ row[column.key] }}%\n                  </div>\n                </ng-container>\n                <ng-template #scoreOrIntervalContent>\n                  <ng-container *ngIf=\"row[column.key] && row[column.key].scoreT; else intervalContent\">\n                    {{ row[column.key].scoreT }}%\n                  </ng-container>\n                  <ng-template #intervalContent>\n                    {{ row[column.key]?.interval }}%\n                  </ng-template>\n                </ng-template>\n              </div>\n            </div>\n          </div>\n        </div>\n        <ng-template #columnActions>\n          <div class=\"mapa-table__column--actions\">\n            <mat-icon (click)=\"emitRowClick(row, 'edit')\">edit</mat-icon>\n            <mat-icon (click)=\"emitRowClick(row, 'delete')\">delete</mat-icon>\n            <mat-icon (click)=\"emitRowClick(row, 'visibility')\">visibility</mat-icon>\n          </div>\n        </ng-template>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"getRowClass()\"></tr>\n  </table>\n  <mat-paginator \n    class=\"mapa-table__paginator-legacy\"\n    itemsPerPageLabel=\"Item por p\u00E1gina\"\n    appStylePaginatorMv\n    [length]=\"totalCount\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"[5, 10, 25, 100]\"\n    (page)=\"changePage($event)\"\n  >\n  </mat-paginator>\n</div>\n\n<ng-template\n  #tableHeader\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n>\n  <div class=\"mapa-table__column mapa-table__column--header\">\n    <ng-container *ngIf=\"isFirst && checkbox\">\n      <mat-checkbox\n        (change)=\"$event ? toggleAllRows() : null\"\n        [checked]=\"selection.hasValue() && isAllSelected()\"\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n        (click)=\"$event.stopPropagation()\"\n      >\n      </mat-checkbox>\n    </ng-container>\n    <div class=\"mapa-table__label\" [ngClass]=\"{ 'label_report': isGroupReport }\">\n      {{ column.label }}\n    </div>\n    <div *ngIf=\"column.key !== 'actions' && column.sort\">\n      <mat-icon>filter_list</mat-icon>\n    </div>\n  </div>\n</ng-template>\n", styles: [".mapa-table .mat-table{font-family:SF-Pro;width:100%}.mapa-table .mat-table .mat-checkbox{margin:6px 8px 0 0;padding:0}.mapa-table td.mat-cell{padding:16px 0}.mapa-table .mat-table .mat-row .mat-cell{font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400;color:#50575e}.mapa-table .row-hover:hover{box-shadow:0 2px 4px #00000021;outline:1px solid rgba(238,238,238,.93);cursor:pointer}.mapa-table .mat-table .mat-header-cell{border:none;border-bottom:1px solid #eee;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:600;color:#50575e}.mapa-table .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px 0 0;font-size:14px;height:14px;width:14px}.mapa-table .mat-mdc-row,.mapa-table .mdc-data-table__content,.mapa-table .mat-mdc-header-cell{--mat-table-row-item-label-text-font: \"SF-Pro\"}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#b6b6b6}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-frame{border-color:#ea561d}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-background{background-color:transparent}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-background{background-color:#ea561d}.mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}.mapa-table ::ng-deep .mat-mdc-paginator-page-size-label{display:none}.mapa-table__paginator-legacy .mat-paginator-container{font-family:SF-Pro!important;justify-content:flex-start}.mapa-table__paginator-legacy .mat-paginator-page-size{margin-right:10vw}.mapa-table__paginator-legacy .custom-paginator-container{justify-content:flex-end}.mapa-table__paginator-legacy .custom-paginator-counter{white-space:nowrap;margin:0 4px 0 10px!important}.mapa-table__paginator-legacy .custom-paginator-page{border-radius:4px;outline:none;border:none;margin:.4em;font-size:14px;min-width:24px;width:auto;min-height:24px;max-height:24px;padding:1px 6px}.mapa-table__paginator-legacy .custom-paginator-page-enabled{color:#50575e;background:transparent;cursor:pointer}.mapa-table__paginator-legacy .custom-paginator-page-enabled:hover{background-color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-page-disabled{background-color:#ea561d;color:#fff}.mapa-table__paginator-legacy .custom-paginator-arrow-disabled{color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-arrow-enabled{color:#999}.mapa-table{width:100%;white-space:nowrap}.mapa-table__label{margin-top:4px}.mapa-table__column{padding:15px;align-items:center;display:flex}.mapa-table__column--actions{display:flex}.mapa-table__column--actions .mat-icon{color:#ea561d!important}.mapa-table__column--header{width:100%}.mapa-table__column--header .mat-icon{margin:0 7px}.mapa-table .mat-sort-header-arrow{color:transparent}.mapa-table .mat-sort-header-content{width:100%}.mapa-table .mat-cell,.mapa-table .mat-header-cell{padding:0 10px!important}.mapa-table .mat-table{width:100%;overflow-x:auto}.mapa-table .red-0-25{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#f598a7;color:#000}.mapa-table .red-26-50{width:43px;height:43px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#f56580;color:#000}.mapa-table .red-51-75{width:46px;height:46px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#f4284e;color:#fff}.mapa-table .red-76-100{width:48px;height:48px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#c11c2f;color:#fff}.mapa-table .blue-0-20{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#96f2ee;color:#fff}.mapa-table .blue-21-40{width:42px;height:42px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#68ceee;color:#fff}.mapa-table .blue-41-60{width:44px;height:44px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#2d9ced;color:#fff}.mapa-table .blue-61-80{width:46px;height:46px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#0e6ece;color:#fff}.mapa-table .blue-81-100{width:48px;height:48px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#073e92;color:#fff}.mapa-table .roundCell{border-radius:10px}.mapa-table .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}.mapa-table .name{color:#181818;text-align:left;font-family:SF-Pro;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.mapa-table .cpf{color:var(--Grey-Grey-30, #8c8f94);text-align:left;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.mapa-table .center-cell{margin:auto}.mapa-table .label_report{color:#181818;text-align:center;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:400;line-height:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: PaginatorLegacyDirective, selector: "[appStylePaginatorMv]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-table", encapsulation: ViewEncapsulation.None, template: "<div class=\"mapa-table\">\n  <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"sortDataFunction($event)\">\n    <ng-container\n      *ngFor=\"let column of columns; let isFirst = first\"\n      [matColumnDef]=\"column.key\" \n    >\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\">\n        <div \n          class=\"mapa-table__column\"\n          (click)=\"emitRowClick(row, '')\"\n          *ngIf=\"column.key !== 'actions'; else columnActions\"\n        > \n          <ng-container *ngIf=\"isFirst && checkbox\">\n            <mat-checkbox\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"$event ? selection.toggle(row) : null; getSelectedValues()\"\n              [checked]=\"selection.isSelected(row)\"\n            >\n            </mat-checkbox>\n          </ng-container>\n          <div class=\"table__column\" [ngClass]=\"{ 'center-cell': isGroupReport }\">\n            <div *ngIf=\"!isGroupReport\">\n              <ng-container *ngIf=\"isMaskedData(column, row); else statusContent\">\n                {{ getValueAsDate(column, row) | date: column.mask }}\n              </ng-container>\n              <ng-template #statusContent>\n                <ng-container *ngIf=\"column.statusLabel; else commonContent\">\n                  <ng-container *ngIf=\"isBoolean(column, row); else commonStatus\">\n                    {{ column.statusLabel[row[column.key] ? 1 : 0] }}\n                  </ng-container>\n                  <ng-template #commonStatus>{{ column.statusLabel[row[column.key] - 1] }}</ng-template>\n                </ng-container>\n                <ng-template #commonContent>{{ row[column.key] }}</ng-template>\n              </ng-template>\n              <ng-template #statusContent>\n                <ng-template #commonContent>{{ row[column.key] }}</ng-template>\n              </ng-template>\n            </div>\n            <div *ngIf=\"isGroupReport\">\n              <div [ngClass]=\"getCellClass(column, row)\">\n                <ng-container *ngIf=\"column.key === 'name' || column.key === 'cpf' || column.key === 'general'; else scoreOrIntervalContent\">\n                  <div *ngIf=\"column.key === 'name'\">\n                    <div class=\"name\">\n                      {{ row.name }}<br>\n                    </div>\n                    <div class=\"cpf\">\n                      {{row.cpf}}\n                    </div>\n                  </div>\n                  <div *ngIf=\"column.key === 'general'\" class=\"general\">\n                    {{ row[column.key] }}%\n                  </div>\n                </ng-container>\n                <ng-template #scoreOrIntervalContent>\n                  <ng-container *ngIf=\"row[column.key] && row[column.key].scoreT; else intervalContent\">\n                    {{ row[column.key].scoreT }}%\n                  </ng-container>\n                  <ng-template #intervalContent>\n                    {{ row[column.key]?.interval }}%\n                  </ng-template>\n                </ng-template>\n              </div>\n            </div>\n          </div>\n        </div>\n        <ng-template #columnActions>\n          <div class=\"mapa-table__column--actions\">\n            <mat-icon (click)=\"emitRowClick(row, 'edit')\">edit</mat-icon>\n            <mat-icon (click)=\"emitRowClick(row, 'delete')\">delete</mat-icon>\n            <mat-icon (click)=\"emitRowClick(row, 'visibility')\">visibility</mat-icon>\n          </div>\n        </ng-template>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"getRowClass()\"></tr>\n  </table>\n  <mat-paginator \n    class=\"mapa-table__paginator-legacy\"\n    itemsPerPageLabel=\"Item por p\u00E1gina\"\n    appStylePaginatorMv\n    [length]=\"dataSource ? dataSource.data.length : 0\"\n    [pageSize]=\"5\"\n    [pageSizeOptions]=\"[5, 10, 25, 100]\"\n  >\n  </mat-paginator>\n</div>\n\n<ng-template\n  #tableHeader\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n>\n  <div class=\"mapa-table__column mapa-table__column--header\">\n    <ng-container *ngIf=\"isFirst && checkbox\">\n      <mat-checkbox\n        (change)=\"$event ? toggleAllRows() : null\"\n        [checked]=\"selection.hasValue() && isAllSelected()\"\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n        (click)=\"$event.stopPropagation()\"\n      >\n      </mat-checkbox>\n    </ng-container>\n    <div class=\"mapa-table__label\" [ngClass]=\"{ 'label_report': isGroupReport }\">\n      {{ column.label }}\n    </div>\n    <div *ngIf=\"column.key !== 'actions' && column.sort\">\n      <mat-icon>filter_list</mat-icon>\n    </div>\n  </div>\n</ng-template>\n", styles: [".mapa-table .mat-table{font-family:SF-Pro;width:100%}.mapa-table .mat-table .mat-checkbox{margin:6px 8px 0 0;padding:0}.mapa-table td.mat-cell{padding:16px 0}.mapa-table .mat-table .mat-row .mat-cell{font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400;color:#50575e}.mapa-table .row-hover:hover{box-shadow:0 2px 4px #00000021;outline:1px solid rgba(238,238,238,.93);cursor:pointer}.mapa-table .mat-table .mat-header-cell{border:none;border-bottom:1px solid #eee;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:600;color:#50575e}.mapa-table .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px 0 0;font-size:14px;height:14px;width:14px}.mapa-table .mat-mdc-row,.mapa-table .mdc-data-table__content,.mapa-table .mat-mdc-header-cell{--mat-table-row-item-label-text-font: \"SF-Pro\"}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#b6b6b6}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-frame{border-color:#ea561d}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-background{background-color:transparent}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-background{background-color:#ea561d}.mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}.mapa-table ::ng-deep .mat-mdc-paginator-page-size-label{display:none}.mapa-table__paginator-legacy .mat-paginator-container{font-family:SF-Pro!important;justify-content:flex-start}.mapa-table__paginator-legacy .mat-paginator-page-size{margin-right:10vw}.mapa-table__paginator-legacy .custom-paginator-container{justify-content:flex-end}.mapa-table__paginator-legacy .custom-paginator-counter{white-space:nowrap;margin:0 4px 0 10px!important}.mapa-table__paginator-legacy .custom-paginator-page{border-radius:4px;outline:none;border:none;margin:.4em;font-size:14px;min-width:24px;width:auto;min-height:24px;max-height:24px;padding:1px 6px}.mapa-table__paginator-legacy .custom-paginator-page-enabled{color:#50575e;background:transparent;cursor:pointer}.mapa-table__paginator-legacy .custom-paginator-page-enabled:hover{background-color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-page-disabled{background-color:#ea561d;color:#fff}.mapa-table__paginator-legacy .custom-paginator-arrow-disabled{color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-arrow-enabled{color:#999}.mapa-table{width:100%;white-space:nowrap}.mapa-table__label{margin-top:4px}.mapa-table__column{padding:15px;align-items:center;display:flex}.mapa-table__column--actions{display:flex}.mapa-table__column--actions .mat-icon{color:#ea561d!important}.mapa-table__column--header{width:100%}.mapa-table__column--header .mat-icon{margin:0 7px}.mapa-table .mat-sort-header-arrow{color:transparent}.mapa-table .mat-sort-header-content{width:100%}.mapa-table .mat-cell,.mapa-table .mat-header-cell{padding:0 10px!important}.mapa-table .mat-table{width:100%;overflow-x:auto}.mapa-table .red-0-25{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#f598a7;color:#000}.mapa-table .red-26-50{width:43px;height:43px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#f56580;color:#000}.mapa-table .red-51-75{width:46px;height:46px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#f4284e;color:#fff}.mapa-table .red-76-100{width:48px;height:48px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#c11c2f;color:#fff}.mapa-table .blue-0-20{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#96f2ee;color:#fff}.mapa-table .blue-21-40{width:42px;height:42px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#68ceee;color:#fff}.mapa-table .blue-41-60{width:44px;height:44px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#2d9ced;color:#fff}.mapa-table .blue-61-80{width:46px;height:46px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#0e6ece;color:#fff}.mapa-table .blue-81-100{width:48px;height:48px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#073e92;color:#fff}.mapa-table .roundCell{border-radius:10px}.mapa-table .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}.mapa-table .name{color:#181818;text-align:left;font-family:SF-Pro;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.mapa-table .cpf{color:var(--Grey-Grey-30, #8c8f94);text-align:left;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.mapa-table .center-cell{margin:auto}.mapa-table .label_report{color:#181818;text-align:center;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:400;line-height:16px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { columns: [{
+            args: [{ selector: "mapa-table", encapsulation: ViewEncapsulation.None, template: "<div class=\"mapa-table\">\n  <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"sortDataFunction($event)\">\n    <ng-container\n      *ngFor=\"let column of columns; let isFirst = first\"\n      [matColumnDef]=\"column.key\" \n    >\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\">\n        <div \n          class=\"mapa-table__column\"\n          (click)=\"emitRowClick(row, '')\"\n          *ngIf=\"column.key !== 'actions'; else columnActions\"\n        > \n          <ng-container *ngIf=\"isFirst && checkbox\">\n            <mat-checkbox\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"$event ? selection?.toggle(row) : null; getSelectedValues()\"\n              [checked]=\"selection?.isSelected(row)\"\n            >\n            </mat-checkbox>\n          </ng-container>\n          <div class=\"table__column\" [ngClass]=\"{ 'center-cell': isGroupReport }\">\n            <div *ngIf=\"!isGroupReport\">\n              <ng-container *ngIf=\"isMaskedData(column, row); else statusContent\">\n                {{ getValueAsDate(column, row) | date: column.mask }}\n              </ng-container>\n              <ng-template #statusContent>\n                <ng-container *ngIf=\"column.statusLabel; else commonContent\">\n                  <ng-container *ngIf=\"isBoolean(column, row); else commonStatus\">\n                    {{ column.statusLabel[row[column.key] ? 1 : 0] }}\n                  </ng-container>\n                  <ng-template #commonStatus>{{ column.statusLabel[row[column.key] - 1] }}</ng-template>\n                </ng-container>\n                <ng-template #commonContent>{{ row[column.key] }}</ng-template>\n              </ng-template>\n              <ng-template #statusContent>\n                <ng-template #commonContent>{{ row[column.key] }}</ng-template>\n              </ng-template>\n            </div>\n            <div *ngIf=\"isGroupReport\">\n              <div [ngClass]=\"getCellClass(column, row)\">\n                <ng-container *ngIf=\"column.key === 'name' || column.key === 'cpf' || column.key === 'general'; else scoreOrIntervalContent\">\n                  <div *ngIf=\"column.key === 'name'\">\n                    <div class=\"name\">\n                      {{ row.name }}<br>\n                    </div>\n                    <div class=\"cpf\">\n                      {{row.cpf}}\n                    </div>\n                  </div>\n                  <div *ngIf=\"column.key === 'general'\" class=\"general\">\n                    {{ row[column.key] }}%\n                  </div>\n                </ng-container>\n                <ng-template #scoreOrIntervalContent>\n                  <ng-container *ngIf=\"row[column.key] && row[column.key].scoreT; else intervalContent\">\n                    {{ row[column.key].scoreT }}%\n                  </ng-container>\n                  <ng-template #intervalContent>\n                    {{ row[column.key]?.interval }}%\n                  </ng-template>\n                </ng-template>\n              </div>\n            </div>\n          </div>\n        </div>\n        <ng-template #columnActions>\n          <div class=\"mapa-table__column--actions\">\n            <mat-icon (click)=\"emitRowClick(row, 'edit')\">edit</mat-icon>\n            <mat-icon (click)=\"emitRowClick(row, 'delete')\">delete</mat-icon>\n            <mat-icon (click)=\"emitRowClick(row, 'visibility')\">visibility</mat-icon>\n          </div>\n        </ng-template>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"getRowClass()\"></tr>\n  </table>\n  <mat-paginator \n    class=\"mapa-table__paginator-legacy\"\n    itemsPerPageLabel=\"Item por p\u00E1gina\"\n    appStylePaginatorMv\n    [length]=\"totalCount\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"[5, 10, 25, 100]\"\n    (page)=\"changePage($event)\"\n  >\n  </mat-paginator>\n</div>\n\n<ng-template\n  #tableHeader\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n>\n  <div class=\"mapa-table__column mapa-table__column--header\">\n    <ng-container *ngIf=\"isFirst && checkbox\">\n      <mat-checkbox\n        (change)=\"$event ? toggleAllRows() : null\"\n        [checked]=\"selection.hasValue() && isAllSelected()\"\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n        (click)=\"$event.stopPropagation()\"\n      >\n      </mat-checkbox>\n    </ng-container>\n    <div class=\"mapa-table__label\" [ngClass]=\"{ 'label_report': isGroupReport }\">\n      {{ column.label }}\n    </div>\n    <div *ngIf=\"column.key !== 'actions' && column.sort\">\n      <mat-icon>filter_list</mat-icon>\n    </div>\n  </div>\n</ng-template>\n", styles: [".mapa-table .mat-table{font-family:SF-Pro;width:100%}.mapa-table .mat-table .mat-checkbox{margin:6px 8px 0 0;padding:0}.mapa-table td.mat-cell{padding:16px 0}.mapa-table .mat-table .mat-row .mat-cell{font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400;color:#50575e}.mapa-table .row-hover:hover{box-shadow:0 2px 4px #00000021;outline:1px solid rgba(238,238,238,.93);cursor:pointer}.mapa-table .mat-table .mat-header-cell{border:none;border-bottom:1px solid #eee;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:600;color:#50575e}.mapa-table .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px 0 0;font-size:14px;height:14px;width:14px}.mapa-table .mat-mdc-row,.mapa-table .mdc-data-table__content,.mapa-table .mat-mdc-header-cell{--mat-table-row-item-label-text-font: \"SF-Pro\"}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#b6b6b6}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-frame{border-color:#ea561d}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-background{background-color:transparent}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-background{background-color:#ea561d}.mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}.mapa-table ::ng-deep .mat-mdc-paginator-page-size-label{display:none}.mapa-table__paginator-legacy .mat-paginator-container{font-family:SF-Pro!important;justify-content:flex-start}.mapa-table__paginator-legacy .mat-paginator-page-size{margin-right:10vw}.mapa-table__paginator-legacy .custom-paginator-container{justify-content:flex-end}.mapa-table__paginator-legacy .custom-paginator-counter{white-space:nowrap;margin:0 4px 0 10px!important}.mapa-table__paginator-legacy .custom-paginator-page{border-radius:4px;outline:none;border:none;margin:.4em;font-size:14px;min-width:24px;width:auto;min-height:24px;max-height:24px;padding:1px 6px}.mapa-table__paginator-legacy .custom-paginator-page-enabled{color:#50575e;background:transparent;cursor:pointer}.mapa-table__paginator-legacy .custom-paginator-page-enabled:hover{background-color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-page-disabled{background-color:#ea561d;color:#fff}.mapa-table__paginator-legacy .custom-paginator-arrow-disabled{color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-arrow-enabled{color:#999}.mapa-table{width:100%;white-space:nowrap}.mapa-table__label{margin-top:4px}.mapa-table__column{padding:15px;align-items:center;display:flex}.mapa-table__column--actions{display:flex}.mapa-table__column--actions .mat-icon{color:#ea561d!important}.mapa-table__column--header{width:100%}.mapa-table__column--header .mat-icon{margin:0 7px}.mapa-table .mat-sort-header-arrow{color:transparent}.mapa-table .mat-sort-header-content{width:100%}.mapa-table .mat-cell,.mapa-table .mat-header-cell{padding:0 10px!important}.mapa-table .mat-table{width:100%;overflow-x:auto}.mapa-table .red-0-25{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#f598a7;color:#000}.mapa-table .red-26-50{width:43px;height:43px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#f56580;color:#000}.mapa-table .red-51-75{width:46px;height:46px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#f4284e;color:#fff}.mapa-table .red-76-100{width:48px;height:48px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#c11c2f;color:#fff}.mapa-table .blue-0-20{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#96f2ee;color:#fff}.mapa-table .blue-21-40{width:42px;height:42px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#68ceee;color:#fff}.mapa-table .blue-41-60{width:44px;height:44px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#2d9ced;color:#fff}.mapa-table .blue-61-80{width:46px;height:46px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#0e6ece;color:#fff}.mapa-table .blue-81-100{width:48px;height:48px;border-radius:24px;display:flex;justify-content:center;align-items:center;background-color:#073e92;color:#fff}.mapa-table .roundCell{border-radius:10px}.mapa-table .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}.mapa-table .name{color:#181818;text-align:left;font-family:SF-Pro;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.mapa-table .cpf{color:var(--Grey-Grey-30, #8c8f94);text-align:left;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.mapa-table .center-cell{margin:auto}.mapa-table .label_report{color:#181818;text-align:center;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:400;line-height:16px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { columns: [{
                 type: Input
             }], data: [{
                 type: Input
+            }], pageIndex: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], totalCount: [{
+                type: Input
+            }], totalPages: [{
+                type: Input
             }], checkbox: [{
                 type: Input
+            }], selection: [{
+                type: Input
             }], actions: [{
                 type: Input
             }], filterControl: [{
                 type: Input
-            }], rowClick: [{
-                type: Output
-            }], selectedRows: [{
-                type: Output
             }], groupReport: [{
                 type: Input
             }], isGroupReport: [{
                 type: Input
+            }], rowClick: [{
+                type: Output
+            }], selectedRows: [{
+                type: Output
+            }], onChangePage: [{
+                type: Output
             }], paginator: [{
                 type: ViewChild,
-                args: [MatPaginator]
+                args: [MatPaginator, { read: true }]
             }], sort: [{
                 type: ViewChild,
                 args: [MatSort]