mapa-library-ui 0.15.5 → 0.15.7
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/esm2020/src/lib/components/menu/src/menu.component.mjs +13 -5
- package/esm2020/src/lib/components/table/lib/components/menu/src/menu.component.mjs +13 -5
- package/esm2020/src/lib/components/table/lib/components/table/src/table.component.mjs +42 -10
- package/fesm2015/mapa-library-ui-src-lib-components-menu.mjs +11 -3
- package/fesm2015/mapa-library-ui-src-lib-components-menu.mjs.map +1 -1
- package/fesm2015/mapa-library-ui-src-lib-components-table.mjs +54 -12
- package/fesm2015/mapa-library-ui-src-lib-components-table.mjs.map +1 -1
- package/fesm2020/mapa-library-ui-src-lib-components-menu.mjs +11 -3
- package/fesm2020/mapa-library-ui-src-lib-components-menu.mjs.map +1 -1
- package/fesm2020/mapa-library-ui-src-lib-components-table.mjs +52 -12
- package/fesm2020/mapa-library-ui-src-lib-components-table.mjs.map +1 -1
- package/mapa-library-ui-0.15.7.tgz +0 -0
- package/package.json +1 -1
- package/src/lib/components/menu/src/menu.component.d.ts +7 -3
- package/src/lib/components/table/lib/components/menu/src/menu.component.d.ts +7 -3
- package/src/lib/components/table/lib/components/table/src/table.component.d.ts +5 -0
- package/mapa-library-ui-0.15.5.tgz +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mapa-library-ui-src-lib-components-menu.mjs","sources":["../../../projects/mapa-library-ui/src/lib/components/menu/src/menu.component.ts","../../../projects/mapa-library-ui/src/lib/components/menu/src/menu.component.html","../../../projects/mapa-library-ui/src/lib/components/menu/src/menu.module.ts","../../../projects/mapa-library-ui/src/lib/components/menu/public-api.ts","../../../projects/mapa-library-ui/src/lib/components/menu/mapa-library-ui-src-lib-components-menu.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"mapa-library-ui-src-lib-components-menu.mjs","sources":["../../../projects/mapa-library-ui/src/lib/components/menu/src/menu.component.ts","../../../projects/mapa-library-ui/src/lib/components/menu/src/menu.component.html","../../../projects/mapa-library-ui/src/lib/components/menu/src/menu.module.ts","../../../projects/mapa-library-ui/src/lib/components/menu/public-api.ts","../../../projects/mapa-library-ui/src/lib/components/menu/mapa-library-ui-src-lib-components-menu.ts"],"sourcesContent":["import {\n Component,\n EventEmitter,\n Input,\n Output,\n ViewChild,\n} from \"@angular/core\";\nimport { MatMenuTrigger } from \"@angular/material/menu\";\n\nexport interface MenuItem {\n image?: string;\n icon?: string;\n text: string;\n action: string;\n}\n\n@Component({\n selector: \"mapa-menu\",\n templateUrl: \"./menu.component.html\",\n styleUrls: [\"./menu.component.scss\"],\n})\nexport class MapaMenuComponent {\n @Input() items: MenuItem[] = [];\n @Input() data?: any;\n @Output() emitMenu: EventEmitter<any> = new EventEmitter<any>();\n @ViewChild(MatMenuTrigger) trigger!: MatMenuTrigger;\n\n toggleMenu(): void {\n this.trigger.openMenu();\n }\n\n clickMenu(action: string): void {\n this.emitMenu.emit({ action, data: this.data });\n }\n}\n","<mat-menu #menu=\"matMenu\" class=\"mapa-menu\">\n <button\n *ngFor=\"let item of items\"\n mat-menu-item\n (click)=\"clickMenu(item.action)\"\n class=\"mapa-menu__item\"\n >\n <mat-icon *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n <img *ngIf=\"item.image\" [src]=\"item.image\" />\n <span>{{item.text}}</span>\n </button>\n</mat-menu>\n\n<img\n class=\"outside-menu-icon\"\n src=\"assets/images/icons/ThreePoints.svg\"\n (click)=\"toggleMenu()\"\n [matMenuTriggerFor]=\"menu\"\n/>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MapaMenuComponent } from './menu.component';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MapaButtonModule } from 'mapa-library-ui/src/lib/components/button';\n\n\n\n@NgModule({\n declarations: [\n MapaMenuComponent\n ],\n imports: [\n CommonModule,\n MatMenuModule, \n MapaButtonModule,\n MatIconModule\n ],\n exports: [\n MapaMenuComponent,\n ]\n})\nexport class MapaMenuModule { }\n","/*\n * Public API Surface of mapa-library-ui input\n */\n\nexport * from '../menu/src/menu.component';\nexport * from '../menu/src/menu.module';","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;MAqBa,iBAAiB,CAAA;AAL9B,IAAA,WAAA,GAAA;AAMW,QAAA,IAAK,CAAA,KAAA,GAAe,EAAE,CAAC;AAEtB,QAAA,IAAA,CAAA,QAAQ,GAAsB,IAAI,YAAY,EAAO,CAAC;KAUjE;IAPC,UAAU,GAAA;AACR,QAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;KACzB;AAED,IAAA,SAAS,CAAC,MAAc,EAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KACjD;;+GAZU,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAjB,iBAAiB,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAIjB,cAAc,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECzB3B,mgBAmBA,EAAA,MAAA,EAAA,CAAA,iRAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,eAAA,EAAA,MAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,6CAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;4FDEa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAL7B,SAAS;+BACE,WAAW,EAAA,QAAA,EAAA,mgBAAA,EAAA,MAAA,EAAA,CAAA,iRAAA,CAAA,EAAA,CAAA;8BAKZ,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACI,QAAQ,EAAA,CAAA;sBAAjB,MAAM;gBACoB,OAAO,EAAA,CAAA;sBAAjC,SAAS;uBAAC,cAAc,CAAA;;;MEFd,cAAc,CAAA;;4GAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;6GAAd,cAAc,EAAA,YAAA,EAAA,CAZvB,iBAAiB,CAAA,EAAA,OAAA,EAAA,CAGjB,YAAY;QACZ,aAAa;QACb,gBAAgB;QAChB,aAAa,aAGb,iBAAiB,CAAA,EAAA,CAAA,CAAA;AAGR,cAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,YATvB,YAAY;QACZ,aAAa;QACb,gBAAgB;QAChB,aAAa,CAAA,EAAA,CAAA,CAAA;4FAMJ,cAAc,EAAA,UAAA,EAAA,CAAA;kBAd1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE;wBACZ,iBAAiB;AAClB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,aAAa;wBACb,gBAAgB;wBAChB,aAAa;AACd,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,iBAAiB;AAClB,qBAAA;iBACF,CAAA;;;ACtBD;;AAEG;;ACFH;;AAEG;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Directive, Host, Self, Optional, Component, Input,
|
|
2
|
+
import { Directive, Host, Self, Optional, EventEmitter, Component, Input, Output, ViewChild, ViewEncapsulation, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/material/paginator';
|
|
4
4
|
import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
|
|
5
5
|
import moment from 'moment';
|
|
@@ -250,18 +250,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
250
250
|
class MapaMenuComponent {
|
|
251
251
|
constructor() {
|
|
252
252
|
this.items = [];
|
|
253
|
+
this.emitMenu = new EventEmitter();
|
|
253
254
|
}
|
|
254
255
|
toggleMenu() {
|
|
255
256
|
this.trigger.openMenu();
|
|
256
257
|
}
|
|
258
|
+
clickMenu(action) {
|
|
259
|
+
this.emitMenu.emit({ action, data: this.data });
|
|
260
|
+
}
|
|
257
261
|
}
|
|
258
262
|
MapaMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
259
|
-
MapaMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaMenuComponent, selector: "mapa-menu", inputs: { items: "items" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<mat-menu #menu=\"matMenu\" class=\"mapa-menu\">\n <button
|
|
263
|
+
MapaMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaMenuComponent, selector: "mapa-menu", inputs: { items: "items", data: "data" }, outputs: { emitMenu: "emitMenu" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<mat-menu #menu=\"matMenu\" class=\"mapa-menu\">\n <button\n *ngFor=\"let item of items\"\n mat-menu-item\n (click)=\"clickMenu(item.action)\"\n class=\"mapa-menu__item\"\n >\n <mat-icon *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n <img *ngIf=\"item.image\" [src]=\"item.image\" />\n <span>{{item.text}}</span>\n </button>\n</mat-menu>\n\n<img\n class=\"outside-menu-icon\"\n src=\"assets/images/icons/ThreePoints.svg\"\n (click)=\"toggleMenu()\"\n [matMenuTriggerFor]=\"menu\"\n/>\n", styles: [".outside-menu-icon{color:#50575e;display:flex;align-items:center;justify-content:center}.mat-menu-content mat-icon{color:var(--Grey-Grey-60, #50575e);font-size:16px;line-height:28px}.mapa-menu__item{display:flex;align-items:center}.mapa-menu__item img{margin-right:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
260
264
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaMenuComponent, decorators: [{
|
|
261
265
|
type: Component,
|
|
262
|
-
args: [{ selector:
|
|
266
|
+
args: [{ selector: "mapa-menu", template: "<mat-menu #menu=\"matMenu\" class=\"mapa-menu\">\n <button\n *ngFor=\"let item of items\"\n mat-menu-item\n (click)=\"clickMenu(item.action)\"\n class=\"mapa-menu__item\"\n >\n <mat-icon *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n <img *ngIf=\"item.image\" [src]=\"item.image\" />\n <span>{{item.text}}</span>\n </button>\n</mat-menu>\n\n<img\n class=\"outside-menu-icon\"\n src=\"assets/images/icons/ThreePoints.svg\"\n (click)=\"toggleMenu()\"\n [matMenuTriggerFor]=\"menu\"\n/>\n", styles: [".outside-menu-icon{color:#50575e;display:flex;align-items:center;justify-content:center}.mat-menu-content mat-icon{color:var(--Grey-Grey-60, #50575e);font-size:16px;line-height:28px}.mapa-menu__item{display:flex;align-items:center}.mapa-menu__item img{margin-right:8px}\n"] }]
|
|
263
267
|
}], propDecorators: { items: [{
|
|
264
268
|
type: Input
|
|
269
|
+
}], data: [{
|
|
270
|
+
type: Input
|
|
271
|
+
}], emitMenu: [{
|
|
272
|
+
type: Output
|
|
265
273
|
}], trigger: [{
|
|
266
274
|
type: ViewChild,
|
|
267
275
|
args: [MatMenuTrigger]
|
|
@@ -352,7 +360,7 @@ class MapaTableComponent {
|
|
|
352
360
|
}
|
|
353
361
|
return `${this.selection.isSelected(row) ? "deselect" : "select"} row ${row.position + 1}`;
|
|
354
362
|
}
|
|
355
|
-
return
|
|
363
|
+
return "";
|
|
356
364
|
}
|
|
357
365
|
sortData(column) {
|
|
358
366
|
if (column.sort) {
|
|
@@ -481,15 +489,18 @@ class MapaTableComponent {
|
|
|
481
489
|
}
|
|
482
490
|
getCellClass(column, row) {
|
|
483
491
|
var _a;
|
|
484
|
-
if (!this.isGroupReport ||
|
|
485
|
-
|
|
492
|
+
if (!this.isGroupReport ||
|
|
493
|
+
column.key === "name" ||
|
|
494
|
+
column.key === "cpf" ||
|
|
495
|
+
column.key === "general") {
|
|
496
|
+
return "";
|
|
486
497
|
}
|
|
487
498
|
try {
|
|
488
499
|
const classification = (_a = row[column.key]) === null || _a === void 0 ? void 0 : _a.classificationId;
|
|
489
500
|
return `classification classification-${classification}`;
|
|
490
501
|
}
|
|
491
502
|
catch (_b) {
|
|
492
|
-
return
|
|
503
|
+
return "";
|
|
493
504
|
}
|
|
494
505
|
}
|
|
495
506
|
getRowClass() {
|
|
@@ -499,10 +510,10 @@ class MapaTableComponent {
|
|
|
499
510
|
}
|
|
500
511
|
getValue(row) {
|
|
501
512
|
try {
|
|
502
|
-
return row.value +
|
|
513
|
+
return row.value + "%";
|
|
503
514
|
}
|
|
504
515
|
catch (_a) {
|
|
505
|
-
return
|
|
516
|
+
return "-";
|
|
506
517
|
}
|
|
507
518
|
}
|
|
508
519
|
changePage(event) {
|
|
@@ -513,14 +524,45 @@ class MapaTableComponent {
|
|
|
513
524
|
}
|
|
514
525
|
getBackgroundColor(column, row) {
|
|
515
526
|
var _a, _b;
|
|
516
|
-
return ((_b = (_a = column.status) === null || _a === void 0 ? void 0 : _a.color) === null || _b === void 0 ? void 0 : _b[row[column.key] || 0]) ||
|
|
527
|
+
return ((_b = (_a = column.status) === null || _a === void 0 ? void 0 : _a.color) === null || _b === void 0 ? void 0 : _b[row[column.key] || 0]) || "";
|
|
528
|
+
}
|
|
529
|
+
hasCustomClass(column, row, key) {
|
|
530
|
+
if ((column === null || column === void 0 ? void 0 : column.class) || (row === null || row === void 0 ? void 0 : row.rowStyleClass) || this.hasCellStyleClass(row, key)) {
|
|
531
|
+
return true;
|
|
532
|
+
}
|
|
533
|
+
return false;
|
|
534
|
+
}
|
|
535
|
+
getCustomClass(column, row, key) {
|
|
536
|
+
if (this.hasCellStyleClass(row, key)) {
|
|
537
|
+
return this.getCellStyleClass(row, column.key);
|
|
538
|
+
}
|
|
539
|
+
else if (column === null || column === void 0 ? void 0 : column.class) {
|
|
540
|
+
return column.class;
|
|
541
|
+
}
|
|
542
|
+
else if (row === null || row === void 0 ? void 0 : row.rowStyleClass) {
|
|
543
|
+
return row.rowStyleClass;
|
|
544
|
+
}
|
|
545
|
+
return '';
|
|
546
|
+
}
|
|
547
|
+
hasCellStyleClass(row, key) {
|
|
548
|
+
var _a;
|
|
549
|
+
return ((_a = row.styleClass) === null || _a === void 0 ? void 0 : _a.key) === key;
|
|
550
|
+
}
|
|
551
|
+
;
|
|
552
|
+
getCellStyleClass(row, key) {
|
|
553
|
+
var _a, _b;
|
|
554
|
+
return ((_a = row.styleClass) === null || _a === void 0 ? void 0 : _a.key) === key ? (_b = row.styleClass) === null || _b === void 0 ? void 0 : _b.class : '';
|
|
555
|
+
}
|
|
556
|
+
;
|
|
557
|
+
handleMenu(selected) {
|
|
558
|
+
this.emitRowClick(selected.data, selected.action);
|
|
517
559
|
}
|
|
518
560
|
}
|
|
519
561
|
MapaTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
520
|
-
MapaTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaTableComponent, selector: "mapa-table", inputs: { columns: "columns", data: "data", pageIndex: "pageIndex", pageSize: "pageSize", totalCount: "totalCount", totalPages: "totalPages", checkbox: "checkbox", selection: "selection", actions: "actions", filterControl: "filterControl", groupReport: "groupReport", isGroupReport: "isGroupReport", menuItems: "menuItems", menu: "menu" }, outputs: { rowClick: "rowClick", selectedRows: "selectedRows", onChangePage: "onChangePage" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, 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: "<section class=\"mapa-table\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n (matSortChange)=\"sortDataFunction($event)\"\n >\n <ng-container\n *ngFor=\"let column of columns; let isFirst = first\"\n [matColumnDef]=\"column.key\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header\n [disabled]=\"!(column.key !== 'actions' ? column.sort : null)\"\n >\n <div\n [ngTemplateOutlet]=\"tableHeader\"\n [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox }\"\n ></div>\n </th>\n <td mat-cell *matCellDef=\"let row\" [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' || isGroupReport && column.key !== 'name'\"\n >\n <ng-container\n *ngIf=\"column.key !== 'actions' && column.key !== 'menu'; else columnActionsOrMenu\"\n >\n <div class=\"mapa-table__content\">\n <div\n *ngIf=\"!isGroupReport\"\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]=\"[column?.class ? column.class : '']\"\n >\n <div\n *ngIf=\"column?.status?.color; else commonColumn\"\n class=\"mapa-table__column--status\"\n [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n >\n <div\n [ngTemplateOutlet]=\"tableContent\"\n [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n ></div>\n </div>\n <ng-template #commonColumn>\n <div\n [ngTemplateOutlet]=\"tableContent\"\n [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n ></div>\n </ng-template>\n </div>\n <div *ngIf=\"isGroupReport\">\n <div [ngClass]=\"getCellClass(column, row)\">\n <ng-container\n *ngIf=\"column.key === 'name' || column.key === 'cpf' || column.key === 'general'; else valueContent\"\n >\n <div *ngIf=\"column.key === 'name'\">\n <div class=\"name\">{{ row.name }}<br /></div>\n <div class=\"cpf\">\n {{row.cpf}}\n </div>\n </div>\n <div *ngIf=\"column.key === 'general'\" class=\"general\">\n {{ row[column.key] | currency:'':'' }}%\n </div>\n </ng-container>\n <ng-template #valueContent>\n {{ getValue(row[column.key]) }}\n </ng-template>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #columnActionsOrMenu>\n <div\n class=\"mapa-table__column--actions\"\n *ngIf=\"column.key === 'actions' && actions\"\n >\n <button\n *ngFor=\"let item of actions\"\n (click)=\"item.action()\"\n class=\"mapa-table__column--actions-item\"\n [title]=\"item.text\"\n mat-icon-button\n >\n <mat-icon *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n <img *ngIf=\"item.image\" [src]=\"item.image\" />\n </button>\n </div>\n <div class=\"mapa-table__column--menu\" *ngIf=\"column.key === 'menu'\">\n <mapa-menu [items]=\"menuItems\"></mapa-menu>\n </div>\n </ng-template>\n </div>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: displayedColumns;\"\n [ngClass]=\"getRowClass()\"\n ></tr>\n </table>\n\n <section *ngIf=\"!isGroupReport\">\n <mat-paginator\n class=\"mapa-table__paginator-legacy\"\n itemsPerPageLabel=\"Item por p\u00E1gina\"\n appStylePaginatorMv\n [length]=\"totalCount\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"[5, 10, 25, 100]\"\n (page)=\"changePage($event)\"\n ></mat-paginator>\n </section>\n</section>\n\n<ng-template\n #tableHeader\n let-selection=\"selection\"\n let-column=\"column\"\n let-isFirst=\"isFirst\"\n let-checkbox=\"checkbox\"\n>\n <div class=\"mapa-table__column mapa-table__column--header\">\n <ng-container *ngIf=\"isFirst && checkbox\">\n <mat-checkbox\n *ngIf=\"selection\"\n (change)=\"$event ? toggleAllRows() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n (click)=\"$event.stopPropagation()\"\n ></mat-checkbox>\n </ng-container>\n <div\n class=\"mapa-table__label\"\n [ngClass]=\"{ 'label_report': isGroupReport }\"\n >\n {{ column.label }}\n </div>\n <div\n *ngIf=\"column.key !== 'actions' && column.key !== 'menu' && column.sort\"\n >\n <mat-icon>filter_list</mat-icon>\n </div>\n </div>\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 <ng-container *ngIf=\"isFirst && checkbox\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection?.toggle(row) : null; getSelectedValues()\"\n [checked]=\"selection?.isSelected(row)\"\n >\n </mat-checkbox>\n </ng-container>\n <!-- POR FAVOR, N\u00C3O QUEBRE LINHA ENTRE NG-CONTAINER/TEMPLATE E O VALOR CONTE\u00DADO -->\n <ng-container *ngIf=\"isMaskedData(column, row); else statusContent\"\n >{{ getValueAsDate(column, row) | date: column.mask }}</ng-container\n >\n <ng-template #statusContent>\n <ng-container *ngIf=\"column.status; else commonContent\">\n <ng-container *ngIf=\"isBoolean(column, row); else commonStatus\"\n >{{ column.status.label[row[column.key] ? 1 : 0] }}</ng-container\n >\n <ng-template #commonStatus\n >{{ column.status.label[row[column.key]] || '-' }}</ng-template\n >\n </ng-container>\n <ng-template #commonContent>{{ row[column.key] }}</ng-template>\n </ng-template>\n <ng-template #statusContent>\n <ng-template #commonContent>{{ row[column.key] }}</ng-template>\n </ng-template>\n</ng-template>\n", styles: [".mapa-table .mat-table{font-family:SF-Pro;width:100%}.mapa-table .mat-table .mat-checkbox{margin:6px 8px 0 0;padding:0}.mapa-table td.mat-cell{padding:16px 0}.mapa-table .mat-table .mat-row .mat-cell{font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400;color:#50575e}.mapa-table .row-hover:hover{box-shadow:0 2px 4px #00000021;outline:1px solid rgba(238,238,238,.93);cursor:pointer}.mapa-table .mat-table .mat-header-cell{border:none;border-bottom:1px solid #eee;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:600;color:#50575e}.mapa-table .mat-mdc-row,.mapa-table .mdc-data-table__content,.mapa-table .mat-mdc-header-cell{--mat-table-row-item-label-text-font: \"SF-Pro\"}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#b6b6b6}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-frame{border-color:#ea561d}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-background{background-color:transparent}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-background{background-color:#ea561d}.mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}.mapa-table ::ng-deep .mat-mdc-paginator-page-size-label{display:none}.mapa-table__paginator-legacy .mat-paginator-container{font-family:SF-Pro!important;justify-content:flex-start}.mapa-table__paginator-legacy .mat-paginator-page-size{margin-right:10vw}.mapa-table__paginator-legacy .custom-paginator-container{justify-content:flex-end}.mapa-table__paginator-legacy .custom-paginator-counter{white-space:nowrap;margin:0 4px 0 10px!important}.mapa-table__paginator-legacy .custom-paginator-page{border-radius:4px;outline:none;border:none;margin:.4em;font-size:14px;min-width:24px;width:auto;min-height:24px;max-height:24px;padding:1px 6px}.mapa-table__paginator-legacy .custom-paginator-page-enabled{color:#50575e;background:transparent;cursor:pointer}.mapa-table__paginator-legacy .custom-paginator-page-enabled:hover{background-color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-page-disabled{background-color:#ea561d;color:#fff}.mapa-table__paginator-legacy .custom-paginator-arrow-disabled{color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-arrow-enabled{color:#999}.mapa-table{width:100%;white-space:nowrap}.mapa-table__label{margin-top:4px}.mapa-table__column{padding:15px;align-items:center;display:flex}.mapa-table__column--actions{display:flex}.mapa-table__column--actions .mat-icon{color:#ea561d!important}.mapa-table__column--actions-item{display:flex;align-items:center}.mapa-table__column--actions-item img{margin-right:8px}.mapa-table__column--header{width:100%}.mapa-table__column--header .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px;font-size:14px;height:14px;width:14px}.mapa-table__column--status{border-radius:4px;padding:4px 8px;margin:auto;text-align:center;width:min-content}.mapa-table__column--ellipsis{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mapa-table__column--no-wrap{white-space:nowrap}.mapa-table__column--wrap{white-space:pre-wrap}.mapa-table__column--center-cell{justify-content:center}.mapa-table .mat-sort-header-arrow{color:transparent}.mapa-table .mat-sort-header-content{width:100%}.mapa-table .mat-cell,.mapa-table .mat-header-cell{padding:0 10px!important}.mapa-table .mat-table{width:100%;overflow-x:auto}.mapa-table .classification{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center}.mapa-table .roundCell{border-radius:10px}.mapa-table .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}.mapa-table .name{color:#181818;text-align:left;font-family:SF-Pro;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.mapa-table .cpf{color:var(--Grey-Grey-30, #8c8f94);text-align:left;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.mapa-table .label_report{color:#181818;text-align:center;font-family:SF-Pro;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:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MapaMenuComponent, selector: "mapa-menu", inputs: ["items"] }, { kind: "component", type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: PaginatorLegacyDirective, selector: "[appStylePaginatorMv]" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None });
|
|
562
|
+
MapaTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaTableComponent, selector: "mapa-table", inputs: { columns: "columns", data: "data", pageIndex: "pageIndex", pageSize: "pageSize", totalCount: "totalCount", totalPages: "totalPages", checkbox: "checkbox", selection: "selection", actions: "actions", filterControl: "filterControl", groupReport: "groupReport", isGroupReport: "isGroupReport", menuItems: "menuItems", menu: "menu" }, outputs: { rowClick: "rowClick", selectedRows: "selectedRows", onChangePage: "onChangePage" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, 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: "<section class=\"mapa-table\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n (matSortChange)=\"sortDataFunction($event)\"\n >\n <ng-container\n *ngFor=\"let column of columns; let isFirst = first\"\n [matColumnDef]=\"column.key\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header\n [disabled]=\"!(column.key !== 'actions' ? column.sort : null)\"\n >\n <div\n [ngTemplateOutlet]=\"tableHeader\"\n [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox }\"\n ></div>\n </th>\n <td mat-cell *matCellDef=\"let row\" [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' || isGroupReport && column.key !== 'name'\"\n >\n <ng-container\n *ngIf=\"column.key !== 'actions' && column.key !== 'menu'; else columnActionsOrMenu\"\n >\n <div class=\"mapa-table__content\">\n <div\n *ngIf=\"!isGroupReport\"\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 <div\n *ngIf=\"column?.status?.color; else commonColumn\"\n class=\"mapa-table__column--status\"\n [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n >\n <div\n [ngTemplateOutlet]=\"tableContent\"\n [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n ></div>\n </div>\n <ng-template #commonColumn>\n <div\n [ngTemplateOutlet]=\"tableContent\"\n [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n ></div>\n </ng-template>\n </div>\n <div *ngIf=\"isGroupReport\">\n <div [ngClass]=\"getCellClass(column, row)\">\n <ng-container\n *ngIf=\"column.key === 'name' || column.key === 'cpf' || column.key === 'general'; else valueContent\"\n >\n <div *ngIf=\"column.key === 'name'\">\n <div class=\"name\">{{ row.name }}<br /></div>\n <div class=\"cpf\">\n {{row.cpf}}\n </div>\n </div>\n <div *ngIf=\"column.key === 'general'\" class=\"general\">\n {{ row[column.key] | currency:'':'' }}%\n </div>\n </ng-container>\n <ng-template #valueContent>\n {{ getValue(row[column.key]) }}\n </ng-template>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #columnActionsOrMenu>\n <div\n class=\"mapa-table__column--actions\"\n *ngIf=\"column.key === 'actions' && actions\"\n >\n <button\n *ngFor=\"let item of actions\"\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 <mat-icon *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n <img *ngIf=\"item.image\" [src]=\"item.image\" />\n </button>\n </div>\n <div class=\"mapa-table__column--menu\" *ngIf=\"column.key === 'menu'\">\n <mapa-menu [items]=\"menuItems\" [data]=\"row\" (emitMenu)=\"handleMenu($event)\"></mapa-menu>\n </div>\n </ng-template>\n </div>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: displayedColumns;\"\n [ngClass]=\"getRowClass()\"\n ></tr>\n </table>\n\n <section *ngIf=\"!isGroupReport\">\n <mat-paginator\n class=\"mapa-table__paginator-legacy\"\n itemsPerPageLabel=\"Item por p\u00E1gina\"\n appStylePaginatorMv\n [length]=\"totalCount\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"[5, 10, 25, 100]\"\n (page)=\"changePage($event)\"\n ></mat-paginator>\n </section>\n</section>\n\n<ng-template\n #tableHeader\n let-selection=\"selection\"\n let-column=\"column\"\n let-isFirst=\"isFirst\"\n let-checkbox=\"checkbox\"\n>\n <div class=\"mapa-table__column mapa-table__column--header\">\n <ng-container *ngIf=\"isFirst && checkbox\">\n <mat-checkbox\n *ngIf=\"selection\"\n (change)=\"$event ? toggleAllRows() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n (click)=\"$event.stopPropagation()\"\n ></mat-checkbox>\n </ng-container>\n <div\n class=\"mapa-table__label\"\n [ngClass]=\"{ 'label_report': isGroupReport }\"\n >\n {{ column.label }}\n </div>\n <div\n *ngIf=\"column.key !== 'actions' && column.key !== 'menu' && column.sort\"\n >\n <mat-icon>filter_list</mat-icon>\n </div>\n </div>\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 <ng-container *ngIf=\"isFirst && checkbox\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection?.toggle(row) : null; getSelectedValues()\"\n [checked]=\"selection?.isSelected(row)\"\n >\n </mat-checkbox>\n </ng-container>\n <!-- POR FAVOR, N\u00C3O QUEBRE LINHA ENTRE NG-CONTAINER/TEMPLATE E O VALOR CONTE\u00DADO -->\n <ng-container *ngIf=\"isMaskedData(column, row); else statusContent\"\n >{{ getValueAsDate(column, row) | date: column.mask }}</ng-container\n >\n <ng-template #statusContent>\n <ng-container *ngIf=\"column.status; else commonContent\">\n <ng-container *ngIf=\"isBoolean(column, row); else commonStatus\"\n >{{ column.status.label[row[column.key] ? 1 : 0] }}</ng-container\n >\n <ng-template #commonStatus\n >{{ column.status.label[row[column.key]] || '-' }}</ng-template\n >\n </ng-container>\n <ng-template #commonContent>{{ row[column.key] }}</ng-template>\n </ng-template>\n <ng-template #statusContent>\n <ng-template #commonContent>{{ row[column.key] }}</ng-template>\n </ng-template>\n</ng-template>\n", styles: [".mapa-table .mat-table{font-family:SF-Pro;width:100%}.mapa-table .mat-table .mat-checkbox{margin:6px 8px 0 0;padding:0}.mapa-table td.mat-cell{padding:16px 0}.mapa-table .mat-table .mat-row .mat-cell{font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400;color:#50575e}.mapa-table .row-hover:hover{box-shadow:0 2px 4px #00000021;outline:1px solid rgba(238,238,238,.93);cursor:pointer}.mapa-table .mat-table .mat-header-cell{border:none;border-bottom:1px solid #eee;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:600;color:#50575e}.mapa-table .mat-mdc-row,.mapa-table .mdc-data-table__content,.mapa-table .mat-mdc-header-cell{--mat-table-row-item-label-text-font: \"SF-Pro\"}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#b6b6b6}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-frame{border-color:#ea561d}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-background{background-color:transparent}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-background{background-color:#ea561d}.mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}.mapa-table ::ng-deep .mat-mdc-paginator-page-size-label{display:none}.mapa-table__paginator-legacy .mat-paginator-container{font-family:SF-Pro!important;justify-content:flex-start}.mapa-table__paginator-legacy .mat-paginator-page-size{margin-right:10vw}.mapa-table__paginator-legacy .custom-paginator-container{justify-content:flex-end}.mapa-table__paginator-legacy .custom-paginator-counter{white-space:nowrap;margin:0 4px 0 10px!important}.mapa-table__paginator-legacy .custom-paginator-page{border-radius:4px;outline:none;border:none;margin:.4em;font-size:14px;min-width:24px;width:auto;min-height:24px;max-height:24px;padding:1px 6px}.mapa-table__paginator-legacy .custom-paginator-page-enabled{color:#50575e;background:transparent;cursor:pointer}.mapa-table__paginator-legacy .custom-paginator-page-enabled:hover{background-color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-page-disabled{background-color:#ea561d;color:#fff}.mapa-table__paginator-legacy .custom-paginator-arrow-disabled{color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-arrow-enabled{color:#999}.mapa-table{width:100%;white-space:nowrap}.mapa-table__label{margin-top:4px}.mapa-table__column{padding:15px;align-items:center;display:flex}.mapa-table__column--actions{display:flex}.mapa-table__column--actions .mat-icon{color:#ea561d!important}.mapa-table__column--actions-item{display:flex;align-items:center}.mapa-table__column--actions-item img{margin-right:8px}.mapa-table__column--header{width:100%}.mapa-table__column--header .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px;font-size:14px;height:14px;width:14px}.mapa-table__column--status{border-radius:4px;padding:4px 8px;margin:auto;text-align:center;width:min-content}.mapa-table__column--ellipsis{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mapa-table__column--no-wrap{white-space:nowrap}.mapa-table__column--wrap{white-space:pre-wrap}.mapa-table__column--center-cell{justify-content:center}.mapa-table .mat-sort-header-arrow{color:transparent}.mapa-table .mat-sort-header-content{width:100%}.mapa-table .mat-cell,.mapa-table .mat-header-cell{padding:0 10px!important}.mapa-table .mat-table{width:100%;overflow-x:auto}.mapa-table .classification{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center}.mapa-table .roundCell{border-radius:10px}.mapa-table .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}.mapa-table .name{color:#181818;text-align:left;font-family:SF-Pro;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.mapa-table .cpf{color:var(--Grey-Grey-30, #8c8f94);text-align:left;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.mapa-table .label_report{color:#181818;text-align:center;font-family:SF-Pro;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:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MapaMenuComponent, selector: "mapa-menu", inputs: ["items", "data"], outputs: ["emitMenu"] }, { kind: "component", type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: PaginatorLegacyDirective, selector: "[appStylePaginatorMv]" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None });
|
|
521
563
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTableComponent, decorators: [{
|
|
522
564
|
type: Component,
|
|
523
|
-
args: [{ selector: "mapa-table", encapsulation: ViewEncapsulation.None, template: "<section class=\"mapa-table\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n (matSortChange)=\"sortDataFunction($event)\"\n >\n <ng-container\n *ngFor=\"let column of columns; let isFirst = first\"\n [matColumnDef]=\"column.key\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header\n [disabled]=\"!(column.key !== 'actions' ? column.sort : null)\"\n >\n <div\n [ngTemplateOutlet]=\"tableHeader\"\n [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox }\"\n ></div>\n </th>\n <td mat-cell *matCellDef=\"let row\" [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' || isGroupReport && column.key !== 'name'\"\n >\n <ng-container\n *ngIf=\"column.key !== 'actions' && column.key !== 'menu'; else columnActionsOrMenu\"\n >\n <div class=\"mapa-table__content\">\n <div\n *ngIf=\"!isGroupReport\"\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]=\"[column?.class ? column.class : '']\"\n >\n <div\n *ngIf=\"column?.status?.color; else commonColumn\"\n class=\"mapa-table__column--status\"\n [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n >\n <div\n [ngTemplateOutlet]=\"tableContent\"\n [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n ></div>\n </div>\n <ng-template #commonColumn>\n <div\n [ngTemplateOutlet]=\"tableContent\"\n [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n ></div>\n </ng-template>\n </div>\n <div *ngIf=\"isGroupReport\">\n <div [ngClass]=\"getCellClass(column, row)\">\n <ng-container\n *ngIf=\"column.key === 'name' || column.key === 'cpf' || column.key === 'general'; else valueContent\"\n >\n <div *ngIf=\"column.key === 'name'\">\n <div class=\"name\">{{ row.name }}<br /></div>\n <div class=\"cpf\">\n {{row.cpf}}\n </div>\n </div>\n <div *ngIf=\"column.key === 'general'\" class=\"general\">\n {{ row[column.key] | currency:'':'' }}%\n </div>\n </ng-container>\n <ng-template #valueContent>\n {{ getValue(row[column.key]) }}\n </ng-template>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #columnActionsOrMenu>\n <div\n class=\"mapa-table__column--actions\"\n *ngIf=\"column.key === 'actions' && actions\"\n >\n <button\n *ngFor=\"let item of actions\"\n (click)=\"item.action()\"\n class=\"mapa-table__column--actions-item\"\n [title]=\"item.text\"\n mat-icon-button\n >\n <mat-icon *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n <img *ngIf=\"item.image\" [src]=\"item.image\" />\n </button>\n </div>\n <div class=\"mapa-table__column--menu\" *ngIf=\"column.key === 'menu'\">\n <mapa-menu [items]=\"menuItems\"></mapa-menu>\n </div>\n </ng-template>\n </div>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: displayedColumns;\"\n [ngClass]=\"getRowClass()\"\n ></tr>\n </table>\n\n <section *ngIf=\"!isGroupReport\">\n <mat-paginator\n class=\"mapa-table__paginator-legacy\"\n itemsPerPageLabel=\"Item por p\u00E1gina\"\n appStylePaginatorMv\n [length]=\"totalCount\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"[5, 10, 25, 100]\"\n (page)=\"changePage($event)\"\n ></mat-paginator>\n </section>\n</section>\n\n<ng-template\n #tableHeader\n let-selection=\"selection\"\n let-column=\"column\"\n let-isFirst=\"isFirst\"\n let-checkbox=\"checkbox\"\n>\n <div class=\"mapa-table__column mapa-table__column--header\">\n <ng-container *ngIf=\"isFirst && checkbox\">\n <mat-checkbox\n *ngIf=\"selection\"\n (change)=\"$event ? toggleAllRows() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n (click)=\"$event.stopPropagation()\"\n ></mat-checkbox>\n </ng-container>\n <div\n class=\"mapa-table__label\"\n [ngClass]=\"{ 'label_report': isGroupReport }\"\n >\n {{ column.label }}\n </div>\n <div\n *ngIf=\"column.key !== 'actions' && column.key !== 'menu' && column.sort\"\n >\n <mat-icon>filter_list</mat-icon>\n </div>\n </div>\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 <ng-container *ngIf=\"isFirst && checkbox\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection?.toggle(row) : null; getSelectedValues()\"\n [checked]=\"selection?.isSelected(row)\"\n >\n </mat-checkbox>\n </ng-container>\n <!-- POR FAVOR, N\u00C3O QUEBRE LINHA ENTRE NG-CONTAINER/TEMPLATE E O VALOR CONTE\u00DADO -->\n <ng-container *ngIf=\"isMaskedData(column, row); else statusContent\"\n >{{ getValueAsDate(column, row) | date: column.mask }}</ng-container\n >\n <ng-template #statusContent>\n <ng-container *ngIf=\"column.status; else commonContent\">\n <ng-container *ngIf=\"isBoolean(column, row); else commonStatus\"\n >{{ column.status.label[row[column.key] ? 1 : 0] }}</ng-container\n >\n <ng-template #commonStatus\n >{{ column.status.label[row[column.key]] || '-' }}</ng-template\n >\n </ng-container>\n <ng-template #commonContent>{{ row[column.key] }}</ng-template>\n </ng-template>\n <ng-template #statusContent>\n <ng-template #commonContent>{{ row[column.key] }}</ng-template>\n </ng-template>\n</ng-template>\n", styles: [".mapa-table .mat-table{font-family:SF-Pro;width:100%}.mapa-table .mat-table .mat-checkbox{margin:6px 8px 0 0;padding:0}.mapa-table td.mat-cell{padding:16px 0}.mapa-table .mat-table .mat-row .mat-cell{font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400;color:#50575e}.mapa-table .row-hover:hover{box-shadow:0 2px 4px #00000021;outline:1px solid rgba(238,238,238,.93);cursor:pointer}.mapa-table .mat-table .mat-header-cell{border:none;border-bottom:1px solid #eee;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:600;color:#50575e}.mapa-table .mat-mdc-row,.mapa-table .mdc-data-table__content,.mapa-table .mat-mdc-header-cell{--mat-table-row-item-label-text-font: \"SF-Pro\"}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#b6b6b6}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-frame{border-color:#ea561d}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-background{background-color:transparent}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-background{background-color:#ea561d}.mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}.mapa-table ::ng-deep .mat-mdc-paginator-page-size-label{display:none}.mapa-table__paginator-legacy .mat-paginator-container{font-family:SF-Pro!important;justify-content:flex-start}.mapa-table__paginator-legacy .mat-paginator-page-size{margin-right:10vw}.mapa-table__paginator-legacy .custom-paginator-container{justify-content:flex-end}.mapa-table__paginator-legacy .custom-paginator-counter{white-space:nowrap;margin:0 4px 0 10px!important}.mapa-table__paginator-legacy .custom-paginator-page{border-radius:4px;outline:none;border:none;margin:.4em;font-size:14px;min-width:24px;width:auto;min-height:24px;max-height:24px;padding:1px 6px}.mapa-table__paginator-legacy .custom-paginator-page-enabled{color:#50575e;background:transparent;cursor:pointer}.mapa-table__paginator-legacy .custom-paginator-page-enabled:hover{background-color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-page-disabled{background-color:#ea561d;color:#fff}.mapa-table__paginator-legacy .custom-paginator-arrow-disabled{color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-arrow-enabled{color:#999}.mapa-table{width:100%;white-space:nowrap}.mapa-table__label{margin-top:4px}.mapa-table__column{padding:15px;align-items:center;display:flex}.mapa-table__column--actions{display:flex}.mapa-table__column--actions .mat-icon{color:#ea561d!important}.mapa-table__column--actions-item{display:flex;align-items:center}.mapa-table__column--actions-item img{margin-right:8px}.mapa-table__column--header{width:100%}.mapa-table__column--header .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px;font-size:14px;height:14px;width:14px}.mapa-table__column--status{border-radius:4px;padding:4px 8px;margin:auto;text-align:center;width:min-content}.mapa-table__column--ellipsis{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mapa-table__column--no-wrap{white-space:nowrap}.mapa-table__column--wrap{white-space:pre-wrap}.mapa-table__column--center-cell{justify-content:center}.mapa-table .mat-sort-header-arrow{color:transparent}.mapa-table .mat-sort-header-content{width:100%}.mapa-table .mat-cell,.mapa-table .mat-header-cell{padding:0 10px!important}.mapa-table .mat-table{width:100%;overflow-x:auto}.mapa-table .classification{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center}.mapa-table .roundCell{border-radius:10px}.mapa-table .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}.mapa-table .name{color:#181818;text-align:left;font-family:SF-Pro;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.mapa-table .cpf{color:var(--Grey-Grey-30, #8c8f94);text-align:left;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.mapa-table .label_report{color:#181818;text-align:center;font-family:SF-Pro;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:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
|
|
565
|
+
args: [{ selector: "mapa-table", encapsulation: ViewEncapsulation.None, template: "<section class=\"mapa-table\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n (matSortChange)=\"sortDataFunction($event)\"\n >\n <ng-container\n *ngFor=\"let column of columns; let isFirst = first\"\n [matColumnDef]=\"column.key\"\n >\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header\n [disabled]=\"!(column.key !== 'actions' ? column.sort : null)\"\n >\n <div\n [ngTemplateOutlet]=\"tableHeader\"\n [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox }\"\n ></div>\n </th>\n <td mat-cell *matCellDef=\"let row\" [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' || isGroupReport && column.key !== 'name'\"\n >\n <ng-container\n *ngIf=\"column.key !== 'actions' && column.key !== 'menu'; else columnActionsOrMenu\"\n >\n <div class=\"mapa-table__content\">\n <div\n *ngIf=\"!isGroupReport\"\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 <div\n *ngIf=\"column?.status?.color; else commonColumn\"\n class=\"mapa-table__column--status\"\n [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n >\n <div\n [ngTemplateOutlet]=\"tableContent\"\n [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n ></div>\n </div>\n <ng-template #commonColumn>\n <div\n [ngTemplateOutlet]=\"tableContent\"\n [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n ></div>\n </ng-template>\n </div>\n <div *ngIf=\"isGroupReport\">\n <div [ngClass]=\"getCellClass(column, row)\">\n <ng-container\n *ngIf=\"column.key === 'name' || column.key === 'cpf' || column.key === 'general'; else valueContent\"\n >\n <div *ngIf=\"column.key === 'name'\">\n <div class=\"name\">{{ row.name }}<br /></div>\n <div class=\"cpf\">\n {{row.cpf}}\n </div>\n </div>\n <div *ngIf=\"column.key === 'general'\" class=\"general\">\n {{ row[column.key] | currency:'':'' }}%\n </div>\n </ng-container>\n <ng-template #valueContent>\n {{ getValue(row[column.key]) }}\n </ng-template>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #columnActionsOrMenu>\n <div\n class=\"mapa-table__column--actions\"\n *ngIf=\"column.key === 'actions' && actions\"\n >\n <button\n *ngFor=\"let item of actions\"\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 <mat-icon *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n <img *ngIf=\"item.image\" [src]=\"item.image\" />\n </button>\n </div>\n <div class=\"mapa-table__column--menu\" *ngIf=\"column.key === 'menu'\">\n <mapa-menu [items]=\"menuItems\" [data]=\"row\" (emitMenu)=\"handleMenu($event)\"></mapa-menu>\n </div>\n </ng-template>\n </div>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: displayedColumns;\"\n [ngClass]=\"getRowClass()\"\n ></tr>\n </table>\n\n <section *ngIf=\"!isGroupReport\">\n <mat-paginator\n class=\"mapa-table__paginator-legacy\"\n itemsPerPageLabel=\"Item por p\u00E1gina\"\n appStylePaginatorMv\n [length]=\"totalCount\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"[5, 10, 25, 100]\"\n (page)=\"changePage($event)\"\n ></mat-paginator>\n </section>\n</section>\n\n<ng-template\n #tableHeader\n let-selection=\"selection\"\n let-column=\"column\"\n let-isFirst=\"isFirst\"\n let-checkbox=\"checkbox\"\n>\n <div class=\"mapa-table__column mapa-table__column--header\">\n <ng-container *ngIf=\"isFirst && checkbox\">\n <mat-checkbox\n *ngIf=\"selection\"\n (change)=\"$event ? toggleAllRows() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n (click)=\"$event.stopPropagation()\"\n ></mat-checkbox>\n </ng-container>\n <div\n class=\"mapa-table__label\"\n [ngClass]=\"{ 'label_report': isGroupReport }\"\n >\n {{ column.label }}\n </div>\n <div\n *ngIf=\"column.key !== 'actions' && column.key !== 'menu' && column.sort\"\n >\n <mat-icon>filter_list</mat-icon>\n </div>\n </div>\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 <ng-container *ngIf=\"isFirst && checkbox\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection?.toggle(row) : null; getSelectedValues()\"\n [checked]=\"selection?.isSelected(row)\"\n >\n </mat-checkbox>\n </ng-container>\n <!-- POR FAVOR, N\u00C3O QUEBRE LINHA ENTRE NG-CONTAINER/TEMPLATE E O VALOR CONTE\u00DADO -->\n <ng-container *ngIf=\"isMaskedData(column, row); else statusContent\"\n >{{ getValueAsDate(column, row) | date: column.mask }}</ng-container\n >\n <ng-template #statusContent>\n <ng-container *ngIf=\"column.status; else commonContent\">\n <ng-container *ngIf=\"isBoolean(column, row); else commonStatus\"\n >{{ column.status.label[row[column.key] ? 1 : 0] }}</ng-container\n >\n <ng-template #commonStatus\n >{{ column.status.label[row[column.key]] || '-' }}</ng-template\n >\n </ng-container>\n <ng-template #commonContent>{{ row[column.key] }}</ng-template>\n </ng-template>\n <ng-template #statusContent>\n <ng-template #commonContent>{{ row[column.key] }}</ng-template>\n </ng-template>\n</ng-template>\n", styles: [".mapa-table .mat-table{font-family:SF-Pro;width:100%}.mapa-table .mat-table .mat-checkbox{margin:6px 8px 0 0;padding:0}.mapa-table td.mat-cell{padding:16px 0}.mapa-table .mat-table .mat-row .mat-cell{font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400;color:#50575e}.mapa-table .row-hover:hover{box-shadow:0 2px 4px #00000021;outline:1px solid rgba(238,238,238,.93);cursor:pointer}.mapa-table .mat-table .mat-header-cell{border:none;border-bottom:1px solid #eee;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:600;color:#50575e}.mapa-table .mat-mdc-row,.mapa-table .mdc-data-table__content,.mapa-table .mat-mdc-header-cell{--mat-table-row-item-label-text-font: \"SF-Pro\"}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#b6b6b6}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-frame{border-color:#ea561d}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-background{background-color:transparent}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-background{background-color:#ea561d}.mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}.mapa-table ::ng-deep .mat-mdc-paginator-page-size-label{display:none}.mapa-table__paginator-legacy .mat-paginator-container{font-family:SF-Pro!important;justify-content:flex-start}.mapa-table__paginator-legacy .mat-paginator-page-size{margin-right:10vw}.mapa-table__paginator-legacy .custom-paginator-container{justify-content:flex-end}.mapa-table__paginator-legacy .custom-paginator-counter{white-space:nowrap;margin:0 4px 0 10px!important}.mapa-table__paginator-legacy .custom-paginator-page{border-radius:4px;outline:none;border:none;margin:.4em;font-size:14px;min-width:24px;width:auto;min-height:24px;max-height:24px;padding:1px 6px}.mapa-table__paginator-legacy .custom-paginator-page-enabled{color:#50575e;background:transparent;cursor:pointer}.mapa-table__paginator-legacy .custom-paginator-page-enabled:hover{background-color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-page-disabled{background-color:#ea561d;color:#fff}.mapa-table__paginator-legacy .custom-paginator-arrow-disabled{color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-arrow-enabled{color:#999}.mapa-table{width:100%;white-space:nowrap}.mapa-table__label{margin-top:4px}.mapa-table__column{padding:15px;align-items:center;display:flex}.mapa-table__column--actions{display:flex}.mapa-table__column--actions .mat-icon{color:#ea561d!important}.mapa-table__column--actions-item{display:flex;align-items:center}.mapa-table__column--actions-item img{margin-right:8px}.mapa-table__column--header{width:100%}.mapa-table__column--header .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px;font-size:14px;height:14px;width:14px}.mapa-table__column--status{border-radius:4px;padding:4px 8px;margin:auto;text-align:center;width:min-content}.mapa-table__column--ellipsis{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mapa-table__column--no-wrap{white-space:nowrap}.mapa-table__column--wrap{white-space:pre-wrap}.mapa-table__column--center-cell{justify-content:center}.mapa-table .mat-sort-header-arrow{color:transparent}.mapa-table .mat-sort-header-content{width:100%}.mapa-table .mat-cell,.mapa-table .mat-header-cell{padding:0 10px!important}.mapa-table .mat-table{width:100%;overflow-x:auto}.mapa-table .classification{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center}.mapa-table .roundCell{border-radius:10px}.mapa-table .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}.mapa-table .name{color:#181818;text-align:left;font-family:SF-Pro;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.mapa-table .cpf{color:var(--Grey-Grey-30, #8c8f94);text-align:left;font-family:SF-Pro;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.mapa-table .label_report{color:#181818;text-align:center;font-family:SF-Pro;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:SF-Pro;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:SF-Pro;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:SF-Pro;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:SF-Pro;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
|
|
524
566
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { columns: [{
|
|
525
567
|
type: Input
|
|
526
568
|
}], data: [{
|