mapa-library-ui 1.1.1 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/mapa-library-ui-src-lib-components-group-report.mjs +2 -2
- package/fesm2022/mapa-library-ui-src-lib-components-group-report.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-table.mjs +2 -2
- package/fesm2022/mapa-library-ui-src-lib-components-table.mjs.map +1 -1
- package/fesm2022/mapa-library-ui.mjs +4 -4
- package/fesm2022/mapa-library-ui.mjs.map +1 -1
- package/mapa-library-ui-1.1.2.tgz +0 -0
- package/package.json +1 -1
- package/mapa-library-ui-1.1.1.tgz +0 -0
|
@@ -134,11 +134,11 @@ class MapaGroupReportComponent {
|
|
|
134
134
|
};
|
|
135
135
|
}
|
|
136
136
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaGroupReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
137
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MapaGroupReportComponent, isStandalone: true, selector: "mapa-group-report", inputs: { groupReport: "groupReport", showGroupReportGeneral: "showGroupReportGeneral" }, outputs: { onSortChange: "onSortChange" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"mapa-group-report\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n (matSortChange)=\"handleSortChange($event)\"\n >\n @for (column of columns; track trackColumn($index, column)) {\n <ng-container [matColumnDef]=\"column.key\">\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header\n [disabled]=\"!column.sort\"\n >\n <div\n [ngTemplateOutlet]=\"tableHeader\"\n [ngTemplateOutletContext]=\"{ column: column }\"\n ></div>\n </th>\n <td mat-cell *matCellDef=\"let row\" [style.width]=\"column.width\">\n <div\n class=\"mapa-group-report__column\"\n [class.mapa-group-report__column--center-cell]=\"column.align === 'center' || column.key !== 'name'\"\n >\n <div class=\"mapa-group-report__content\">\n @if (column.key === \"name\") {\n <div class=\"mapa-group-report__content--value\">\n <div class=\"mapa-group-report__content--title\">\n {{ row.name }}<br />\n </div>\n <div class=\"mapa-group-report__content--subtitle\">\n {{ row.cpf }}\n </div>\n </div>\n } @else if (column.key === \"general\") {\n <div class=\"general\">\n {{ getGeneralValue(row) | currency:'':'' }}%\n </div>\n } @else {\n <div class=\"mapa-group-report__hover\">\n <span class=\"mapa-group-report__hover--main\">\n <div\n class=\"mapa__tag--bg\"\n [class.mapa__tag--contrast]=\"getDimensionClassification(row, column.key)?.classificationId === 1\"\n [style.backgroundColor]=\"getDimensionClassification(row, column.key)?.classificationColor\"\n >\n {{\n getDimensionClassification(row, column.key)?.classificationName ||\n \"-\"\n }}\n </div>\n </span>\n <span class=\"mapa-group-report__hover--hidden\">\n {{ getDimensionLabel(row, column.key) }}\n </span>\n </div>\n }\n </div>\n </div>\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n</section>\n\n<ng-template #tableHeader let-column=\"column\">\n <div class=\"mapa-group-report__header\">\n {{ column.label }}\n @if (column.sort) {\n <div>\n <mat-icon>filter_list</mat-icon>\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .mapa-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-group-report{width:100%;white-space:nowrap}:host ::ng-deep .mapa-group-report__label{margin-top:4px}:host ::ng-deep .mapa-group-report__column{display:flex;align-items:center}:host ::ng-deep .mapa-group-report__column--actions{display:flex}:host ::ng-deep .mapa-group-report__column--actions .mat-icon{color:#ea561d!important}:host ::ng-deep .mapa-group-report__column--actions-item{display:flex;align-items:center}:host ::ng-deep .mapa-group-report__column--actions-item img{margin-right:8px}:host ::ng-deep .mapa-group-report__column--header{width:100%}:host ::ng-deep .mapa-group-report__column--header .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px;font-size:14px;height:14px;width:14px}:host ::ng-deep .mapa-group-report__column--status{border-radius:4px;padding:4px 8px;margin:auto;text-align:center;width:min-content}:host ::ng-deep .mapa-group-report__column--ellipsis{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host ::ng-deep .mapa-group-report__column--no-wrap{white-space:nowrap}:host ::ng-deep .mapa-group-report__column--wrap{white-space:pre-wrap}:host ::ng-deep .mapa-group-report__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report__content--value{margin-right:40px}:host ::ng-deep .mapa-group-report__content--title{color:#000;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-group-report__content--subtitle{color:#77838f;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-group-report__hover:hover--main{display:none}:host ::ng-deep .mapa-group-report__hover:hover--hidden{display:flex}:host ::ng-deep .mapa-group-report__hover--hidden{display:none}:host ::ng-deep .mapa-group-report__tag{display:flex;justify-content:center;align-items:center;padding:4px 8px;gap:8px;flex-shrink:0;border-radius:12px;color:#181818;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase}:host ::ng-deep .mapa-group-report__header{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report .mat-sort-header-arrow{display:none}:host ::ng-deep .mapa-group-report .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-group-report .mat-cell{padding:0 24px!important}:host ::ng-deep .mapa-group-report .mat-header-cell{padding:0 16px 0 24px!important;color:#000;font-size:12px;font-style:normal;font-weight:500;line-height:16px}:host ::ng-deep .mapa-group-report .mat-header-cell mat-icon{width:16px;height:16px;font-size:16px}:host ::ng-deep .mapa-group-report .mat-table{width:100%;overflow-x:auto}:host ::ng-deep .mapa-group-report .roundCell{border-radius:10px}:host ::ng-deep .mapa-group-report .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}:host ::ng-deep .mapa-group-report .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}\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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
137
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MapaGroupReportComponent, isStandalone: true, selector: "mapa-group-report", inputs: { groupReport: "groupReport", showGroupReportGeneral: "showGroupReportGeneral" }, outputs: { onSortChange: "onSortChange" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"mapa-group-report\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n (matSortChange)=\"handleSortChange($event)\"\n >\n @for (column of columns; track trackColumn($index, column)) {\n <ng-container [matColumnDef]=\"column.key\">\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header\n [disabled]=\"!column.sort\"\n >\n <div\n [ngTemplateOutlet]=\"tableHeader\"\n [ngTemplateOutletContext]=\"{ column: column }\"\n ></div>\n </th>\n <td mat-cell *matCellDef=\"let row\" [style.width]=\"column.width\">\n <div\n class=\"mapa-group-report__column\"\n [class.mapa-group-report__column--center-cell]=\"column.align === 'center' || column.key !== 'name'\"\n >\n <div class=\"mapa-group-report__content\">\n @if (column.key === \"name\") {\n <div class=\"mapa-group-report__content--value\">\n <div class=\"mapa-group-report__content--title\">\n {{ row.name }}<br />\n </div>\n <div class=\"mapa-group-report__content--subtitle\">\n {{ row.cpf }}\n </div>\n </div>\n } @else if (column.key === \"general\") {\n <div class=\"general\">\n {{ getGeneralValue(row) | currency:'':'' }}%\n </div>\n } @else {\n <div class=\"mapa-group-report__hover\">\n <span class=\"mapa-group-report__hover--main\">\n <div\n class=\"mapa__tag--bg\"\n [class.mapa__tag--contrast]=\"getDimensionClassification(row, column.key)?.classificationId === 1\"\n [style.backgroundColor]=\"getDimensionClassification(row, column.key)?.classificationColor\"\n >\n {{\n getDimensionClassification(row, column.key)?.classificationName ||\n \"-\"\n }}\n </div>\n </span>\n <span class=\"mapa-group-report__hover--hidden\">\n {{ getDimensionLabel(row, column.key) }}\n </span>\n </div>\n }\n </div>\n </div>\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n</section>\n\n<ng-template #tableHeader let-column=\"column\">\n <div class=\"mapa-group-report__header\">\n {{ column.label }}\n @if (column.sort) {\n <div>\n <mat-icon>filter_list</mat-icon>\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .mapa-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-group-report{width:100%;white-space:nowrap}:host ::ng-deep .mapa-group-report__label{margin-top:4px}:host ::ng-deep .mapa-group-report__column{display:flex;align-items:center}:host ::ng-deep .mapa-group-report__column--actions{display:flex}:host ::ng-deep .mapa-group-report__column--actions .mat-icon{color:#ea561d!important}:host ::ng-deep .mapa-group-report__column--actions-item{display:flex;align-items:center}:host ::ng-deep .mapa-group-report__column--actions-item img{margin-right:8px}:host ::ng-deep .mapa-group-report__column--header{width:100%}:host ::ng-deep .mapa-group-report__column--header .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px;font-size:14px;height:14px;width:14px}:host ::ng-deep .mapa-group-report__column--status{border-radius:4px;padding:4px 8px;margin:auto;text-align:center;width:min-content}:host ::ng-deep .mapa-group-report__column--ellipsis{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host ::ng-deep .mapa-group-report__column--no-wrap{white-space:nowrap}:host ::ng-deep .mapa-group-report__column--wrap{white-space:pre-wrap}:host ::ng-deep .mapa-group-report__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report__content--value{margin-right:40px}:host ::ng-deep .mapa-group-report__content--title{color:#000;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-group-report__content--subtitle{color:#77838f;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-group-report__hover:hover--main{display:none}:host ::ng-deep .mapa-group-report__hover:hover--hidden{display:flex}:host ::ng-deep .mapa-group-report__hover--hidden{display:none}:host ::ng-deep .mapa-group-report__tag{display:flex;justify-content:center;align-items:center;padding:4px 8px;gap:8px;flex-shrink:0;border-radius:12px;color:#181818;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase}:host ::ng-deep .mapa-group-report__header{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report .mat-sort-header-arrow{display:none}:host ::ng-deep .mapa-group-report .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-group-report .mat-cell{padding:0 24px!important}:host ::ng-deep .mapa-group-report .mat-header-cell{padding:0 16px 0 24px!important;color:#000;font-size:12px;font-style:normal;font-weight:500;line-height:16px}:host ::ng-deep .mapa-group-report .mat-header-cell mat-icon{width:16px;height:16px;font-size:16px}:host ::ng-deep .mapa-group-report .mat-table{width:100%;overflow-x:auto}:host ::ng-deep .mapa-group-report .roundCell{border-radius:10px}:host ::ng-deep .mapa-group-report .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}:host ::ng-deep .mapa-group-report .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}\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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
138
138
|
}
|
|
139
139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaGroupReportComponent, decorators: [{
|
|
140
140
|
type: Component,
|
|
141
|
-
args: [{ selector: "mapa-group-report", changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, MatTableModule, MatSortModule], standalone: true, template: "<section class=\"mapa-group-report\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n (matSortChange)=\"handleSortChange($event)\"\n >\n @for (column of columns; track trackColumn($index, column)) {\n <ng-container [matColumnDef]=\"column.key\">\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header\n [disabled]=\"!column.sort\"\n >\n <div\n [ngTemplateOutlet]=\"tableHeader\"\n [ngTemplateOutletContext]=\"{ column: column }\"\n ></div>\n </th>\n <td mat-cell *matCellDef=\"let row\" [style.width]=\"column.width\">\n <div\n class=\"mapa-group-report__column\"\n [class.mapa-group-report__column--center-cell]=\"column.align === 'center' || column.key !== 'name'\"\n >\n <div class=\"mapa-group-report__content\">\n @if (column.key === \"name\") {\n <div class=\"mapa-group-report__content--value\">\n <div class=\"mapa-group-report__content--title\">\n {{ row.name }}<br />\n </div>\n <div class=\"mapa-group-report__content--subtitle\">\n {{ row.cpf }}\n </div>\n </div>\n } @else if (column.key === \"general\") {\n <div class=\"general\">\n {{ getGeneralValue(row) | currency:'':'' }}%\n </div>\n } @else {\n <div class=\"mapa-group-report__hover\">\n <span class=\"mapa-group-report__hover--main\">\n <div\n class=\"mapa__tag--bg\"\n [class.mapa__tag--contrast]=\"getDimensionClassification(row, column.key)?.classificationId === 1\"\n [style.backgroundColor]=\"getDimensionClassification(row, column.key)?.classificationColor\"\n >\n {{\n getDimensionClassification(row, column.key)?.classificationName ||\n \"-\"\n }}\n </div>\n </span>\n <span class=\"mapa-group-report__hover--hidden\">\n {{ getDimensionLabel(row, column.key) }}\n </span>\n </div>\n }\n </div>\n </div>\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n</section>\n\n<ng-template #tableHeader let-column=\"column\">\n <div class=\"mapa-group-report__header\">\n {{ column.label }}\n @if (column.sort) {\n <div>\n <mat-icon>filter_list</mat-icon>\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .mapa-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-
|
|
141
|
+
args: [{ selector: "mapa-group-report", changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, MatTableModule, MatSortModule], standalone: true, template: "<section class=\"mapa-group-report\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n (matSortChange)=\"handleSortChange($event)\"\n >\n @for (column of columns; track trackColumn($index, column)) {\n <ng-container [matColumnDef]=\"column.key\">\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header\n [disabled]=\"!column.sort\"\n >\n <div\n [ngTemplateOutlet]=\"tableHeader\"\n [ngTemplateOutletContext]=\"{ column: column }\"\n ></div>\n </th>\n <td mat-cell *matCellDef=\"let row\" [style.width]=\"column.width\">\n <div\n class=\"mapa-group-report__column\"\n [class.mapa-group-report__column--center-cell]=\"column.align === 'center' || column.key !== 'name'\"\n >\n <div class=\"mapa-group-report__content\">\n @if (column.key === \"name\") {\n <div class=\"mapa-group-report__content--value\">\n <div class=\"mapa-group-report__content--title\">\n {{ row.name }}<br />\n </div>\n <div class=\"mapa-group-report__content--subtitle\">\n {{ row.cpf }}\n </div>\n </div>\n } @else if (column.key === \"general\") {\n <div class=\"general\">\n {{ getGeneralValue(row) | currency:'':'' }}%\n </div>\n } @else {\n <div class=\"mapa-group-report__hover\">\n <span class=\"mapa-group-report__hover--main\">\n <div\n class=\"mapa__tag--bg\"\n [class.mapa__tag--contrast]=\"getDimensionClassification(row, column.key)?.classificationId === 1\"\n [style.backgroundColor]=\"getDimensionClassification(row, column.key)?.classificationColor\"\n >\n {{\n getDimensionClassification(row, column.key)?.classificationName ||\n \"-\"\n }}\n </div>\n </span>\n <span class=\"mapa-group-report__hover--hidden\">\n {{ getDimensionLabel(row, column.key) }}\n </span>\n </div>\n }\n </div>\n </div>\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n</section>\n\n<ng-template #tableHeader let-column=\"column\">\n <div class=\"mapa-group-report__header\">\n {{ column.label }}\n @if (column.sort) {\n <div>\n <mat-icon>filter_list</mat-icon>\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .mapa-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-group-report{width:100%;white-space:nowrap}:host ::ng-deep .mapa-group-report__label{margin-top:4px}:host ::ng-deep .mapa-group-report__column{display:flex;align-items:center}:host ::ng-deep .mapa-group-report__column--actions{display:flex}:host ::ng-deep .mapa-group-report__column--actions .mat-icon{color:#ea561d!important}:host ::ng-deep .mapa-group-report__column--actions-item{display:flex;align-items:center}:host ::ng-deep .mapa-group-report__column--actions-item img{margin-right:8px}:host ::ng-deep .mapa-group-report__column--header{width:100%}:host ::ng-deep .mapa-group-report__column--header .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px;font-size:14px;height:14px;width:14px}:host ::ng-deep .mapa-group-report__column--status{border-radius:4px;padding:4px 8px;margin:auto;text-align:center;width:min-content}:host ::ng-deep .mapa-group-report__column--ellipsis{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host ::ng-deep .mapa-group-report__column--no-wrap{white-space:nowrap}:host ::ng-deep .mapa-group-report__column--wrap{white-space:pre-wrap}:host ::ng-deep .mapa-group-report__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report__content--value{margin-right:40px}:host ::ng-deep .mapa-group-report__content--title{color:#000;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-group-report__content--subtitle{color:#77838f;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-group-report__hover:hover--main{display:none}:host ::ng-deep .mapa-group-report__hover:hover--hidden{display:flex}:host ::ng-deep .mapa-group-report__hover--hidden{display:none}:host ::ng-deep .mapa-group-report__tag{display:flex;justify-content:center;align-items:center;padding:4px 8px;gap:8px;flex-shrink:0;border-radius:12px;color:#181818;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase}:host ::ng-deep .mapa-group-report__header{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report .mat-sort-header-arrow{display:none}:host ::ng-deep .mapa-group-report .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-group-report .mat-cell{padding:0 24px!important}:host ::ng-deep .mapa-group-report .mat-header-cell{padding:0 16px 0 24px!important;color:#000;font-size:12px;font-style:normal;font-weight:500;line-height:16px}:host ::ng-deep .mapa-group-report .mat-header-cell mat-icon{width:16px;height:16px;font-size:16px}:host ::ng-deep .mapa-group-report .mat-table{width:100%;overflow-x:auto}:host ::ng-deep .mapa-group-report .roundCell{border-radius:10px}:host ::ng-deep .mapa-group-report .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}:host ::ng-deep .mapa-group-report .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}\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"] }]
|
|
142
142
|
}], propDecorators: { groupReport: [{
|
|
143
143
|
type: Input
|
|
144
144
|
}], showGroupReportGeneral: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mapa-library-ui-src-lib-components-group-report.mjs","sources":["../../../projects/mapa-library-ui/src/lib/components/group-report/src/group-report.component.ts","../../../projects/mapa-library-ui/src/lib/components/group-report/src/group-report.component.html","../../../projects/mapa-library-ui/src/lib/components/group-report/public-api.ts","../../../projects/mapa-library-ui/src/group-report.ts","../../../projects/mapa-library-ui/src/mapa-library-ui-src-lib-components-group-report.ts"],"sourcesContent":["import { CommonModule } from \"@angular/common\";\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n SimpleChanges,\n ViewChild,\n} from \"@angular/core\";\nimport { MatIconModule } from \"@angular/material/icon\";\nimport { MatSort, Sort } from \"@angular/material/sort\";\nimport { MatSortModule } from \"@angular/material/sort\";\nimport { MatTableDataSource } from \"@angular/material/table\";\nimport { MatTableModule } from \"@angular/material/table\";\nimport { Classification } from \"../../../core/interfaces/classification.interface\";\nimport { TableColumn } from \"../../../core/interfaces/table-column.interface\";\nimport {\n Dimension,\n GroupReportDimensionCell,\n GroupReportItem,\n GroupReportRow,\n GroupReportRowValue,\n} from \"./group-report-interface\";\n\n@Component({\n selector: \"mapa-group-report\",\n templateUrl: \"./group-report.component.html\",\n styleUrls: [\n \"./group-report.component.scss\",\n \"./../../capability/styles/capability.scss\",\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [CommonModule, MatIconModule, MatTableModule, MatSortModule],\n standalone: true,\n})\nexport class MapaGroupReportComponent implements OnChanges, AfterViewInit {\n @Input() groupReport: GroupReportItem[] = [];\n @Input() showGroupReportGeneral = false;\n @Output() onSortChange: EventEmitter<Sort> = new EventEmitter<Sort>();\n\n @ViewChild(MatSort) sort!: MatSort;\n\n dataSource: MatTableDataSource<GroupReportRow> =\n new MatTableDataSource<GroupReportRow>([]);\n displayedColumns: string[] = [];\n columns: TableColumn[] = [];\n data: GroupReportRow[] = [];\n\n ngAfterViewInit(): void {\n this.dataSource.sort = this.sort;\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes[\"groupReport\"] || changes[\"showGroupReportGeneral\"]) {\n this.refreshTableState();\n }\n }\n\n trackColumn(index: number, column: TableColumn): string {\n return `${index}:${column.key}`;\n }\n\n handleSortChange(sort: Sort): void {\n this.onSortChange.emit(sort);\n }\n\n getDimensionCell(\n row: GroupReportRow,\n key: string\n ): GroupReportDimensionCell | undefined {\n const cell = row[key];\n return this.isGroupReportDimensionCell(cell) ? cell : undefined;\n }\n\n getDimensionClassification(\n row: GroupReportRow,\n key: string\n ): Classification | undefined {\n return this.getDimensionCell(row, key)?.value?.classification;\n }\n\n getDimensionLabel(row: GroupReportRow, key: string): number | string {\n return this.getDimensionCell(row, key)?.value?.label ?? \"-\";\n }\n\n getGeneralValue(row: GroupReportRow): number | null {\n return typeof row.general === \"number\" ? row.general : null;\n }\n\n private refreshTableState(): void {\n this.columns = this.generateColumns();\n this.data = this.generateGroupData();\n this.displayedColumns = this.columns.map((column) => column.key);\n this.dataSource.data = this.data;\n this.dataSource.sortingDataAccessor = (\n row: GroupReportRow,\n columnKey: string\n ): string | number => this.getSortValue(row, columnKey);\n if (this.sort) {\n this.dataSource.sort = this.sort;\n }\n }\n\n private getSortValue(row: GroupReportRow, columnKey: string): string | number {\n const cell = row[columnKey];\n\n if (this.isGroupReportDimensionCell(cell)) {\n return cell.value?.classification?.classificationId ?? 0;\n }\n\n return typeof cell === \"number\" || typeof cell === \"string\" ? cell : \"\";\n }\n\n private isGroupReportDimensionCell(\n value: GroupReportRowValue\n ): value is GroupReportDimensionCell {\n return typeof value === \"object\" && value !== null && \"direction\" in value;\n }\n\n private generateColumns(): TableColumn[] {\n const columns: TableColumn[] = [{ key: \"name\", label: \"\", sort: false }];\n const existingKeys = new Set<string>([\"name\"]);\n\n if (this.showGroupReportGeneral) {\n columns.push({ key: \"general\", label: \"% Geral\", sort: false });\n existingKeys.add(\"general\");\n }\n\n this.groupReport.forEach((reportItem) => {\n reportItem.dimensions?.forEach((dimension) => {\n const key = this.getColumnKey(dimension.dimensionName);\n if (!existingKeys.has(key)) {\n columns.push({\n key,\n label: dimension.dimensionName,\n classification: dimension.classification,\n sort: true,\n });\n existingKeys.add(key);\n }\n });\n });\n\n return columns;\n }\n\n private generateGroupData(): GroupReportRow[] {\n return this.groupReport.map((item) => {\n const dataItem: GroupReportRow = {\n name: item.candidate.name,\n cpf: item.candidate.cpf,\n general: item.candidate.general,\n };\n\n item.dimensions?.forEach((dimension) => {\n dataItem[this.getColumnKey(dimension.dimensionName)] = {\n value: {\n label: this.getDimensionDisplayValue(dimension),\n classification: this.getDimensionClassificationFromDimension(dimension),\n },\n direction: dimension.direction,\n };\n });\n\n return dataItem;\n });\n }\n\n private getColumnKey(dimensionName: string): string {\n return dimensionName.toLowerCase();\n }\n\n private getDimensionDisplayValue(\n dimension: Dimension\n ): number | string | undefined {\n return (\n dimension.escoreT ??\n dimension.average ??\n dimension.percentil ??\n dimension.percentage ??\n dimension.count\n );\n }\n\n private getDimensionClassificationFromDimension(\n dimension: Dimension\n ): Classification | undefined {\n if (dimension.classification) {\n return dimension.classification;\n }\n\n if (\n dimension.classificationId === undefined &&\n !dimension.classificationName &&\n !dimension.classificationColor\n ) {\n return undefined;\n }\n\n return {\n classificationId: dimension.classificationId,\n classificationName: dimension.classificationName,\n classificationColor: dimension.classificationColor,\n };\n }\n}\n\n\n\n","<section class=\"mapa-group-report\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n (matSortChange)=\"handleSortChange($event)\"\n >\n @for (column of columns; track trackColumn($index, column)) {\n <ng-container [matColumnDef]=\"column.key\">\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header\n [disabled]=\"!column.sort\"\n >\n <div\n [ngTemplateOutlet]=\"tableHeader\"\n [ngTemplateOutletContext]=\"{ column: column }\"\n ></div>\n </th>\n <td mat-cell *matCellDef=\"let row\" [style.width]=\"column.width\">\n <div\n class=\"mapa-group-report__column\"\n [class.mapa-group-report__column--center-cell]=\"column.align === 'center' || column.key !== 'name'\"\n >\n <div class=\"mapa-group-report__content\">\n @if (column.key === \"name\") {\n <div class=\"mapa-group-report__content--value\">\n <div class=\"mapa-group-report__content--title\">\n {{ row.name }}<br />\n </div>\n <div class=\"mapa-group-report__content--subtitle\">\n {{ row.cpf }}\n </div>\n </div>\n } @else if (column.key === \"general\") {\n <div class=\"general\">\n {{ getGeneralValue(row) | currency:'':'' }}%\n </div>\n } @else {\n <div class=\"mapa-group-report__hover\">\n <span class=\"mapa-group-report__hover--main\">\n <div\n class=\"mapa__tag--bg\"\n [class.mapa__tag--contrast]=\"getDimensionClassification(row, column.key)?.classificationId === 1\"\n [style.backgroundColor]=\"getDimensionClassification(row, column.key)?.classificationColor\"\n >\n {{\n getDimensionClassification(row, column.key)?.classificationName ||\n \"-\"\n }}\n </div>\n </span>\n <span class=\"mapa-group-report__hover--hidden\">\n {{ getDimensionLabel(row, column.key) }}\n </span>\n </div>\n }\n </div>\n </div>\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n</section>\n\n<ng-template #tableHeader let-column=\"column\">\n <div class=\"mapa-group-report__header\">\n {{ column.label }}\n @if (column.sort) {\n <div>\n <mat-icon>filter_list</mat-icon>\n </div>\n }\n </div>\n</ng-template>\n","/*\n * Public API Surface of mapa-library-ui group-report\n */\n\nexport * from './src/group-report.component';\nexport * from './src/group-report-interface';\n","/*\n * Public API Surface of mapa-library-ui group-report\n */\nexport * from './lib/components/group-report/public-api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './group-report';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"mapa-library-ui-src-lib-components-group-report.mjs","sources":["../../../projects/mapa-library-ui/src/lib/components/group-report/src/group-report.component.ts","../../../projects/mapa-library-ui/src/lib/components/group-report/src/group-report.component.html","../../../projects/mapa-library-ui/src/lib/components/group-report/public-api.ts","../../../projects/mapa-library-ui/src/group-report.ts","../../../projects/mapa-library-ui/src/mapa-library-ui-src-lib-components-group-report.ts"],"sourcesContent":["import { CommonModule } from \"@angular/common\";\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n SimpleChanges,\n ViewChild,\n} from \"@angular/core\";\nimport { MatIconModule } from \"@angular/material/icon\";\nimport { MatSort, Sort } from \"@angular/material/sort\";\nimport { MatSortModule } from \"@angular/material/sort\";\nimport { MatTableDataSource } from \"@angular/material/table\";\nimport { MatTableModule } from \"@angular/material/table\";\nimport { Classification } from \"../../../core/interfaces/classification.interface\";\nimport { TableColumn } from \"../../../core/interfaces/table-column.interface\";\nimport {\n Dimension,\n GroupReportDimensionCell,\n GroupReportItem,\n GroupReportRow,\n GroupReportRowValue,\n} from \"./group-report-interface\";\n\n@Component({\n selector: \"mapa-group-report\",\n templateUrl: \"./group-report.component.html\",\n styleUrls: [\n \"./group-report.component.scss\",\n \"./../../capability/styles/capability.scss\",\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [CommonModule, MatIconModule, MatTableModule, MatSortModule],\n standalone: true,\n})\nexport class MapaGroupReportComponent implements OnChanges, AfterViewInit {\n @Input() groupReport: GroupReportItem[] = [];\n @Input() showGroupReportGeneral = false;\n @Output() onSortChange: EventEmitter<Sort> = new EventEmitter<Sort>();\n\n @ViewChild(MatSort) sort!: MatSort;\n\n dataSource: MatTableDataSource<GroupReportRow> =\n new MatTableDataSource<GroupReportRow>([]);\n displayedColumns: string[] = [];\n columns: TableColumn[] = [];\n data: GroupReportRow[] = [];\n\n ngAfterViewInit(): void {\n this.dataSource.sort = this.sort;\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes[\"groupReport\"] || changes[\"showGroupReportGeneral\"]) {\n this.refreshTableState();\n }\n }\n\n trackColumn(index: number, column: TableColumn): string {\n return `${index}:${column.key}`;\n }\n\n handleSortChange(sort: Sort): void {\n this.onSortChange.emit(sort);\n }\n\n getDimensionCell(\n row: GroupReportRow,\n key: string\n ): GroupReportDimensionCell | undefined {\n const cell = row[key];\n return this.isGroupReportDimensionCell(cell) ? cell : undefined;\n }\n\n getDimensionClassification(\n row: GroupReportRow,\n key: string\n ): Classification | undefined {\n return this.getDimensionCell(row, key)?.value?.classification;\n }\n\n getDimensionLabel(row: GroupReportRow, key: string): number | string {\n return this.getDimensionCell(row, key)?.value?.label ?? \"-\";\n }\n\n getGeneralValue(row: GroupReportRow): number | null {\n return typeof row.general === \"number\" ? row.general : null;\n }\n\n private refreshTableState(): void {\n this.columns = this.generateColumns();\n this.data = this.generateGroupData();\n this.displayedColumns = this.columns.map((column) => column.key);\n this.dataSource.data = this.data;\n this.dataSource.sortingDataAccessor = (\n row: GroupReportRow,\n columnKey: string\n ): string | number => this.getSortValue(row, columnKey);\n if (this.sort) {\n this.dataSource.sort = this.sort;\n }\n }\n\n private getSortValue(row: GroupReportRow, columnKey: string): string | number {\n const cell = row[columnKey];\n\n if (this.isGroupReportDimensionCell(cell)) {\n return cell.value?.classification?.classificationId ?? 0;\n }\n\n return typeof cell === \"number\" || typeof cell === \"string\" ? cell : \"\";\n }\n\n private isGroupReportDimensionCell(\n value: GroupReportRowValue\n ): value is GroupReportDimensionCell {\n return typeof value === \"object\" && value !== null && \"direction\" in value;\n }\n\n private generateColumns(): TableColumn[] {\n const columns: TableColumn[] = [{ key: \"name\", label: \"\", sort: false }];\n const existingKeys = new Set<string>([\"name\"]);\n\n if (this.showGroupReportGeneral) {\n columns.push({ key: \"general\", label: \"% Geral\", sort: false });\n existingKeys.add(\"general\");\n }\n\n this.groupReport.forEach((reportItem) => {\n reportItem.dimensions?.forEach((dimension) => {\n const key = this.getColumnKey(dimension.dimensionName);\n if (!existingKeys.has(key)) {\n columns.push({\n key,\n label: dimension.dimensionName,\n classification: dimension.classification,\n sort: true,\n });\n existingKeys.add(key);\n }\n });\n });\n\n return columns;\n }\n\n private generateGroupData(): GroupReportRow[] {\n return this.groupReport.map((item) => {\n const dataItem: GroupReportRow = {\n name: item.candidate.name,\n cpf: item.candidate.cpf,\n general: item.candidate.general,\n };\n\n item.dimensions?.forEach((dimension) => {\n dataItem[this.getColumnKey(dimension.dimensionName)] = {\n value: {\n label: this.getDimensionDisplayValue(dimension),\n classification: this.getDimensionClassificationFromDimension(dimension),\n },\n direction: dimension.direction,\n };\n });\n\n return dataItem;\n });\n }\n\n private getColumnKey(dimensionName: string): string {\n return dimensionName.toLowerCase();\n }\n\n private getDimensionDisplayValue(\n dimension: Dimension\n ): number | string | undefined {\n return (\n dimension.escoreT ??\n dimension.average ??\n dimension.percentil ??\n dimension.percentage ??\n dimension.count\n );\n }\n\n private getDimensionClassificationFromDimension(\n dimension: Dimension\n ): Classification | undefined {\n if (dimension.classification) {\n return dimension.classification;\n }\n\n if (\n dimension.classificationId === undefined &&\n !dimension.classificationName &&\n !dimension.classificationColor\n ) {\n return undefined;\n }\n\n return {\n classificationId: dimension.classificationId,\n classificationName: dimension.classificationName,\n classificationColor: dimension.classificationColor,\n };\n }\n}\n\n\n\n","<section class=\"mapa-group-report\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n (matSortChange)=\"handleSortChange($event)\"\n >\n @for (column of columns; track trackColumn($index, column)) {\n <ng-container [matColumnDef]=\"column.key\">\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header\n [disabled]=\"!column.sort\"\n >\n <div\n [ngTemplateOutlet]=\"tableHeader\"\n [ngTemplateOutletContext]=\"{ column: column }\"\n ></div>\n </th>\n <td mat-cell *matCellDef=\"let row\" [style.width]=\"column.width\">\n <div\n class=\"mapa-group-report__column\"\n [class.mapa-group-report__column--center-cell]=\"column.align === 'center' || column.key !== 'name'\"\n >\n <div class=\"mapa-group-report__content\">\n @if (column.key === \"name\") {\n <div class=\"mapa-group-report__content--value\">\n <div class=\"mapa-group-report__content--title\">\n {{ row.name }}<br />\n </div>\n <div class=\"mapa-group-report__content--subtitle\">\n {{ row.cpf }}\n </div>\n </div>\n } @else if (column.key === \"general\") {\n <div class=\"general\">\n {{ getGeneralValue(row) | currency:'':'' }}%\n </div>\n } @else {\n <div class=\"mapa-group-report__hover\">\n <span class=\"mapa-group-report__hover--main\">\n <div\n class=\"mapa__tag--bg\"\n [class.mapa__tag--contrast]=\"getDimensionClassification(row, column.key)?.classificationId === 1\"\n [style.backgroundColor]=\"getDimensionClassification(row, column.key)?.classificationColor\"\n >\n {{\n getDimensionClassification(row, column.key)?.classificationName ||\n \"-\"\n }}\n </div>\n </span>\n <span class=\"mapa-group-report__hover--hidden\">\n {{ getDimensionLabel(row, column.key) }}\n </span>\n </div>\n }\n </div>\n </div>\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n</section>\n\n<ng-template #tableHeader let-column=\"column\">\n <div class=\"mapa-group-report__header\">\n {{ column.label }}\n @if (column.sort) {\n <div>\n <mat-icon>filter_list</mat-icon>\n </div>\n }\n </div>\n</ng-template>\n","/*\n * Public API Surface of mapa-library-ui group-report\n */\n\nexport * from './src/group-report.component';\nexport * from './src/group-report-interface';\n","/*\n * Public API Surface of mapa-library-ui group-report\n */\nexport * from './lib/components/group-report/public-api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './group-report';\n"],"names":[],"mappings":"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"}
|
|
@@ -1009,7 +1009,7 @@ class MapaTableComponent {
|
|
|
1009
1009
|
useFactory: customPaginatorFactory,
|
|
1010
1010
|
deps: [MapaI18nService, Injector],
|
|
1011
1011
|
},
|
|
1012
|
-
], 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 }); }
|
|
1012
|
+
], 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__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 }); }
|
|
1013
1013
|
}
|
|
1014
1014
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapaTableComponent, decorators: [{
|
|
1015
1015
|
type: Component,
|
|
@@ -1033,7 +1033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
1033
1033
|
useFactory: customPaginatorFactory,
|
|
1034
1034
|
deps: [MapaI18nService, Injector],
|
|
1035
1035
|
},
|
|
1036
|
-
], 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"] }]
|
|
1036
|
+
], 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__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"] }]
|
|
1037
1037
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MapaI18nService }], propDecorators: { columns: [{
|
|
1038
1038
|
type: Input
|
|
1039
1039
|
}], data: [{
|