npm - keevo-components - Versions diffs - 2.0.144 → 2.0.146 - Mend

keevo-components 2.0.144 → 2.0.146

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.

Files changed (10) hide show

package/fesm2022/keevo-components.mjs CHANGED Viewed

@@ -2369,11 +2369,11 @@ class KvTreetableComponent {
         }
     }
     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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvTreetableComponent, selector: "kv-tree-table", inputs: { disableRowNodeSticky: { classPropertyName: "disableRowNodeSticky", publicName: "disableRowNodeSticky", isSignal: false, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, gridLines: { classPropertyName: "gridLines", publicName: "gridLines", isSignal: false, isRequired: false, transformFunction: null }, tableCaptalized: { classPropertyName: "tableCaptalized", publicName: "tableCaptalized", isSignal: false, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: false, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, treeTableDraggable: { classPropertyName: "treeTableDraggable", publicName: "treeTableDraggable", isSignal: false, isRequired: false, transformFunction: null }, transferArrayItem: { classPropertyName: "transferArrayItem", publicName: "transferArrayItem", isSignal: false, isRequired: false, transformFunction: null }, ordenacao: { classPropertyName: "ordenacao", publicName: "ordenacao", isSignal: false, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: false, isRequired: false, transformFunction: null }, textoEmptyMessage: { classPropertyName: "textoEmptyMessage", publicName: "textoEmptyMessage", isSignal: false, isRequired: false, transformFunction: null }, childrenRecoil: { classPropertyName: "childrenRecoil", publicName: "childrenRecoil", isSignal: false, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, indFullPage: { classPropertyName: "indFullPage", publicName: "indFullPage", isSignal: false, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, isLoadingSkeleton: { classPropertyName: "isLoadingSkeleton", publicName: "isLoadingSkeleton", isSignal: true, isRequired: false, transformFunction: null }, pageLinksOptions: { classPropertyName: "pageLinksOptions", publicName: "pageLinksOptions", isSignal: false, isRequired: false, transformFunction: null }, pageLinks: { classPropertyName: "pageLinks", publicName: "pageLinks", isSignal: false, isRequired: false, transformFunction: null }, showFirstLastIcon: { classPropertyName: "showFirstLastIcon", publicName: "showFirstLastIcon", isSignal: false, isRequired: false, transformFunction: null }, selectionKeys: { classPropertyName: "selectionKeys", publicName: "selectionKeys", isSignal: true, isRequired: false, transformFunction: null }, _templates: { classPropertyName: "_templates", publicName: "templates", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange", onFilter: "onFilter", onPaginate: "onPaginate", onActiveItem: "onActiveItem", onActiveItemLote: "onActiveItemLote", doubleClickEvent: "doubleClickEvent", onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onDropItem: "onDropItem", selectionKeys: "selectionKeysChange" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "kvTreeTable", first: true, predicate: ["kvTreeTable"], descendants: true, isSignal: true }, { propertyName: "pTreeTable", first: true, predicate: TreeTable, descendants: true }, { propertyName: "inputBusca", first: true, predicate: ["inputBusca"], descendants: true }], ngImport: i0, template: "<div class=\"kv-treetable-container\" #kvTreeTable>\r\n  <p-treeTable\r\n    #tt\r\n    cdkDropList\r\n    class=\"example-list\"\r\n    (cdkDropListDropped)=\"drop($event)\"\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, 15, 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    [selectionKeys]=\"selectionKeys()\"\r\n    (selectionKeysChange)=\"selectionKeys.set($event)\"\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    @if(config.enableCation)\r\n    {\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 m-0 p-1\">\r\n          <div class=\"col-12 flex flex-column\">\r\n            @if(config.title) {\r\n              <div class=\"text-md font-bold my-3\">{{ config.title }}</div>\r\n            }\r\n            @if(config.subtitle) {\r\n              <div class=\"text-sm mb-4 font-medium\">{{ config.subtitle }}</div>\r\n            }\r\n          </div>\r\n          <div class=\"flex flex-row align-items-center col-10 p-0 md:col-6 lg:col-2 justify-content-center\r\n            {{\r\n              tamanhoTela() < 768 ? '' : 'input-search'\r\n            }}\">\r\n            @if(config.enableFilter) {\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]=\"searchPlaceholder\"\r\n                class=\"h-2rem text-sm\"\r\n                #inputBusca\r\n              />\r\n            }\r\n          </div>\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              {\r\n                @if((selectedItems.length > 0 || action.showAcoesLote) && exibirCampo()(action, this.action))\r\n                {\r\n                  <kv-button\r\n                    (onClick)=\"action?.command(); activeItemLote(selectedItems)\"\r\n                    [pTooltip]=\"getOrExecute(action.tooltip, selectedItems)\"\r\n                    [tooltipPosition]=\"'bottom'\"\r\n                    [size]=\"'small'\"\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              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    } @if(showHeader)\r\n    {\r\n      <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n          @for(col of columns; track $index)\r\n          {\r\n            <th\r\n              [ttSortableColumn]=\"col.field\"\r\n              [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n              [style.width]=\"col.width\">\r\n              <div>\r\n                <div [ngClass]=\"{ flex: $index == 0, 'gap-3': $index == 0 }\">\r\n                  @if($index == 0 && config.enableSelect)\r\n                  {\r\n                    <p-treeTableHeaderCheckbox\r\n                      (click)=\"activeItemLote(selectedItems)\"/>\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                    @if(col.sortable)\r\n                    {\r\n                      <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\" />\r\n                    }\r\n                    @if(col.headerTooltip)\r\n                    {\r\n                      <span class=\"material-symbols-outlined flex align-items-center\" [pTooltip]=\"col.headerTooltip\">info</span>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </th>\r\n            @if (config.actions?.length ?? 0 > 0 || config.actionsPai)\r\n            {\r\n              <th [style.width]=\"5\"></th>\r\n            }\r\n          }\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n          @for (col of columns; track $index)\r\n          {\r\n            <th\r\n              [ttSortableColumn]=\"col.field\"\r\n              [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n              [style.width]=\"col.width\">\r\n              <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n                <span class=\"text-xs\">{{ col.header }}</span>\r\n                @if(col.sortable)\r\n                {\r\n                  <p-treeTableSortIcon [field]=\"col.field\" />\r\n                }\r\n              </div>\r\n            </th>\r\n          }\r\n          @if (config.actions?.length ?? 0 > 0 || config.actionsPai)\r\n          {\r\n            <th [style.width]=\"5\"></th>\r\n          }\r\n        </tr>\r\n      </ng-template>\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      @if(isLoadingSkeleton())\r\n      {\r\n        @for(skeletonRow of dataSource(); track $index)\r\n        {\r\n          <tr>\r\n            @for(col of columns; track $index)\r\n            {\r\n              <td>\r\n                <div\r\n                  class=\"flex flex-row align-items-center justify-content-center w-full\"\r\n                >\r\n                  @if($index == 0) {\r\n                  <p-treeTableToggler [rowNode]=\"rowNode\"/>\r\n                  }\r\n                  <div class=\"flex flex-column w-full\">\r\n                    <p-skeleton height=\"1rem\"/>\r\n                  </div>\r\n                </div>\r\n              </td>\r\n            }\r\n            <td>\r\n              <div class=\"flex justify-content-center\">\r\n                <p-skeleton [style]=\"{ height: '1.5rem', width: '1.5rem' }\"/>\r\n              </div>\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else\r\n      {\r\n        @if(treeTableDraggable)\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            @for(col of columns; track $index)\r\n            {\r\n              <td\r\n                class=\"draggable-cell\"\r\n                [style.position]=\"!disableRowNodeSticky && rowNode.level !== 0 ? 'sticky' : null\">\r\n                <!-- [style.left.px]=\"\r\n                        childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null\r\n                        \" -->\r\n                <div class=\"flex flex-row  {{ align(col) }}\">\r\n                  @if($index == 0)\r\n                  {\r\n                    <div class=\"w-full-h-full flex align-items-center\">\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                        drag_indicator\r\n                      </span>\r\n                      <p-treeTableToggler class=\"hiddenVisible\" [rowNode]=\"rowNode\" />\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)\r\n                            ? 'block'\r\n                            : 'none',\r\n                          'margin-left': config.visibleCheckboxFunction\r\n                            ? '-34px'\r\n                            : '0px'\r\n                        }\"\r\n                      />\r\n                      }\r\n                    </div>\r\n                  }\r\n                  <div class=\"flex flex-row align-items-center w-full\">\r\n                    @if (col.template && validateShowTemplate()(rowNode, col))\r\n                    {\r\n                      <span class=\"w-full\">\r\n                        @if(getCustomTemplate(col.template.name))\r\n                        {\r\n                          <ng-container\r\n                            [ngTemplateOutlet]=\"getCustomTemplate(col.template.name)\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: rowData }\">\r\n                          </ng-container>\r\n                        }\r\n                      </span>\r\n                    } @else\r\n                    {\r\n                      <div class=\"flex flex-row align-items-center {{ (col.boolean || col.centralize) && 'justify-content-center' }} gap-2 w-full\">\r\n                        @if(col.tagColor)\r\n                        {\r\n                          <div\r\n                            class=\"tag\"\r\n                            [pTooltip]=\"col.tooltipTag && col.tooltipTag(rowData, col, rowData[col.field])\"\r\n                            [style.background-color]=\"col.tagColor(rowData, col, rowData[col.field])\">\r\n                          </div>\r\n                        } @if(col.boolean)\r\n                        {\r\n                          <i\r\n                            class=\"pi {{ rowData[col.field] ? 'pi-check text-green-300' : '' }}\"\r\n                            style=\"font-size: 1rem; font-weight: 700\">\r\n                          </i>\r\n                        } @else\r\n                        {\r\n                          <div class=\"flex flex-column\">\r\n                            <span class=\"m-0 text-xs\">{{ rowData[col.field] }}</span>\r\n                            @if(col.subtitle)\r\n                            {\r\n                              <p class=\"m-0 text-xs font-semibold\">\r\n                                {{ rowData[col.subtitle] }}\r\n                              </p>\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </td>\r\n              } @if((config.actions?.length ?? 0 > 0) || config.actionsPai)\r\n              {\r\n                <td\r\n                  style=\"border-left: none; text-align: center; width: 0\"\r\n                  [style.borderRight]=\"rowNode.level === 0 ? 'none' : ''\"\r\n                  [style.borderLeft]=\"rowNode.level === 0 ? 'none' : ''\">\r\n                  @if((config.actions?.length ?? 0 > 0) && validateActionPosition()(rowNode))\r\n                  {\r\n                    <div class=\"flex align-items-center justify-content-center\">\r\n                      <span\r\n                        class=\"material-symbols-outlined cursor-pointer icon-more-horiz\"\r\n                        (click)=\"menu.toggle($event); activeItem(rowData)\">\r\n                        more_horiz\r\n                      </span>\r\n                      @for(action of config.actions; track $index)\r\n                      {\r\n                        {{ criarMenusModal()(rowData) }}\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                  {\r\n                    <div class=\"flex justify-content-end align-items-center\">\r\n                      @for (actionPai of config.actionsPai; track $index)\r\n                      {\r\n                        @if(getOrExecute(actionPai.visible, rowData) ?? true)\r\n                        {\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                            [disabled]=\"getOrExecute(actionPai.disabled, rowData) || false\"\r\n                            [pTooltip]=\"getOrExecute(actionPai.tooltip, rowData)\"\r\n                            [tooltipPosition]=\"'left'\"\r\n                          />\r\n                        }\r\n                      }\r\n                    </div>\r\n                  }\r\n                </td>\r\n              }\r\n          </tr>\r\n        }\r\n        @else\r\n        {\r\n          <tr\r\n            [ttRow]=\"rowNode\"\r\n            (dblclick)=\"doubleClick($event, rowData)\"\r\n            [ngClass]=\"{ capitalize: tableCaptalized }\">\r\n            @for(col of columns; track $index)\r\n            {\r\n              <td\r\n                [style.position]=\"rowNode.level !== 0 ? 'sticky' : null\"\r\n                [style.left.px]=\"childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null\"\r\n                [style.borderRight]=\"rowNode.level === 0 ? 'none' : ''\"\r\n                [style.borderLeft]=\"rowNode.level === 0 && col.field != config.columns[0].field ? 'none' : ''\">\r\n                <div class=\"flex flex-row {{ align(col) }}\">\r\n                  @if($index == 0)\r\n                  {\r\n                    <div class=\"w-full-h-full flex align-items-center\">\r\n                      <p-treeTableToggler class=\"hiddenVisible\" [rowNode]=\"rowNode\"/>\r\n                      @if(config.enableSelect)\r\n                      {\r\n                        <p-treeTableCheckbox\r\n                          [disabled]=\"isDisabledCheckbox()(rowData, rowNode)\"\r\n                          (click)=\"activeItemLote(selectedItems)\"\r\n                          [value]=\"rowNode\"\r\n                          [ngStyle]=\"{ display: isSelectEnabled()(rowData, rowNode) ? 'block' : 'none', 'margin-left': config.visibleCheckboxFunction ? '-34px' : '0px' }\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  }\r\n                  <div class=\"flex flex-row align-items-center w-full\">\r\n                    @if (col.template && validateShowTemplate()(rowNode, col))\r\n                    {\r\n                      <span class=\"w-full\">\r\n                        @if(getCustomTemplate(col.template.name))\r\n                        {\r\n                          <ng-container\r\n                            [ngTemplateOutlet]=\"getCustomTemplate(col.template.name)\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: rowData }\">\r\n                          </ng-container>\r\n                        }\r\n                      </span>\r\n                    } @else\r\n                    {\r\n                      <div\r\n                        class=\"flex flex-row align-items-center {{ (col.boolean || col.centralize) && 'justify-content-center' }} gap-2 w-full\">\r\n                        @if(col.tagColor)\r\n                        {\r\n                          <div\r\n                            class=\"tag\"\r\n                            [pTooltip]=\" col.tooltipTag && col.tooltipTag(rowData, col, rowData[col.field])\"\r\n                            [style.background-color]=\"col.tagColor(rowData, col, rowData[col.field])\">\r\n                          </div>\r\n                        }\r\n                        @if(col.boolean)\r\n                        {\r\n                          <i\r\n                            class=\"pi {{rowData[col.field] ? 'pi-check text-green-300' : '' }}\"\r\n                            style=\"font-size: 1rem; font-weight: 700\">\r\n                          </i>\r\n                        } @else\r\n                        {\r\n                          <div class=\"flex flex-column\">\r\n                            <span class=\"m-0 text-xs\">{{ rowData[col.field] }}</span>\r\n                            @if(col.subtitle)\r\n                            {\r\n                              <p class=\"m-0 text-xs font-semibold\">\r\n                                {{ rowData[col.subtitle] }}\r\n                              </p>\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </td>\r\n            }\r\n            @if((config.actions?.length ?? 0 > 0) || config.actionsPai)\r\n            {\r\n              <td style=\"border-left: none; text-align: center; width: 0\">\r\n                @if((config.actions?.length ?? 0 > 0) && validateActionPosition()(rowNode))\r\n                {\r\n                  <div>\r\n                    <span\r\n                      class=\"material-symbols-outlined cursor-pointer icon-more-horiz\"\r\n                      (click)=\"menu.toggle($event); activeItem(rowData)\">\r\n                      more_horiz\r\n                    </span>\r\n                    @for(action of config.actions; track $index)\r\n                    {\r\n                      {{ criarMenusModal()(rowData) }}\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                {\r\n                  <div class=\"flex justify-content-end\">\r\n                    @for (actionPai of config.actionsPai; track $index)\r\n                    {\r\n                      @if(getOrExecute(actionPai.visible, rowData) ?? true)\r\n                      {\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                          [disabled]=\"getOrExecute(actionPai.disabled, rowData) || false\"\r\n                          [pTooltip]=\"getOrExecute(actionPai.tooltip, rowData)\"\r\n                          [tooltipPosition]=\"'left'\"\r\n                        />\r\n                      }\r\n                    }\r\n                  </div>\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      }\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-xs\">\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:.1rem}::ng-deep .p-treetable .p-treetable-header{padding:0!important;margin-bottom:.5rem!important;border-radius:5px!important;background-color:transparent;border:none}: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:.75}::ng-deep .icon-more-horiz{font-weight:300!important;font-size:1.4rem!important;padding:.1rem!important;color:rgb(var(--kv-color-system),.75)!important;transition:all .4s}.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{padding:.15rem!important;background-color:rgba(var(--kv-color-system),.05);color:rgba(var(--kv-color-text),.6);font-size:.75rem!important;font-weight:600!important}::ng-deep .p-treetable .p-treetable-thead>tr>th span{padding:.25rem}::ng-deep .p-treetable .p-treetable-thead{min-height:.5rem!important;padding:.15rem!important}.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}:host{height:100%}::ng-deep .kv-treetable-container,::ng-deep p-treeTable{height:100%}::ng-deep p-treeTable .p-treetable{display:flex;flex-direction:column;height:100%}::ng-deep table{height:auto!important}::ng-deep .p-treetable .p-treetable-wrapper{flex:1 1 1;border:1px solid rgba(var(--kv-color-system),.1);border-radius:.5rem;overflow:hidden;color:rgb(var(--kv-color-system))}::ng-deep p-treeTable .p-treetable .p-treetable-wrapper,::ng-deep p-treeTable{height:100%}::ng-deep .p-treetable .p-treetable-wrapper::-webkit-scrollbar{width:6px}::ng-deep .p-treetable .p-treetable-wrapper::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-treetable .p-treetable-wrapper::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-treetable .p-treetable-wrapper:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-treetable .p-treetable-wrapper::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-menuitem .p-menuitem-content .p-menuitem-link{padding:.5rem!important;font-size:.75rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5$1.AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "directive", type: i5$2.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: i2.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: i12.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i9$1.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: i9$1.TreeTableToggler, selector: "p-treeTableToggler", inputs: ["rowNode"] }, { kind: "directive", type: i9$1.TTSortableColumn, selector: "[ttSortableColumn]", inputs: ["ttSortableColumn", "ttSortableColumnDisabled"] }, { kind: "component", type: i9$1.TTSortIcon, selector: "p-treeTableSortIcon", inputs: ["field", "ariaLabelDesc", "ariaLabelAsc"] }, { kind: "directive", type: i9$1.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: i9$1.TTCheckbox, selector: "p-treeTableCheckbox", inputs: ["disabled", "value"] }, { kind: "component", type: i9$1.TTHeaderCheckbox, selector: "p-treeTableHeaderCheckbox" }, { kind: "component", type: KvButtonComponent, selector: "kv-button", inputs: ["fullWidth", "type", "loading", "severity", "size", "icon", "iconPosition", "label", "disabled", "items", "popup", "popupIcon"], outputs: ["iconChange", "onClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvTreetableComponent, selector: "kv-tree-table", inputs: { disableRowNodeSticky: { classPropertyName: "disableRowNodeSticky", publicName: "disableRowNodeSticky", isSignal: false, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, gridLines: { classPropertyName: "gridLines", publicName: "gridLines", isSignal: false, isRequired: false, transformFunction: null }, tableCaptalized: { classPropertyName: "tableCaptalized", publicName: "tableCaptalized", isSignal: false, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: false, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, treeTableDraggable: { classPropertyName: "treeTableDraggable", publicName: "treeTableDraggable", isSignal: false, isRequired: false, transformFunction: null }, transferArrayItem: { classPropertyName: "transferArrayItem", publicName: "transferArrayItem", isSignal: false, isRequired: false, transformFunction: null }, ordenacao: { classPropertyName: "ordenacao", publicName: "ordenacao", isSignal: false, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: false, isRequired: false, transformFunction: null }, textoEmptyMessage: { classPropertyName: "textoEmptyMessage", publicName: "textoEmptyMessage", isSignal: false, isRequired: false, transformFunction: null }, childrenRecoil: { classPropertyName: "childrenRecoil", publicName: "childrenRecoil", isSignal: false, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, indFullPage: { classPropertyName: "indFullPage", publicName: "indFullPage", isSignal: false, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, isLoadingSkeleton: { classPropertyName: "isLoadingSkeleton", publicName: "isLoadingSkeleton", isSignal: true, isRequired: false, transformFunction: null }, pageLinksOptions: { classPropertyName: "pageLinksOptions", publicName: "pageLinksOptions", isSignal: false, isRequired: false, transformFunction: null }, pageLinks: { classPropertyName: "pageLinks", publicName: "pageLinks", isSignal: false, isRequired: false, transformFunction: null }, showFirstLastIcon: { classPropertyName: "showFirstLastIcon", publicName: "showFirstLastIcon", isSignal: false, isRequired: false, transformFunction: null }, selectionKeys: { classPropertyName: "selectionKeys", publicName: "selectionKeys", isSignal: true, isRequired: false, transformFunction: null }, _templates: { classPropertyName: "_templates", publicName: "templates", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange", onFilter: "onFilter", onPaginate: "onPaginate", onActiveItem: "onActiveItem", onActiveItemLote: "onActiveItemLote", doubleClickEvent: "doubleClickEvent", onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onDropItem: "onDropItem", selectionKeys: "selectionKeysChange" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "kvTreeTable", first: true, predicate: ["kvTreeTable"], descendants: true, isSignal: true }, { propertyName: "pTreeTable", first: true, predicate: TreeTable, descendants: true }, { propertyName: "inputBusca", first: true, predicate: ["inputBusca"], descendants: true }], ngImport: i0, template: "<div class=\"kv-treetable-container\" #kvTreeTable>\r\n  <p-treeTable\r\n    #tt\r\n    cdkDropList\r\n    class=\"example-list\"\r\n    (cdkDropListDropped)=\"drop($event)\"\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, 15, 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    [selectionKeys]=\"selectionKeys()\"\r\n    (selectionKeysChange)=\"selectionKeys.set($event)\"\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    @if(config.enableCation)\r\n    {\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 m-0 p-1\">\r\n          <div class=\"col-12 flex flex-column\">\r\n            @if(config.title) {\r\n              <div class=\"text-md font-bold my-3\">{{ config.title }}</div>\r\n            }\r\n            @if(config.subtitle) {\r\n              <div class=\"text-sm mb-4 font-medium\">{{ config.subtitle }}</div>\r\n            }\r\n          </div>\r\n          <div class=\"flex flex-row align-items-center col-10 p-0 md:col-6 lg:col-2 justify-content-center\r\n            {{\r\n              tamanhoTela() < 768 ? '' : 'input-search'\r\n            }}\">\r\n            @if(config.enableFilter) {\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]=\"searchPlaceholder\"\r\n                class=\"h-2rem text-sm\"\r\n                #inputBusca\r\n              />\r\n            }\r\n          </div>\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              {\r\n                @if((selectedItems.length > 0 || action.showAcoesLote) && exibirCampo()(action, this.action))\r\n                {\r\n                  <kv-button\r\n                    (onClick)=\"action?.command(); activeItemLote(selectedItems)\"\r\n                    [pTooltip]=\"getOrExecute(action.tooltip, selectedItems)\"\r\n                    [tooltipPosition]=\"'bottom'\"\r\n                    [size]=\"'small'\"\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              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    } @if(showHeader)\r\n    {\r\n      <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n          @for(col of columns; track $index)\r\n          {\r\n            <th\r\n              [ttSortableColumn]=\"col.field\"\r\n              [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n              [style.width]=\"col.width\">\r\n              <div>\r\n                <div [ngClass]=\"{ flex: $index == 0, 'gap-3': $index == 0 }\">\r\n                  @if($index == 0 && config.enableSelect)\r\n                  {\r\n                    <p-treeTableHeaderCheckbox\r\n                      (click)=\"activeItemLote(selectedItems)\"/>\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                    @if(col.sortable)\r\n                    {\r\n                      <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\" />\r\n                    }\r\n                    @if(col.headerTooltip)\r\n                    {\r\n                      <span class=\"material-symbols-outlined flex align-items-center\" [pTooltip]=\"col.headerTooltip\">info</span>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </th>\r\n            @if (config.actions?.length ?? 0 > 0 || config.actionsPai)\r\n            {\r\n              <th [style.width]=\"5\"></th>\r\n            }\r\n          }\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n          @for (col of columns; track $index)\r\n          {\r\n            <th\r\n              [ttSortableColumn]=\"col.field\"\r\n              [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n              [style.width]=\"col.width\">\r\n              <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n                <span class=\"text-xs\">{{ col.header }}</span>\r\n                @if(col.sortable)\r\n                {\r\n                  <p-treeTableSortIcon [field]=\"col.field\" />\r\n                }\r\n              </div>\r\n            </th>\r\n          }\r\n          @if (config.actions?.length ?? 0 > 0 || config.actionsPai)\r\n          {\r\n            <th [style.width]=\"5\"></th>\r\n          }\r\n        </tr>\r\n      </ng-template>\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      @if(isLoadingSkeleton())\r\n      {\r\n        @for(skeletonRow of dataSource(); track $index)\r\n        {\r\n          <tr>\r\n            @for(col of columns; track $index)\r\n            {\r\n              <td>\r\n                <div\r\n                  class=\"flex flex-row align-items-center justify-content-center w-full\"\r\n                >\r\n                  @if($index == 0) {\r\n                  <p-treeTableToggler [rowNode]=\"rowNode\"/>\r\n                  }\r\n                  <div class=\"flex flex-column w-full\">\r\n                    <p-skeleton height=\"1rem\"/>\r\n                  </div>\r\n                </div>\r\n              </td>\r\n            }\r\n            <td>\r\n              <div class=\"flex justify-content-center\">\r\n                <p-skeleton [style]=\"{ height: '1.5rem', width: '1.5rem' }\"/>\r\n              </div>\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else\r\n      {\r\n        @if(treeTableDraggable)\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            @for(col of columns; track $index)\r\n            {\r\n              <td\r\n                class=\"draggable-cell\"\r\n                [style.position]=\"!disableRowNodeSticky && rowNode.level !== 0 ? 'sticky' : null\">\r\n                <!-- [style.left.px]=\"\r\n                        childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null\r\n                        \" -->\r\n                <div class=\"flex flex-row  {{ align(col) }}\">\r\n                  @if($index == 0)\r\n                  {\r\n                    <div class=\"w-full-h-full flex align-items-center\">\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                        drag_indicator\r\n                      </span>\r\n                      <p-treeTableToggler class=\"hiddenVisible\" [rowNode]=\"rowNode\" />\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)\r\n                            ? 'block'\r\n                            : 'none',\r\n                          'margin-left': config.visibleCheckboxFunction\r\n                            ? '-34px'\r\n                            : '0px'\r\n                        }\"\r\n                      />\r\n                      }\r\n                    </div>\r\n                  }\r\n                  <div class=\"flex flex-row align-items-center w-full\">\r\n                    @if (col.template && validateShowTemplate()(rowNode, col))\r\n                    {\r\n                      <span class=\"w-full\">\r\n                        @if(getCustomTemplate(col.template.name))\r\n                        {\r\n                          <ng-container\r\n                            [ngTemplateOutlet]=\"getCustomTemplate(col.template.name)\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: rowData }\">\r\n                          </ng-container>\r\n                        }\r\n                      </span>\r\n                    } @else\r\n                    {\r\n                      <div class=\"flex flex-row align-items-center {{ (col.boolean || col.centralize) && 'justify-content-center' }} gap-2 w-full\">\r\n                        @if(col.tagColor)\r\n                        {\r\n                          <div\r\n                            class=\"tag\"\r\n                            [pTooltip]=\"col.tooltipTag && col.tooltipTag(rowData, col, rowData[col.field])\"\r\n                            [style.background-color]=\"col.tagColor(rowData, col, rowData[col.field])\">\r\n                          </div>\r\n                        } @if(col.boolean)\r\n                        {\r\n                          <i\r\n                            class=\"pi {{ rowData[col.field] ? 'pi-check text-green-300' : '' }}\"\r\n                            style=\"font-size: 1rem; font-weight: 700\">\r\n                          </i>\r\n                        } @else\r\n                        {\r\n                          <div class=\"flex flex-column\">\r\n                            <span class=\"m-0 text-xs\">{{ rowData[col.field] }}</span>\r\n                            @if(col.subtitle)\r\n                            {\r\n                              <p class=\"m-0 text-xs font-semibold\">\r\n                                {{ rowData[col.subtitle] }}\r\n                              </p>\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </td>\r\n              } @if((config.actions?.length ?? 0 > 0) || config.actionsPai)\r\n              {\r\n                <td\r\n                  style=\"border-left: none; text-align: center; width: 0\"\r\n                  [style.borderRight]=\"rowNode.level === 0 ? 'none' : ''\"\r\n                  [style.borderLeft]=\"rowNode.level === 0 ? 'none' : ''\">\r\n                  @if((config.actions?.length ?? 0 > 0) && validateActionPosition()(rowNode))\r\n                  {\r\n                    <div class=\"flex align-items-center justify-content-center\">\r\n                      <span\r\n                        class=\"material-symbols-outlined cursor-pointer icon-more-horiz\"\r\n                        (click)=\"menu.toggle($event); activeItem(rowData)\">\r\n                        more_horiz\r\n                      </span>\r\n                      @for(action of config.actions; track $index)\r\n                      {\r\n                        {{ criarMenusModal()(rowData) }}\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                  {\r\n                    <div class=\"flex justify-content-end align-items-center\">\r\n                      @for (actionPai of config.actionsPai; track $index)\r\n                      {\r\n                        @if(getOrExecute(actionPai.visible, rowData) ?? true)\r\n                        {\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                            [disabled]=\"getOrExecute(actionPai.disabled, rowData) || false\"\r\n                            [pTooltip]=\"getOrExecute(actionPai.tooltip, rowData)\"\r\n                            [tooltipPosition]=\"'left'\"\r\n                          />\r\n                        }\r\n                      }\r\n                    </div>\r\n                  }\r\n                </td>\r\n              }\r\n          </tr>\r\n        }\r\n        @else\r\n        {\r\n          <tr\r\n            [ttRow]=\"rowNode\"\r\n            (dblclick)=\"doubleClick($event, rowData)\"\r\n            [ngClass]=\"{ capitalize: tableCaptalized }\">\r\n            @for(col of columns; track $index)\r\n            {\r\n              <td\r\n                [style.position]=\"rowNode.level !== 0 ? 'sticky' : null\"\r\n                [style.left.px]=\"childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null\"\r\n                [style.borderRight]=\"rowNode.level === 0 ? 'none' : ''\"\r\n                [style.borderLeft]=\"rowNode.level === 0 && col.field != config.columns[0].field ? 'none' : ''\">\r\n                <div class=\"flex flex-row {{ align(col) }}\">\r\n                  @if($index == 0)\r\n                  {\r\n                    <div class=\"w-full-h-full flex align-items-center\">\r\n                      <p-treeTableToggler class=\"hiddenVisible\" [rowNode]=\"rowNode\"/>\r\n                      @if(config.enableSelect)\r\n                      {\r\n                        <p-treeTableCheckbox\r\n                          [disabled]=\"isDisabledCheckbox()(rowData, rowNode)\"\r\n                          (click)=\"activeItemLote(selectedItems)\"\r\n                          [value]=\"rowNode\"\r\n                          [ngStyle]=\"{ display: isSelectEnabled()(rowData, rowNode) ? 'block' : 'none', 'margin-left': config.visibleCheckboxFunction ? '-34px' : '0px' }\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  }\r\n                  <div class=\"flex flex-row align-items-center w-full\">\r\n                    @if (col.template && validateShowTemplate()(rowNode, col))\r\n                    {\r\n                      <span class=\"w-full\">\r\n                        @if(getCustomTemplate(col.template.name))\r\n                        {\r\n                          <ng-container\r\n                            [ngTemplateOutlet]=\"getCustomTemplate(col.template.name)\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: rowData }\">\r\n                          </ng-container>\r\n                        }\r\n                      </span>\r\n                    } @else\r\n                    {\r\n                      <div\r\n                        class=\"flex flex-row align-items-center {{ (col.boolean || col.centralize) && 'justify-content-center' }} gap-2 w-full\">\r\n                        @if(col.tagColor)\r\n                        {\r\n                          <div\r\n                            class=\"tag\"\r\n                            [pTooltip]=\" col.tooltipTag && col.tooltipTag(rowData, col, rowData[col.field])\"\r\n                            [style.background-color]=\"col.tagColor(rowData, col, rowData[col.field])\">\r\n                          </div>\r\n                        }\r\n                        @if(col.boolean)\r\n                        {\r\n                          <i\r\n                            class=\"pi {{rowData[col.field] ? 'pi-check text-green-300' : '' }}\"\r\n                            style=\"font-size: 1rem; font-weight: 700\">\r\n                          </i>\r\n                        } @else\r\n                        {\r\n                          <div class=\"flex flex-column\">\r\n                            <span class=\"m-0 text-xs\">{{ rowData[col.field] }}</span>\r\n                            @if(col.subtitle)\r\n                            {\r\n                              <p class=\"m-0 text-xs font-semibold\">\r\n                                {{ rowData[col.subtitle] }}\r\n                              </p>\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </td>\r\n            }\r\n            @if((config.actions?.length ?? 0 > 0) || config.actionsPai)\r\n            {\r\n              <td style=\"border-left: none; text-align: center; width: 0\">\r\n                @if((config.actions?.length ?? 0 > 0) && validateActionPosition()(rowNode))\r\n                {\r\n                  <div>\r\n                    <span\r\n                      class=\"material-symbols-outlined cursor-pointer icon-more-horiz\"\r\n                      (click)=\"menu.toggle($event); activeItem(rowData)\">\r\n                      more_horiz\r\n                    </span>\r\n                    @for(action of config.actions; track $index)\r\n                    {\r\n                      {{ criarMenusModal()(rowData) }}\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                {\r\n                  <div class=\"flex justify-content-end\">\r\n                    @for (actionPai of config.actionsPai; track $index)\r\n                    {\r\n                      @if(getOrExecute(actionPai.visible, rowData) ?? true)\r\n                      {\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                          [disabled]=\"getOrExecute(actionPai.disabled, rowData) || false\"\r\n                          [pTooltip]=\"getOrExecute(actionPai.tooltip, rowData)\"\r\n                          [tooltipPosition]=\"'left'\"\r\n                        />\r\n                      }\r\n                    }\r\n                  </div>\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      }\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-xs\">\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:.1rem}::ng-deep .p-treetable .p-treetable-header{padding:0!important;margin-bottom:.5rem!important;border-radius:5px!important;background-color:transparent;border:none}: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:.75}::ng-deep .icon-more-horiz{font-weight:300!important;font-size:1.4rem!important;padding:.1rem!important;color:rgb(var(--kv-color-system),.75)!important;transition:all .4s}.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{padding:.15rem!important;background-color:rgba(var(--kv-color-system),.05);color:rgba(var(--kv-color-text),.6);font-size:.75rem!important;font-weight:600!important}::ng-deep .p-treetable .p-treetable-thead>tr>th span{padding:.25rem}::ng-deep .p-treetable .p-treetable-thead{min-height:.5rem!important;padding:.15rem!important}.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}:host{height:100%}::ng-deep .kv-treetable-container,::ng-deep p-treeTable{height:100%}::ng-deep p-treeTable .p-treetable{display:flex;flex-direction:column;height:100%}::ng-deep table{height:auto!important}::ng-deep .p-treetable .p-treetable-wrapper{border:1px solid rgba(var(--kv-color-system),.1);border-radius:.5rem;color:rgb(var(--kv-color-system))}::ng-deep p-treeTable .p-treetable .p-treetable-wrapper,::ng-deep p-treeTable{height:100%}::ng-deep .p-treetable .p-treetable-wrapper::-webkit-scrollbar{width:6px}::ng-deep .p-treetable .p-treetable-wrapper::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-treetable .p-treetable-wrapper::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-treetable .p-treetable-wrapper:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-treetable .p-treetable-wrapper::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-menuitem .p-menuitem-content .p-menuitem-link{padding:.5rem!important;font-size:.75rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5$1.AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "directive", type: i5$2.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: i2.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: i12.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i9$1.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: i9$1.TreeTableToggler, selector: "p-treeTableToggler", inputs: ["rowNode"] }, { kind: "directive", type: i9$1.TTSortableColumn, selector: "[ttSortableColumn]", inputs: ["ttSortableColumn", "ttSortableColumnDisabled"] }, { kind: "component", type: i9$1.TTSortIcon, selector: "p-treeTableSortIcon", inputs: ["field", "ariaLabelDesc", "ariaLabelAsc"] }, { kind: "directive", type: i9$1.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: i9$1.TTCheckbox, selector: "p-treeTableCheckbox", inputs: ["disabled", "value"] }, { kind: "component", type: i9$1.TTHeaderCheckbox, selector: "p-treeTableHeaderCheckbox" }, { kind: "component", type: KvButtonComponent, selector: "kv-button", inputs: ["fullWidth", "type", "loading", "severity", "size", "icon", "iconPosition", "label", "disabled", "items", "popup", "popupIcon"], outputs: ["iconChange", "onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvTreetableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kv-tree-table', template: "<div class=\"kv-treetable-container\" #kvTreeTable>\r\n  <p-treeTable\r\n    #tt\r\n    cdkDropList\r\n    class=\"example-list\"\r\n    (cdkDropListDropped)=\"drop($event)\"\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, 15, 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    [selectionKeys]=\"selectionKeys()\"\r\n    (selectionKeysChange)=\"selectionKeys.set($event)\"\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    @if(config.enableCation)\r\n    {\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 m-0 p-1\">\r\n          <div class=\"col-12 flex flex-column\">\r\n            @if(config.title) {\r\n              <div class=\"text-md font-bold my-3\">{{ config.title }}</div>\r\n            }\r\n            @if(config.subtitle) {\r\n              <div class=\"text-sm mb-4 font-medium\">{{ config.subtitle }}</div>\r\n            }\r\n          </div>\r\n          <div class=\"flex flex-row align-items-center col-10 p-0 md:col-6 lg:col-2 justify-content-center\r\n            {{\r\n              tamanhoTela() < 768 ? '' : 'input-search'\r\n            }}\">\r\n            @if(config.enableFilter) {\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]=\"searchPlaceholder\"\r\n                class=\"h-2rem text-sm\"\r\n                #inputBusca\r\n              />\r\n            }\r\n          </div>\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              {\r\n                @if((selectedItems.length > 0 || action.showAcoesLote) && exibirCampo()(action, this.action))\r\n                {\r\n                  <kv-button\r\n                    (onClick)=\"action?.command(); activeItemLote(selectedItems)\"\r\n                    [pTooltip]=\"getOrExecute(action.tooltip, selectedItems)\"\r\n                    [tooltipPosition]=\"'bottom'\"\r\n                    [size]=\"'small'\"\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              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    } @if(showHeader)\r\n    {\r\n      <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n          @for(col of columns; track $index)\r\n          {\r\n            <th\r\n              [ttSortableColumn]=\"col.field\"\r\n              [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n              [style.width]=\"col.width\">\r\n              <div>\r\n                <div [ngClass]=\"{ flex: $index == 0, 'gap-3': $index == 0 }\">\r\n                  @if($index == 0 && config.enableSelect)\r\n                  {\r\n                    <p-treeTableHeaderCheckbox\r\n                      (click)=\"activeItemLote(selectedItems)\"/>\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                    @if(col.sortable)\r\n                    {\r\n                      <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\" />\r\n                    }\r\n                    @if(col.headerTooltip)\r\n                    {\r\n                      <span class=\"material-symbols-outlined flex align-items-center\" [pTooltip]=\"col.headerTooltip\">info</span>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </th>\r\n            @if (config.actions?.length ?? 0 > 0 || config.actionsPai)\r\n            {\r\n              <th [style.width]=\"5\"></th>\r\n            }\r\n          }\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n          @for (col of columns; track $index)\r\n          {\r\n            <th\r\n              [ttSortableColumn]=\"col.field\"\r\n              [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n              [style.width]=\"col.width\">\r\n              <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n                <span class=\"text-xs\">{{ col.header }}</span>\r\n                @if(col.sortable)\r\n                {\r\n                  <p-treeTableSortIcon [field]=\"col.field\" />\r\n                }\r\n              </div>\r\n            </th>\r\n          }\r\n          @if (config.actions?.length ?? 0 > 0 || config.actionsPai)\r\n          {\r\n            <th [style.width]=\"5\"></th>\r\n          }\r\n        </tr>\r\n      </ng-template>\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      @if(isLoadingSkeleton())\r\n      {\r\n        @for(skeletonRow of dataSource(); track $index)\r\n        {\r\n          <tr>\r\n            @for(col of columns; track $index)\r\n            {\r\n              <td>\r\n                <div\r\n                  class=\"flex flex-row align-items-center justify-content-center w-full\"\r\n                >\r\n                  @if($index == 0) {\r\n                  <p-treeTableToggler [rowNode]=\"rowNode\"/>\r\n                  }\r\n                  <div class=\"flex flex-column w-full\">\r\n                    <p-skeleton height=\"1rem\"/>\r\n                  </div>\r\n                </div>\r\n              </td>\r\n            }\r\n            <td>\r\n              <div class=\"flex justify-content-center\">\r\n                <p-skeleton [style]=\"{ height: '1.5rem', width: '1.5rem' }\"/>\r\n              </div>\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else\r\n      {\r\n        @if(treeTableDraggable)\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            @for(col of columns; track $index)\r\n            {\r\n              <td\r\n                class=\"draggable-cell\"\r\n                [style.position]=\"!disableRowNodeSticky && rowNode.level !== 0 ? 'sticky' : null\">\r\n                <!-- [style.left.px]=\"\r\n                        childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null\r\n                        \" -->\r\n                <div class=\"flex flex-row  {{ align(col) }}\">\r\n                  @if($index == 0)\r\n                  {\r\n                    <div class=\"w-full-h-full flex align-items-center\">\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                        drag_indicator\r\n                      </span>\r\n                      <p-treeTableToggler class=\"hiddenVisible\" [rowNode]=\"rowNode\" />\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)\r\n                            ? 'block'\r\n                            : 'none',\r\n                          'margin-left': config.visibleCheckboxFunction\r\n                            ? '-34px'\r\n                            : '0px'\r\n                        }\"\r\n                      />\r\n                      }\r\n                    </div>\r\n                  }\r\n                  <div class=\"flex flex-row align-items-center w-full\">\r\n                    @if (col.template && validateShowTemplate()(rowNode, col))\r\n                    {\r\n                      <span class=\"w-full\">\r\n                        @if(getCustomTemplate(col.template.name))\r\n                        {\r\n                          <ng-container\r\n                            [ngTemplateOutlet]=\"getCustomTemplate(col.template.name)\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: rowData }\">\r\n                          </ng-container>\r\n                        }\r\n                      </span>\r\n                    } @else\r\n                    {\r\n                      <div class=\"flex flex-row align-items-center {{ (col.boolean || col.centralize) && 'justify-content-center' }} gap-2 w-full\">\r\n                        @if(col.tagColor)\r\n                        {\r\n                          <div\r\n                            class=\"tag\"\r\n                            [pTooltip]=\"col.tooltipTag && col.tooltipTag(rowData, col, rowData[col.field])\"\r\n                            [style.background-color]=\"col.tagColor(rowData, col, rowData[col.field])\">\r\n                          </div>\r\n                        } @if(col.boolean)\r\n                        {\r\n                          <i\r\n                            class=\"pi {{ rowData[col.field] ? 'pi-check text-green-300' : '' }}\"\r\n                            style=\"font-size: 1rem; font-weight: 700\">\r\n                          </i>\r\n                        } @else\r\n                        {\r\n                          <div class=\"flex flex-column\">\r\n                            <span class=\"m-0 text-xs\">{{ rowData[col.field] }}</span>\r\n                            @if(col.subtitle)\r\n                            {\r\n                              <p class=\"m-0 text-xs font-semibold\">\r\n                                {{ rowData[col.subtitle] }}\r\n                              </p>\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </td>\r\n              } @if((config.actions?.length ?? 0 > 0) || config.actionsPai)\r\n              {\r\n                <td\r\n                  style=\"border-left: none; text-align: center; width: 0\"\r\n                  [style.borderRight]=\"rowNode.level === 0 ? 'none' : ''\"\r\n                  [style.borderLeft]=\"rowNode.level === 0 ? 'none' : ''\">\r\n                  @if((config.actions?.length ?? 0 > 0) && validateActionPosition()(rowNode))\r\n                  {\r\n                    <div class=\"flex align-items-center justify-content-center\">\r\n                      <span\r\n                        class=\"material-symbols-outlined cursor-pointer icon-more-horiz\"\r\n                        (click)=\"menu.toggle($event); activeItem(rowData)\">\r\n                        more_horiz\r\n                      </span>\r\n                      @for(action of config.actions; track $index)\r\n                      {\r\n                        {{ criarMenusModal()(rowData) }}\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                  {\r\n                    <div class=\"flex justify-content-end align-items-center\">\r\n                      @for (actionPai of config.actionsPai; track $index)\r\n                      {\r\n                        @if(getOrExecute(actionPai.visible, rowData) ?? true)\r\n                        {\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                            [disabled]=\"getOrExecute(actionPai.disabled, rowData) || false\"\r\n                            [pTooltip]=\"getOrExecute(actionPai.tooltip, rowData)\"\r\n                            [tooltipPosition]=\"'left'\"\r\n                          />\r\n                        }\r\n                      }\r\n                    </div>\r\n                  }\r\n                </td>\r\n              }\r\n          </tr>\r\n        }\r\n        @else\r\n        {\r\n          <tr\r\n            [ttRow]=\"rowNode\"\r\n            (dblclick)=\"doubleClick($event, rowData)\"\r\n            [ngClass]=\"{ capitalize: tableCaptalized }\">\r\n            @for(col of columns; track $index)\r\n            {\r\n              <td\r\n                [style.position]=\"rowNode.level !== 0 ? 'sticky' : null\"\r\n                [style.left.px]=\"childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null\"\r\n                [style.borderRight]=\"rowNode.level === 0 ? 'none' : ''\"\r\n                [style.borderLeft]=\"rowNode.level === 0 && col.field != config.columns[0].field ? 'none' : ''\">\r\n                <div class=\"flex flex-row {{ align(col) }}\">\r\n                  @if($index == 0)\r\n                  {\r\n                    <div class=\"w-full-h-full flex align-items-center\">\r\n                      <p-treeTableToggler class=\"hiddenVisible\" [rowNode]=\"rowNode\"/>\r\n                      @if(config.enableSelect)\r\n                      {\r\n                        <p-treeTableCheckbox\r\n                          [disabled]=\"isDisabledCheckbox()(rowData, rowNode)\"\r\n                          (click)=\"activeItemLote(selectedItems)\"\r\n                          [value]=\"rowNode\"\r\n                          [ngStyle]=\"{ display: isSelectEnabled()(rowData, rowNode) ? 'block' : 'none', 'margin-left': config.visibleCheckboxFunction ? '-34px' : '0px' }\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  }\r\n                  <div class=\"flex flex-row align-items-center w-full\">\r\n                    @if (col.template && validateShowTemplate()(rowNode, col))\r\n                    {\r\n                      <span class=\"w-full\">\r\n                        @if(getCustomTemplate(col.template.name))\r\n                        {\r\n                          <ng-container\r\n                            [ngTemplateOutlet]=\"getCustomTemplate(col.template.name)\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: rowData }\">\r\n                          </ng-container>\r\n                        }\r\n                      </span>\r\n                    } @else\r\n                    {\r\n                      <div\r\n                        class=\"flex flex-row align-items-center {{ (col.boolean || col.centralize) && 'justify-content-center' }} gap-2 w-full\">\r\n                        @if(col.tagColor)\r\n                        {\r\n                          <div\r\n                            class=\"tag\"\r\n                            [pTooltip]=\" col.tooltipTag && col.tooltipTag(rowData, col, rowData[col.field])\"\r\n                            [style.background-color]=\"col.tagColor(rowData, col, rowData[col.field])\">\r\n                          </div>\r\n                        }\r\n                        @if(col.boolean)\r\n                        {\r\n                          <i\r\n                            class=\"pi {{rowData[col.field] ? 'pi-check text-green-300' : '' }}\"\r\n                            style=\"font-size: 1rem; font-weight: 700\">\r\n                          </i>\r\n                        } @else\r\n                        {\r\n                          <div class=\"flex flex-column\">\r\n                            <span class=\"m-0 text-xs\">{{ rowData[col.field] }}</span>\r\n                            @if(col.subtitle)\r\n                            {\r\n                              <p class=\"m-0 text-xs font-semibold\">\r\n                                {{ rowData[col.subtitle] }}\r\n                              </p>\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </td>\r\n            }\r\n            @if((config.actions?.length ?? 0 > 0) || config.actionsPai)\r\n            {\r\n              <td style=\"border-left: none; text-align: center; width: 0\">\r\n                @if((config.actions?.length ?? 0 > 0) && validateActionPosition()(rowNode))\r\n                {\r\n                  <div>\r\n                    <span\r\n                      class=\"material-symbols-outlined cursor-pointer icon-more-horiz\"\r\n                      (click)=\"menu.toggle($event); activeItem(rowData)\">\r\n                      more_horiz\r\n                    </span>\r\n                    @for(action of config.actions; track $index)\r\n                    {\r\n                      {{ criarMenusModal()(rowData) }}\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                {\r\n                  <div class=\"flex justify-content-end\">\r\n                    @for (actionPai of config.actionsPai; track $index)\r\n                    {\r\n                      @if(getOrExecute(actionPai.visible, rowData) ?? true)\r\n                      {\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                          [disabled]=\"getOrExecute(actionPai.disabled, rowData) || false\"\r\n                          [pTooltip]=\"getOrExecute(actionPai.tooltip, rowData)\"\r\n                          [tooltipPosition]=\"'left'\"\r\n                        />\r\n                      }\r\n                    }\r\n                  </div>\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      }\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-xs\">\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:.1rem}::ng-deep .p-treetable .p-treetable-header{padding:0!important;margin-bottom:.5rem!important;border-radius:5px!important;background-color:transparent;border:none}: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:.75}::ng-deep .icon-more-horiz{font-weight:300!important;font-size:1.4rem!important;padding:.1rem!important;color:rgb(var(--kv-color-system),.75)!important;transition:all .4s}.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{padding:.15rem!important;background-color:rgba(var(--kv-color-system),.05);color:rgba(var(--kv-color-text),.6);font-size:.75rem!important;font-weight:600!important}::ng-deep .p-treetable .p-treetable-thead>tr>th span{padding:.25rem}::ng-deep .p-treetable .p-treetable-thead{min-height:.5rem!important;padding:.15rem!important}.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}:host{height:100%}::ng-deep .kv-treetable-container,::ng-deep p-treeTable{height:100%}::ng-deep p-treeTable .p-treetable{display:flex;flex-direction:column;height:100%}::ng-deep table{height:auto!important}::ng-deep .p-treetable .p-treetable-wrapper{flex:1 1 1;border:1px solid rgba(var(--kv-color-system),.1);border-radius:.5rem;overflow:hidden;color:rgb(var(--kv-color-system))}::ng-deep p-treeTable .p-treetable .p-treetable-wrapper,::ng-deep p-treeTable{height:100%}::ng-deep .p-treetable .p-treetable-wrapper::-webkit-scrollbar{width:6px}::ng-deep .p-treetable .p-treetable-wrapper::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-treetable .p-treetable-wrapper::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-treetable .p-treetable-wrapper:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-treetable .p-treetable-wrapper::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-menuitem .p-menuitem-content .p-menuitem-link{padding:.5rem!important;font-size:.75rem!important}\n"] }]
+            args: [{ selector: 'kv-tree-table', template: "<div class=\"kv-treetable-container\" #kvTreeTable>\r\n  <p-treeTable\r\n    #tt\r\n    cdkDropList\r\n    class=\"example-list\"\r\n    (cdkDropListDropped)=\"drop($event)\"\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, 15, 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    [selectionKeys]=\"selectionKeys()\"\r\n    (selectionKeysChange)=\"selectionKeys.set($event)\"\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    @if(config.enableCation)\r\n    {\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 m-0 p-1\">\r\n          <div class=\"col-12 flex flex-column\">\r\n            @if(config.title) {\r\n              <div class=\"text-md font-bold my-3\">{{ config.title }}</div>\r\n            }\r\n            @if(config.subtitle) {\r\n              <div class=\"text-sm mb-4 font-medium\">{{ config.subtitle }}</div>\r\n            }\r\n          </div>\r\n          <div class=\"flex flex-row align-items-center col-10 p-0 md:col-6 lg:col-2 justify-content-center\r\n            {{\r\n              tamanhoTela() < 768 ? '' : 'input-search'\r\n            }}\">\r\n            @if(config.enableFilter) {\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]=\"searchPlaceholder\"\r\n                class=\"h-2rem text-sm\"\r\n                #inputBusca\r\n              />\r\n            }\r\n          </div>\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              {\r\n                @if((selectedItems.length > 0 || action.showAcoesLote) && exibirCampo()(action, this.action))\r\n                {\r\n                  <kv-button\r\n                    (onClick)=\"action?.command(); activeItemLote(selectedItems)\"\r\n                    [pTooltip]=\"getOrExecute(action.tooltip, selectedItems)\"\r\n                    [tooltipPosition]=\"'bottom'\"\r\n                    [size]=\"'small'\"\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              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    } @if(showHeader)\r\n    {\r\n      <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n          @for(col of columns; track $index)\r\n          {\r\n            <th\r\n              [ttSortableColumn]=\"col.field\"\r\n              [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n              [style.width]=\"col.width\">\r\n              <div>\r\n                <div [ngClass]=\"{ flex: $index == 0, 'gap-3': $index == 0 }\">\r\n                  @if($index == 0 && config.enableSelect)\r\n                  {\r\n                    <p-treeTableHeaderCheckbox\r\n                      (click)=\"activeItemLote(selectedItems)\"/>\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                    @if(col.sortable)\r\n                    {\r\n                      <p-treeTableSortIcon [field]=\"col.field\" class=\"pb-1\" />\r\n                    }\r\n                    @if(col.headerTooltip)\r\n                    {\r\n                      <span class=\"material-symbols-outlined flex align-items-center\" [pTooltip]=\"col.headerTooltip\">info</span>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </th>\r\n            @if (config.actions?.length ?? 0 > 0 || config.actionsPai)\r\n            {\r\n              <th [style.width]=\"5\"></th>\r\n            }\r\n          }\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"header\" let-columns>\r\n        <tr>\r\n          @for (col of columns; track $index)\r\n          {\r\n            <th\r\n              [ttSortableColumn]=\"col.field\"\r\n              [ttSortableColumnDisabled]=\"col.sortable === false\"\r\n              [style.width]=\"col.width\">\r\n              <div class=\"flex flex-row align-items-center {{ align(col) }}\">\r\n                <span class=\"text-xs\">{{ col.header }}</span>\r\n                @if(col.sortable)\r\n                {\r\n                  <p-treeTableSortIcon [field]=\"col.field\" />\r\n                }\r\n              </div>\r\n            </th>\r\n          }\r\n          @if (config.actions?.length ?? 0 > 0 || config.actionsPai)\r\n          {\r\n            <th [style.width]=\"5\"></th>\r\n          }\r\n        </tr>\r\n      </ng-template>\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      @if(isLoadingSkeleton())\r\n      {\r\n        @for(skeletonRow of dataSource(); track $index)\r\n        {\r\n          <tr>\r\n            @for(col of columns; track $index)\r\n            {\r\n              <td>\r\n                <div\r\n                  class=\"flex flex-row align-items-center justify-content-center w-full\"\r\n                >\r\n                  @if($index == 0) {\r\n                  <p-treeTableToggler [rowNode]=\"rowNode\"/>\r\n                  }\r\n                  <div class=\"flex flex-column w-full\">\r\n                    <p-skeleton height=\"1rem\"/>\r\n                  </div>\r\n                </div>\r\n              </td>\r\n            }\r\n            <td>\r\n              <div class=\"flex justify-content-center\">\r\n                <p-skeleton [style]=\"{ height: '1.5rem', width: '1.5rem' }\"/>\r\n              </div>\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else\r\n      {\r\n        @if(treeTableDraggable)\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            @for(col of columns; track $index)\r\n            {\r\n              <td\r\n                class=\"draggable-cell\"\r\n                [style.position]=\"!disableRowNodeSticky && rowNode.level !== 0 ? 'sticky' : null\">\r\n                <!-- [style.left.px]=\"\r\n                        childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null\r\n                        \" -->\r\n                <div class=\"flex flex-row  {{ align(col) }}\">\r\n                  @if($index == 0)\r\n                  {\r\n                    <div class=\"w-full-h-full flex align-items-center\">\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                        drag_indicator\r\n                      </span>\r\n                      <p-treeTableToggler class=\"hiddenVisible\" [rowNode]=\"rowNode\" />\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)\r\n                            ? 'block'\r\n                            : 'none',\r\n                          'margin-left': config.visibleCheckboxFunction\r\n                            ? '-34px'\r\n                            : '0px'\r\n                        }\"\r\n                      />\r\n                      }\r\n                    </div>\r\n                  }\r\n                  <div class=\"flex flex-row align-items-center w-full\">\r\n                    @if (col.template && validateShowTemplate()(rowNode, col))\r\n                    {\r\n                      <span class=\"w-full\">\r\n                        @if(getCustomTemplate(col.template.name))\r\n                        {\r\n                          <ng-container\r\n                            [ngTemplateOutlet]=\"getCustomTemplate(col.template.name)\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: rowData }\">\r\n                          </ng-container>\r\n                        }\r\n                      </span>\r\n                    } @else\r\n                    {\r\n                      <div class=\"flex flex-row align-items-center {{ (col.boolean || col.centralize) && 'justify-content-center' }} gap-2 w-full\">\r\n                        @if(col.tagColor)\r\n                        {\r\n                          <div\r\n                            class=\"tag\"\r\n                            [pTooltip]=\"col.tooltipTag && col.tooltipTag(rowData, col, rowData[col.field])\"\r\n                            [style.background-color]=\"col.tagColor(rowData, col, rowData[col.field])\">\r\n                          </div>\r\n                        } @if(col.boolean)\r\n                        {\r\n                          <i\r\n                            class=\"pi {{ rowData[col.field] ? 'pi-check text-green-300' : '' }}\"\r\n                            style=\"font-size: 1rem; font-weight: 700\">\r\n                          </i>\r\n                        } @else\r\n                        {\r\n                          <div class=\"flex flex-column\">\r\n                            <span class=\"m-0 text-xs\">{{ rowData[col.field] }}</span>\r\n                            @if(col.subtitle)\r\n                            {\r\n                              <p class=\"m-0 text-xs font-semibold\">\r\n                                {{ rowData[col.subtitle] }}\r\n                              </p>\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </td>\r\n              } @if((config.actions?.length ?? 0 > 0) || config.actionsPai)\r\n              {\r\n                <td\r\n                  style=\"border-left: none; text-align: center; width: 0\"\r\n                  [style.borderRight]=\"rowNode.level === 0 ? 'none' : ''\"\r\n                  [style.borderLeft]=\"rowNode.level === 0 ? 'none' : ''\">\r\n                  @if((config.actions?.length ?? 0 > 0) && validateActionPosition()(rowNode))\r\n                  {\r\n                    <div class=\"flex align-items-center justify-content-center\">\r\n                      <span\r\n                        class=\"material-symbols-outlined cursor-pointer icon-more-horiz\"\r\n                        (click)=\"menu.toggle($event); activeItem(rowData)\">\r\n                        more_horiz\r\n                      </span>\r\n                      @for(action of config.actions; track $index)\r\n                      {\r\n                        {{ criarMenusModal()(rowData) }}\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                  {\r\n                    <div class=\"flex justify-content-end align-items-center\">\r\n                      @for (actionPai of config.actionsPai; track $index)\r\n                      {\r\n                        @if(getOrExecute(actionPai.visible, rowData) ?? true)\r\n                        {\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                            [disabled]=\"getOrExecute(actionPai.disabled, rowData) || false\"\r\n                            [pTooltip]=\"getOrExecute(actionPai.tooltip, rowData)\"\r\n                            [tooltipPosition]=\"'left'\"\r\n                          />\r\n                        }\r\n                      }\r\n                    </div>\r\n                  }\r\n                </td>\r\n              }\r\n          </tr>\r\n        }\r\n        @else\r\n        {\r\n          <tr\r\n            [ttRow]=\"rowNode\"\r\n            (dblclick)=\"doubleClick($event, rowData)\"\r\n            [ngClass]=\"{ capitalize: tableCaptalized }\">\r\n            @for(col of columns; track $index)\r\n            {\r\n              <td\r\n                [style.position]=\"rowNode.level !== 0 ? 'sticky' : null\"\r\n                [style.left.px]=\"childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null\"\r\n                [style.borderRight]=\"rowNode.level === 0 ? 'none' : ''\"\r\n                [style.borderLeft]=\"rowNode.level === 0 && col.field != config.columns[0].field ? 'none' : ''\">\r\n                <div class=\"flex flex-row {{ align(col) }}\">\r\n                  @if($index == 0)\r\n                  {\r\n                    <div class=\"w-full-h-full flex align-items-center\">\r\n                      <p-treeTableToggler class=\"hiddenVisible\" [rowNode]=\"rowNode\"/>\r\n                      @if(config.enableSelect)\r\n                      {\r\n                        <p-treeTableCheckbox\r\n                          [disabled]=\"isDisabledCheckbox()(rowData, rowNode)\"\r\n                          (click)=\"activeItemLote(selectedItems)\"\r\n                          [value]=\"rowNode\"\r\n                          [ngStyle]=\"{ display: isSelectEnabled()(rowData, rowNode) ? 'block' : 'none', 'margin-left': config.visibleCheckboxFunction ? '-34px' : '0px' }\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  }\r\n                  <div class=\"flex flex-row align-items-center w-full\">\r\n                    @if (col.template && validateShowTemplate()(rowNode, col))\r\n                    {\r\n                      <span class=\"w-full\">\r\n                        @if(getCustomTemplate(col.template.name))\r\n                        {\r\n                          <ng-container\r\n                            [ngTemplateOutlet]=\"getCustomTemplate(col.template.name)\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: rowData }\">\r\n                          </ng-container>\r\n                        }\r\n                      </span>\r\n                    } @else\r\n                    {\r\n                      <div\r\n                        class=\"flex flex-row align-items-center {{ (col.boolean || col.centralize) && 'justify-content-center' }} gap-2 w-full\">\r\n                        @if(col.tagColor)\r\n                        {\r\n                          <div\r\n                            class=\"tag\"\r\n                            [pTooltip]=\" col.tooltipTag && col.tooltipTag(rowData, col, rowData[col.field])\"\r\n                            [style.background-color]=\"col.tagColor(rowData, col, rowData[col.field])\">\r\n                          </div>\r\n                        }\r\n                        @if(col.boolean)\r\n                        {\r\n                          <i\r\n                            class=\"pi {{rowData[col.field] ? 'pi-check text-green-300' : '' }}\"\r\n                            style=\"font-size: 1rem; font-weight: 700\">\r\n                          </i>\r\n                        } @else\r\n                        {\r\n                          <div class=\"flex flex-column\">\r\n                            <span class=\"m-0 text-xs\">{{ rowData[col.field] }}</span>\r\n                            @if(col.subtitle)\r\n                            {\r\n                              <p class=\"m-0 text-xs font-semibold\">\r\n                                {{ rowData[col.subtitle] }}\r\n                              </p>\r\n                            }\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </td>\r\n            }\r\n            @if((config.actions?.length ?? 0 > 0) || config.actionsPai)\r\n            {\r\n              <td style=\"border-left: none; text-align: center; width: 0\">\r\n                @if((config.actions?.length ?? 0 > 0) && validateActionPosition()(rowNode))\r\n                {\r\n                  <div>\r\n                    <span\r\n                      class=\"material-symbols-outlined cursor-pointer icon-more-horiz\"\r\n                      (click)=\"menu.toggle($event); activeItem(rowData)\">\r\n                      more_horiz\r\n                    </span>\r\n                    @for(action of config.actions; track $index)\r\n                    {\r\n                      {{ criarMenusModal()(rowData) }}\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                {\r\n                  <div class=\"flex justify-content-end\">\r\n                    @for (actionPai of config.actionsPai; track $index)\r\n                    {\r\n                      @if(getOrExecute(actionPai.visible, rowData) ?? true)\r\n                      {\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                          [disabled]=\"getOrExecute(actionPai.disabled, rowData) || false\"\r\n                          [pTooltip]=\"getOrExecute(actionPai.tooltip, rowData)\"\r\n                          [tooltipPosition]=\"'left'\"\r\n                        />\r\n                      }\r\n                    }\r\n                  </div>\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      }\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-xs\">\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:.1rem}::ng-deep .p-treetable .p-treetable-header{padding:0!important;margin-bottom:.5rem!important;border-radius:5px!important;background-color:transparent;border:none}: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:.75}::ng-deep .icon-more-horiz{font-weight:300!important;font-size:1.4rem!important;padding:.1rem!important;color:rgb(var(--kv-color-system),.75)!important;transition:all .4s}.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{padding:.15rem!important;background-color:rgba(var(--kv-color-system),.05);color:rgba(var(--kv-color-text),.6);font-size:.75rem!important;font-weight:600!important}::ng-deep .p-treetable .p-treetable-thead>tr>th span{padding:.25rem}::ng-deep .p-treetable .p-treetable-thead{min-height:.5rem!important;padding:.15rem!important}.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}:host{height:100%}::ng-deep .kv-treetable-container,::ng-deep p-treeTable{height:100%}::ng-deep p-treeTable .p-treetable{display:flex;flex-direction:column;height:100%}::ng-deep table{height:auto!important}::ng-deep .p-treetable .p-treetable-wrapper{border:1px solid rgba(var(--kv-color-system),.1);border-radius:.5rem;color:rgb(var(--kv-color-system))}::ng-deep p-treeTable .p-treetable .p-treetable-wrapper,::ng-deep p-treeTable{height:100%}::ng-deep .p-treetable .p-treetable-wrapper::-webkit-scrollbar{width:6px}::ng-deep .p-treetable .p-treetable-wrapper::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-treetable .p-treetable-wrapper::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-treetable .p-treetable-wrapper:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-treetable .p-treetable-wrapper::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-menuitem .p-menuitem-content .p-menuitem-link{padding:.5rem!important;font-size:.75rem!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disableRowNodeSticky: [{
                 type: Input
             }], config: [{
@@ -10850,6 +10850,7 @@ class KvTableViewerComponent {
         this.filterButton = input(true);
         this.idName = input(undefined);
         this.emptyTableImg = input('https://work-assets.keevo.com.br/img/Nenhum_registro_localizado.png');
+        this.isSelectedPrimaryItem = input(false);
         this.selectedItems = signal([]);
         this.selectedItem = signal(null);
         this.first = signal(0);
@@ -10928,6 +10929,13 @@ class KvTableViewerComponent {
             this.onSelectItems.emit(this.selectedItems());
             this.onSearch.emit(this.searchValue());
         });
+        effect(() => {
+            const dados = this.data();
+            const isSelectedPrimaryItem = this.isSelectedPrimaryItem();
+            if (dados && dados.length > 0 && isSelectedPrimaryItem) {
+                untracked(() => this.rowSelect(dados[0]));
+            }
+        });
     }
     toggleOverlayPanel(event) {
         this.op.toggle(event);
@@ -10976,7 +10984,7 @@ class KvTableViewerComponent {
         return formatter.format(valor);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvTableViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvTableViewerComponent, isStandalone: true, selector: "kv-table-viewer", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, actionsRow: { classPropertyName: "actionsRow", publicName: "actionsRow", isSignal: true, isRequired: false, transformFunction: null }, actionsHeader: { classPropertyName: "actionsHeader", publicName: "actionsHeader", isSignal: true, isRequired: false, transformFunction: null }, actionsLote: { classPropertyName: "actionsLote", publicName: "actionsLote", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, pageLinks: { classPropertyName: "pageLinks", publicName: "pageLinks", isSignal: true, isRequired: false, transformFunction: null }, currentPageReportTemplate: { classPropertyName: "currentPageReportTemplate", publicName: "currentPageReportTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectionPageOnly: { classPropertyName: "selectionPageOnly", publicName: "selectionPageOnly", isSignal: true, isRequired: false, transformFunction: null }, selectableTable: { classPropertyName: "selectableTable", publicName: "selectableTable", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showHeaderTemplate: { classPropertyName: "showHeaderTemplate", publicName: "showHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, tableViewerSize: { classPropertyName: "tableViewerSize", publicName: "tableViewerSize", isSignal: true, isRequired: false, transformFunction: null }, searchInput: { classPropertyName: "searchInput", publicName: "searchInput", isSignal: true, isRequired: false, transformFunction: null }, filterButton: { classPropertyName: "filterButton", publicName: "filterButton", isSignal: true, isRequired: false, transformFunction: null }, idName: { classPropertyName: "idName", publicName: "idName", isSignal: true, isRequired: false, transformFunction: null }, emptyTableImg: { classPropertyName: "emptyTableImg", publicName: "emptyTableImg", isSignal: true, isRequired: false, transformFunction: null }, _templates: { classPropertyName: "_templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onPageChange: "onPageChange", onClickRowItem: "onClickRowItem", onSelectItems: "onSelectItems", onSearch: "onSearch", onSort: "onSort" }, queries: [{ propertyName: "templates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "op", first: true, predicate: ["op"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"h-full flex flex-row p-2 kv-table-viewer overflow-hidden {{\r\n    isEmptyTable() ? 'empty-table' : ''\r\n  }}\"\r\n>\r\n  @if(!this.selectedItem() || !isMobile() && !selectableTable()) {\r\n  <div\r\n    class=\"h-full {{ handleTableSize() }} m-0 p-0 flex flex-column gap-2\"\r\n    [style.transition]=\"'all 0.3s ease-in-out'\"\r\n  >\r\n    @if(showHeaderTemplate()) {\r\n    <div>\r\n      <ng-content select=\"[tableHeaderTemplate]\"> </ng-content>\r\n    </div>\r\n    }\r\n\r\n    <div\r\n      class=\"flex flex-row align-items-center justify-content-between flex-initial\"\r\n    >\r\n      <div class=\"flex flex-row align-items-center gap-2\">\r\n        @if(searchInput()) {\r\n        <input\r\n          style=\"height: 1.875rem\"\r\n          placeholder=\"Pesquisar...\"\r\n          type=\"text\"\r\n          pInputText\r\n          [(ngModel)]=\"searchValue\"\r\n          class=\"text-xs\"\r\n        />\r\n\r\n        } @if(filterButton()) {\r\n        <kv-button\r\n          label=\"Filtrar\"\r\n          icon=\"filter_alt\"\r\n          severity=\"tertiary\"\r\n          (onClick)=\"toggleOverlayPanel($event)\"\r\n        ></kv-button>\r\n        }\r\n\r\n        <p-overlayPanel #op [dismissable]=\"false\">\r\n          <ng-content select=\"[filtro]\"> </ng-content>\r\n        </p-overlayPanel>\r\n      </div>\r\n      <div class=\"flex flex-row gap-2\">\r\n        @if(actionsHeader()) { @for(action of actionsHeader(); track $index) {\r\n        <kv-button\r\n          [icon]=\"action?.icon || ''\"\r\n          [label]=\"action?.label || ''\"\r\n          [severity]=\"action['severity'] || 'tertiary'\"\r\n          (onClick)=\"action?.command($event)\"\r\n          [popupIcon]=\"false\"\r\n          [items]=\"action.items || []\"\r\n          [popup]=\"isPopupButton()(action)\"\r\n        ></kv-button>\r\n        } } @if(selectedItem()) {\r\n        <kv-button\r\n          [pTooltip]=\"'Recolher'\"\r\n          icon=\"reorder\"\r\n          severity=\"tertiary\"\r\n          (onClick)=\"selectedItem.set(null)\"\r\n        ></kv-button>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"flex-1 h-full overflow-hidden\">\r\n      <p-table\r\n        [value]=\"data()\"\r\n        [lazy]=\"lazy()\"\r\n        [selectionPageOnly]=\"selectionPageOnly()\"\r\n        [columns]=\"columns()\"\r\n        [paginator]=\"paginator()\"\r\n        [rows]=\"rows()\"\r\n        [totalRecords]=\"totalRecords()\"\r\n        [loading]=\"loading()\"\r\n        [pageLinks]=\"pageLinks()\"\r\n        [first]=\"first()\"\r\n        [scrollable]=\"scrollable()\"\r\n        scrollHeight=\"flex\"\r\n        [showCurrentPageReport]=\"true\"\r\n        [currentPageReportTemplate]=\"currentPageReportTemplate()\"\r\n        (onPage)=\"handlePageChange($event)\"\r\n        (onSort)=\"handleSort($event)\"\r\n        [rowsPerPageOptions]=\"rowsPerPageOptions()\"\r\n        [(selection)]=\"selectedItems\"\r\n        styleClass=\"p-datatable-sm text-xs overflow-y-auto h-full flex flex-column h-full\"\r\n      >\r\n        @if(showHeader()) {\r\n        <ng-template pTemplate=\"header\" let-columns>\r\n          <tr>\r\n            @if(selectableTable()) {\r\n            <th style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\r\n            } @for (col of columns; track col.field) {\r\n            <th\r\n              [pSortableColumn]=\"col.field\"\r\n              [pSortableColumnDisabled]=\"!col?.sortable\"\r\n              [style]=\"{ width: col.width || 'auto' }\"\r\n            >\r\n              <div class=\"flex flex-row align-items-center gap-1\">\r\n                <span>{{ col.header }}</span>\r\n                @if (col.sortable) {\r\n                <p-sortIcon [field]=\"col.field\" class=\"pb-1\"></p-sortIcon>\r\n                }\r\n              </div>\r\n            </th>\r\n            }\r\n          </tr>\r\n        </ng-template>\r\n        }\r\n\r\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\">\r\n          <tr\r\n            class=\"cursor-pointer {{\r\n              verifyItemSelecionado()(rowData) && 'bg-gray-100'\r\n            }} hover:bg-gray-200\"\r\n          >\r\n            @if(selectableTable()) {\r\n            <td><p-tableCheckbox [value]=\"rowData\" /></td>\r\n            } @for (col of columns; track col.field) {\r\n            <td (click)=\"rowSelect(rowData)\" style=\"word-break: break-all;\">\r\n              @if(col?.template) {\r\n              <div class=\"flex flex-row gap-2 align-items-center\">\r\n                @if (getCustomTemplate()(col.template.name)) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"getCustomTemplate()(col.template.name)\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: rowData }\"\r\n                />\r\n                }\r\n              </div>\r\n              } @else if(col?.icon) {\r\n              <span class=\"material-symbols-outlined text-lg\">\r\n                {{ col.icon(rowData) }}\r\n              </span>\r\n              } @else if(col?.tag) {\r\n              <kv-tags [tags]=\"[col.tag(rowData)]\" />\r\n              } @else {\r\n              {{ transformData()(col.pipe, rowData[col.field]) }}\r\n              }\r\n            </td>\r\n            }\r\n          </tr>\r\n        </ng-template>\r\n\r\n        <ng-template pTemplate=\"emptymessage\">\r\n          <tr>\r\n            <td [attr.colspan]=\"returnColspan()\">\r\n              <div\r\n                class=\"w-full h-full flex align-items-center justify-content-center\"\r\n              >\r\n                <img [src]=\"emptyTableImg()\" class=\"h-10rem w-auto\" />\r\n              </div>\r\n            </td>\r\n          </tr>\r\n        </ng-template>\r\n      </p-table>\r\n    </div>\r\n  </div>\r\n\r\n  }\r\n\r\n  <div\r\n    class=\"shadow-2 p-0 m-0 col selected-item-field ml-2 flex flex-column\"\r\n    [@slideInOut]=\"isRowSelected() ? 'i.n' : 'out'\"\r\n    [style.overflow]=\"'hidden'\"\r\n  >\r\n    @if(hasSelectedItems()) {\r\n    <actions-lote-field\r\n      class=\"h-full\"\r\n      [selectedItems]=\"selectedItems()\"\r\n      [actionsLote]=\"actionsLote()\"\r\n    />\r\n    } @else if(showSelectedItem()) {\r\n    <div class=\"bg-gray-100 w-full h-auto p-2 relative\">\r\n      @if(hasActionsRow()) {\r\n      <actions-row-menu [actionsRow]=\"actionsRow()\" />\r\n      }\r\n\r\n      @if(isMobile()) {\r\n        <div class=\"h-2rem w-2rem\">\r\n          <kv-button\r\n            icon=\"arrow_back\"\r\n            severity=\"tertiary\"\r\n            [pTooltip]=\"'Voltar'\"\r\n            (onClick)=\"selectedItem.set(null)\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      <ng-content select=\"[selectedItemHeader]\"></ng-content>\r\n    </div>\r\n    <div class=\"p-2 overflow-y-auto h-full\">\r\n      <ng-content select=\"[selectedItem]\"></ng-content>\r\n    </div>\r\n    }\r\n\r\n    <!-- @else { Nenhum item selecionado } -->\r\n  </div>\r\n</div>\r\n", styles: ["::ng-deep .kv-table-viewer .p-datatable-wrapper{overflow-x:hidden}::ng-deep .kv-table-viewer .p-paginator .p-paginator-pages .p-paginator-page{font-size:.75rem;min-width:2rem;height:2rem}::ng-deep .kv-table-viewer .p-paginator .p-paginator-current{font-size:.75rem}::ng-deep .kv-table-viewer .p-inputwrapper .p-dropdown{margin:0;height:auto}::ng-deep .p-paginator-rpp-options .p-dropdown-panel .p-dropdown-items{padding:.25rem}::ng-deep .p-paginator-rpp-options .p-dropdown-item{border-radius:.25rem;height:1.5rem;display:flex;align-items:center;justify-content:center}::ng-deep .p-paginator-rpp-options .p-dropdown-item .p-dropdown-label{padding:.5rem}::ng-deep .p-paginator-rpp-options .p-dropdown-item .p-dropdown-trigger{width:1.5rem}::ng-deep .p-paginator-bottom .p-link{min-width:2rem;height:2rem}::ng-deep .p-paginator{padding:0rem}::ng-deep .p-dropdown-label{font-size:.75rem}::ng-deep .p-datatable-wrapper::-webkit-scrollbar{width:6px}::ng-deep .p-datatable-wrapper::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-datatable-wrapper:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-datatable-wrapper::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .empty-table .p-datatable-table{height:100%}::ng-deep .p-menu{padding:.25rem}::ng-deep .p-menu-list .p-menuitem .p-menuitem-content .p-menuitem-link{font-size:.75rem;padding:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5$3.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i14.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i14.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i14.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i14.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i14.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: KvInputsModule }, { kind: "ngmodule", type: KvButtonModule }, { kind: "component", type: KvButtonComponent, selector: "kv-button", inputs: ["fullWidth", "type", "loading", "severity", "size", "icon", "iconPosition", "label", "disabled", "items", "popup", "popupIcon"], outputs: ["iconChange", "onClick"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i11.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ActionsLoteFieldComponent, selector: "actions-lote-field", inputs: ["selectedItems", "actionsLote"] }, { kind: "ngmodule", type: KvTagsModule }, { kind: "component", type: KvTagsComponent, selector: "kv-tags", inputs: ["tags", "hover", "clickable"], outputs: ["onClickTag"] }, { kind: "ngmodule", type: TieredMenuModule }, { kind: "component", type: ActionsRowMenuComponent, selector: "actions-row-menu", inputs: ["actionsRow"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvTableViewerComponent, isStandalone: true, selector: "kv-table-viewer", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, actionsRow: { classPropertyName: "actionsRow", publicName: "actionsRow", isSignal: true, isRequired: false, transformFunction: null }, actionsHeader: { classPropertyName: "actionsHeader", publicName: "actionsHeader", isSignal: true, isRequired: false, transformFunction: null }, actionsLote: { classPropertyName: "actionsLote", publicName: "actionsLote", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, pageLinks: { classPropertyName: "pageLinks", publicName: "pageLinks", isSignal: true, isRequired: false, transformFunction: null }, currentPageReportTemplate: { classPropertyName: "currentPageReportTemplate", publicName: "currentPageReportTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectionPageOnly: { classPropertyName: "selectionPageOnly", publicName: "selectionPageOnly", isSignal: true, isRequired: false, transformFunction: null }, selectableTable: { classPropertyName: "selectableTable", publicName: "selectableTable", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showHeaderTemplate: { classPropertyName: "showHeaderTemplate", publicName: "showHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, tableViewerSize: { classPropertyName: "tableViewerSize", publicName: "tableViewerSize", isSignal: true, isRequired: false, transformFunction: null }, searchInput: { classPropertyName: "searchInput", publicName: "searchInput", isSignal: true, isRequired: false, transformFunction: null }, filterButton: { classPropertyName: "filterButton", publicName: "filterButton", isSignal: true, isRequired: false, transformFunction: null }, idName: { classPropertyName: "idName", publicName: "idName", isSignal: true, isRequired: false, transformFunction: null }, emptyTableImg: { classPropertyName: "emptyTableImg", publicName: "emptyTableImg", isSignal: true, isRequired: false, transformFunction: null }, isSelectedPrimaryItem: { classPropertyName: "isSelectedPrimaryItem", publicName: "isSelectedPrimaryItem", isSignal: true, isRequired: false, transformFunction: null }, _templates: { classPropertyName: "_templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onPageChange: "onPageChange", onClickRowItem: "onClickRowItem", onSelectItems: "onSelectItems", onSearch: "onSearch", onSort: "onSort" }, queries: [{ propertyName: "templates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "op", first: true, predicate: ["op"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"h-full flex flex-row p-2 kv-table-viewer overflow-hidden {{\r\n    isEmptyTable() ? 'empty-table' : ''\r\n  }}\"\r\n>\r\n  @if(!this.selectedItem() || !isMobile() && !selectableTable()) {\r\n  <div\r\n    class=\"h-full {{ handleTableSize() }} m-0 p-0 flex flex-column gap-2\"\r\n    [style.transition]=\"'all 0.3s ease-in-out'\"\r\n  >\r\n    @if(showHeaderTemplate()) {\r\n    <div>\r\n      <ng-content select=\"[tableHeaderTemplate]\"> </ng-content>\r\n    </div>\r\n    }\r\n\r\n    <div\r\n      class=\"flex flex-row align-items-center justify-content-between flex-initial\"\r\n    >\r\n      <div class=\"flex flex-row align-items-center gap-2\">\r\n        @if(searchInput()) {\r\n        <input\r\n          style=\"height: 1.875rem\"\r\n          placeholder=\"Pesquisar...\"\r\n          type=\"text\"\r\n          pInputText\r\n          [(ngModel)]=\"searchValue\"\r\n          class=\"text-xs\"\r\n        />\r\n\r\n        } @if(filterButton()) {\r\n        <kv-button\r\n          label=\"Filtrar\"\r\n          icon=\"filter_alt\"\r\n          severity=\"tertiary\"\r\n          (onClick)=\"toggleOverlayPanel($event)\"\r\n        ></kv-button>\r\n        }\r\n\r\n        <p-overlayPanel #op [dismissable]=\"false\">\r\n          <ng-content select=\"[filtro]\"> </ng-content>\r\n        </p-overlayPanel>\r\n      </div>\r\n      <div class=\"flex flex-row gap-2\">\r\n        @if(actionsHeader()) { @for(action of actionsHeader(); track $index) {\r\n        <kv-button\r\n          [icon]=\"action?.icon || ''\"\r\n          [label]=\"action?.label || ''\"\r\n          [severity]=\"action['severity'] || 'tertiary'\"\r\n          (onClick)=\"action?.command($event)\"\r\n          [popupIcon]=\"false\"\r\n          [items]=\"action.items || []\"\r\n          [popup]=\"isPopupButton()(action)\"\r\n        ></kv-button>\r\n        } } @if(selectedItem()) {\r\n        <kv-button\r\n          [pTooltip]=\"'Recolher'\"\r\n          icon=\"reorder\"\r\n          severity=\"tertiary\"\r\n          (onClick)=\"selectedItem.set(null)\"\r\n        ></kv-button>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"flex-1 h-full overflow-hidden\">\r\n      <p-table\r\n        [value]=\"data()\"\r\n        [lazy]=\"lazy()\"\r\n        [selectionPageOnly]=\"selectionPageOnly()\"\r\n        [columns]=\"columns()\"\r\n        [paginator]=\"paginator()\"\r\n        [rows]=\"rows()\"\r\n        [totalRecords]=\"totalRecords()\"\r\n        [loading]=\"loading()\"\r\n        [pageLinks]=\"pageLinks()\"\r\n        [first]=\"first()\"\r\n        [scrollable]=\"scrollable()\"\r\n        scrollHeight=\"flex\"\r\n        [showCurrentPageReport]=\"true\"\r\n        [currentPageReportTemplate]=\"currentPageReportTemplate()\"\r\n        (onPage)=\"handlePageChange($event)\"\r\n        (onSort)=\"handleSort($event)\"\r\n        [rowsPerPageOptions]=\"rowsPerPageOptions()\"\r\n        [(selection)]=\"selectedItems\"\r\n        styleClass=\"p-datatable-sm text-xs overflow-y-auto h-full flex flex-column h-full\"\r\n      >\r\n        @if(showHeader()) {\r\n        <ng-template pTemplate=\"header\" let-columns>\r\n          <tr>\r\n            @if(selectableTable()) {\r\n            <th style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\r\n            } @for (col of columns; track col.field) {\r\n            <th\r\n              [pSortableColumn]=\"col.field\"\r\n              [pSortableColumnDisabled]=\"!col?.sortable\"\r\n              [style]=\"{ width: col.width || 'auto' }\"\r\n            >\r\n              <div class=\"flex flex-row align-items-center gap-1\">\r\n                <span>{{ col.header }}</span>\r\n                @if (col.sortable) {\r\n                <p-sortIcon [field]=\"col.field\" class=\"pb-1\"></p-sortIcon>\r\n                }\r\n              </div>\r\n            </th>\r\n            }\r\n          </tr>\r\n        </ng-template>\r\n        }\r\n\r\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\">\r\n          <tr\r\n            class=\"cursor-pointer {{\r\n              verifyItemSelecionado()(rowData) && 'bg-gray-100'\r\n            }} hover:bg-gray-200\"\r\n          >\r\n            @if(selectableTable()) {\r\n            <td><p-tableCheckbox [value]=\"rowData\" /></td>\r\n            } @for (col of columns; track col.field) {\r\n            <td (click)=\"rowSelect(rowData)\" style=\"word-break: break-all;\">\r\n              @if(col?.template) {\r\n              <div class=\"flex flex-row gap-2 align-items-center\">\r\n                @if (getCustomTemplate()(col.template.name)) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"getCustomTemplate()(col.template.name)\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: rowData }\"\r\n                />\r\n                }\r\n              </div>\r\n              } @else if(col?.icon) {\r\n              <span class=\"material-symbols-outlined text-lg\">\r\n                {{ col.icon(rowData) }}\r\n              </span>\r\n              } @else if(col?.tag) {\r\n              <kv-tags [tags]=\"[col.tag(rowData)]\" />\r\n              } @else {\r\n              {{ transformData()(col.pipe, rowData[col.field]) }}\r\n              }\r\n            </td>\r\n            }\r\n          </tr>\r\n        </ng-template>\r\n\r\n        <ng-template pTemplate=\"emptymessage\">\r\n          <tr>\r\n            <td [attr.colspan]=\"returnColspan()\">\r\n              <div\r\n                class=\"w-full h-full flex align-items-center justify-content-center\"\r\n              >\r\n                <img [src]=\"emptyTableImg()\" class=\"h-10rem w-auto\" />\r\n              </div>\r\n            </td>\r\n          </tr>\r\n        </ng-template>\r\n      </p-table>\r\n    </div>\r\n  </div>\r\n\r\n  }\r\n\r\n  <div\r\n    class=\"shadow-2 p-0 m-0 col selected-item-field ml-2 flex flex-column\"\r\n    [@slideInOut]=\"isRowSelected() ? 'i.n' : 'out'\"\r\n    [style.overflow]=\"'hidden'\"\r\n  >\r\n    @if(hasSelectedItems()) {\r\n    <actions-lote-field\r\n      class=\"h-full\"\r\n      [selectedItems]=\"selectedItems()\"\r\n      [actionsLote]=\"actionsLote()\"\r\n    />\r\n    } @else if(showSelectedItem()) {\r\n    <div class=\"bg-gray-100 w-full h-auto p-2 relative\">\r\n      @if(hasActionsRow()) {\r\n      <actions-row-menu [actionsRow]=\"actionsRow()\" />\r\n      }\r\n\r\n      @if(isMobile()) {\r\n        <div class=\"h-2rem w-2rem\">\r\n          <kv-button\r\n            icon=\"arrow_back\"\r\n            severity=\"tertiary\"\r\n            [pTooltip]=\"'Voltar'\"\r\n            (onClick)=\"selectedItem.set(null)\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      <ng-content select=\"[selectedItemHeader]\"></ng-content>\r\n    </div>\r\n    <div class=\"p-2 overflow-y-auto h-full\">\r\n      <ng-content select=\"[selectedItem]\"></ng-content>\r\n    </div>\r\n    }\r\n\r\n    <!-- @else { Nenhum item selecionado } -->\r\n  </div>\r\n</div>\r\n", styles: ["::ng-deep .kv-table-viewer .p-datatable-wrapper{overflow-x:hidden}::ng-deep .kv-table-viewer .p-paginator .p-paginator-pages .p-paginator-page{font-size:.75rem;min-width:2rem;height:2rem}::ng-deep .kv-table-viewer .p-paginator .p-paginator-current{font-size:.75rem}::ng-deep .kv-table-viewer .p-inputwrapper .p-dropdown{margin:0;height:auto}::ng-deep .p-paginator-rpp-options .p-dropdown-panel .p-dropdown-items{padding:.25rem}::ng-deep .p-paginator-rpp-options .p-dropdown-item{border-radius:.25rem;height:1.5rem;display:flex;align-items:center;justify-content:center}::ng-deep .p-paginator-rpp-options .p-dropdown-item .p-dropdown-label{padding:.5rem}::ng-deep .p-paginator-rpp-options .p-dropdown-item .p-dropdown-trigger{width:1.5rem}::ng-deep .p-paginator-bottom .p-link{min-width:2rem;height:2rem}::ng-deep .p-paginator{padding:0rem}::ng-deep .p-dropdown-label{font-size:.75rem}::ng-deep .p-datatable-wrapper::-webkit-scrollbar{width:6px}::ng-deep .p-datatable-wrapper::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-datatable-wrapper:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-datatable-wrapper::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .empty-table .p-datatable-table{height:100%}::ng-deep .p-menu{padding:.25rem}::ng-deep .p-menu-list .p-menuitem .p-menuitem-content .p-menuitem-link{font-size:.75rem;padding:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5$3.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i14.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i14.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i14.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i14.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i14.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: KvInputsModule }, { kind: "ngmodule", type: KvButtonModule }, { kind: "component", type: KvButtonComponent, selector: "kv-button", inputs: ["fullWidth", "type", "loading", "severity", "size", "icon", "iconPosition", "label", "disabled", "items", "popup", "popupIcon"], outputs: ["iconChange", "onClick"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i11.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ActionsLoteFieldComponent, selector: "actions-lote-field", inputs: ["selectedItems", "actionsLote"] }, { kind: "ngmodule", type: KvTagsModule }, { kind: "component", type: KvTagsComponent, selector: "kv-tags", inputs: ["tags", "hover", "clickable"], outputs: ["onClickTag"] }, { kind: "ngmodule", type: TieredMenuModule }, { kind: "component", type: ActionsRowMenuComponent, selector: "actions-row-menu", inputs: ["actionsRow"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [
             trigger('slideInOut', [
                 state('in', style({
                     width: '*',
@@ -12213,12 +12221,21 @@ class KvStackedBarChartComponent {
         const total = this.getTotal();
         return (value / total) * 100;
     }
+    onMouseEnter(index, color) {
+        this.hoveredIndex = index;
+        if (color)
+            document.body.style.setProperty('--tooltip-bg-color', color);
+    }
+    onMouseLeave() {
+        this.hoveredIndex = null;
+        document.body.style.removeProperty('--tooltip-bg-color');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvStackedBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvStackedBarChartComponent, isStandalone: true, selector: "kv-stacked-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"barra-categorias-container\">\r\n  <div class=\"barra-categorias\">\r\n    @for (seg of data(); let i = $index; track i) {\r\n      <div\r\n        class=\"segmento\"\r\n        [ngStyle]=\"{\r\n          '--target-width': getPercent(seg.value) + '%',\r\n          '--delay': i * 150 + 'ms',\r\n          flex: !animation() ? seg.value : '',\r\n          backgroundColor: seg.barColor\r\n        }\"\r\n        [ngClass]=\"{ 'animado w0': animation() }\"\r\n        (mouseenter)=\"hoveredIndex = i\"\r\n        (mouseleave)=\"hoveredIndex = null\"\r\n        [class.destacado-segmento]=\"hoveredIndex === i\"\r\n        pTooltip=\"{{ seg.value }}\"\r\n        tooltipPosition=\"top\"\r\n        style=\"cursor: pointer\"\r\n      ></div>\r\n    }\r\n  </div>\r\n</div>", styles: [".barra-categorias-container{width:100%}.barra-categorias{display:flex;height:16px;border-radius:4px;overflow:hidden;margin-bottom:16px;gap:4px}.segmento{height:100%;border-radius:4px}.segmento.animado{animation:crescerSegmento .5s ease-out forwards;animation-delay:var(--delay)}.w0{width:0}@keyframes crescerSegmento{0%{width:0}to{width:var(--target-width)}}\n"], dependencies: [{ kind: "ngmodule", type: PrimeNgModule }, { kind: "directive", type: i5$2.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvStackedBarChartComponent, isStandalone: true, selector: "kv-stacked-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"barra-categorias-container\">\r\n  <div class=\"barra-categorias\">\r\n    @for (seg of data(); let i = $index; track i) {\r\n      <div\r\n        class=\"segmento\"\r\n        [ngStyle]=\"{\r\n          '--target-width': getPercent(seg.value) + '%',\r\n          '--delay': i * 150 + 'ms',\r\n          flex: !animation() ? seg.value : '',\r\n          backgroundColor: seg.barColor\r\n        }\"\r\n        [ngClass]=\"{ 'animado w0': animation() }\"\r\n        (mouseenter)=\"onMouseEnter(i, seg.tooltipColor)\"\r\n        (mouseleave)=\"onMouseLeave()\"\r\n        [class.destacado-segmento]=\"hoveredIndex === i\"\r\n        pTooltip=\"{{ seg.tooltipMessage }}\"\r\n        tooltipPosition=\"top\"\r\n        [tooltipStyleClass]=\"'tooltip-' + i\"\r\n        style=\"cursor: pointer;\"\r\n      ></div>\r\n    }\r\n  </div>\r\n</div>", styles: [".barra-categorias-container{width:100%}.barra-categorias{display:flex;height:16px;border-radius:4px;overflow:hidden;margin-bottom:16px;gap:4px}.segmento{height:100%;border-radius:4px}.segmento.animado{animation:crescerSegmento .5s ease-out forwards;animation-delay:var(--delay)}.w0{width:0}@keyframes crescerSegmento{0%{width:0}to{width:var(--target-width)}}::ng-deep .p-tooltip .p-tooltip-text{background:var(--tooltip-bg-color)!important;border:1px solid rgb(183,185,190)!important;border-radius:4px!important;box-shadow:#0003 1px 2px 10px;color:#6d6e73!important;font-weight:400!important}::ng-deep .p-tooltip-arrow{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: PrimeNgModule }, { kind: "directive", type: i5$2.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvStackedBarChartComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'kv-stacked-bar-chart', imports: [PrimeNgModule], template: "<div class=\"barra-categorias-container\">\r\n  <div class=\"barra-categorias\">\r\n    @for (seg of data(); let i = $index; track i) {\r\n      <div\r\n        class=\"segmento\"\r\n        [ngStyle]=\"{\r\n          '--target-width': getPercent(seg.value) + '%',\r\n          '--delay': i * 150 + 'ms',\r\n          flex: !animation() ? seg.value : '',\r\n          backgroundColor: seg.barColor\r\n        }\"\r\n        [ngClass]=\"{ 'animado w0': animation() }\"\r\n        (mouseenter)=\"hoveredIndex = i\"\r\n        (mouseleave)=\"hoveredIndex = null\"\r\n        [class.destacado-segmento]=\"hoveredIndex === i\"\r\n        pTooltip=\"{{ seg.value }}\"\r\n        tooltipPosition=\"top\"\r\n        style=\"cursor: pointer\"\r\n      ></div>\r\n    }\r\n  </div>\r\n</div>", styles: [".barra-categorias-container{width:100%}.barra-categorias{display:flex;height:16px;border-radius:4px;overflow:hidden;margin-bottom:16px;gap:4px}.segmento{height:100%;border-radius:4px}.segmento.animado{animation:crescerSegmento .5s ease-out forwards;animation-delay:var(--delay)}.w0{width:0}@keyframes crescerSegmento{0%{width:0}to{width:var(--target-width)}}\n"] }]
+            args: [{ standalone: true, selector: 'kv-stacked-bar-chart', imports: [PrimeNgModule], template: "<div class=\"barra-categorias-container\">\r\n  <div class=\"barra-categorias\">\r\n    @for (seg of data(); let i = $index; track i) {\r\n      <div\r\n        class=\"segmento\"\r\n        [ngStyle]=\"{\r\n          '--target-width': getPercent(seg.value) + '%',\r\n          '--delay': i * 150 + 'ms',\r\n          flex: !animation() ? seg.value : '',\r\n          backgroundColor: seg.barColor\r\n        }\"\r\n        [ngClass]=\"{ 'animado w0': animation() }\"\r\n        (mouseenter)=\"onMouseEnter(i, seg.tooltipColor)\"\r\n        (mouseleave)=\"onMouseLeave()\"\r\n        [class.destacado-segmento]=\"hoveredIndex === i\"\r\n        pTooltip=\"{{ seg.tooltipMessage }}\"\r\n        tooltipPosition=\"top\"\r\n        [tooltipStyleClass]=\"'tooltip-' + i\"\r\n        style=\"cursor: pointer;\"\r\n      ></div>\r\n    }\r\n  </div>\r\n</div>", styles: [".barra-categorias-container{width:100%}.barra-categorias{display:flex;height:16px;border-radius:4px;overflow:hidden;margin-bottom:16px;gap:4px}.segmento{height:100%;border-radius:4px}.segmento.animado{animation:crescerSegmento .5s ease-out forwards;animation-delay:var(--delay)}.w0{width:0}@keyframes crescerSegmento{0%{width:0}to{width:var(--target-width)}}::ng-deep .p-tooltip .p-tooltip-text{background:var(--tooltip-bg-color)!important;border:1px solid rgb(183,185,190)!important;border-radius:4px!important;box-shadow:#0003 1px 2px 10px;color:#6d6e73!important;font-weight:400!important}::ng-deep .p-tooltip-arrow{display:none!important}\n"] }]
         }] });
 /*