keevo-components 1.8.372 → 1.8.373
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/esm2022/lib/components/kv-inputs/kv-dropdown/kv-dropdown.component.mjs +11 -5
- package/esm2022/lib/components/kv-layout/dropdown-master/dropdown-master.component.mjs +1 -1
- package/esm2022/lib/components/kv-tree-table/kv-tree-table.component.mjs +2 -2
- package/fesm2022/keevo-components.mjs +13 -7
- package/fesm2022/keevo-components.mjs.map +1 -1
- package/lib/components/kv-inputs/kv-dropdown/kv-dropdown.component.d.ts +4 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Component, Input, Output, ViewChild, Injectable, Directive, Pipe, ViewChildren, ContentChildren, forwardRef, input, output, signal, model, effect, computed, HostListener,
|
|
2
|
+
import { EventEmitter, Component, Input, Output, ViewChild, Injectable, Directive, Pipe, ViewChildren, ContentChildren, forwardRef, input, output, signal, model, effect, computed, HostListener, viewChild, NgModule, inject, contentChildren, ViewContainerRef, ChangeDetectionStrategy, HostBinding, Injector } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgClass } from '@angular/common';
|
|
5
5
|
import * as i1$1 from 'primeng/button';
|
|
@@ -2203,11 +2203,11 @@ class KvTreetableComponent {
|
|
|
2203
2203
|
this.inputBusca.nativeElement.value = '';
|
|
2204
2204
|
}
|
|
2205
2205
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvTreetableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2206
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvTreetableComponent, selector: "kv-tree-table", inputs: { disableRowNodeSticky: "disableRowNodeSticky", config: "config", dataSource: "dataSource", gridLines: "gridLines", tableCaptalized: "tableCaptalized", selectedItems: "selectedItems", paginator: "paginator", rows: "rows", treeTableDraggable: "treeTableDraggable", transferArrayItem: "transferArrayItem", ordenacao: "ordenacao", totalRecords: "totalRecords", textoEmptyMessage: "textoEmptyMessage", childrenRecoil: "childrenRecoil", showHeader: "showHeader", scrollHeight: "scrollHeight", pageLinksOptions: "pageLinksOptions", pageLinks: "pageLinks", showFirstLastIcon: "showFirstLastIcon", _templates: ["templates", "_templates"] }, outputs: { onFilter: "onFilter", onPaginate: "onPaginate", onActiveItem: "onActiveItem", onActiveItemLote: "onActiveItemLote", doubleClickEvent: "doubleClickEvent", onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onDropItem: "onDropItem" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "pTreeTable", first: true, predicate: TreeTable, descendants: true }, { propertyName: "inputBusca", first: true, predicate: ["inputBusca"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"!treeTableDraggable\">\r\n <p-treeTable\r\n #tt\r\n [value]=\"dataSource\"\r\n [columns]=\"config.columns\"\r\n [resizableColumns]=\"true\"\r\n [tableStyle]=\"{ 'min-width': '50rem' }\"\r\n [resizableColumns]=\"true\"\r\n [paginator]=\"paginator\"\r\n [rows]=\"rows\"\r\n [totalRecords]=\"totalRecords\"\r\n [rowsPerPageOptions]=\"[5, 10, 25, 50]\"\r\n [showFirstLastIcon]=\"tamanhoTela > 960 ? true : false\"\r\n [pageLinks]=\"tamanhoTela > 960 ? 2 : 1\"\r\n [styleClass]=\"gridLines ? 'p-treetable-gridlines' : ''\"\r\n [(selection)]=\"selectedItems\"\r\n [lazy]=\"config.lazy\"\r\n (onLazyLoad)=\"paginate($event)\"\r\n (onNodeSelect)=\"onNodeSelected($event)\"\r\n (onNodeUnselect)=\"onNodeUnselected($event)\"\r\n [showCurrentPageReport]=\"true\"\r\n currentPageReportTemplate=\"{first} - {last} de {totalRecords}\"\r\n [scrollHeight]=\"scrollHeight\"\r\n >\r\n <ng-template pTemplate=\"caption\" *ngIf=\"config.enableCation\">\r\n <div\r\n class=\"flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 m-0\"\r\n style=\"background-color: #eaeaea\"\r\n >\r\n <div class=\"col-12 flex flex-column\">\r\n <div *ngIf=\"config.title\" class=\"text-md font-bold my-3\">\r\n {{ config.title }}\r\n </div>\r\n <div *ngIf=\"config.subtitle\" class=\"text-sm mb-4 font-medium\">\r\n {{ config.subtitle }}\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"flex flex-row align-items-center col-10 p-0 md:col-6 lg:col-4 justify-content-center {{\r\n tamanhoTela < 768 ? '' : 'input-search'\r\n }}\"\r\n >\r\n <span *ngIf=\"config.enableFilter\" class=\"p-input-icon-left\">\r\n <i class=\"pi pi-search\"></i>\r\n\r\n <input\r\n pInputText\r\n pAutoFocus\r\n [autofocus]=\"true\"\r\n type=\"text\"\r\n (input)=\"onGlobalFilter(tt, $event)\"\r\n placeholder=\"Pesquisar...\"\r\n class=\"h-2rem\"\r\n #inputBusca\r\n />\r\n </span>\r\n </div>\r\n\r\n <div class=\"flex flex-row col-1 justify-content-end p-0\">\r\n <div class=\"flex flex-row gap-2 btns-options\">\r\n @for (action of config.actionsLote; track $index) {\r\n @if((selectedItems.length > 0 || action.showAcoesLote) &&\r\n exibirCampo(action, this.action)) {\r\n <kv-button\r\n (onClick)=\"action?.command(); activeItemLote(selectedItems)\"\r\n [pTooltip]=\"getOrExecute(action.tooltip, selectedItems)\"\r\n [tooltipPosition]=\"'bottom'\"\r\n [disabled]=\"getOrExecute(action.disabled, selectedItems) || false\"\r\n [icon]=\"getOrExecute(action.icon, selectedItems)\"\r\n [severity]=\"action.severity || 'tertiary'\"\r\n />\r\n } }\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n @if(showHeader){\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @for(col of columns; track $index){\r\n <th\r\n [ttSortableColumn]=\"col.field\"\r\n [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n [style.width]=\"col.width\"\r\n >\r\n <div>\r\n <div [ngClass]=\"{ flex: $index == 0, 'gap-3': $index == 0 }\">\r\n <div *ngIf=\"$index == 0 && config.enableSelect\">\r\n <p-treeTableHeaderCheckbox\r\n (click)=\"activeItemLote(selectedItems)\"\r\n />\r\n </div>\r\n \r\n <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n <span class=\"text-xs\">{{ col.header }}</span>\r\n \r\n @if(col.sortable) {\r\n <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\"/>\r\n \r\n }\r\n \r\n <span\r\n *ngIf=\"col.headerTooltip\"\r\n class=\"material-symbols-outlined flex align-items-center\"\r\n [pTooltip]=\"col.headerTooltip\"\r\n >info</span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </th>\r\n @if (config.actions?.length ?? 0 > 0) {\r\n <th [style.width]=\"5\"></th>\r\n } }\r\n </tr>\r\n </ng-template>\r\n \r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @for (col of columns; track $index) {\r\n <th\r\n [ttSortableColumn]=\"col.field\"\r\n [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n [style.width]=\"col.width\"\r\n >\r\n <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n <span class=\"text-xs\">{{ col.header }}</span>\r\n \r\n @if(col.sortable) {\r\n <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\"/>\r\n }\r\n </div>\r\n </th>\r\n } @if (config.actions?.length ?? 0 > 0) {\r\n <th [style.width]=\"5\"></th>\r\n }\r\n </tr>\r\n </ng-template>\r\n }\r\n\r\n\r\n <ng-template\r\n pTemplate=\"body\"\r\n let-rowNode\r\n let-rowData=\"rowData\"\r\n let-columns=\"columns\"\r\n >\r\n <tr\r\n [ttRow]=\"rowNode\"\r\n (dblclick)=\"doubleClick($event, rowData)\"\r\n [ngClass]=\"{ capitalize: tableCaptalized }\"\r\n >\r\n @for(col of columns; track $index){\r\n <td\r\n [style.position]=\"rowNode.level !== 0 ? 'sticky' : null\"\r\n [style.left.px]=\"\r\n childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null\r\n \"\r\n [style.borderRight]=\"rowNode.level === 0 ? 'none' : ''\"\r\n [style.borderLeft]=\"\r\n rowNode.level === 0 && col.field != config.columns[0].field\r\n ? 'none'\r\n : ''\r\n \"\r\n >\r\n <div class=\"flex flex-row {{ align(col) }}\">\r\n <div\r\n class=\"w-full-h-full flex align-items-center\"\r\n *ngIf=\"$index == 0\"\r\n >\r\n <p-treeTableToggler class=\"hiddenVisible\" [rowNode]=\"rowNode\" />\r\n\r\n @if(config.enableSelect) {\r\n <p-treeTableCheckbox\r\n [disabled]=\"isDisabledCheckbox(rowData, rowNode)\"\r\n (click)=\"activeItemLote(selectedItems)\"\r\n [value]=\"rowNode\"\r\n [ngStyle]=\"{\r\n 'display': isSelectEnabled(rowData, rowNode) ? 'block' : 'none',\r\n 'margin-left': config.visibleCheckboxFunction ? '-34px' : '0px'\r\n }\"\r\n />\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"flex flex-row align-items-center\">\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-center gap-2\"\r\n >\r\n @if(col.tagColor) {\r\n <div\r\n class=\"tag\"\r\n [pTooltip]=\"\r\n col.tooltipTag &&\r\n col.tooltipTag(rowData, col, rowData[col.field])\r\n \"\r\n [style.background-color]=\"\r\n col.tagColor(rowData, col, rowData[col.field])\r\n \"\r\n ></div>\r\n\r\n }\r\n <i\r\n *ngIf=\"col.boolean\"\r\n class=\"pi {{\r\n rowData[col.field] ? 'pi-check text-green-300' : ''\r\n }}\"\r\n style=\"font-size: 1.1rem\"\r\n ></i>\r\n\r\n <div class=\"flex flex-column\" *ngIf=\"!col.boolean\">\r\n <span class=\"m-0 text-xs\">{{ rowData[col.field] }}</span>\r\n\r\n <p *ngIf=\"col.subtitle\" class=\"m-0 text-xs font-semibold\">\r\n {{ rowData[col.subtitle] }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <span *ngIf=\"col.template && validateShowTemplate(rowNode, col)\">\r\n <ng-container\r\n *ngIf=\"getCustomTemplate(col.template.name)\"\r\n [ngTemplateOutlet]=\"getCustomTemplate(col.template.name)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: rowData }\"\r\n >\r\n </ng-container>\r\n </span>\r\n </td>\r\n }\r\n\r\n <td\r\n style=\"border-left: none; text-align: center\"\r\n *ngIf=\"(config.actions?.length ?? 0 > 0) || config.actionsPai\"\r\n >\r\n <div\r\n *ngIf=\"\r\n (config.actions?.length ?? 0 > 0) &&\r\n validateActionPosition(rowNode)\r\n \"\r\n >\r\n <span\r\n class=\"material-symbols-outlined cursor-pointer icon-more-horiz p-1\"\r\n style=\"font-size: 20px\"\r\n (click)=\"menu.toggle($event); activeItem(rowData)\"\r\n >\r\n more_horiz\r\n </span>\r\n\r\n @for(action of config.actions; track $index) {\r\n {{ criarMenusModal(rowData) }}\r\n }\r\n\r\n <p-menu\r\n #menu\r\n [popup]=\"true\"\r\n [model]=\"menuItems\"\r\n appendTo=\"body\"\r\n ></p-menu>\r\n </div>\r\n\r\n @if(config.actionsPai?.length ?? 0 > 0 && rowNode.level == 0){\r\n <div class=\"flex justify-content-end\">\r\n @for (actionPai of config.actionsPai; track $index) { @if\r\n (getOrExecute(actionPai.visible, rowData) ?? true) {\r\n <kv-button\r\n (onClick)=\"activeItem(rowData); actionPai.command($event)\"\r\n [type]=\"'text'\"\r\n [icon]=\"actionPai.icon\"\r\n [severity]=\"actionPai.severity || 'tertiary'\"\r\n />\r\n } }\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td\r\n [attr.colspan]=\"config.columns.length + 1\"\r\n style=\"text-align: center;\"\r\n class=\"text-sm\"\r\n >\r\n {{ textoEmptyMessage }}\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-treeTable>\r\n</div>\r\n\r\n<div\r\n *ngIf=\"treeTableDraggable\"\r\n cdkDropList\r\n class=\"example-list\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n <p-treeTable\r\n #tt\r\n class=\"treetabledraggable\"\r\n [value]=\"dataSource\"\r\n [columns]=\"config.columns\"\r\n [resizableColumns]=\"true\"\r\n [tableStyle]=\"{ 'min-width': '50rem' }\"\r\n [resizableColumns]=\"true\"\r\n [paginator]=\"paginator\"\r\n [rows]=\"rows\"\r\n [pageLinks]=\"pageLinks\"\r\n [totalRecords]=\"totalRecords\"\r\n [rowsPerPageOptions]=\"[5, 10, 25, 50]\"\r\n [showFirstLastIcon]=\"tamanhoTela > 960 ? true : false\"\r\n [pageLinks]=\"tamanhoTela > 960 ? 2 : 1\"\r\n [styleClass]=\"gridLines ? 'p-treetable-gridlines' : ''\"\r\n [(selection)]=\"selectedItems\"\r\n [lazy]=\"config.lazy\"\r\n (onLazyLoad)=\"paginate($event)\"\r\n currentPageReportTemplate=\"{first} - {last} de {{ totalRecords }}\"\r\n [scrollHeight]=\"scrollHeight\"\r\n >\r\n <ng-template pTemplate=\"caption\" *ngIf=\"config.enableCation\">\r\n <div\r\n class=\"flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 m-0\"\r\n style=\"background-color: #eaeaea\"\r\n >\r\n <div class=\"col-12 flex flex-column\">\r\n <div *ngIf=\"config.title\" class=\"text-md font-bold my-3\">\r\n {{ config.title }}\r\n </div>\r\n <div *ngIf=\"config.subtitle\" class=\"text-sm mb-4 font-medium\">\r\n {{ config.subtitle }}\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"flex flex-row align-items-center col-10 p-0 md:col-6 lg:col-4 justify-content-center {{\r\n tamanhoTela < 768 ? '' : 'input-search'\r\n }}\"\r\n >\r\n <span *ngIf=\"config.enableFilter\" class=\"p-input-icon-left\">\r\n <i class=\"pi pi-search\"></i>\r\n\r\n <input\r\n pInputText\r\n pAutoFocus\r\n [autofocus]=\"true\"\r\n type=\"text\"\r\n (input)=\"onGlobalFilter(tt, $event)\"\r\n placeholder=\"Pesquisar...\"\r\n class=\"h-2rem\"\r\n #inputBusca\r\n />\r\n </span>\r\n </div>\r\n\r\n <div class=\"flex flex-row col-1 justify-content-end p-0\">\r\n <div class=\"flex flex-row gap-2 btns-options\">\r\n @for (action of config.actionsLote; track $index) {\r\n @if((selectedItems.length > 0 || action.showAcoesLote) &&\r\n exibirCampo(action, this.action)) {\r\n <kv-button\r\n (onClick)=\"action?.command(); activeItemLote(selectedItems)\"\r\n [pTooltip]=\"getOrExecute(action.tooltip, selectedItems)\"\r\n [tooltipPosition]=\"'bottom'\"\r\n [disabled]=\"getOrExecute(action.disabled, selectedItems) || false\"\r\n [icon]=\"getOrExecute(action.icon, selectedItems)\"\r\n [severity]=\"action.severity || 'tertiary'\"\r\n />\r\n } }\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n @if(showHeader){\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @for(col of columns; track $index){\r\n <th\r\n [ttSortableColumn]=\"col.field\"\r\n [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n class=\"text-sm\"\r\n [style.width]=\"col.width\"\r\n >\r\n <div>\r\n <div [ngClass]=\"{ flex: $index == 0, 'gap-3': $index == 0 }\">\r\n <div *ngIf=\"$index == 0 && config.enableSelect\">\r\n <p-treeTableHeaderCheckbox\r\n (click)=\"activeItemLote(selectedItems)\"\r\n />\r\n </div>\r\n \r\n <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n <span class=\"text-xs\">{{ col.header }}</span>\r\n \r\n @if(col.sortable) {\r\n <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\"/>\r\n \r\n }\r\n \r\n <span\r\n *ngIf=\"col.headerTooltip\"\r\n class=\"material-symbols-outlined flex align-items-center\"\r\n [pTooltip]=\"col.headerTooltip\"\r\n >info</span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </th>\r\n }\r\n </tr>\r\n </ng-template>\r\n \r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @for (col of columns; track $index) {\r\n <th\r\n [ttSortableColumn]=\"col.field\"\r\n [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n [style.width]=\"col.width\"\r\n >\r\n <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n <span class=\"text-xs\">{{ col.header }}</span>\r\n \r\n @if(col.sortable) {\r\n <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\"/>\r\n \r\n }\r\n </div>\r\n </th>\r\n }\r\n <th [style.width]=\"5\"></th>\r\n </tr>\r\n </ng-template> \r\n }\r\n\r\n\r\n <ng-template\r\n pTemplate=\"body\"\r\n let-rowNode\r\n let-rowData=\"rowData\"\r\n let-columns=\"columns\"\r\n >\r\n <tr\r\n cdkDrag\r\n cdkDragLockAxis=\"y\"\r\n [cdkDragData]=\"rowNode\"\r\n [ttRow]=\"rowNode\"\r\n (dblclick)=\"doubleClick($event, rowData)\"\r\n [ngClass]=\"{ capitalize: tableCaptalized }\"\r\n >\r\n \r\n @for(col of columns; track $index){\r\n <td\r\n class=\"draggable-cell\"\r\n [style.position]=\"!disableRowNodeSticky && rowNode.level !== 0 ? 'sticky' : null\"\r\n \r\n >\r\n \r\n <!-- [style.left.px]=\"\r\n childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null\r\n \" -->\r\n \r\n <div class=\"flex flex-row {{ align(col) }}\">\r\n \r\n <div\r\n class=\"w-full-h-full flex align-items-center\"\r\n *ngIf=\"$index == 0\"\r\n \r\n >\r\n <span\r\n class=\"material-symbols-outlined drag-icon\"\r\n style=\"cursor: grab; font-size: 25px; color: #6b7280; opacity: 0.9;\"\r\n cdkDragHandle\r\n >\r\n drag_indicator\r\n </span>\r\n <p-treeTableToggler \r\n class=\"hiddenVisible\" \r\n [rowNode]=\"rowNode\"\r\n />\r\n\r\n @if(config.enableSelect) {\r\n <p-treeTableCheckbox\r\n [disabled]=\"isDisabledCheckbox(rowData, rowNode)\"\r\n (click)=\"activeItemLote(selectedItems)\"\r\n [value]=\"rowNode\"\r\n [ngStyle]=\"{\r\n 'display': isSelectEnabled(rowData, rowNode) ? 'block' : 'none',\r\n 'margin-left': config.visibleCheckboxFunction ? '-34px' : '0px'\r\n }\"\r\n />\r\n }\r\n \r\n </div>\r\n\r\n <div class=\"flex flex-row align-items-center\">\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-center gap-2\"\r\n >\r\n @if(col.tagColor) {\r\n <div\r\n class=\"tag\"\r\n [pTooltip]=\"\r\n col.tooltipTag &&\r\n col.tooltipTag(rowData, col, rowData[col.field])\r\n \"\r\n [style.background-color]=\"\r\n col.tagColor(rowData, col, rowData[col.field])\r\n \"\r\n ></div>\r\n\r\n }\r\n\r\n <i\r\n *ngIf=\"col.boolean\"\r\n class=\"pi {{\r\n rowData[col.field] ? 'pi-check text-green-300' : ''\r\n }}\"\r\n style=\"font-size: 1.1rem\"\r\n ></i>\r\n\r\n <div class=\"flex flex-column\" *ngIf=\"!col.boolean\">\r\n <span class=\"m-0 text-xs\">{{ rowData[col.field] }}</span>\r\n\r\n <p *ngIf=\"col.subtitle\" class=\"m-0 text-xs font-semibold\">\r\n {{ rowData[col.subtitle] }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <span *ngIf=\"col.template && validateShowTemplate(rowNode, col)\">\r\n <ng-container\r\n *ngIf=\"getCustomTemplate(col.template.name)\"\r\n [ngTemplateOutlet]=\"getCustomTemplate(col.template.name)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: rowData }\"\r\n >\r\n </ng-container>\r\n </span>\r\n </td>\r\n }\r\n\r\n <td\r\n style=\"border-left: none; text-align: center\"\r\n *ngIf=\"(config.actions?.length ?? 0 > 0) || config.actionsPai\"\r\n [style.borderRight]=\"rowNode.level === 0 ? 'none' : ''\"\r\n [style.borderLeft]=\"rowNode.level === 0 ? 'none' : ''\"\r\n >\r\n <div\r\n *ngIf=\"\r\n (config.actions?.length ?? 0 > 0) &&\r\n validateActionPosition(rowNode)\r\n \"\r\n class=\"flex align-items-center justify-content-center\"\r\n >\r\n <span\r\n class=\"material-symbols-outlined cursor-pointer icon-more-horiz p-1\"\r\n style=\"font-size: 20px\"\r\n (click)=\"menu.toggle($event); activeItem(rowData)\"\r\n >\r\n more_horiz\r\n </span>\r\n\r\n \r\n\r\n @for(action of config.actions; track $index) {\r\n {{ criarMenusModal(rowData) }}\r\n }\r\n \r\n <p-menu\r\n #menu\r\n [popup]=\"true\"\r\n [model]=\"menuItems\"\r\n appendTo=\"body\"\r\n ></p-menu>\r\n \r\n </div>\r\n \r\n @if(config.actionsPai?.length ?? 0 > 0 && rowNode.level == 0){\r\n <div class=\"flex justify-content-end align-items-center \">\r\n @for (actionPai of config.actionsPai; track $index) {\r\n @if(getOrExecute(actionPai.visible, rowData) ?? true) {\r\n <kv-button\r\n (onClick)=\"activeItem(rowData); actionPai.command($event)\"\r\n [type]=\"'text'\"\r\n [icon]=\"actionPai.icon\"\r\n [severity]=\"actionPai.severity || 'tertiary'\"\r\n />\r\n \r\n } }\r\n </div>\r\n }\r\n \r\n \r\n\r\n </td>\r\n \r\n </tr>\r\n\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td\r\n [attr.colspan]=\"config.columns.length + 1\"\r\n style=\"text-align: center\"\r\n class=\"text-sm\"\r\n >\r\n {{ textoEmptyMessage }}\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-treeTable>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .p-treetable .p-treetable-tbody>tr>td{padding:.4rem}::ng-deep .p-treetable .p-treetable-header{padding:0rem}span{font-size:14px}:host ::ng-deep .p-treetable table{table-layout:auto!important}::ng-deep .p-checkbox .p-checkbox-box{width:1.125rem;height:1.125rem}::ng-deep .p-checkbox{display:flex;align-items:center}::ng-deep .p-treetable .p-paginator{scale:.8}.icon-more-horiz{font-weight:700}.icon-more-horiz:hover,.icon-more-horiz:focus{color:#5e5e5e;transition:color .3s,transform .3s;background-color:#eaeaea;border-radius:50%}::ng-deep .p-treetable .p-treetable-thead>tr>th{background-color:#eaeaea}:host ::ng-deep .treetabledraggable .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:1rem;height:1rem}.tag{width:5px;height:20px;border-radius:.25rem}:host ::ng-deep .draggable-cell .drag-icon{visibility:hidden}:host ::ng-deep .draggable-cell:hover .drag-icon{visibility:visible}.cdk-drag-preview{display:flex;align-items:center;justify-content:space-between;border-radius:10px!important}.cdk-drop-list-dragging{cursor:grabbing}:host ::ng-deep .cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}:host ::ng-deep .cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}::ng-deep svg.p-icon{width:.65rem;height:.65rem}::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:#004172;background:#004172}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:hover{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:active{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:disabled{background-color:#002542;opacity:.4;cursor:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5$2.AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i5$3.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: i5.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i8$2.TreeTable, selector: "p-treeTable", inputs: ["columns", "style", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i8$2.TreeTableToggler, selector: "p-treeTableToggler", inputs: ["rowNode"] }, { kind: "directive", type: i8$2.TTSortableColumn, selector: "[ttSortableColumn]", inputs: ["ttSortableColumn", "ttSortableColumnDisabled"] }, { kind: "component", type: i8$2.TTSortIcon, selector: "p-treeTableSortIcon", inputs: ["field", "ariaLabelDesc", "ariaLabelAsc"] }, { kind: "directive", type: i8$2.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: i8$2.TTCheckbox, selector: "p-treeTableCheckbox", inputs: ["disabled", "value"] }, { kind: "component", type: i8$2.TTHeaderCheckbox, selector: "p-treeTableHeaderCheckbox" }, { kind: "component", type: KvButtonComponent, selector: "kv-button", inputs: ["fullWidth", "type", "loading", "severity", "size", "icon", "label", "disabled"], outputs: ["onClick"] }] }); }
|
|
2206
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvTreetableComponent, selector: "kv-tree-table", inputs: { disableRowNodeSticky: "disableRowNodeSticky", config: "config", dataSource: "dataSource", gridLines: "gridLines", tableCaptalized: "tableCaptalized", selectedItems: "selectedItems", paginator: "paginator", rows: "rows", treeTableDraggable: "treeTableDraggable", transferArrayItem: "transferArrayItem", ordenacao: "ordenacao", totalRecords: "totalRecords", textoEmptyMessage: "textoEmptyMessage", childrenRecoil: "childrenRecoil", showHeader: "showHeader", scrollHeight: "scrollHeight", pageLinksOptions: "pageLinksOptions", pageLinks: "pageLinks", showFirstLastIcon: "showFirstLastIcon", _templates: ["templates", "_templates"] }, outputs: { onFilter: "onFilter", onPaginate: "onPaginate", onActiveItem: "onActiveItem", onActiveItemLote: "onActiveItemLote", doubleClickEvent: "doubleClickEvent", onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onDropItem: "onDropItem" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "pTreeTable", first: true, predicate: TreeTable, descendants: true }, { propertyName: "inputBusca", first: true, predicate: ["inputBusca"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"!treeTableDraggable\">\r\n <p-treeTable\r\n #tt\r\n [value]=\"dataSource\"\r\n [columns]=\"config.columns\"\r\n [resizableColumns]=\"true\"\r\n [tableStyle]=\"{ 'min-width': '50rem' }\"\r\n [resizableColumns]=\"true\"\r\n [paginator]=\"paginator\"\r\n [rows]=\"rows\"\r\n [totalRecords]=\"totalRecords\"\r\n [rowsPerPageOptions]=\"[5, 10, 25, 50]\"\r\n [showFirstLastIcon]=\"tamanhoTela > 960 ? true : false\"\r\n [pageLinks]=\"tamanhoTela > 960 ? 2 : 1\"\r\n [styleClass]=\"gridLines ? 'p-treetable-gridlines' : ''\"\r\n [(selection)]=\"selectedItems\"\r\n [lazy]=\"config.lazy\"\r\n (onLazyLoad)=\"paginate($event)\"\r\n (onNodeSelect)=\"onNodeSelected($event)\"\r\n (onNodeUnselect)=\"onNodeUnselected($event)\"\r\n [showCurrentPageReport]=\"true\"\r\n currentPageReportTemplate=\"{first} - {last} de {totalRecords}\"\r\n [scrollHeight]=\"scrollHeight\"\r\n >\r\n <ng-template pTemplate=\"caption\" *ngIf=\"config.enableCation\">\r\n <div\r\n class=\"flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 m-0\"\r\n style=\"background-color: #eaeaea\"\r\n >\r\n <div class=\"col-12 flex flex-column\">\r\n <div *ngIf=\"config.title\" class=\"text-md font-bold my-3\">\r\n {{ config.title }}\r\n </div>\r\n <div *ngIf=\"config.subtitle\" class=\"text-sm mb-4 font-medium\">\r\n {{ config.subtitle }}\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"flex flex-row align-items-center col-10 p-0 md:col-6 lg:col-4 justify-content-center {{\r\n tamanhoTela < 768 ? '' : 'input-search'\r\n }}\"\r\n >\r\n <span *ngIf=\"config.enableFilter\" class=\"p-input-icon-left\">\r\n <i class=\"pi pi-search\"></i>\r\n\r\n <input\r\n pInputText\r\n pAutoFocus\r\n [autofocus]=\"true\"\r\n type=\"text\"\r\n (input)=\"onGlobalFilter(tt, $event)\"\r\n placeholder=\"Pesquisar...\"\r\n class=\"h-2rem\"\r\n #inputBusca\r\n />\r\n </span>\r\n </div>\r\n\r\n <div class=\"flex flex-row col-1 justify-content-end p-0\">\r\n <div class=\"flex flex-row gap-2 btns-options\">\r\n @for (action of config.actionsLote; track $index) {\r\n @if((selectedItems.length > 0 || action.showAcoesLote) &&\r\n exibirCampo(action, this.action)) {\r\n <kv-button\r\n (onClick)=\"action?.command(); activeItemLote(selectedItems)\"\r\n [pTooltip]=\"getOrExecute(action.tooltip, selectedItems)\"\r\n [tooltipPosition]=\"'bottom'\"\r\n [disabled]=\"getOrExecute(action.disabled, selectedItems) || false\"\r\n [icon]=\"getOrExecute(action.icon, selectedItems)\"\r\n [severity]=\"action.severity || 'tertiary'\"\r\n />\r\n } }\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n @if(showHeader){\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @for(col of columns; track $index){\r\n <th\r\n [ttSortableColumn]=\"col.field\"\r\n [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n [style.width]=\"col.width\"\r\n >\r\n <div>\r\n <div [ngClass]=\"{ flex: $index == 0, 'gap-3': $index == 0 }\">\r\n <div *ngIf=\"$index == 0 && config.enableSelect\">\r\n <p-treeTableHeaderCheckbox\r\n (click)=\"activeItemLote(selectedItems)\"\r\n />\r\n </div>\r\n \r\n <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n <span class=\"text-xs\">{{ col.header }}</span>\r\n \r\n @if(col.sortable) {\r\n <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\"/>\r\n \r\n }\r\n \r\n <span\r\n *ngIf=\"col.headerTooltip\"\r\n class=\"material-symbols-outlined flex align-items-center\"\r\n [pTooltip]=\"col.headerTooltip\"\r\n >info</span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </th>\r\n @if (config.actions?.length ?? 0 > 0) {\r\n <th [style.width]=\"5\"></th>\r\n } }\r\n </tr>\r\n </ng-template>\r\n \r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @for (col of columns; track $index) {\r\n <th\r\n [ttSortableColumn]=\"col.field\"\r\n [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n [style.width]=\"col.width\"\r\n >\r\n <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n <span class=\"text-xs\">{{ col.header }}</span>\r\n \r\n @if(col.sortable) {\r\n <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\"/>\r\n }\r\n </div>\r\n </th>\r\n } @if (config.actions?.length ?? 0 > 0) {\r\n <th [style.width]=\"5\"></th>\r\n }\r\n </tr>\r\n </ng-template>\r\n }\r\n\r\n\r\n <ng-template\r\n pTemplate=\"body\"\r\n let-rowNode\r\n let-rowData=\"rowData\"\r\n let-columns=\"columns\"\r\n >\r\n <tr\r\n [ttRow]=\"rowNode\"\r\n (dblclick)=\"doubleClick($event, rowData)\"\r\n [ngClass]=\"{ capitalize: tableCaptalized }\"\r\n >\r\n @for(col of columns; track $index){\r\n <td\r\n [style.position]=\"rowNode.level !== 0 ? 'sticky' : null\"\r\n [style.left.px]=\"\r\n childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null\r\n \"\r\n [style.borderRight]=\"rowNode.level === 0 ? 'none' : ''\"\r\n [style.borderLeft]=\"\r\n rowNode.level === 0 && col.field != config.columns[0].field\r\n ? 'none'\r\n : ''\r\n \"\r\n >\r\n <div class=\"flex flex-row {{ align(col) }}\">\r\n <div\r\n class=\"w-full-h-full flex align-items-center\"\r\n *ngIf=\"$index == 0\"\r\n >\r\n <p-treeTableToggler class=\"hiddenVisible\" [rowNode]=\"rowNode\" />\r\n\r\n @if(config.enableSelect) {\r\n <p-treeTableCheckbox\r\n [disabled]=\"isDisabledCheckbox(rowData, rowNode)\"\r\n (click)=\"activeItemLote(selectedItems)\"\r\n [value]=\"rowNode\"\r\n [ngStyle]=\"{\r\n 'display': isSelectEnabled(rowData, rowNode) ? 'block' : 'none',\r\n 'margin-left': config.visibleCheckboxFunction ? '-34px' : '0px'\r\n }\"\r\n />\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"flex flex-row align-items-center\">\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-center gap-2\"\r\n >\r\n @if(col.tagColor) {\r\n <div\r\n class=\"tag\"\r\n [pTooltip]=\"\r\n col.tooltipTag &&\r\n col.tooltipTag(rowData, col, rowData[col.field])\r\n \"\r\n [style.background-color]=\"\r\n col.tagColor(rowData, col, rowData[col.field])\r\n \"\r\n ></div>\r\n\r\n }\r\n <i\r\n *ngIf=\"col.boolean\"\r\n class=\"pi {{\r\n rowData[col.field] ? 'pi-check text-green-300' : ''\r\n }}\"\r\n style=\"font-size: 1.1rem\"\r\n ></i>\r\n\r\n <div class=\"flex flex-column\" *ngIf=\"!col.boolean\">\r\n <span class=\"m-0 text-xs\">{{ rowData[col.field] }}</span>\r\n\r\n <p *ngIf=\"col.subtitle\" class=\"m-0 text-xs font-semibold\">\r\n {{ rowData[col.subtitle] }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <span *ngIf=\"col.template && validateShowTemplate(rowNode, col)\">\r\n <ng-container\r\n *ngIf=\"getCustomTemplate(col.template.name)\"\r\n [ngTemplateOutlet]=\"getCustomTemplate(col.template.name)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: rowData }\"\r\n >\r\n </ng-container>\r\n </span>\r\n </td>\r\n }\r\n\r\n <td\r\n style=\"border-left: none; text-align: center\"\r\n *ngIf=\"(config.actions?.length ?? 0 > 0) || config.actionsPai\"\r\n >\r\n <div\r\n *ngIf=\"\r\n (config.actions?.length ?? 0 > 0) &&\r\n validateActionPosition(rowNode)\r\n \"\r\n >\r\n <span\r\n class=\"material-symbols-outlined cursor-pointer icon-more-horiz p-1\"\r\n style=\"font-size: 20px\"\r\n (click)=\"menu.toggle($event); activeItem(rowData)\"\r\n >\r\n more_horiz\r\n </span>\r\n\r\n @for(action of config.actions; track $index) {\r\n {{ criarMenusModal(rowData) }}\r\n }\r\n\r\n <p-menu\r\n #menu\r\n [popup]=\"true\"\r\n [model]=\"menuItems\"\r\n appendTo=\"body\"\r\n ></p-menu>\r\n </div>\r\n\r\n @if(config.actionsPai?.length ?? 0 > 0 && rowNode.level == 0){\r\n <div class=\"flex justify-content-end\">\r\n @for (actionPai of config.actionsPai; track $index) { @if\r\n (getOrExecute(actionPai.visible, rowData) ?? true) {\r\n <kv-button\r\n (onClick)=\"activeItem(rowData); actionPai.command($event)\"\r\n [type]=\"'text'\"\r\n [icon]=\"actionPai.icon\"\r\n [severity]=\"actionPai.severity || 'tertiary'\"\r\n />\r\n } }\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td\r\n [attr.colspan]=\"config.columns.length + 1\"\r\n style=\"text-align: center;\"\r\n class=\"text-sm\"\r\n >\r\n {{ textoEmptyMessage }}\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-treeTable>\r\n</div>\r\n\r\n<div\r\n *ngIf=\"treeTableDraggable\"\r\n cdkDropList\r\n class=\"example-list\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n <p-treeTable\r\n #tt\r\n class=\"treetabledraggable\"\r\n [value]=\"dataSource\"\r\n [columns]=\"config.columns\"\r\n [resizableColumns]=\"true\"\r\n [tableStyle]=\"{ 'min-width': '50rem' }\"\r\n [resizableColumns]=\"true\"\r\n [paginator]=\"paginator\"\r\n [rows]=\"rows\"\r\n [pageLinks]=\"pageLinks\"\r\n [totalRecords]=\"totalRecords\"\r\n [rowsPerPageOptions]=\"[5, 10, 25, 50]\"\r\n [showFirstLastIcon]=\"tamanhoTela > 960 ? true : false\"\r\n [pageLinks]=\"tamanhoTela > 960 ? 2 : 1\"\r\n [styleClass]=\"gridLines ? 'p-treetable-gridlines' : ''\"\r\n [(selection)]=\"selectedItems\"\r\n [lazy]=\"config.lazy\"\r\n (onLazyLoad)=\"paginate($event)\"\r\n currentPageReportTemplate=\"{first} - {last} de {{ totalRecords }}\"\r\n [scrollHeight]=\"scrollHeight\"\r\n >\r\n <ng-template pTemplate=\"caption\" *ngIf=\"config.enableCation\">\r\n <div\r\n class=\"flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 m-0\"\r\n style=\"background-color: #eaeaea\"\r\n >\r\n <div class=\"col-12 flex flex-column\">\r\n <div *ngIf=\"config.title\" class=\"text-md font-bold my-3\">\r\n {{ config.title }}\r\n </div>\r\n <div *ngIf=\"config.subtitle\" class=\"text-sm mb-4 font-medium\">\r\n {{ config.subtitle }}\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"flex flex-row align-items-center col-10 p-0 md:col-6 lg:col-4 justify-content-center {{\r\n tamanhoTela < 768 ? '' : 'input-search'\r\n }}\"\r\n >\r\n <span *ngIf=\"config.enableFilter\" class=\"p-input-icon-left\">\r\n <i class=\"pi pi-search\"></i>\r\n\r\n <input\r\n pInputText\r\n pAutoFocus\r\n [autofocus]=\"true\"\r\n type=\"text\"\r\n (input)=\"onGlobalFilter(tt, $event)\"\r\n placeholder=\"Pesquisar...\"\r\n class=\"h-2rem\"\r\n #inputBusca\r\n />\r\n </span>\r\n </div>\r\n\r\n <div class=\"flex flex-row col-1 justify-content-end p-0\">\r\n <div class=\"flex flex-row gap-2 btns-options\">\r\n @for (action of config.actionsLote; track $index) {\r\n @if((selectedItems.length > 0 || action.showAcoesLote) &&\r\n exibirCampo(action, this.action)) {\r\n <kv-button\r\n (onClick)=\"action?.command(); activeItemLote(selectedItems)\"\r\n [pTooltip]=\"getOrExecute(action.tooltip, selectedItems)\"\r\n [tooltipPosition]=\"'bottom'\"\r\n [disabled]=\"getOrExecute(action.disabled, selectedItems) || false\"\r\n [icon]=\"getOrExecute(action.icon, selectedItems)\"\r\n [severity]=\"action.severity || 'tertiary'\"\r\n />\r\n } }\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n @if(showHeader){\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @for(col of columns; track $index){\r\n <th\r\n [ttSortableColumn]=\"col.field\"\r\n [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n class=\"text-sm\"\r\n [style.width]=\"col.width\"\r\n >\r\n <div>\r\n <div [ngClass]=\"{ flex: $index == 0, 'gap-3': $index == 0 }\">\r\n <div *ngIf=\"$index == 0 && config.enableSelect\">\r\n <p-treeTableHeaderCheckbox\r\n (click)=\"activeItemLote(selectedItems)\"\r\n />\r\n </div>\r\n \r\n <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n <span class=\"text-xs\">{{ col.header }}</span>\r\n \r\n @if(col.sortable) {\r\n <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\"/>\r\n \r\n }\r\n \r\n <span\r\n *ngIf=\"col.headerTooltip\"\r\n class=\"material-symbols-outlined flex align-items-center\"\r\n [pTooltip]=\"col.headerTooltip\"\r\n >info</span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </th>\r\n }\r\n </tr>\r\n </ng-template>\r\n \r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @for (col of columns; track $index) {\r\n <th\r\n [ttSortableColumn]=\"col.field\"\r\n [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n [style.width]=\"col.width\"\r\n >\r\n <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n <span class=\"text-xs\">{{ col.header }}</span>\r\n \r\n @if(col.sortable) {\r\n <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\"/>\r\n \r\n }\r\n </div>\r\n </th>\r\n }\r\n <th [style.width]=\"5\"></th>\r\n </tr>\r\n </ng-template> \r\n }\r\n\r\n\r\n <ng-template\r\n pTemplate=\"body\"\r\n let-rowNode\r\n let-rowData=\"rowData\"\r\n let-columns=\"columns\"\r\n >\r\n <tr\r\n cdkDrag\r\n cdkDragLockAxis=\"y\"\r\n [cdkDragData]=\"rowNode\"\r\n [ttRow]=\"rowNode\"\r\n (dblclick)=\"doubleClick($event, rowData)\"\r\n [ngClass]=\"{ capitalize: tableCaptalized }\"\r\n >\r\n \r\n @for(col of columns; track $index){\r\n <td\r\n class=\"draggable-cell\"\r\n [style.position]=\"!disableRowNodeSticky && rowNode.level !== 0 ? 'sticky' : null\"\r\n \r\n >\r\n \r\n <!-- [style.left.px]=\"\r\n childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null\r\n \" -->\r\n \r\n <div class=\"flex flex-row {{ align(col) }}\">\r\n \r\n <div\r\n class=\"w-full-h-full flex align-items-center\"\r\n *ngIf=\"$index == 0\"\r\n \r\n >\r\n <span\r\n class=\"material-symbols-outlined drag-icon\"\r\n style=\"cursor: grab; font-size: 25px; color: #6b7280; opacity: 0.9;\"\r\n cdkDragHandle\r\n >\r\n drag_indicator\r\n </span>\r\n <p-treeTableToggler \r\n class=\"hiddenVisible\" \r\n [rowNode]=\"rowNode\"\r\n />\r\n\r\n @if(config.enableSelect) {\r\n <p-treeTableCheckbox\r\n [disabled]=\"isDisabledCheckbox(rowData, rowNode)\"\r\n (click)=\"activeItemLote(selectedItems)\"\r\n [value]=\"rowNode\"\r\n [ngStyle]=\"{\r\n 'display': isSelectEnabled(rowData, rowNode) ? 'block' : 'none',\r\n 'margin-left': config.visibleCheckboxFunction ? '-34px' : '0px'\r\n }\"\r\n />\r\n }\r\n \r\n </div>\r\n\r\n <div class=\"flex flex-row align-items-center\">\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-center gap-2\"\r\n >\r\n @if(col.tagColor) {\r\n <div\r\n class=\"tag\"\r\n [pTooltip]=\"\r\n col.tooltipTag &&\r\n col.tooltipTag(rowData, col, rowData[col.field])\r\n \"\r\n [style.background-color]=\"\r\n col.tagColor(rowData, col, rowData[col.field])\r\n \"\r\n ></div>\r\n\r\n }\r\n\r\n <i\r\n *ngIf=\"col.boolean\"\r\n class=\"pi {{\r\n rowData[col.field] ? 'pi-check text-green-300' : ''\r\n }}\"\r\n style=\"font-size: 1.1rem\"\r\n ></i>\r\n\r\n <div class=\"flex flex-column\" *ngIf=\"!col.boolean\">\r\n <span class=\"m-0 text-xs\">{{ rowData[col.field] }}</span>\r\n\r\n <p *ngIf=\"col.subtitle\" class=\"m-0 text-xs font-semibold\">\r\n {{ rowData[col.subtitle] }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <span *ngIf=\"col.template && validateShowTemplate(rowNode, col)\">\r\n <ng-container\r\n *ngIf=\"getCustomTemplate(col.template.name)\"\r\n [ngTemplateOutlet]=\"getCustomTemplate(col.template.name)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: rowData }\"\r\n >\r\n </ng-container>\r\n </span>\r\n </td>\r\n }\r\n\r\n <td\r\n style=\"border-left: none; text-align: center\"\r\n *ngIf=\"(config.actions?.length ?? 0 > 0) || config.actionsPai\"\r\n [style.borderRight]=\"rowNode.level === 0 ? 'none' : ''\"\r\n [style.borderLeft]=\"rowNode.level === 0 ? 'none' : ''\"\r\n >\r\n <div\r\n *ngIf=\"\r\n (config.actions?.length ?? 0 > 0) &&\r\n validateActionPosition(rowNode)\r\n \"\r\n class=\"flex align-items-center justify-content-center\"\r\n >\r\n <span\r\n class=\"material-symbols-outlined cursor-pointer icon-more-horiz p-1\"\r\n style=\"font-size: 20px\"\r\n (click)=\"menu.toggle($event); activeItem(rowData)\"\r\n >\r\n more_horiz\r\n </span>\r\n\r\n \r\n\r\n @for(action of config.actions; track $index) {\r\n {{ criarMenusModal(rowData) }}\r\n }\r\n \r\n <p-menu\r\n #menu\r\n [popup]=\"true\"\r\n [model]=\"menuItems\"\r\n appendTo=\"body\"\r\n ></p-menu>\r\n \r\n </div>\r\n \r\n @if(config.actionsPai?.length ?? 0 > 0 && rowNode.level == 0){\r\n <div class=\"flex justify-content-end align-items-center \">\r\n @for (actionPai of config.actionsPai; track $index) {\r\n @if(getOrExecute(actionPai.visible, rowData) ?? true) {\r\n <kv-button\r\n (onClick)=\"activeItem(rowData); actionPai.command($event)\"\r\n [type]=\"'text'\"\r\n [icon]=\"actionPai.icon\"\r\n [severity]=\"actionPai.severity || 'tertiary'\"\r\n />\r\n \r\n } }\r\n </div>\r\n }\r\n \r\n \r\n\r\n </td>\r\n \r\n </tr>\r\n\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td\r\n [attr.colspan]=\"config.columns.length + 1\"\r\n style=\"text-align: center\"\r\n class=\"text-sm\"\r\n >\r\n {{ textoEmptyMessage }}\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-treeTable>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .p-treetable .p-treetable-tbody>tr>td{padding:.4rem}::ng-deep .p-treetable .p-treetable-header{padding:0rem}span{font-size:14px}:host ::ng-deep .p-treetable table{table-layout:auto!important}::ng-deep .p-checkbox .p-checkbox-box{width:1.125rem;height:1.125rem}::ng-deep .p-checkbox{display:flex;align-items:center}::ng-deep .p-treetable .p-paginator{scale:.8}.icon-more-horiz{font-weight:700}.icon-more-horiz:hover,.icon-more-horiz:focus{color:#5e5e5e;transition:color .3s,transform .3s;background-color:#eaeaea;border-radius:50%}::ng-deep .p-treetable .p-treetable-thead>tr>th{background-color:#eaeaea}:host ::ng-deep .treetabledraggable .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:1rem;height:1rem}.tag{width:5px;height:20px;border-radius:.25rem}:host ::ng-deep .draggable-cell .drag-icon{visibility:hidden}:host ::ng-deep .draggable-cell:hover .drag-icon{visibility:visible}.cdk-drag-preview{display:flex;align-items:center;justify-content:space-between;border-radius:10px!important}.cdk-drop-list-dragging{cursor:grabbing}:host ::ng-deep .cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}:host ::ng-deep .cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}::ng-deep svg.p-icon{width:.65rem;height:.65rem}::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:#004172;background:#004172}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:hover{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:active{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:disabled{background-color:#002542;opacity:.4;cursor:auto}::ng-deep .p-treetable-resizable .p-treetable-thead>tr>th,.p-treetable-resizable .p-treetable-tfoot>tr>td,.p-treetable-resizable .p-treetable-tbody>tr>td{overflow:unset}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5$2.AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i5$3.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: i5.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i8$2.TreeTable, selector: "p-treeTable", inputs: ["columns", "style", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "component", type: i8$2.TreeTableToggler, selector: "p-treeTableToggler", inputs: ["rowNode"] }, { kind: "directive", type: i8$2.TTSortableColumn, selector: "[ttSortableColumn]", inputs: ["ttSortableColumn", "ttSortableColumnDisabled"] }, { kind: "component", type: i8$2.TTSortIcon, selector: "p-treeTableSortIcon", inputs: ["field", "ariaLabelDesc", "ariaLabelAsc"] }, { kind: "directive", type: i8$2.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: i8$2.TTCheckbox, selector: "p-treeTableCheckbox", inputs: ["disabled", "value"] }, { kind: "component", type: i8$2.TTHeaderCheckbox, selector: "p-treeTableHeaderCheckbox" }, { kind: "component", type: KvButtonComponent, selector: "kv-button", inputs: ["fullWidth", "type", "loading", "severity", "size", "icon", "label", "disabled"], outputs: ["onClick"] }] }); }
|
|
2207
2207
|
}
|
|
2208
2208
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvTreetableComponent, decorators: [{
|
|
2209
2209
|
type: Component,
|
|
2210
|
-
args: [{ selector: 'kv-tree-table', template: "<div *ngIf=\"!treeTableDraggable\">\r\n <p-treeTable\r\n #tt\r\n [value]=\"dataSource\"\r\n [columns]=\"config.columns\"\r\n [resizableColumns]=\"true\"\r\n [tableStyle]=\"{ 'min-width': '50rem' }\"\r\n [resizableColumns]=\"true\"\r\n [paginator]=\"paginator\"\r\n [rows]=\"rows\"\r\n [totalRecords]=\"totalRecords\"\r\n [rowsPerPageOptions]=\"[5, 10, 25, 50]\"\r\n [showFirstLastIcon]=\"tamanhoTela > 960 ? true : false\"\r\n [pageLinks]=\"tamanhoTela > 960 ? 2 : 1\"\r\n [styleClass]=\"gridLines ? 'p-treetable-gridlines' : ''\"\r\n [(selection)]=\"selectedItems\"\r\n [lazy]=\"config.lazy\"\r\n (onLazyLoad)=\"paginate($event)\"\r\n (onNodeSelect)=\"onNodeSelected($event)\"\r\n (onNodeUnselect)=\"onNodeUnselected($event)\"\r\n [showCurrentPageReport]=\"true\"\r\n currentPageReportTemplate=\"{first} - {last} de {totalRecords}\"\r\n [scrollHeight]=\"scrollHeight\"\r\n >\r\n <ng-template pTemplate=\"caption\" *ngIf=\"config.enableCation\">\r\n <div\r\n class=\"flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 m-0\"\r\n style=\"background-color: #eaeaea\"\r\n >\r\n <div class=\"col-12 flex flex-column\">\r\n <div *ngIf=\"config.title\" class=\"text-md font-bold my-3\">\r\n {{ config.title }}\r\n </div>\r\n <div *ngIf=\"config.subtitle\" class=\"text-sm mb-4 font-medium\">\r\n {{ config.subtitle }}\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"flex flex-row align-items-center col-10 p-0 md:col-6 lg:col-4 justify-content-center {{\r\n tamanhoTela < 768 ? '' : 'input-search'\r\n }}\"\r\n >\r\n <span *ngIf=\"config.enableFilter\" class=\"p-input-icon-left\">\r\n <i class=\"pi pi-search\"></i>\r\n\r\n <input\r\n pInputText\r\n pAutoFocus\r\n [autofocus]=\"true\"\r\n type=\"text\"\r\n (input)=\"onGlobalFilter(tt, $event)\"\r\n placeholder=\"Pesquisar...\"\r\n class=\"h-2rem\"\r\n #inputBusca\r\n />\r\n </span>\r\n </div>\r\n\r\n <div class=\"flex flex-row col-1 justify-content-end p-0\">\r\n <div class=\"flex flex-row gap-2 btns-options\">\r\n @for (action of config.actionsLote; track $index) {\r\n @if((selectedItems.length > 0 || action.showAcoesLote) &&\r\n exibirCampo(action, this.action)) {\r\n <kv-button\r\n (onClick)=\"action?.command(); activeItemLote(selectedItems)\"\r\n [pTooltip]=\"getOrExecute(action.tooltip, selectedItems)\"\r\n [tooltipPosition]=\"'bottom'\"\r\n [disabled]=\"getOrExecute(action.disabled, selectedItems) || false\"\r\n [icon]=\"getOrExecute(action.icon, selectedItems)\"\r\n [severity]=\"action.severity || 'tertiary'\"\r\n />\r\n } }\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n @if(showHeader){\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @for(col of columns; track $index){\r\n <th\r\n [ttSortableColumn]=\"col.field\"\r\n [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n [style.width]=\"col.width\"\r\n >\r\n <div>\r\n <div [ngClass]=\"{ flex: $index == 0, 'gap-3': $index == 0 }\">\r\n <div *ngIf=\"$index == 0 && config.enableSelect\">\r\n <p-treeTableHeaderCheckbox\r\n (click)=\"activeItemLote(selectedItems)\"\r\n />\r\n </div>\r\n \r\n <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n <span class=\"text-xs\">{{ col.header }}</span>\r\n \r\n @if(col.sortable) {\r\n <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\"/>\r\n \r\n }\r\n \r\n <span\r\n *ngIf=\"col.headerTooltip\"\r\n class=\"material-symbols-outlined flex align-items-center\"\r\n [pTooltip]=\"col.headerTooltip\"\r\n >info</span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </th>\r\n @if (config.actions?.length ?? 0 > 0) {\r\n <th [style.width]=\"5\"></th>\r\n } }\r\n </tr>\r\n </ng-template>\r\n \r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @for (col of columns; track $index) {\r\n <th\r\n [ttSortableColumn]=\"col.field\"\r\n [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n [style.width]=\"col.width\"\r\n >\r\n <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n <span class=\"text-xs\">{{ col.header }}</span>\r\n \r\n @if(col.sortable) {\r\n <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\"/>\r\n }\r\n </div>\r\n </th>\r\n } @if (config.actions?.length ?? 0 > 0) {\r\n <th [style.width]=\"5\"></th>\r\n }\r\n </tr>\r\n </ng-template>\r\n }\r\n\r\n\r\n <ng-template\r\n pTemplate=\"body\"\r\n let-rowNode\r\n let-rowData=\"rowData\"\r\n let-columns=\"columns\"\r\n >\r\n <tr\r\n [ttRow]=\"rowNode\"\r\n (dblclick)=\"doubleClick($event, rowData)\"\r\n [ngClass]=\"{ capitalize: tableCaptalized }\"\r\n >\r\n @for(col of columns; track $index){\r\n <td\r\n [style.position]=\"rowNode.level !== 0 ? 'sticky' : null\"\r\n [style.left.px]=\"\r\n childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null\r\n \"\r\n [style.borderRight]=\"rowNode.level === 0 ? 'none' : ''\"\r\n [style.borderLeft]=\"\r\n rowNode.level === 0 && col.field != config.columns[0].field\r\n ? 'none'\r\n : ''\r\n \"\r\n >\r\n <div class=\"flex flex-row {{ align(col) }}\">\r\n <div\r\n class=\"w-full-h-full flex align-items-center\"\r\n *ngIf=\"$index == 0\"\r\n >\r\n <p-treeTableToggler class=\"hiddenVisible\" [rowNode]=\"rowNode\" />\r\n\r\n @if(config.enableSelect) {\r\n <p-treeTableCheckbox\r\n [disabled]=\"isDisabledCheckbox(rowData, rowNode)\"\r\n (click)=\"activeItemLote(selectedItems)\"\r\n [value]=\"rowNode\"\r\n [ngStyle]=\"{\r\n 'display': isSelectEnabled(rowData, rowNode) ? 'block' : 'none',\r\n 'margin-left': config.visibleCheckboxFunction ? '-34px' : '0px'\r\n }\"\r\n />\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"flex flex-row align-items-center\">\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-center gap-2\"\r\n >\r\n @if(col.tagColor) {\r\n <div\r\n class=\"tag\"\r\n [pTooltip]=\"\r\n col.tooltipTag &&\r\n col.tooltipTag(rowData, col, rowData[col.field])\r\n \"\r\n [style.background-color]=\"\r\n col.tagColor(rowData, col, rowData[col.field])\r\n \"\r\n ></div>\r\n\r\n }\r\n <i\r\n *ngIf=\"col.boolean\"\r\n class=\"pi {{\r\n rowData[col.field] ? 'pi-check text-green-300' : ''\r\n }}\"\r\n style=\"font-size: 1.1rem\"\r\n ></i>\r\n\r\n <div class=\"flex flex-column\" *ngIf=\"!col.boolean\">\r\n <span class=\"m-0 text-xs\">{{ rowData[col.field] }}</span>\r\n\r\n <p *ngIf=\"col.subtitle\" class=\"m-0 text-xs font-semibold\">\r\n {{ rowData[col.subtitle] }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <span *ngIf=\"col.template && validateShowTemplate(rowNode, col)\">\r\n <ng-container\r\n *ngIf=\"getCustomTemplate(col.template.name)\"\r\n [ngTemplateOutlet]=\"getCustomTemplate(col.template.name)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: rowData }\"\r\n >\r\n </ng-container>\r\n </span>\r\n </td>\r\n }\r\n\r\n <td\r\n style=\"border-left: none; text-align: center\"\r\n *ngIf=\"(config.actions?.length ?? 0 > 0) || config.actionsPai\"\r\n >\r\n <div\r\n *ngIf=\"\r\n (config.actions?.length ?? 0 > 0) &&\r\n validateActionPosition(rowNode)\r\n \"\r\n >\r\n <span\r\n class=\"material-symbols-outlined cursor-pointer icon-more-horiz p-1\"\r\n style=\"font-size: 20px\"\r\n (click)=\"menu.toggle($event); activeItem(rowData)\"\r\n >\r\n more_horiz\r\n </span>\r\n\r\n @for(action of config.actions; track $index) {\r\n {{ criarMenusModal(rowData) }}\r\n }\r\n\r\n <p-menu\r\n #menu\r\n [popup]=\"true\"\r\n [model]=\"menuItems\"\r\n appendTo=\"body\"\r\n ></p-menu>\r\n </div>\r\n\r\n @if(config.actionsPai?.length ?? 0 > 0 && rowNode.level == 0){\r\n <div class=\"flex justify-content-end\">\r\n @for (actionPai of config.actionsPai; track $index) { @if\r\n (getOrExecute(actionPai.visible, rowData) ?? true) {\r\n <kv-button\r\n (onClick)=\"activeItem(rowData); actionPai.command($event)\"\r\n [type]=\"'text'\"\r\n [icon]=\"actionPai.icon\"\r\n [severity]=\"actionPai.severity || 'tertiary'\"\r\n />\r\n } }\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td\r\n [attr.colspan]=\"config.columns.length + 1\"\r\n style=\"text-align: center;\"\r\n class=\"text-sm\"\r\n >\r\n {{ textoEmptyMessage }}\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-treeTable>\r\n</div>\r\n\r\n<div\r\n *ngIf=\"treeTableDraggable\"\r\n cdkDropList\r\n class=\"example-list\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n <p-treeTable\r\n #tt\r\n class=\"treetabledraggable\"\r\n [value]=\"dataSource\"\r\n [columns]=\"config.columns\"\r\n [resizableColumns]=\"true\"\r\n [tableStyle]=\"{ 'min-width': '50rem' }\"\r\n [resizableColumns]=\"true\"\r\n [paginator]=\"paginator\"\r\n [rows]=\"rows\"\r\n [pageLinks]=\"pageLinks\"\r\n [totalRecords]=\"totalRecords\"\r\n [rowsPerPageOptions]=\"[5, 10, 25, 50]\"\r\n [showFirstLastIcon]=\"tamanhoTela > 960 ? true : false\"\r\n [pageLinks]=\"tamanhoTela > 960 ? 2 : 1\"\r\n [styleClass]=\"gridLines ? 'p-treetable-gridlines' : ''\"\r\n [(selection)]=\"selectedItems\"\r\n [lazy]=\"config.lazy\"\r\n (onLazyLoad)=\"paginate($event)\"\r\n currentPageReportTemplate=\"{first} - {last} de {{ totalRecords }}\"\r\n [scrollHeight]=\"scrollHeight\"\r\n >\r\n <ng-template pTemplate=\"caption\" *ngIf=\"config.enableCation\">\r\n <div\r\n class=\"flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 m-0\"\r\n style=\"background-color: #eaeaea\"\r\n >\r\n <div class=\"col-12 flex flex-column\">\r\n <div *ngIf=\"config.title\" class=\"text-md font-bold my-3\">\r\n {{ config.title }}\r\n </div>\r\n <div *ngIf=\"config.subtitle\" class=\"text-sm mb-4 font-medium\">\r\n {{ config.subtitle }}\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"flex flex-row align-items-center col-10 p-0 md:col-6 lg:col-4 justify-content-center {{\r\n tamanhoTela < 768 ? '' : 'input-search'\r\n }}\"\r\n >\r\n <span *ngIf=\"config.enableFilter\" class=\"p-input-icon-left\">\r\n <i class=\"pi pi-search\"></i>\r\n\r\n <input\r\n pInputText\r\n pAutoFocus\r\n [autofocus]=\"true\"\r\n type=\"text\"\r\n (input)=\"onGlobalFilter(tt, $event)\"\r\n placeholder=\"Pesquisar...\"\r\n class=\"h-2rem\"\r\n #inputBusca\r\n />\r\n </span>\r\n </div>\r\n\r\n <div class=\"flex flex-row col-1 justify-content-end p-0\">\r\n <div class=\"flex flex-row gap-2 btns-options\">\r\n @for (action of config.actionsLote; track $index) {\r\n @if((selectedItems.length > 0 || action.showAcoesLote) &&\r\n exibirCampo(action, this.action)) {\r\n <kv-button\r\n (onClick)=\"action?.command(); activeItemLote(selectedItems)\"\r\n [pTooltip]=\"getOrExecute(action.tooltip, selectedItems)\"\r\n [tooltipPosition]=\"'bottom'\"\r\n [disabled]=\"getOrExecute(action.disabled, selectedItems) || false\"\r\n [icon]=\"getOrExecute(action.icon, selectedItems)\"\r\n [severity]=\"action.severity || 'tertiary'\"\r\n />\r\n } }\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n @if(showHeader){\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @for(col of columns; track $index){\r\n <th\r\n [ttSortableColumn]=\"col.field\"\r\n [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n class=\"text-sm\"\r\n [style.width]=\"col.width\"\r\n >\r\n <div>\r\n <div [ngClass]=\"{ flex: $index == 0, 'gap-3': $index == 0 }\">\r\n <div *ngIf=\"$index == 0 && config.enableSelect\">\r\n <p-treeTableHeaderCheckbox\r\n (click)=\"activeItemLote(selectedItems)\"\r\n />\r\n </div>\r\n \r\n <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n <span class=\"text-xs\">{{ col.header }}</span>\r\n \r\n @if(col.sortable) {\r\n <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\"/>\r\n \r\n }\r\n \r\n <span\r\n *ngIf=\"col.headerTooltip\"\r\n class=\"material-symbols-outlined flex align-items-center\"\r\n [pTooltip]=\"col.headerTooltip\"\r\n >info</span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </th>\r\n }\r\n </tr>\r\n </ng-template>\r\n \r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @for (col of columns; track $index) {\r\n <th\r\n [ttSortableColumn]=\"col.field\"\r\n [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n [style.width]=\"col.width\"\r\n >\r\n <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n <span class=\"text-xs\">{{ col.header }}</span>\r\n \r\n @if(col.sortable) {\r\n <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\"/>\r\n \r\n }\r\n </div>\r\n </th>\r\n }\r\n <th [style.width]=\"5\"></th>\r\n </tr>\r\n </ng-template> \r\n }\r\n\r\n\r\n <ng-template\r\n pTemplate=\"body\"\r\n let-rowNode\r\n let-rowData=\"rowData\"\r\n let-columns=\"columns\"\r\n >\r\n <tr\r\n cdkDrag\r\n cdkDragLockAxis=\"y\"\r\n [cdkDragData]=\"rowNode\"\r\n [ttRow]=\"rowNode\"\r\n (dblclick)=\"doubleClick($event, rowData)\"\r\n [ngClass]=\"{ capitalize: tableCaptalized }\"\r\n >\r\n \r\n @for(col of columns; track $index){\r\n <td\r\n class=\"draggable-cell\"\r\n [style.position]=\"!disableRowNodeSticky && rowNode.level !== 0 ? 'sticky' : null\"\r\n \r\n >\r\n \r\n <!-- [style.left.px]=\"\r\n childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null\r\n \" -->\r\n \r\n <div class=\"flex flex-row {{ align(col) }}\">\r\n \r\n <div\r\n class=\"w-full-h-full flex align-items-center\"\r\n *ngIf=\"$index == 0\"\r\n \r\n >\r\n <span\r\n class=\"material-symbols-outlined drag-icon\"\r\n style=\"cursor: grab; font-size: 25px; color: #6b7280; opacity: 0.9;\"\r\n cdkDragHandle\r\n >\r\n drag_indicator\r\n </span>\r\n <p-treeTableToggler \r\n class=\"hiddenVisible\" \r\n [rowNode]=\"rowNode\"\r\n />\r\n\r\n @if(config.enableSelect) {\r\n <p-treeTableCheckbox\r\n [disabled]=\"isDisabledCheckbox(rowData, rowNode)\"\r\n (click)=\"activeItemLote(selectedItems)\"\r\n [value]=\"rowNode\"\r\n [ngStyle]=\"{\r\n 'display': isSelectEnabled(rowData, rowNode) ? 'block' : 'none',\r\n 'margin-left': config.visibleCheckboxFunction ? '-34px' : '0px'\r\n }\"\r\n />\r\n }\r\n \r\n </div>\r\n\r\n <div class=\"flex flex-row align-items-center\">\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-center gap-2\"\r\n >\r\n @if(col.tagColor) {\r\n <div\r\n class=\"tag\"\r\n [pTooltip]=\"\r\n col.tooltipTag &&\r\n col.tooltipTag(rowData, col, rowData[col.field])\r\n \"\r\n [style.background-color]=\"\r\n col.tagColor(rowData, col, rowData[col.field])\r\n \"\r\n ></div>\r\n\r\n }\r\n\r\n <i\r\n *ngIf=\"col.boolean\"\r\n class=\"pi {{\r\n rowData[col.field] ? 'pi-check text-green-300' : ''\r\n }}\"\r\n style=\"font-size: 1.1rem\"\r\n ></i>\r\n\r\n <div class=\"flex flex-column\" *ngIf=\"!col.boolean\">\r\n <span class=\"m-0 text-xs\">{{ rowData[col.field] }}</span>\r\n\r\n <p *ngIf=\"col.subtitle\" class=\"m-0 text-xs font-semibold\">\r\n {{ rowData[col.subtitle] }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <span *ngIf=\"col.template && validateShowTemplate(rowNode, col)\">\r\n <ng-container\r\n *ngIf=\"getCustomTemplate(col.template.name)\"\r\n [ngTemplateOutlet]=\"getCustomTemplate(col.template.name)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: rowData }\"\r\n >\r\n </ng-container>\r\n </span>\r\n </td>\r\n }\r\n\r\n <td\r\n style=\"border-left: none; text-align: center\"\r\n *ngIf=\"(config.actions?.length ?? 0 > 0) || config.actionsPai\"\r\n [style.borderRight]=\"rowNode.level === 0 ? 'none' : ''\"\r\n [style.borderLeft]=\"rowNode.level === 0 ? 'none' : ''\"\r\n >\r\n <div\r\n *ngIf=\"\r\n (config.actions?.length ?? 0 > 0) &&\r\n validateActionPosition(rowNode)\r\n \"\r\n class=\"flex align-items-center justify-content-center\"\r\n >\r\n <span\r\n class=\"material-symbols-outlined cursor-pointer icon-more-horiz p-1\"\r\n style=\"font-size: 20px\"\r\n (click)=\"menu.toggle($event); activeItem(rowData)\"\r\n >\r\n more_horiz\r\n </span>\r\n\r\n \r\n\r\n @for(action of config.actions; track $index) {\r\n {{ criarMenusModal(rowData) }}\r\n }\r\n \r\n <p-menu\r\n #menu\r\n [popup]=\"true\"\r\n [model]=\"menuItems\"\r\n appendTo=\"body\"\r\n ></p-menu>\r\n \r\n </div>\r\n \r\n @if(config.actionsPai?.length ?? 0 > 0 && rowNode.level == 0){\r\n <div class=\"flex justify-content-end align-items-center \">\r\n @for (actionPai of config.actionsPai; track $index) {\r\n @if(getOrExecute(actionPai.visible, rowData) ?? true) {\r\n <kv-button\r\n (onClick)=\"activeItem(rowData); actionPai.command($event)\"\r\n [type]=\"'text'\"\r\n [icon]=\"actionPai.icon\"\r\n [severity]=\"actionPai.severity || 'tertiary'\"\r\n />\r\n \r\n } }\r\n </div>\r\n }\r\n \r\n \r\n\r\n </td>\r\n \r\n </tr>\r\n\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td\r\n [attr.colspan]=\"config.columns.length + 1\"\r\n style=\"text-align: center\"\r\n class=\"text-sm\"\r\n >\r\n {{ textoEmptyMessage }}\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-treeTable>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .p-treetable .p-treetable-tbody>tr>td{padding:.4rem}::ng-deep .p-treetable .p-treetable-header{padding:0rem}span{font-size:14px}:host ::ng-deep .p-treetable table{table-layout:auto!important}::ng-deep .p-checkbox .p-checkbox-box{width:1.125rem;height:1.125rem}::ng-deep .p-checkbox{display:flex;align-items:center}::ng-deep .p-treetable .p-paginator{scale:.8}.icon-more-horiz{font-weight:700}.icon-more-horiz:hover,.icon-more-horiz:focus{color:#5e5e5e;transition:color .3s,transform .3s;background-color:#eaeaea;border-radius:50%}::ng-deep .p-treetable .p-treetable-thead>tr>th{background-color:#eaeaea}:host ::ng-deep .treetabledraggable .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:1rem;height:1rem}.tag{width:5px;height:20px;border-radius:.25rem}:host ::ng-deep .draggable-cell .drag-icon{visibility:hidden}:host ::ng-deep .draggable-cell:hover .drag-icon{visibility:visible}.cdk-drag-preview{display:flex;align-items:center;justify-content:space-between;border-radius:10px!important}.cdk-drop-list-dragging{cursor:grabbing}:host ::ng-deep .cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}:host ::ng-deep .cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}::ng-deep svg.p-icon{width:.65rem;height:.65rem}::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:#004172;background:#004172}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:hover{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:active{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:disabled{background-color:#002542;opacity:.4;cursor:auto}\n"] }]
|
|
2210
|
+
args: [{ selector: 'kv-tree-table', template: "<div *ngIf=\"!treeTableDraggable\">\r\n <p-treeTable\r\n #tt\r\n [value]=\"dataSource\"\r\n [columns]=\"config.columns\"\r\n [resizableColumns]=\"true\"\r\n [tableStyle]=\"{ 'min-width': '50rem' }\"\r\n [resizableColumns]=\"true\"\r\n [paginator]=\"paginator\"\r\n [rows]=\"rows\"\r\n [totalRecords]=\"totalRecords\"\r\n [rowsPerPageOptions]=\"[5, 10, 25, 50]\"\r\n [showFirstLastIcon]=\"tamanhoTela > 960 ? true : false\"\r\n [pageLinks]=\"tamanhoTela > 960 ? 2 : 1\"\r\n [styleClass]=\"gridLines ? 'p-treetable-gridlines' : ''\"\r\n [(selection)]=\"selectedItems\"\r\n [lazy]=\"config.lazy\"\r\n (onLazyLoad)=\"paginate($event)\"\r\n (onNodeSelect)=\"onNodeSelected($event)\"\r\n (onNodeUnselect)=\"onNodeUnselected($event)\"\r\n [showCurrentPageReport]=\"true\"\r\n currentPageReportTemplate=\"{first} - {last} de {totalRecords}\"\r\n [scrollHeight]=\"scrollHeight\"\r\n >\r\n <ng-template pTemplate=\"caption\" *ngIf=\"config.enableCation\">\r\n <div\r\n class=\"flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 m-0\"\r\n style=\"background-color: #eaeaea\"\r\n >\r\n <div class=\"col-12 flex flex-column\">\r\n <div *ngIf=\"config.title\" class=\"text-md font-bold my-3\">\r\n {{ config.title }}\r\n </div>\r\n <div *ngIf=\"config.subtitle\" class=\"text-sm mb-4 font-medium\">\r\n {{ config.subtitle }}\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"flex flex-row align-items-center col-10 p-0 md:col-6 lg:col-4 justify-content-center {{\r\n tamanhoTela < 768 ? '' : 'input-search'\r\n }}\"\r\n >\r\n <span *ngIf=\"config.enableFilter\" class=\"p-input-icon-left\">\r\n <i class=\"pi pi-search\"></i>\r\n\r\n <input\r\n pInputText\r\n pAutoFocus\r\n [autofocus]=\"true\"\r\n type=\"text\"\r\n (input)=\"onGlobalFilter(tt, $event)\"\r\n placeholder=\"Pesquisar...\"\r\n class=\"h-2rem\"\r\n #inputBusca\r\n />\r\n </span>\r\n </div>\r\n\r\n <div class=\"flex flex-row col-1 justify-content-end p-0\">\r\n <div class=\"flex flex-row gap-2 btns-options\">\r\n @for (action of config.actionsLote; track $index) {\r\n @if((selectedItems.length > 0 || action.showAcoesLote) &&\r\n exibirCampo(action, this.action)) {\r\n <kv-button\r\n (onClick)=\"action?.command(); activeItemLote(selectedItems)\"\r\n [pTooltip]=\"getOrExecute(action.tooltip, selectedItems)\"\r\n [tooltipPosition]=\"'bottom'\"\r\n [disabled]=\"getOrExecute(action.disabled, selectedItems) || false\"\r\n [icon]=\"getOrExecute(action.icon, selectedItems)\"\r\n [severity]=\"action.severity || 'tertiary'\"\r\n />\r\n } }\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n @if(showHeader){\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @for(col of columns; track $index){\r\n <th\r\n [ttSortableColumn]=\"col.field\"\r\n [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n [style.width]=\"col.width\"\r\n >\r\n <div>\r\n <div [ngClass]=\"{ flex: $index == 0, 'gap-3': $index == 0 }\">\r\n <div *ngIf=\"$index == 0 && config.enableSelect\">\r\n <p-treeTableHeaderCheckbox\r\n (click)=\"activeItemLote(selectedItems)\"\r\n />\r\n </div>\r\n \r\n <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n <span class=\"text-xs\">{{ col.header }}</span>\r\n \r\n @if(col.sortable) {\r\n <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\"/>\r\n \r\n }\r\n \r\n <span\r\n *ngIf=\"col.headerTooltip\"\r\n class=\"material-symbols-outlined flex align-items-center\"\r\n [pTooltip]=\"col.headerTooltip\"\r\n >info</span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </th>\r\n @if (config.actions?.length ?? 0 > 0) {\r\n <th [style.width]=\"5\"></th>\r\n } }\r\n </tr>\r\n </ng-template>\r\n \r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @for (col of columns; track $index) {\r\n <th\r\n [ttSortableColumn]=\"col.field\"\r\n [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n [style.width]=\"col.width\"\r\n >\r\n <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n <span class=\"text-xs\">{{ col.header }}</span>\r\n \r\n @if(col.sortable) {\r\n <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\"/>\r\n }\r\n </div>\r\n </th>\r\n } @if (config.actions?.length ?? 0 > 0) {\r\n <th [style.width]=\"5\"></th>\r\n }\r\n </tr>\r\n </ng-template>\r\n }\r\n\r\n\r\n <ng-template\r\n pTemplate=\"body\"\r\n let-rowNode\r\n let-rowData=\"rowData\"\r\n let-columns=\"columns\"\r\n >\r\n <tr\r\n [ttRow]=\"rowNode\"\r\n (dblclick)=\"doubleClick($event, rowData)\"\r\n [ngClass]=\"{ capitalize: tableCaptalized }\"\r\n >\r\n @for(col of columns; track $index){\r\n <td\r\n [style.position]=\"rowNode.level !== 0 ? 'sticky' : null\"\r\n [style.left.px]=\"\r\n childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null\r\n \"\r\n [style.borderRight]=\"rowNode.level === 0 ? 'none' : ''\"\r\n [style.borderLeft]=\"\r\n rowNode.level === 0 && col.field != config.columns[0].field\r\n ? 'none'\r\n : ''\r\n \"\r\n >\r\n <div class=\"flex flex-row {{ align(col) }}\">\r\n <div\r\n class=\"w-full-h-full flex align-items-center\"\r\n *ngIf=\"$index == 0\"\r\n >\r\n <p-treeTableToggler class=\"hiddenVisible\" [rowNode]=\"rowNode\" />\r\n\r\n @if(config.enableSelect) {\r\n <p-treeTableCheckbox\r\n [disabled]=\"isDisabledCheckbox(rowData, rowNode)\"\r\n (click)=\"activeItemLote(selectedItems)\"\r\n [value]=\"rowNode\"\r\n [ngStyle]=\"{\r\n 'display': isSelectEnabled(rowData, rowNode) ? 'block' : 'none',\r\n 'margin-left': config.visibleCheckboxFunction ? '-34px' : '0px'\r\n }\"\r\n />\r\n }\r\n\r\n </div>\r\n\r\n <div class=\"flex flex-row align-items-center\">\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-center gap-2\"\r\n >\r\n @if(col.tagColor) {\r\n <div\r\n class=\"tag\"\r\n [pTooltip]=\"\r\n col.tooltipTag &&\r\n col.tooltipTag(rowData, col, rowData[col.field])\r\n \"\r\n [style.background-color]=\"\r\n col.tagColor(rowData, col, rowData[col.field])\r\n \"\r\n ></div>\r\n\r\n }\r\n <i\r\n *ngIf=\"col.boolean\"\r\n class=\"pi {{\r\n rowData[col.field] ? 'pi-check text-green-300' : ''\r\n }}\"\r\n style=\"font-size: 1.1rem\"\r\n ></i>\r\n\r\n <div class=\"flex flex-column\" *ngIf=\"!col.boolean\">\r\n <span class=\"m-0 text-xs\">{{ rowData[col.field] }}</span>\r\n\r\n <p *ngIf=\"col.subtitle\" class=\"m-0 text-xs font-semibold\">\r\n {{ rowData[col.subtitle] }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <span *ngIf=\"col.template && validateShowTemplate(rowNode, col)\">\r\n <ng-container\r\n *ngIf=\"getCustomTemplate(col.template.name)\"\r\n [ngTemplateOutlet]=\"getCustomTemplate(col.template.name)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: rowData }\"\r\n >\r\n </ng-container>\r\n </span>\r\n </td>\r\n }\r\n\r\n <td\r\n style=\"border-left: none; text-align: center\"\r\n *ngIf=\"(config.actions?.length ?? 0 > 0) || config.actionsPai\"\r\n >\r\n <div\r\n *ngIf=\"\r\n (config.actions?.length ?? 0 > 0) &&\r\n validateActionPosition(rowNode)\r\n \"\r\n >\r\n <span\r\n class=\"material-symbols-outlined cursor-pointer icon-more-horiz p-1\"\r\n style=\"font-size: 20px\"\r\n (click)=\"menu.toggle($event); activeItem(rowData)\"\r\n >\r\n more_horiz\r\n </span>\r\n\r\n @for(action of config.actions; track $index) {\r\n {{ criarMenusModal(rowData) }}\r\n }\r\n\r\n <p-menu\r\n #menu\r\n [popup]=\"true\"\r\n [model]=\"menuItems\"\r\n appendTo=\"body\"\r\n ></p-menu>\r\n </div>\r\n\r\n @if(config.actionsPai?.length ?? 0 > 0 && rowNode.level == 0){\r\n <div class=\"flex justify-content-end\">\r\n @for (actionPai of config.actionsPai; track $index) { @if\r\n (getOrExecute(actionPai.visible, rowData) ?? true) {\r\n <kv-button\r\n (onClick)=\"activeItem(rowData); actionPai.command($event)\"\r\n [type]=\"'text'\"\r\n [icon]=\"actionPai.icon\"\r\n [severity]=\"actionPai.severity || 'tertiary'\"\r\n />\r\n } }\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td\r\n [attr.colspan]=\"config.columns.length + 1\"\r\n style=\"text-align: center;\"\r\n class=\"text-sm\"\r\n >\r\n {{ textoEmptyMessage }}\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-treeTable>\r\n</div>\r\n\r\n<div\r\n *ngIf=\"treeTableDraggable\"\r\n cdkDropList\r\n class=\"example-list\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n <p-treeTable\r\n #tt\r\n class=\"treetabledraggable\"\r\n [value]=\"dataSource\"\r\n [columns]=\"config.columns\"\r\n [resizableColumns]=\"true\"\r\n [tableStyle]=\"{ 'min-width': '50rem' }\"\r\n [resizableColumns]=\"true\"\r\n [paginator]=\"paginator\"\r\n [rows]=\"rows\"\r\n [pageLinks]=\"pageLinks\"\r\n [totalRecords]=\"totalRecords\"\r\n [rowsPerPageOptions]=\"[5, 10, 25, 50]\"\r\n [showFirstLastIcon]=\"tamanhoTela > 960 ? true : false\"\r\n [pageLinks]=\"tamanhoTela > 960 ? 2 : 1\"\r\n [styleClass]=\"gridLines ? 'p-treetable-gridlines' : ''\"\r\n [(selection)]=\"selectedItems\"\r\n [lazy]=\"config.lazy\"\r\n (onLazyLoad)=\"paginate($event)\"\r\n currentPageReportTemplate=\"{first} - {last} de {{ totalRecords }}\"\r\n [scrollHeight]=\"scrollHeight\"\r\n >\r\n <ng-template pTemplate=\"caption\" *ngIf=\"config.enableCation\">\r\n <div\r\n class=\"flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 m-0\"\r\n style=\"background-color: #eaeaea\"\r\n >\r\n <div class=\"col-12 flex flex-column\">\r\n <div *ngIf=\"config.title\" class=\"text-md font-bold my-3\">\r\n {{ config.title }}\r\n </div>\r\n <div *ngIf=\"config.subtitle\" class=\"text-sm mb-4 font-medium\">\r\n {{ config.subtitle }}\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"flex flex-row align-items-center col-10 p-0 md:col-6 lg:col-4 justify-content-center {{\r\n tamanhoTela < 768 ? '' : 'input-search'\r\n }}\"\r\n >\r\n <span *ngIf=\"config.enableFilter\" class=\"p-input-icon-left\">\r\n <i class=\"pi pi-search\"></i>\r\n\r\n <input\r\n pInputText\r\n pAutoFocus\r\n [autofocus]=\"true\"\r\n type=\"text\"\r\n (input)=\"onGlobalFilter(tt, $event)\"\r\n placeholder=\"Pesquisar...\"\r\n class=\"h-2rem\"\r\n #inputBusca\r\n />\r\n </span>\r\n </div>\r\n\r\n <div class=\"flex flex-row col-1 justify-content-end p-0\">\r\n <div class=\"flex flex-row gap-2 btns-options\">\r\n @for (action of config.actionsLote; track $index) {\r\n @if((selectedItems.length > 0 || action.showAcoesLote) &&\r\n exibirCampo(action, this.action)) {\r\n <kv-button\r\n (onClick)=\"action?.command(); activeItemLote(selectedItems)\"\r\n [pTooltip]=\"getOrExecute(action.tooltip, selectedItems)\"\r\n [tooltipPosition]=\"'bottom'\"\r\n [disabled]=\"getOrExecute(action.disabled, selectedItems) || false\"\r\n [icon]=\"getOrExecute(action.icon, selectedItems)\"\r\n [severity]=\"action.severity || 'tertiary'\"\r\n />\r\n } }\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n @if(showHeader){\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @for(col of columns; track $index){\r\n <th\r\n [ttSortableColumn]=\"col.field\"\r\n [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n class=\"text-sm\"\r\n [style.width]=\"col.width\"\r\n >\r\n <div>\r\n <div [ngClass]=\"{ flex: $index == 0, 'gap-3': $index == 0 }\">\r\n <div *ngIf=\"$index == 0 && config.enableSelect\">\r\n <p-treeTableHeaderCheckbox\r\n (click)=\"activeItemLote(selectedItems)\"\r\n />\r\n </div>\r\n \r\n <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n <span class=\"text-xs\">{{ col.header }}</span>\r\n \r\n @if(col.sortable) {\r\n <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\"/>\r\n \r\n }\r\n \r\n <span\r\n *ngIf=\"col.headerTooltip\"\r\n class=\"material-symbols-outlined flex align-items-center\"\r\n [pTooltip]=\"col.headerTooltip\"\r\n >info</span\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </th>\r\n }\r\n </tr>\r\n </ng-template>\r\n \r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @for (col of columns; track $index) {\r\n <th\r\n [ttSortableColumn]=\"col.field\"\r\n [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n [style.width]=\"col.width\"\r\n >\r\n <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n <span class=\"text-xs\">{{ col.header }}</span>\r\n \r\n @if(col.sortable) {\r\n <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\"/>\r\n \r\n }\r\n </div>\r\n </th>\r\n }\r\n <th [style.width]=\"5\"></th>\r\n </tr>\r\n </ng-template> \r\n }\r\n\r\n\r\n <ng-template\r\n pTemplate=\"body\"\r\n let-rowNode\r\n let-rowData=\"rowData\"\r\n let-columns=\"columns\"\r\n >\r\n <tr\r\n cdkDrag\r\n cdkDragLockAxis=\"y\"\r\n [cdkDragData]=\"rowNode\"\r\n [ttRow]=\"rowNode\"\r\n (dblclick)=\"doubleClick($event, rowData)\"\r\n [ngClass]=\"{ capitalize: tableCaptalized }\"\r\n >\r\n \r\n @for(col of columns; track $index){\r\n <td\r\n class=\"draggable-cell\"\r\n [style.position]=\"!disableRowNodeSticky && rowNode.level !== 0 ? 'sticky' : null\"\r\n \r\n >\r\n \r\n <!-- [style.left.px]=\"\r\n childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null\r\n \" -->\r\n \r\n <div class=\"flex flex-row {{ align(col) }}\">\r\n \r\n <div\r\n class=\"w-full-h-full flex align-items-center\"\r\n *ngIf=\"$index == 0\"\r\n \r\n >\r\n <span\r\n class=\"material-symbols-outlined drag-icon\"\r\n style=\"cursor: grab; font-size: 25px; color: #6b7280; opacity: 0.9;\"\r\n cdkDragHandle\r\n >\r\n drag_indicator\r\n </span>\r\n <p-treeTableToggler \r\n class=\"hiddenVisible\" \r\n [rowNode]=\"rowNode\"\r\n />\r\n\r\n @if(config.enableSelect) {\r\n <p-treeTableCheckbox\r\n [disabled]=\"isDisabledCheckbox(rowData, rowNode)\"\r\n (click)=\"activeItemLote(selectedItems)\"\r\n [value]=\"rowNode\"\r\n [ngStyle]=\"{\r\n 'display': isSelectEnabled(rowData, rowNode) ? 'block' : 'none',\r\n 'margin-left': config.visibleCheckboxFunction ? '-34px' : '0px'\r\n }\"\r\n />\r\n }\r\n \r\n </div>\r\n\r\n <div class=\"flex flex-row align-items-center\">\r\n <div\r\n class=\"flex flex-row align-items-center justify-content-center gap-2\"\r\n >\r\n @if(col.tagColor) {\r\n <div\r\n class=\"tag\"\r\n [pTooltip]=\"\r\n col.tooltipTag &&\r\n col.tooltipTag(rowData, col, rowData[col.field])\r\n \"\r\n [style.background-color]=\"\r\n col.tagColor(rowData, col, rowData[col.field])\r\n \"\r\n ></div>\r\n\r\n }\r\n\r\n <i\r\n *ngIf=\"col.boolean\"\r\n class=\"pi {{\r\n rowData[col.field] ? 'pi-check text-green-300' : ''\r\n }}\"\r\n style=\"font-size: 1.1rem\"\r\n ></i>\r\n\r\n <div class=\"flex flex-column\" *ngIf=\"!col.boolean\">\r\n <span class=\"m-0 text-xs\">{{ rowData[col.field] }}</span>\r\n\r\n <p *ngIf=\"col.subtitle\" class=\"m-0 text-xs font-semibold\">\r\n {{ rowData[col.subtitle] }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <span *ngIf=\"col.template && validateShowTemplate(rowNode, col)\">\r\n <ng-container\r\n *ngIf=\"getCustomTemplate(col.template.name)\"\r\n [ngTemplateOutlet]=\"getCustomTemplate(col.template.name)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: rowData }\"\r\n >\r\n </ng-container>\r\n </span>\r\n </td>\r\n }\r\n\r\n <td\r\n style=\"border-left: none; text-align: center\"\r\n *ngIf=\"(config.actions?.length ?? 0 > 0) || config.actionsPai\"\r\n [style.borderRight]=\"rowNode.level === 0 ? 'none' : ''\"\r\n [style.borderLeft]=\"rowNode.level === 0 ? 'none' : ''\"\r\n >\r\n <div\r\n *ngIf=\"\r\n (config.actions?.length ?? 0 > 0) &&\r\n validateActionPosition(rowNode)\r\n \"\r\n class=\"flex align-items-center justify-content-center\"\r\n >\r\n <span\r\n class=\"material-symbols-outlined cursor-pointer icon-more-horiz p-1\"\r\n style=\"font-size: 20px\"\r\n (click)=\"menu.toggle($event); activeItem(rowData)\"\r\n >\r\n more_horiz\r\n </span>\r\n\r\n \r\n\r\n @for(action of config.actions; track $index) {\r\n {{ criarMenusModal(rowData) }}\r\n }\r\n \r\n <p-menu\r\n #menu\r\n [popup]=\"true\"\r\n [model]=\"menuItems\"\r\n appendTo=\"body\"\r\n ></p-menu>\r\n \r\n </div>\r\n \r\n @if(config.actionsPai?.length ?? 0 > 0 && rowNode.level == 0){\r\n <div class=\"flex justify-content-end align-items-center \">\r\n @for (actionPai of config.actionsPai; track $index) {\r\n @if(getOrExecute(actionPai.visible, rowData) ?? true) {\r\n <kv-button\r\n (onClick)=\"activeItem(rowData); actionPai.command($event)\"\r\n [type]=\"'text'\"\r\n [icon]=\"actionPai.icon\"\r\n [severity]=\"actionPai.severity || 'tertiary'\"\r\n />\r\n \r\n } }\r\n </div>\r\n }\r\n \r\n \r\n\r\n </td>\r\n \r\n </tr>\r\n\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td\r\n [attr.colspan]=\"config.columns.length + 1\"\r\n style=\"text-align: center\"\r\n class=\"text-sm\"\r\n >\r\n {{ textoEmptyMessage }}\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-treeTable>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .p-treetable .p-treetable-tbody>tr>td{padding:.4rem}::ng-deep .p-treetable .p-treetable-header{padding:0rem}span{font-size:14px}:host ::ng-deep .p-treetable table{table-layout:auto!important}::ng-deep .p-checkbox .p-checkbox-box{width:1.125rem;height:1.125rem}::ng-deep .p-checkbox{display:flex;align-items:center}::ng-deep .p-treetable .p-paginator{scale:.8}.icon-more-horiz{font-weight:700}.icon-more-horiz:hover,.icon-more-horiz:focus{color:#5e5e5e;transition:color .3s,transform .3s;background-color:#eaeaea;border-radius:50%}::ng-deep .p-treetable .p-treetable-thead>tr>th{background-color:#eaeaea}:host ::ng-deep .treetabledraggable .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:1rem;height:1rem}.tag{width:5px;height:20px;border-radius:.25rem}:host ::ng-deep .draggable-cell .drag-icon{visibility:hidden}:host ::ng-deep .draggable-cell:hover .drag-icon{visibility:visible}.cdk-drag-preview{display:flex;align-items:center;justify-content:space-between;border-radius:10px!important}.cdk-drop-list-dragging{cursor:grabbing}:host ::ng-deep .cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}:host ::ng-deep .cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}::ng-deep svg.p-icon{width:.65rem;height:.65rem}::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:#004172;background:#004172}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:hover{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:active{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:disabled{background-color:#002542;opacity:.4;cursor:auto}::ng-deep .p-treetable-resizable .p-treetable-thead>tr>th,.p-treetable-resizable .p-treetable-tfoot>tr>td,.p-treetable-resizable .p-treetable-tbody>tr>td{overflow:unset}\n"] }]
|
|
2211
2211
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disableRowNodeSticky: [{
|
|
2212
2212
|
type: Input
|
|
2213
2213
|
}], config: [{
|
|
@@ -2599,9 +2599,15 @@ class KvDropdownComponent extends BaseComponentDropDown {
|
|
|
2599
2599
|
this.filterPlaceholder = '';
|
|
2600
2600
|
this.placeholder = ' ';
|
|
2601
2601
|
this.virtualScroll = false;
|
|
2602
|
+
this.appendTo = input('body');
|
|
2602
2603
|
this.onLazyLoad = new EventEmitter();
|
|
2604
|
+
this.pDropDown = viewChild('pdropdown');
|
|
2605
|
+
this.pDropDownWidth = computed(() => {
|
|
2606
|
+
const el = this.pDropDown().el.nativeElement;
|
|
2607
|
+
const dimensions = el.getBoundingClientRect();
|
|
2608
|
+
return `${dimensions.width}px`;
|
|
2609
|
+
});
|
|
2603
2610
|
}
|
|
2604
|
-
;
|
|
2605
2611
|
ngOnInit() {
|
|
2606
2612
|
super.ngOnInit();
|
|
2607
2613
|
if (this.dropDowValue)
|
|
@@ -2612,11 +2618,11 @@ class KvDropdownComponent extends BaseComponentDropDown {
|
|
|
2612
2618
|
this.onLazyLoad.emit(event);
|
|
2613
2619
|
}
|
|
2614
2620
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvDropdownComponent, deps: [{ token: ComponentService }, { token: i1$2.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2615
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: KvDropdownComponent, selector: "kv-dropdown", inputs: { filterPlaceholder: "filterPlaceholder", placeholder: "placeholder", dropDowValue: "dropDowValue", itemTemplate: "itemTemplate", selectedItemTemplate: "selectedItemTemplate", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize" }, outputs: { onLazyLoad: "onLazyLoad" }, providers: ComponentProviders(KvDropdownComponent), usesInheritance: true, ngImport: i0, template: "<span>\r\n <kv-label\r\n [componentId]=\"componentId\"\r\n [label]=\"label && (label + (showAsterisk ? '*' : ''))\"\r\n />\r\n <p-dropdown\r\n scrollHeight=\"250px\"\r\n styleClass=\"inputs\"\r\n [(ngModel)]=\"value\"\r\n [class]=\"baseInputClass\"\r\n [disabled]=\"disabled\"\r\n [emptyMessage]=\"emptyMessage()\"\r\n [filter]=\"filter\"\r\n [group]=\"group\"\r\n [inputId]=\"componentId\"\r\n [lazy]=\"lazy\"\r\n [loading]=\"loading\"\r\n [optionDisabled]=\"optionDisabled\"\r\n [optionGroupChildren]=\"optionGroupChildren\"\r\n [optionGroupLabel]=\"optionGroupLabel\"\r\n [optionLabel]=\"optionLabel\"\r\n [options]=\"filteredOptions\"\r\n [optionValue]=\"optionValue\"\r\n [panelStyle]=\"{ width: widthField, overflow: 'auto' }\"\r\n [showClear]=\"showClear\"\r\n [style]=\"{'width':widthField}\"\r\n [filterPlaceholder]=\"filterPlaceholder\"\r\n [placeholder]=\"placeholder\"\r\n (onBlur)=\"onInputBlur($event)\"\r\n (onChange)=\"onInputChange($event)\"\r\n (onClick)=\"onInputClick($event)\"\r\n (onFilter)=\"onInputFilter($event)\"\r\n\r\n\r\n (onLazyLoad)=\"onInputLazyLoad($event)\"\r\n [virtualScroll]=\"virtualScroll\"\r\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\r\n\r\n >\r\n\r\n <ng-template\r\n *ngIf=\"showAddButton\"\r\n pTemplate=\"footer\"\r\n >\r\n <p-divider></p-divider>\r\n <div class=\"flex flex-wrap card-container p-1\">\r\n <div class=\"flex justify-content-center\">\r\n <button\r\n pButton\r\n label=\"Incluir\"\r\n pTooltip=\"Clique aqui para incluir um novo registro\"\r\n tooltipPosition=\"bottom\"\r\n icon=\"pi pi-plus\"\r\n class=\"p-button-rounded p-button-success mr-2\"\r\n (click)=\"addClick($event)\"\r\n ></button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- :: -->\r\n\r\n <ng-template\r\n let-item\r\n pTemplate=\"item\"\r\n *ngIf=\"itemTemplate\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n >\r\n\r\n </ng-container>\r\n </ng-template>\r\n\r\n\r\n <ng-template\r\n let-selectedItem\r\n pTemplate=\"selectedItem\"\r\n *ngIf=\"selectedItemTemplate\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedItem }\"\r\n >\r\n\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- :: -->\r\n\r\n </p-dropdown>\r\n\r\n <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: ["::ng-deep .p-dropdown .p-dropdown-label{display:flex;align-items:center}::ng-deep .p-dropdown{width:100%}::ng-deep .p-dropdown-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-dropdown-filter{height:1.875rem}::ng-deep .p-dropdown-panel .p-dropdown-header{padding:.75rem}::ng-deep .p-dropdown-panel .p-dropdown-items{padding:.75rem}::ng-deep p-dropdown p-overlay .p-overlay{max-width:100%}::ng-deep .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-inputtext{font-size:.875rem}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KvErrorComponent, selector: "kv-error", inputs: ["formControl", "hasError"] }, { kind: "component", type: KvLabelComponent, selector: "kv-label", inputs: ["componentId", "label"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i10.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i4.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
|
|
2621
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.8", type: KvDropdownComponent, selector: "kv-dropdown", inputs: { filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, dropDowValue: { classPropertyName: "dropDowValue", publicName: "dropDowValue", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null }, selectedItemTemplate: { classPropertyName: "selectedItemTemplate", publicName: "selectedItemTemplate", isSignal: false, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLazyLoad: "onLazyLoad" }, providers: ComponentProviders(KvDropdownComponent), viewQueries: [{ propertyName: "pDropDown", first: true, predicate: ["pdropdown"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<span>\r\n <kv-label\r\n [componentId]=\"componentId\"\r\n [label]=\"label && label + (showAsterisk ? '*' : '')\"\r\n />\r\n\r\n <p-dropdown\r\n #pdropdown\r\n [appendTo]=\"appendTo()\"\r\n scrollHeight=\"250px\"\r\n styleClass=\"inputs\"\r\n [(ngModel)]=\"value\"\r\n [class]=\"baseInputClass\"\r\n [disabled]=\"disabled\"\r\n [emptyMessage]=\"emptyMessage()\"\r\n [filter]=\"filter\"\r\n [group]=\"group\"\r\n [inputId]=\"componentId\"\r\n [lazy]=\"lazy\"\r\n [loading]=\"loading\"\r\n [optionDisabled]=\"optionDisabled\"\r\n [optionGroupChildren]=\"optionGroupChildren\"\r\n [optionGroupLabel]=\"optionGroupLabel\"\r\n [optionLabel]=\"optionLabel\"\r\n [options]=\"filteredOptions\"\r\n [optionValue]=\"optionValue\"\r\n [panelStyle]=\"{ width: pDropDownWidth() }\"\r\n [showClear]=\"showClear\" \r\n [filterPlaceholder]=\"filterPlaceholder\"\r\n [placeholder]=\"placeholder\"\r\n (onBlur)=\"onInputBlur($event)\"\r\n (onChange)=\"onInputChange($event)\"\r\n (onClick)=\"onInputClick($event)\"\r\n (onFilter)=\"onInputFilter($event)\"\r\n (onLazyLoad)=\"onInputLazyLoad($event)\"\r\n [virtualScroll]=\"virtualScroll\"\r\n [virtualScrollItemSize]=\"virtualScrollItemSize\" \r\n >\r\n <ng-template *ngIf=\"showAddButton\" pTemplate=\"footer\">\r\n <p-divider></p-divider>\r\n <div class=\"flex flex-wrap card-container p-1\">\r\n <div class=\"flex justify-content-center\">\r\n <button\r\n pButton\r\n label=\"Incluir\"\r\n pTooltip=\"Clique aqui para incluir um novo registro\"\r\n tooltipPosition=\"bottom\"\r\n icon=\"pi pi-plus\"\r\n class=\"p-button-rounded p-button-success mr-2\"\r\n (click)=\"addClick($event)\"\r\n ></button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- :: -->\r\n\r\n <ng-template let-item pTemplate=\"item\" *ngIf=\"itemTemplate\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n >\r\n </ng-container>\r\n </ng-template>\r\n\r\n <ng-template\r\n let-selectedItem\r\n pTemplate=\"selectedItem\"\r\n *ngIf=\"selectedItemTemplate\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedItem }\"\r\n >\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- :: -->\r\n </p-dropdown>\r\n\r\n <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: ["::ng-deep .p-dropdown .p-dropdown-label{display:flex;align-items:center}::ng-deep .p-dropdown{width:100%}::ng-deep .p-dropdown-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-dropdown-filter{height:1.875rem}::ng-deep .p-dropdown-panel .p-dropdown-header{padding:.75rem}::ng-deep .p-dropdown-panel .p-dropdown-items{padding:.75rem}::ng-deep p-dropdown p-overlay .p-overlay{max-width:100%}::ng-deep .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-inputtext{font-size:.875rem}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KvErrorComponent, selector: "kv-error", inputs: ["formControl", "hasError"] }, { kind: "component", type: KvLabelComponent, selector: "kv-label", inputs: ["componentId", "label"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i10.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i4.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
|
|
2616
2622
|
}
|
|
2617
2623
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvDropdownComponent, decorators: [{
|
|
2618
2624
|
type: Component,
|
|
2619
|
-
args: [{ selector: 'kv-dropdown', providers: ComponentProviders(KvDropdownComponent), template: "<span>\r\n <kv-label\r\n [componentId]=\"componentId\"\r\n [label]=\"label &&
|
|
2625
|
+
args: [{ selector: 'kv-dropdown', providers: ComponentProviders(KvDropdownComponent), template: "<span>\r\n <kv-label\r\n [componentId]=\"componentId\"\r\n [label]=\"label && label + (showAsterisk ? '*' : '')\"\r\n />\r\n\r\n <p-dropdown\r\n #pdropdown\r\n [appendTo]=\"appendTo()\"\r\n scrollHeight=\"250px\"\r\n styleClass=\"inputs\"\r\n [(ngModel)]=\"value\"\r\n [class]=\"baseInputClass\"\r\n [disabled]=\"disabled\"\r\n [emptyMessage]=\"emptyMessage()\"\r\n [filter]=\"filter\"\r\n [group]=\"group\"\r\n [inputId]=\"componentId\"\r\n [lazy]=\"lazy\"\r\n [loading]=\"loading\"\r\n [optionDisabled]=\"optionDisabled\"\r\n [optionGroupChildren]=\"optionGroupChildren\"\r\n [optionGroupLabel]=\"optionGroupLabel\"\r\n [optionLabel]=\"optionLabel\"\r\n [options]=\"filteredOptions\"\r\n [optionValue]=\"optionValue\"\r\n [panelStyle]=\"{ width: pDropDownWidth() }\"\r\n [showClear]=\"showClear\" \r\n [filterPlaceholder]=\"filterPlaceholder\"\r\n [placeholder]=\"placeholder\"\r\n (onBlur)=\"onInputBlur($event)\"\r\n (onChange)=\"onInputChange($event)\"\r\n (onClick)=\"onInputClick($event)\"\r\n (onFilter)=\"onInputFilter($event)\"\r\n (onLazyLoad)=\"onInputLazyLoad($event)\"\r\n [virtualScroll]=\"virtualScroll\"\r\n [virtualScrollItemSize]=\"virtualScrollItemSize\" \r\n >\r\n <ng-template *ngIf=\"showAddButton\" pTemplate=\"footer\">\r\n <p-divider></p-divider>\r\n <div class=\"flex flex-wrap card-container p-1\">\r\n <div class=\"flex justify-content-center\">\r\n <button\r\n pButton\r\n label=\"Incluir\"\r\n pTooltip=\"Clique aqui para incluir um novo registro\"\r\n tooltipPosition=\"bottom\"\r\n icon=\"pi pi-plus\"\r\n class=\"p-button-rounded p-button-success mr-2\"\r\n (click)=\"addClick($event)\"\r\n ></button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- :: -->\r\n\r\n <ng-template let-item pTemplate=\"item\" *ngIf=\"itemTemplate\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n >\r\n </ng-container>\r\n </ng-template>\r\n\r\n <ng-template\r\n let-selectedItem\r\n pTemplate=\"selectedItem\"\r\n *ngIf=\"selectedItemTemplate\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"selectedItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: selectedItem }\"\r\n >\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- :: -->\r\n </p-dropdown>\r\n\r\n <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: ["::ng-deep .p-dropdown .p-dropdown-label{display:flex;align-items:center}::ng-deep .p-dropdown{width:100%}::ng-deep .p-dropdown-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-dropdown-filter{height:1.875rem}::ng-deep .p-dropdown-panel .p-dropdown-header{padding:.75rem}::ng-deep .p-dropdown-panel .p-dropdown-items{padding:.75rem}::ng-deep p-dropdown p-overlay .p-overlay{max-width:100%}::ng-deep .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-inputtext{font-size:.875rem}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}\n"] }]
|
|
2620
2626
|
}], ctorParameters: () => [{ type: ComponentService }, { type: i1$2.DialogService }], propDecorators: { filterPlaceholder: [{
|
|
2621
2627
|
type: Input
|
|
2622
2628
|
}], placeholder: [{
|
|
@@ -5818,7 +5824,7 @@ class DropdownMasterComponent extends BaseComponentDropDownExternal {
|
|
|
5818
5824
|
return of(this.masters || []);
|
|
5819
5825
|
}
|
|
5820
5826
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: DropdownMasterComponent, deps: [{ token: ComponentService }, { token: i1$2.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5821
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: DropdownMasterComponent, selector: "dropdown-master", inputs: { formControlName: "formControlName", masters: "masters" }, providers: ComponentProviders(DropdownMasterComponent), usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"formGroup\">\r\n <kv-dropdown\r\n componentId=\"idmaster\"\r\n label=\"Licen\u00E7a\"\r\n optionLabel=\"idmasternome\"\r\n optionValue=\"idmaster\"\r\n [options]=\"options\"\r\n [filter]=\"true\"\r\n [filteredOptions]=\"filteredOptions\"\r\n [formControlName]=\"formControlName\"\r\n [loading]=\"loading\"\r\n [showClear]=\"false\"\r\n (onSelectionChange)=\"onInputChange($event)\"\r\n (onSelectionValue)=\"onInputChange($event)\">\r\n </kv-dropdown>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: KvDropdownComponent, selector: "kv-dropdown", inputs: ["filterPlaceholder", "placeholder", "dropDowValue", "itemTemplate", "selectedItemTemplate", "virtualScroll", "virtualScrollItemSize"], outputs: ["onLazyLoad"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
5827
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: DropdownMasterComponent, selector: "dropdown-master", inputs: { formControlName: "formControlName", masters: "masters" }, providers: ComponentProviders(DropdownMasterComponent), usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"formGroup\">\r\n <kv-dropdown\r\n componentId=\"idmaster\"\r\n label=\"Licen\u00E7a\"\r\n optionLabel=\"idmasternome\"\r\n optionValue=\"idmaster\"\r\n [options]=\"options\"\r\n [filter]=\"true\"\r\n [filteredOptions]=\"filteredOptions\"\r\n [formControlName]=\"formControlName\"\r\n [loading]=\"loading\"\r\n [showClear]=\"false\"\r\n (onSelectionChange)=\"onInputChange($event)\"\r\n (onSelectionValue)=\"onInputChange($event)\">\r\n </kv-dropdown>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: KvDropdownComponent, selector: "kv-dropdown", inputs: ["filterPlaceholder", "placeholder", "dropDowValue", "itemTemplate", "selectedItemTemplate", "virtualScroll", "virtualScrollItemSize", "appendTo"], outputs: ["onLazyLoad"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
5822
5828
|
}
|
|
5823
5829
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: DropdownMasterComponent, decorators: [{
|
|
5824
5830
|
type: Component,
|