ngx-vector-components 6.2.0 → 6.2.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [6.2.1] (13/07/2026)
+
+### Fix
+
+- Fixed the actions menu of `data-table.component.ts` in ngx-vector-components closing itself right after being opened on the lower rows of the grid.
+- Fixed the row toggler of `data-table.component.html` in ngx-vector-components being triggered on non-expandable grids.
+
 ## [6.2.0] (09/07/2026)
 
 ### Feat

package/fesm2022/ngx-vector-components.mjs

@@ -3936,6 +3936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }] } });
 
 class DataTableComponent {
+    static { this.MENU_SCROLL_GRACE_MS = 250; }
     set data(_data) {
         this._data = _data;
         this.selectedItems = this._data?.filter((item) => item.selected) || [];
@@ -4256,6 +4257,26 @@ class DataTableComponent {
         }
         this.selectedItems = selection;
     }
+    onActionsMenuShow(menu) {
+        const noopScrollHandler = {
+            element: null,
+            listener: null,
+            scrollableParents: null,
+            bindScrollListener: () => { },
+            unbindScrollListener: () => { },
+            destroy: () => { },
+        };
+        menu.scrollHandler = noopScrollHandler;
+        setTimeout(() => {
+            if (menu.scrollHandler !== noopScrollHandler) {
+                return;
+            }
+            menu.scrollHandler = null;
+            if (menu.visible) {
+                menu.bindScrollListener();
+            }
+        }, DataTableComponent.MENU_SCROLL_GRACE_MS);
+    }
     changeShowBalance(itemAccount) {
         if (itemAccount) {
             itemAccount.showBalance = !itemAccount.showBalance;
@@ -4278,11 +4299,11 @@ class DataTableComponent {
         return active ? 'success' : 'error';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: DataTableComponent, isStandalone: false, selector: "vector-data-table", inputs: { columns: "columns", data: "data", exportExcel: "exportExcel", exportPDF: "exportPDF", customFunction: "customFunction", totalRecords: "totalRecords", disabledHeadercheckbox: "disabledHeadercheckbox", filters: "filters", addItemLabel: "addItemLabel", pagination: "pagination", virtualPagination: "virtualPagination", tabs: "tabs", customButtons: "customButtons", addItemButtonPlusSign: "addItemButtonPlusSign", hasActions: "hasActions", hasExpandableIcon: "hasExpandableIcon", addNameColumnExpand: "addNameColumnExpand", expandable: "expandable", expansionTemplate: "expansionTemplate", selectionMode: "selectionMode", selectionType: "selectionType", height: "height", showLimitBalance: "showLimitBalance", showDataBalance: "showDataBalance", dataAccountBalance: "dataAccountBalance", firstLazyLoad: "firstLazyLoad", shouldLazyLoadWithoutFilter: "shouldLazyLoadWithoutFilter", reorderableColumns: "reorderableColumns", disableInitialSearch: "disableInitialSearch" }, outputs: { onLazyLoad: "onLazyLoad", onFilter: "onFilter", onAdd: "onAdd", onExportExcel: "onExportExcel", onExportPDF: "onExportPDF", onSelectedRows: "onSelectedRows", onFilterChanged: "onFilterChanged", onTabSelected: "onTabSelected", onExpandRow: "onExpandRow", onCellEdit: "onCellEdit" }, viewQueries: [{ propertyName: "filtersComponent", first: true, predicate: FiltersComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"grid\">\n  <div class=\"col-12\">\n    <vector-filters\n      [fields]=\"filters\"\n      (onSearch)=\"lazyLoaded({ filter: true, data: $event })\"\n      (formBuilded)=\"subscribeToFilterChanges()\"\n    ></vector-filters>\n  </div>\n  <div\n    class=\"table-header-actions field\"\n    *ngIf=\"addItemLabel || exportExcel || exportPDF || customFunction || customButtons\"\n  >\n    <button *ngIf=\"exportExcel\" (click)=\"onExportExcel.emit()\" class=\"export-button export-excel\">\n      <i class=\"fas fa-file-excel\"></i><span>Excel</span>\n    </button>\n    <button *ngIf=\"exportPDF\" (click)=\"onExportPDF.emit()\" class=\"export-button export-pdf\">\n      <i class=\"fas fa-file-pdf\"></i><span>PDF</span>\n    </button>\n    <button\n      *ngFor=\"let button of customFunction\"\n      (click)=\"button.clickFunction()\"\n      class=\"export-button custom-function\"\n    >\n      <i *ngIf=\"button?.icon\" class=\"{{ button?.icon }}\"></i><span>{{ button?.label }}</span>\n    </button>\n\n    <vector-button\n      *ngFor=\"let button of customButtons\"\n      class=\"add-item-button\"\n      [round]=\"true\"\n      [label]=\"button.label\"\n      (click)=\"button.clickFunction()\"\n      [rightIcon]=\"addItemButtonPlusSign ? 'pi pi-plus' : ''\"\n      [disabled]=\"button.disabled === true\"\n    ></vector-button>\n    <vector-button\n      *ngIf=\"addItemLabel\"\n      class=\"add-item-button\"\n      [label]=\"addItemLabel\"\n      (click)=\"onAdd.emit()\"\n      [rightIcon]=\"addItemButtonPlusSign ? 'pi pi-plus' : ''\"\n      [round]=\"true\"\n    ></vector-button>\n  </div>\n  @if (showLimitBalance) {\n    <div class=\"col-12 grid ml-0\">\n      @for (itemAccount of dataAccountBalance; track $index) {\n        @if (itemAccount.visible) {\n          <div class=\"card balance-container\">\n            <span class=\"card-header\">{{ itemAccount.name }}</span>\n            <div class=\"card-content value-container\">\n              <span>R$ </span>\n              <span *ngIf=\"itemAccount.showBalance\" class=\"balance\">{{ balance(itemAccount) }}</span>\n              <div class=\"hidden-balance\" *ngIf=\"!itemAccount.showBalance\"></div>\n              <div class=\"icon-container\">\n                <i\n                  class=\"fas\"\n                  [ngClass]=\"{ 'fa-eye': !itemAccount.showBalance, 'fa-eye-slash': itemAccount.showBalance }\"\n                  (click)=\"changeShowBalance(itemAccount)\"\n                ></i>\n              </div>\n            </div>\n          </div>\n        }\n      }\n    </div>\n  }\n  @if (showDataBalance) {\n    <div class=\"col-12 grid ml-0\">\n      @for (itemAccount of dataAccountBalance; track $index) {\n        <div class=\"card balance-container\">\n          <span class=\"card-header\">{{ itemAccount.name }}</span>\n          <div class=\"card-content value-container\">\n            <span class=\"balance\">{{ itemAccount.valueBalance }}</span>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"col-12\">\n    <vector-panel class=\"data-table-panel\">\n      <p-tabView (onChange)=\"onTabChange($event)\" *ngIf=\"tabs?.length\">\n        <p-tabPanel *ngFor=\"let tab of tabs\">\n          <ng-template pTemplate=\"header\">\n            <em *ngIf=\"tab.icon\" [class]=\"tab.icon\">&nbsp;</em>\n            <span>{{ tab.name }}</span>\n          </ng-template>\n        </p-tabPanel>\n      </p-tabView>\n      <p-table\n        currentPageReportTemplate=\"Mostrando {first} at\u00E9 {last} de {totalRecords} registros\"\n        sortMode=\"single\"\n        [rows]=\"10\"\n        [lazy]=\"pagination && !virtualPagination\"\n        [value]=\"data\"\n        [paginator]=\"pagination\"\n        [totalRecords]=\"totalRecords\"\n        [showCurrentPageReport]=\"true\"\n        [rowsPerPageOptions]=\"[10, 25, 50, 100]\"\n        [responsive]=\"true\"\n        [resizableColumns]=\"true\"\n        [scrollable]=\"true\"\n        scrollDirection=\"vertical\"\n        responsiveLayout=\"scroll\"\n        dataKey=\"id\"\n        [scrollHeight]=\"height\"\n        [selectionMode]=\"selectionType === 'checkbox' || selectionType === 'radiobutton' ? null : selectionMode\"\n        [(selection)]=\"selectedItems\"\n        (onRowSelect)=\"changeSelectedItems($event)\"\n        (onHeaderCheckboxToggle)=\"changeSelectedItems($event)\"\n        (onRowUnselect)=\"changeSelectedItems($event)\"\n        (onLazyLoad)=\"lazyLoaded({ filter: false, data: $event })\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [reorderableColumns]=\"reorderableColumns\"\n        editMode=\"cell\"\n      >\n        <ng-template pTemplate=\"header\">\n          <tr class=\"header\">\n            <th *ngIf=\"reorderableColumns\" style=\"width: 5rem\"></th>\n\n            <th *ngIf=\"selectionType === 'checkbox'\">\n              <p-tableHeaderCheckbox [disabled]=\"disabledHeadercheckbox\"></p-tableHeaderCheckbox>\n            </th>\n            <th class=\"px-1 w-max min-w-max white-space-nowrap text-center vertical-align-middle\" *ngIf=\"hasExpandableIcon\">\n              {{ addNameColumnExpand }}\n            </th>\n            <th *ngIf=\"hasActions\">{{ 'app.label.actions' | translate }}</th>\n            <th *ngIf=\"selectionType === 'radiobutton'\">\n              <div class=\"flex align-items-center\">\n                <span></span>\n              </div>\n            </th>\n            @for (col of columns; track $index) {\n              @if (!col.hidden) {\n                <th\n                  [ngStyle]=\"getColStyle(col)\"\n                  [pSortableColumn]=\"col.notSortable ? '' : col.field\"\n                  pReorderableColumn\n                >\n                  <div class=\"flex align-items-center\">\n                    <span>{{ col.header }}</span> <p-sortIcon *ngIf=\"!col.notSortable\" [field]=\"col.field\"></p-sortIcon>\n                  </div>\n                </th>\n              }\n            }\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-rowData let-item let-expanded=\"expanded\" let-index=\"rowIndex\">\n          <tr\n            class=\"row\"\n            [pSelectableRow]=\"rowData\"\n            [ngClass]=\"{ expandable: expandable }\"\n            [pRowToggler]=\"expandable ? item : undefined\"\n            (click)=\"onRowClick(item)\"\n            [pReorderableRow]=\"index\"\n          >\n            <ng-container *ngIf=\"reorderableColumns\">\n              <td style=\"max-width: 3rem; padding-left: 10px\" class=\"justify-content-center align-items-center\">\n                <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"selectionType === 'checkbox'\">\n              <td\n                style=\"max-width: 3rem; padding-left: 10px\"\n                class=\"justify-content-center align-items-center\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <p-tableCheckbox [value]=\"item\" [disabled]=\"item.disabledCheckBox\"></p-tableCheckbox>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"selectionType === 'radiobutton'\">\n              <td\n                style=\"max-width: 3rem; padding-left: 10px\"\n                class=\"justify-content-center align-items-center\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n              </td>\n            </ng-container>\n            <td *ngIf=\"hasExpandableIcon\" class=\"px-1 w-auto text-center vertical-align-middle\">\n              <p-menu #menu [model]=\"item.actions\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n              <i\n                [ngClass]=\"\n                  expanded ? 'actions-menu-button pi pi-chevron-down' : 'actions-menu-button pi pi-chevron-right'\n                \"\n              ></i>\n            </td>\n            <td *ngIf=\"hasActions\">\n              <p-menu\n                #menu\n                [model]=\"item.actions\"\n                [popup]=\"true\"\n                appendTo=\"body\"\n                (onShow)=\"item._menuOpen = true\"\n                (onHide)=\"item._menuOpen = false\"\n              ></p-menu>\n              <i\n                class=\"actions-menu-button fas fa-cog\"\n                [class.active]=\"item._menuOpen\"\n                (click)=\"menu.toggle($event)\"\n              ></i>\n            </td>\n            @for (col of columns; track $index) {\n              @if (!col.hidden) {\n                <ng-container>\n                  <td\n                    *ngIf=\"isEditableCell(col)\"\n                    class=\"cell\"\n                    [pEditableColumn]=\"item\"\n                    [pEditableColumnField]=\"col.field\"\n                    [ngStyle]=\"getColStyle(col)\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-inputNumber\n                          *ngIf=\"!col.cellEdit?.editType || col.cellEdit?.editType === 'number'\"\n                          [(ngModel)]=\"item[col.field]\"\n                          [suffix]=\"col.cellEdit?.editSuffix || ''\"\n                          mode=\"decimal\"\n                          [maxFractionDigits]=\"col.cellEdit?.editMaxFractionDigits ?? 2\"\n                          [min]=\"col.cellEdit?.editMin ?? 0\"\n                          [max]=\"col.cellEdit?.editMax\"\n                          (onBlur)=\"onCellEditComplete(item, col, item[col.field])\"\n                        ></p-inputNumber>\n                        <input\n                          *ngIf=\"col.cellEdit?.editType === 'text'\"\n                          pInputText\n                          [(ngModel)]=\"item[col.field]\"\n                          (blur)=\"onCellEditComplete(item, col, item[col.field])\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        <span>{{ item[col.field] }}{{ col.cellEdit?.editSuffix || '' }}</span>\n                        <i class=\"pi pi-pencil ml-2 text-primary\"></i>\n                      </ng-template>\n                    </p-cellEditor>\n                  </td>\n                  <td\n                    *ngIf=\"isHtmlCell(col) && !col.cellEdit\"\n                    class=\"cell\"\n                    [innerHTML]=\"getCellContent(item, col)\"\n                    (click)=\"col && col.clickFunction && col.clickFunction(item)\"\n                    [ngStyle]=\"getColStyle(col)\"\n                  ></td>\n                  <td\n                    *ngIf=\"(!isHtmlCell(col) && !!col.getStatus) || isScoreCell(col)\"\n                    class=\"cell\"\n                    (click)=\"col && col.clickFunction && col.clickFunction(item)\"\n                    [ngStyle]=\"getColStyle(col)\"\n                  >\n                    <vector-badge\n                      *ngIf=\"isBadgeCell(col)\"\n                      [label]=\"getCellText(item, col)\"\n                      [type]=\"col.getStatus && col.getStatus(item[col.field])\"\n                      [tooltip]=\"getTooltipText(item, col)\"\n                    ></vector-badge>\n                    <vector-score *ngIf=\"isScoreCell(col)\" [score]=\"item[col.field]\"></vector-score>\n                  </td>\n                </ng-container>\n              }\n            }\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"emptymessage\">\n          <tr class=\"row\">\n            <td class=\"no-results\" [attr.colspan]=\"columns.length + 1\">Nenhum resultado encontrado</td>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"paginatorright\"> </ng-template>\n        <ng-template let-item pTemplate=\"paginatordropdownitem\"> {{ item.value }} </ng-template>\n        <ng-template pTemplate=\"expandedrow\" let-item>\n          <tr>\n            <td [attr.colspan]=\"columns.length + (hasActions ? 1 : 0)\">\n              <ng-container *ngTemplateOutlet=\"expansionTemplate; context: { item }\"> </ng-container>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n    </vector-panel>\n  </div>\n</div>\n", styles: [".no-results{padding:15px;background-color:#fff;width:100%}.centered{display:flex;justify-content:center}.table-header-actions{display:flex;justify-content:flex-end;align-items:flex-end;width:100%;padding-right:7px;margin-bottom:15px!important}@media(min-width:768px){.table-header-actions{margin-top:-3px}}.table-header-actions .export-button{padding:7px 10px;color:#fff;display:flex;align-items:center;border:none;border-radius:5px;margin:5px;font-size:.75rem;cursor:pointer}.table-header-actions .export-button.export-excel{background-color:var(--success-color)}.table-header-actions .export-button.export-excel:hover{background-color:var(--success-color-dark)}.table-header-actions .export-button.export-pdf{background-color:var(--error-color)}.table-header-actions .export-button.export-pdf:hover{background-color:var(--error-color-dark)}.table-header-actions .export-button.custom-function{background-color:var(--theme-primary)}.table-header-actions .export-button.custom-function:hover{background-color:var(--theme-medium)}.table-header-actions .export-button i{color:#fff}.table-header-actions .export-button span{margin-left:5px}.table-header-actions .add-item-button{margin-left:10px}.actions-menu-button{font-size:23px;cursor:pointer;color:var(--theme-medium);padding:6px;border-radius:50%;transition:all .15s ease}.actions-menu-button:hover{background-color:#0000000d}.actions-menu-button:active{transform:scale(.92);background-color:#0000001a;color:var(--theme-dark)}.expandable{cursor:pointer}.balance-container{display:flex;flex-direction:column;min-width:13%;padding:0;margin-bottom:30px;top:30px;right:40px;border-radius:8px;margin-right:15px}.balance-container .header-right{flex:1;flex-direction:row;justify-content:flex-end;display:flex}@media screen and (max-width:1450px){.balance-container{width:40%}}@media screen and (max-width:960px){.balance-container{position:relative;width:80%;top:auto;right:auto}}.balance-container .card-header{color:var(--theme-medium);border-radius:9px 9px 0 0;padding:10px 10px 2px;font-weight:500;font-size:13px;line-height:17px;letter-spacing:.25px}.balance-container .value-container{display:flex;flex-direction:row;align-items:center;padding:0 10px 5px}.balance-container .value-container span{font-size:2em;font-weight:700;color:var(--theme-secondary)}@media screen and (max-width:640px){.balance-container .value-container span{font-size:1.6em}}.balance-container .value-container .balance{margin-left:8px;width:70%}.balance-container .value-container .hidden-balance{background-color:var(--gray-lighter);padding:15px;margin-left:8px;width:70%;height:100%}.balance-container .value-container .icon-container{display:flex;flex:1;justify-content:center;align-items:center}.balance-container .value-container .icon-container i{cursor:pointer;font-size:2em;padding-top:2px;color:var(--theme-medium)}:host ::ng-deep .p-datatable-thead>tr>th,:host ::ng-deep .p-datatable-tbody>tr>td{text-align:center!important;vertical-align:middle!important}:host ::ng-deep .p-datatable-thead>tr>th>.flex,:host ::ng-deep .p-datatable-tbody>tr>td>.flex{justify-content:center!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$5.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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$2.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: PanelComponent, selector: "vector-panel" }, { kind: "component", type: i7.TabView, selector: "p-tabView, p-tabview", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7.TabPanel, selector: "p-tabPanel, p-tabpanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: BadgeComponent, selector: "vector-badge", inputs: ["type", "label", "customColor", "customBackgroundColor", "tooltip"] }, { kind: "component", type: ScoreComponent, selector: "vector-score", inputs: ["score"] }, { kind: "component", type: i10.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i11.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", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], 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: i11.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i11.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i11.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i11.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "directive", type: i11.EditableColumn, selector: "[pEditableColumn]", inputs: ["pEditableColumn", "pEditableColumnField", "pEditableColumnRowIndex", "pEditableColumnDisabled", "pFocusCellSelector"] }, { kind: "component", type: i11.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i11.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i11.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i11.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i11.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i11.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "round", "style", "loading"], outputs: ["onClick"] }, { kind: "component", type: FiltersComponent, selector: "vector-filters", inputs: ["fields"], outputs: ["onSearch", "formBuilded"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: DataTableComponent, isStandalone: false, selector: "vector-data-table", inputs: { columns: "columns", data: "data", exportExcel: "exportExcel", exportPDF: "exportPDF", customFunction: "customFunction", totalRecords: "totalRecords", disabledHeadercheckbox: "disabledHeadercheckbox", filters: "filters", addItemLabel: "addItemLabel", pagination: "pagination", virtualPagination: "virtualPagination", tabs: "tabs", customButtons: "customButtons", addItemButtonPlusSign: "addItemButtonPlusSign", hasActions: "hasActions", hasExpandableIcon: "hasExpandableIcon", addNameColumnExpand: "addNameColumnExpand", expandable: "expandable", expansionTemplate: "expansionTemplate", selectionMode: "selectionMode", selectionType: "selectionType", height: "height", showLimitBalance: "showLimitBalance", showDataBalance: "showDataBalance", dataAccountBalance: "dataAccountBalance", firstLazyLoad: "firstLazyLoad", shouldLazyLoadWithoutFilter: "shouldLazyLoadWithoutFilter", reorderableColumns: "reorderableColumns", disableInitialSearch: "disableInitialSearch" }, outputs: { onLazyLoad: "onLazyLoad", onFilter: "onFilter", onAdd: "onAdd", onExportExcel: "onExportExcel", onExportPDF: "onExportPDF", onSelectedRows: "onSelectedRows", onFilterChanged: "onFilterChanged", onTabSelected: "onTabSelected", onExpandRow: "onExpandRow", onCellEdit: "onCellEdit" }, viewQueries: [{ propertyName: "filtersComponent", first: true, predicate: FiltersComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"grid\">\n  <div class=\"col-12\">\n    <vector-filters\n      [fields]=\"filters\"\n      (onSearch)=\"lazyLoaded({ filter: true, data: $event })\"\n      (formBuilded)=\"subscribeToFilterChanges()\"\n    ></vector-filters>\n  </div>\n  <div\n    class=\"table-header-actions field\"\n    *ngIf=\"addItemLabel || exportExcel || exportPDF || customFunction || customButtons\"\n  >\n    <button *ngIf=\"exportExcel\" (click)=\"onExportExcel.emit()\" class=\"export-button export-excel\">\n      <i class=\"fas fa-file-excel\"></i><span>Excel</span>\n    </button>\n    <button *ngIf=\"exportPDF\" (click)=\"onExportPDF.emit()\" class=\"export-button export-pdf\">\n      <i class=\"fas fa-file-pdf\"></i><span>PDF</span>\n    </button>\n    <button\n      *ngFor=\"let button of customFunction\"\n      (click)=\"button.clickFunction()\"\n      class=\"export-button custom-function\"\n    >\n      <i *ngIf=\"button?.icon\" class=\"{{ button?.icon }}\"></i><span>{{ button?.label }}</span>\n    </button>\n\n    <vector-button\n      *ngFor=\"let button of customButtons\"\n      class=\"add-item-button\"\n      [round]=\"true\"\n      [label]=\"button.label\"\n      (click)=\"button.clickFunction()\"\n      [rightIcon]=\"addItemButtonPlusSign ? 'pi pi-plus' : ''\"\n      [disabled]=\"button.disabled === true\"\n    ></vector-button>\n    <vector-button\n      *ngIf=\"addItemLabel\"\n      class=\"add-item-button\"\n      [label]=\"addItemLabel\"\n      (click)=\"onAdd.emit()\"\n      [rightIcon]=\"addItemButtonPlusSign ? 'pi pi-plus' : ''\"\n      [round]=\"true\"\n    ></vector-button>\n  </div>\n  @if (showLimitBalance) {\n    <div class=\"col-12 grid ml-0\">\n      @for (itemAccount of dataAccountBalance; track $index) {\n        @if (itemAccount.visible) {\n          <div class=\"card balance-container\">\n            <span class=\"card-header\">{{ itemAccount.name }}</span>\n            <div class=\"card-content value-container\">\n              <span>R$ </span>\n              <span *ngIf=\"itemAccount.showBalance\" class=\"balance\">{{ balance(itemAccount) }}</span>\n              <div class=\"hidden-balance\" *ngIf=\"!itemAccount.showBalance\"></div>\n              <div class=\"icon-container\">\n                <i\n                  class=\"fas\"\n                  [ngClass]=\"{ 'fa-eye': !itemAccount.showBalance, 'fa-eye-slash': itemAccount.showBalance }\"\n                  (click)=\"changeShowBalance(itemAccount)\"\n                ></i>\n              </div>\n            </div>\n          </div>\n        }\n      }\n    </div>\n  }\n  @if (showDataBalance) {\n    <div class=\"col-12 grid ml-0\">\n      @for (itemAccount of dataAccountBalance; track $index) {\n        <div class=\"card balance-container\">\n          <span class=\"card-header\">{{ itemAccount.name }}</span>\n          <div class=\"card-content value-container\">\n            <span class=\"balance\">{{ itemAccount.valueBalance }}</span>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"col-12\">\n    <vector-panel class=\"data-table-panel\">\n      <p-tabView (onChange)=\"onTabChange($event)\" *ngIf=\"tabs?.length\">\n        <p-tabPanel *ngFor=\"let tab of tabs\">\n          <ng-template pTemplate=\"header\">\n            <em *ngIf=\"tab.icon\" [class]=\"tab.icon\">&nbsp;</em>\n            <span>{{ tab.name }}</span>\n          </ng-template>\n        </p-tabPanel>\n      </p-tabView>\n      <p-table\n        currentPageReportTemplate=\"Mostrando {first} at\u00E9 {last} de {totalRecords} registros\"\n        sortMode=\"single\"\n        [rows]=\"10\"\n        [lazy]=\"pagination && !virtualPagination\"\n        [value]=\"data\"\n        [paginator]=\"pagination\"\n        [totalRecords]=\"totalRecords\"\n        [showCurrentPageReport]=\"true\"\n        [rowsPerPageOptions]=\"[10, 25, 50, 100]\"\n        [responsive]=\"true\"\n        [resizableColumns]=\"true\"\n        [scrollable]=\"true\"\n        scrollDirection=\"vertical\"\n        responsiveLayout=\"scroll\"\n        dataKey=\"id\"\n        [scrollHeight]=\"height\"\n        [selectionMode]=\"selectionType === 'checkbox' || selectionType === 'radiobutton' ? null : selectionMode\"\n        [(selection)]=\"selectedItems\"\n        (onRowSelect)=\"changeSelectedItems($event)\"\n        (onHeaderCheckboxToggle)=\"changeSelectedItems($event)\"\n        (onRowUnselect)=\"changeSelectedItems($event)\"\n        (onLazyLoad)=\"lazyLoaded({ filter: false, data: $event })\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [reorderableColumns]=\"reorderableColumns\"\n        editMode=\"cell\"\n      >\n        <ng-template pTemplate=\"header\">\n          <tr class=\"header\">\n            <th *ngIf=\"reorderableColumns\" style=\"width: 5rem\"></th>\n\n            <th *ngIf=\"selectionType === 'checkbox'\">\n              <p-tableHeaderCheckbox [disabled]=\"disabledHeadercheckbox\"></p-tableHeaderCheckbox>\n            </th>\n            <th class=\"px-1 w-max min-w-max white-space-nowrap text-center vertical-align-middle\" *ngIf=\"hasExpandableIcon\">\n              {{ addNameColumnExpand }}\n            </th>\n            <th *ngIf=\"hasActions\">{{ 'app.label.actions' | translate }}</th>\n            <th *ngIf=\"selectionType === 'radiobutton'\">\n              <div class=\"flex align-items-center\">\n                <span></span>\n              </div>\n            </th>\n            @for (col of columns; track $index) {\n              @if (!col.hidden) {\n                <th\n                  [ngStyle]=\"getColStyle(col)\"\n                  [pSortableColumn]=\"col.notSortable ? '' : col.field\"\n                  pReorderableColumn\n                >\n                  <div class=\"flex align-items-center\">\n                    <span>{{ col.header }}</span> <p-sortIcon *ngIf=\"!col.notSortable\" [field]=\"col.field\"></p-sortIcon>\n                  </div>\n                </th>\n              }\n            }\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-rowData let-item let-expanded=\"expanded\" let-index=\"rowIndex\">\n          <tr\n            class=\"row\"\n            [pSelectableRow]=\"rowData\"\n            [ngClass]=\"{ expandable: expandable }\"\n            [pRowToggler]=\"item\"\n            [pRowTogglerDisabled]=\"!expandable\"\n            (click)=\"onRowClick(item)\"\n            [pReorderableRow]=\"index\"\n          >\n            <ng-container *ngIf=\"reorderableColumns\">\n              <td style=\"max-width: 3rem; padding-left: 10px\" class=\"justify-content-center align-items-center\">\n                <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"selectionType === 'checkbox'\">\n              <td\n                style=\"max-width: 3rem; padding-left: 10px\"\n                class=\"justify-content-center align-items-center\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <p-tableCheckbox [value]=\"item\" [disabled]=\"item.disabledCheckBox\"></p-tableCheckbox>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"selectionType === 'radiobutton'\">\n              <td\n                style=\"max-width: 3rem; padding-left: 10px\"\n                class=\"justify-content-center align-items-center\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n              </td>\n            </ng-container>\n            <td *ngIf=\"hasExpandableIcon\" class=\"px-1 w-auto text-center vertical-align-middle\">\n              <p-menu #menu [model]=\"item.actions\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n              <i\n                [ngClass]=\"\n                  expanded ? 'actions-menu-button pi pi-chevron-down' : 'actions-menu-button pi pi-chevron-right'\n                \"\n              ></i>\n            </td>\n            <td *ngIf=\"hasActions\">\n              <p-menu\n                #menu\n                [model]=\"item.actions\"\n                [popup]=\"true\"\n                appendTo=\"body\"\n                (onShow)=\"item._menuOpen = true; onActionsMenuShow(menu)\"\n                (onHide)=\"item._menuOpen = false\"\n              ></p-menu>\n              <i\n                class=\"actions-menu-button fas fa-cog\"\n                [class.active]=\"item._menuOpen\"\n                (click)=\"menu.toggle($event)\"\n              ></i>\n            </td>\n            @for (col of columns; track $index) {\n              @if (!col.hidden) {\n                <ng-container>\n                  <td\n                    *ngIf=\"isEditableCell(col)\"\n                    class=\"cell\"\n                    [pEditableColumn]=\"item\"\n                    [pEditableColumnField]=\"col.field\"\n                    [ngStyle]=\"getColStyle(col)\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-inputNumber\n                          *ngIf=\"!col.cellEdit?.editType || col.cellEdit?.editType === 'number'\"\n                          [(ngModel)]=\"item[col.field]\"\n                          [suffix]=\"col.cellEdit?.editSuffix || ''\"\n                          mode=\"decimal\"\n                          [maxFractionDigits]=\"col.cellEdit?.editMaxFractionDigits ?? 2\"\n                          [min]=\"col.cellEdit?.editMin ?? 0\"\n                          [max]=\"col.cellEdit?.editMax\"\n                          (onBlur)=\"onCellEditComplete(item, col, item[col.field])\"\n                        ></p-inputNumber>\n                        <input\n                          *ngIf=\"col.cellEdit?.editType === 'text'\"\n                          pInputText\n                          [(ngModel)]=\"item[col.field]\"\n                          (blur)=\"onCellEditComplete(item, col, item[col.field])\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        <span>{{ item[col.field] }}{{ col.cellEdit?.editSuffix || '' }}</span>\n                        <i class=\"pi pi-pencil ml-2 text-primary\"></i>\n                      </ng-template>\n                    </p-cellEditor>\n                  </td>\n                  <td\n                    *ngIf=\"isHtmlCell(col) && !col.cellEdit\"\n                    class=\"cell\"\n                    [innerHTML]=\"getCellContent(item, col)\"\n                    (click)=\"col && col.clickFunction && col.clickFunction(item)\"\n                    [ngStyle]=\"getColStyle(col)\"\n                  ></td>\n                  <td\n                    *ngIf=\"(!isHtmlCell(col) && !!col.getStatus) || isScoreCell(col)\"\n                    class=\"cell\"\n                    (click)=\"col && col.clickFunction && col.clickFunction(item)\"\n                    [ngStyle]=\"getColStyle(col)\"\n                  >\n                    <vector-badge\n                      *ngIf=\"isBadgeCell(col)\"\n                      [label]=\"getCellText(item, col)\"\n                      [type]=\"col.getStatus && col.getStatus(item[col.field])\"\n                      [tooltip]=\"getTooltipText(item, col)\"\n                    ></vector-badge>\n                    <vector-score *ngIf=\"isScoreCell(col)\" [score]=\"item[col.field]\"></vector-score>\n                  </td>\n                </ng-container>\n              }\n            }\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"emptymessage\">\n          <tr class=\"row\">\n            <td class=\"no-results\" [attr.colspan]=\"columns.length + 1\">Nenhum resultado encontrado</td>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"paginatorright\"> </ng-template>\n        <ng-template let-item pTemplate=\"paginatordropdownitem\"> {{ item.value }} </ng-template>\n        <ng-template pTemplate=\"expandedrow\" let-item>\n          <tr>\n            <td [attr.colspan]=\"columns.length + (hasActions ? 1 : 0)\">\n              <ng-container *ngTemplateOutlet=\"expansionTemplate; context: { item }\"> </ng-container>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n    </vector-panel>\n  </div>\n</div>\n", styles: [".no-results{padding:15px;background-color:#fff;width:100%}.centered{display:flex;justify-content:center}.table-header-actions{display:flex;justify-content:flex-end;align-items:flex-end;width:100%;padding-right:7px;margin-bottom:15px!important}@media(min-width:768px){.table-header-actions{margin-top:-3px}}.table-header-actions .export-button{padding:7px 10px;color:#fff;display:flex;align-items:center;border:none;border-radius:5px;margin:5px;font-size:.75rem;cursor:pointer}.table-header-actions .export-button.export-excel{background-color:var(--success-color)}.table-header-actions .export-button.export-excel:hover{background-color:var(--success-color-dark)}.table-header-actions .export-button.export-pdf{background-color:var(--error-color)}.table-header-actions .export-button.export-pdf:hover{background-color:var(--error-color-dark)}.table-header-actions .export-button.custom-function{background-color:var(--theme-primary)}.table-header-actions .export-button.custom-function:hover{background-color:var(--theme-medium)}.table-header-actions .export-button i{color:#fff}.table-header-actions .export-button span{margin-left:5px}.table-header-actions .add-item-button{margin-left:10px}.actions-menu-button{font-size:23px;cursor:pointer;color:var(--theme-medium);padding:6px;border-radius:50%;transition:all .15s ease}.actions-menu-button:hover{background-color:#0000000d}.actions-menu-button:active{transform:scale(.92);background-color:#0000001a;color:var(--theme-dark)}.expandable{cursor:pointer}.balance-container{display:flex;flex-direction:column;min-width:13%;padding:0;margin-bottom:30px;top:30px;right:40px;border-radius:8px;margin-right:15px}.balance-container .header-right{flex:1;flex-direction:row;justify-content:flex-end;display:flex}@media screen and (max-width:1450px){.balance-container{width:40%}}@media screen and (max-width:960px){.balance-container{position:relative;width:80%;top:auto;right:auto}}.balance-container .card-header{color:var(--theme-medium);border-radius:9px 9px 0 0;padding:10px 10px 2px;font-weight:500;font-size:13px;line-height:17px;letter-spacing:.25px}.balance-container .value-container{display:flex;flex-direction:row;align-items:center;padding:0 10px 5px}.balance-container .value-container span{font-size:2em;font-weight:700;color:var(--theme-secondary)}@media screen and (max-width:640px){.balance-container .value-container span{font-size:1.6em}}.balance-container .value-container .balance{margin-left:8px;width:70%}.balance-container .value-container .hidden-balance{background-color:var(--gray-lighter);padding:15px;margin-left:8px;width:70%;height:100%}.balance-container .value-container .icon-container{display:flex;flex:1;justify-content:center;align-items:center}.balance-container .value-container .icon-container i{cursor:pointer;font-size:2em;padding-top:2px;color:var(--theme-medium)}:host ::ng-deep .p-datatable-thead>tr>th,:host ::ng-deep .p-datatable-tbody>tr>td{text-align:center!important;vertical-align:middle!important}:host ::ng-deep .p-datatable-thead>tr>th>.flex,:host ::ng-deep .p-datatable-tbody>tr>td>.flex{justify-content:center!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$5.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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$2.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: PanelComponent, selector: "vector-panel" }, { kind: "component", type: i7.TabView, selector: "p-tabView, p-tabview", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i7.TabPanel, selector: "p-tabPanel, p-tabpanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: BadgeComponent, selector: "vector-badge", inputs: ["type", "label", "customColor", "customBackgroundColor", "tooltip"] }, { kind: "component", type: ScoreComponent, selector: "vector-score", inputs: ["score"] }, { kind: "component", type: i10.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i11.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", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], 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: i11.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i11.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i11.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i11.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "directive", type: i11.EditableColumn, selector: "[pEditableColumn]", inputs: ["pEditableColumn", "pEditableColumnField", "pEditableColumnRowIndex", "pEditableColumnDisabled", "pFocusCellSelector"] }, { kind: "component", type: i11.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i11.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i11.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i11.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i11.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i11.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "round", "style", "loading"], outputs: ["onClick"] }, { kind: "component", type: FiltersComponent, selector: "vector-filters", inputs: ["fields"], outputs: ["onSearch", "formBuilded"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'vector-data-table', template: "<div class=\"grid\">\n  <div class=\"col-12\">\n    <vector-filters\n      [fields]=\"filters\"\n      (onSearch)=\"lazyLoaded({ filter: true, data: $event })\"\n      (formBuilded)=\"subscribeToFilterChanges()\"\n    ></vector-filters>\n  </div>\n  <div\n    class=\"table-header-actions field\"\n    *ngIf=\"addItemLabel || exportExcel || exportPDF || customFunction || customButtons\"\n  >\n    <button *ngIf=\"exportExcel\" (click)=\"onExportExcel.emit()\" class=\"export-button export-excel\">\n      <i class=\"fas fa-file-excel\"></i><span>Excel</span>\n    </button>\n    <button *ngIf=\"exportPDF\" (click)=\"onExportPDF.emit()\" class=\"export-button export-pdf\">\n      <i class=\"fas fa-file-pdf\"></i><span>PDF</span>\n    </button>\n    <button\n      *ngFor=\"let button of customFunction\"\n      (click)=\"button.clickFunction()\"\n      class=\"export-button custom-function\"\n    >\n      <i *ngIf=\"button?.icon\" class=\"{{ button?.icon }}\"></i><span>{{ button?.label }}</span>\n    </button>\n\n    <vector-button\n      *ngFor=\"let button of customButtons\"\n      class=\"add-item-button\"\n      [round]=\"true\"\n      [label]=\"button.label\"\n      (click)=\"button.clickFunction()\"\n      [rightIcon]=\"addItemButtonPlusSign ? 'pi pi-plus' : ''\"\n      [disabled]=\"button.disabled === true\"\n    ></vector-button>\n    <vector-button\n      *ngIf=\"addItemLabel\"\n      class=\"add-item-button\"\n      [label]=\"addItemLabel\"\n      (click)=\"onAdd.emit()\"\n      [rightIcon]=\"addItemButtonPlusSign ? 'pi pi-plus' : ''\"\n      [round]=\"true\"\n    ></vector-button>\n  </div>\n  @if (showLimitBalance) {\n    <div class=\"col-12 grid ml-0\">\n      @for (itemAccount of dataAccountBalance; track $index) {\n        @if (itemAccount.visible) {\n          <div class=\"card balance-container\">\n            <span class=\"card-header\">{{ itemAccount.name }}</span>\n            <div class=\"card-content value-container\">\n              <span>R$ </span>\n              <span *ngIf=\"itemAccount.showBalance\" class=\"balance\">{{ balance(itemAccount) }}</span>\n              <div class=\"hidden-balance\" *ngIf=\"!itemAccount.showBalance\"></div>\n              <div class=\"icon-container\">\n                <i\n                  class=\"fas\"\n                  [ngClass]=\"{ 'fa-eye': !itemAccount.showBalance, 'fa-eye-slash': itemAccount.showBalance }\"\n                  (click)=\"changeShowBalance(itemAccount)\"\n                ></i>\n              </div>\n            </div>\n          </div>\n        }\n      }\n    </div>\n  }\n  @if (showDataBalance) {\n    <div class=\"col-12 grid ml-0\">\n      @for (itemAccount of dataAccountBalance; track $index) {\n        <div class=\"card balance-container\">\n          <span class=\"card-header\">{{ itemAccount.name }}</span>\n          <div class=\"card-content value-container\">\n            <span class=\"balance\">{{ itemAccount.valueBalance }}</span>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"col-12\">\n    <vector-panel class=\"data-table-panel\">\n      <p-tabView (onChange)=\"onTabChange($event)\" *ngIf=\"tabs?.length\">\n        <p-tabPanel *ngFor=\"let tab of tabs\">\n          <ng-template pTemplate=\"header\">\n            <em *ngIf=\"tab.icon\" [class]=\"tab.icon\">&nbsp;</em>\n            <span>{{ tab.name }}</span>\n          </ng-template>\n        </p-tabPanel>\n      </p-tabView>\n      <p-table\n        currentPageReportTemplate=\"Mostrando {first} at\u00E9 {last} de {totalRecords} registros\"\n        sortMode=\"single\"\n        [rows]=\"10\"\n        [lazy]=\"pagination && !virtualPagination\"\n        [value]=\"data\"\n        [paginator]=\"pagination\"\n        [totalRecords]=\"totalRecords\"\n        [showCurrentPageReport]=\"true\"\n        [rowsPerPageOptions]=\"[10, 25, 50, 100]\"\n        [responsive]=\"true\"\n        [resizableColumns]=\"true\"\n        [scrollable]=\"true\"\n        scrollDirection=\"vertical\"\n        responsiveLayout=\"scroll\"\n        dataKey=\"id\"\n        [scrollHeight]=\"height\"\n        [selectionMode]=\"selectionType === 'checkbox' || selectionType === 'radiobutton' ? null : selectionMode\"\n        [(selection)]=\"selectedItems\"\n        (onRowSelect)=\"changeSelectedItems($event)\"\n        (onHeaderCheckboxToggle)=\"changeSelectedItems($event)\"\n        (onRowUnselect)=\"changeSelectedItems($event)\"\n        (onLazyLoad)=\"lazyLoaded({ filter: false, data: $event })\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [reorderableColumns]=\"reorderableColumns\"\n        editMode=\"cell\"\n      >\n        <ng-template pTemplate=\"header\">\n          <tr class=\"header\">\n            <th *ngIf=\"reorderableColumns\" style=\"width: 5rem\"></th>\n\n            <th *ngIf=\"selectionType === 'checkbox'\">\n              <p-tableHeaderCheckbox [disabled]=\"disabledHeadercheckbox\"></p-tableHeaderCheckbox>\n            </th>\n            <th class=\"px-1 w-max min-w-max white-space-nowrap text-center vertical-align-middle\" *ngIf=\"hasExpandableIcon\">\n              {{ addNameColumnExpand }}\n            </th>\n            <th *ngIf=\"hasActions\">{{ 'app.label.actions' | translate }}</th>\n            <th *ngIf=\"selectionType === 'radiobutton'\">\n              <div class=\"flex align-items-center\">\n                <span></span>\n              </div>\n            </th>\n            @for (col of columns; track $index) {\n              @if (!col.hidden) {\n                <th\n                  [ngStyle]=\"getColStyle(col)\"\n                  [pSortableColumn]=\"col.notSortable ? '' : col.field\"\n                  pReorderableColumn\n                >\n                  <div class=\"flex align-items-center\">\n                    <span>{{ col.header }}</span> <p-sortIcon *ngIf=\"!col.notSortable\" [field]=\"col.field\"></p-sortIcon>\n                  </div>\n                </th>\n              }\n            }\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-rowData let-item let-expanded=\"expanded\" let-index=\"rowIndex\">\n          <tr\n            class=\"row\"\n            [pSelectableRow]=\"rowData\"\n            [ngClass]=\"{ expandable: expandable }\"\n            [pRowToggler]=\"expandable ? item : undefined\"\n            (click)=\"onRowClick(item)\"\n            [pReorderableRow]=\"index\"\n          >\n            <ng-container *ngIf=\"reorderableColumns\">\n              <td style=\"max-width: 3rem; padding-left: 10px\" class=\"justify-content-center align-items-center\">\n                <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"selectionType === 'checkbox'\">\n              <td\n                style=\"max-width: 3rem; padding-left: 10px\"\n                class=\"justify-content-center align-items-center\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <p-tableCheckbox [value]=\"item\" [disabled]=\"item.disabledCheckBox\"></p-tableCheckbox>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"selectionType === 'radiobutton'\">\n              <td\n                style=\"max-width: 3rem; padding-left: 10px\"\n                class=\"justify-content-center align-items-center\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n              </td>\n            </ng-container>\n            <td *ngIf=\"hasExpandableIcon\" class=\"px-1 w-auto text-center vertical-align-middle\">\n              <p-menu #menu [model]=\"item.actions\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n              <i\n                [ngClass]=\"\n                  expanded ? 'actions-menu-button pi pi-chevron-down' : 'actions-menu-button pi pi-chevron-right'\n                \"\n              ></i>\n            </td>\n            <td *ngIf=\"hasActions\">\n              <p-menu\n                #menu\n                [model]=\"item.actions\"\n                [popup]=\"true\"\n                appendTo=\"body\"\n                (onShow)=\"item._menuOpen = true\"\n                (onHide)=\"item._menuOpen = false\"\n              ></p-menu>\n              <i\n                class=\"actions-menu-button fas fa-cog\"\n                [class.active]=\"item._menuOpen\"\n                (click)=\"menu.toggle($event)\"\n              ></i>\n            </td>\n            @for (col of columns; track $index) {\n              @if (!col.hidden) {\n                <ng-container>\n                  <td\n                    *ngIf=\"isEditableCell(col)\"\n                    class=\"cell\"\n                    [pEditableColumn]=\"item\"\n                    [pEditableColumnField]=\"col.field\"\n                    [ngStyle]=\"getColStyle(col)\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-inputNumber\n                          *ngIf=\"!col.cellEdit?.editType || col.cellEdit?.editType === 'number'\"\n                          [(ngModel)]=\"item[col.field]\"\n                          [suffix]=\"col.cellEdit?.editSuffix || ''\"\n                          mode=\"decimal\"\n                          [maxFractionDigits]=\"col.cellEdit?.editMaxFractionDigits ?? 2\"\n                          [min]=\"col.cellEdit?.editMin ?? 0\"\n                          [max]=\"col.cellEdit?.editMax\"\n                          (onBlur)=\"onCellEditComplete(item, col, item[col.field])\"\n                        ></p-inputNumber>\n                        <input\n                          *ngIf=\"col.cellEdit?.editType === 'text'\"\n                          pInputText\n                          [(ngModel)]=\"item[col.field]\"\n                          (blur)=\"onCellEditComplete(item, col, item[col.field])\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        <span>{{ item[col.field] }}{{ col.cellEdit?.editSuffix || '' }}</span>\n                        <i class=\"pi pi-pencil ml-2 text-primary\"></i>\n                      </ng-template>\n                    </p-cellEditor>\n                  </td>\n                  <td\n                    *ngIf=\"isHtmlCell(col) && !col.cellEdit\"\n                    class=\"cell\"\n                    [innerHTML]=\"getCellContent(item, col)\"\n                    (click)=\"col && col.clickFunction && col.clickFunction(item)\"\n                    [ngStyle]=\"getColStyle(col)\"\n                  ></td>\n                  <td\n                    *ngIf=\"(!isHtmlCell(col) && !!col.getStatus) || isScoreCell(col)\"\n                    class=\"cell\"\n                    (click)=\"col && col.clickFunction && col.clickFunction(item)\"\n                    [ngStyle]=\"getColStyle(col)\"\n                  >\n                    <vector-badge\n                      *ngIf=\"isBadgeCell(col)\"\n                      [label]=\"getCellText(item, col)\"\n                      [type]=\"col.getStatus && col.getStatus(item[col.field])\"\n                      [tooltip]=\"getTooltipText(item, col)\"\n                    ></vector-badge>\n                    <vector-score *ngIf=\"isScoreCell(col)\" [score]=\"item[col.field]\"></vector-score>\n                  </td>\n                </ng-container>\n              }\n            }\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"emptymessage\">\n          <tr class=\"row\">\n            <td class=\"no-results\" [attr.colspan]=\"columns.length + 1\">Nenhum resultado encontrado</td>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"paginatorright\"> </ng-template>\n        <ng-template let-item pTemplate=\"paginatordropdownitem\"> {{ item.value }} </ng-template>\n        <ng-template pTemplate=\"expandedrow\" let-item>\n          <tr>\n            <td [attr.colspan]=\"columns.length + (hasActions ? 1 : 0)\">\n              <ng-container *ngTemplateOutlet=\"expansionTemplate; context: { item }\"> </ng-container>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n    </vector-panel>\n  </div>\n</div>\n", styles: [".no-results{padding:15px;background-color:#fff;width:100%}.centered{display:flex;justify-content:center}.table-header-actions{display:flex;justify-content:flex-end;align-items:flex-end;width:100%;padding-right:7px;margin-bottom:15px!important}@media(min-width:768px){.table-header-actions{margin-top:-3px}}.table-header-actions .export-button{padding:7px 10px;color:#fff;display:flex;align-items:center;border:none;border-radius:5px;margin:5px;font-size:.75rem;cursor:pointer}.table-header-actions .export-button.export-excel{background-color:var(--success-color)}.table-header-actions .export-button.export-excel:hover{background-color:var(--success-color-dark)}.table-header-actions .export-button.export-pdf{background-color:var(--error-color)}.table-header-actions .export-button.export-pdf:hover{background-color:var(--error-color-dark)}.table-header-actions .export-button.custom-function{background-color:var(--theme-primary)}.table-header-actions .export-button.custom-function:hover{background-color:var(--theme-medium)}.table-header-actions .export-button i{color:#fff}.table-header-actions .export-button span{margin-left:5px}.table-header-actions .add-item-button{margin-left:10px}.actions-menu-button{font-size:23px;cursor:pointer;color:var(--theme-medium);padding:6px;border-radius:50%;transition:all .15s ease}.actions-menu-button:hover{background-color:#0000000d}.actions-menu-button:active{transform:scale(.92);background-color:#0000001a;color:var(--theme-dark)}.expandable{cursor:pointer}.balance-container{display:flex;flex-direction:column;min-width:13%;padding:0;margin-bottom:30px;top:30px;right:40px;border-radius:8px;margin-right:15px}.balance-container .header-right{flex:1;flex-direction:row;justify-content:flex-end;display:flex}@media screen and (max-width:1450px){.balance-container{width:40%}}@media screen and (max-width:960px){.balance-container{position:relative;width:80%;top:auto;right:auto}}.balance-container .card-header{color:var(--theme-medium);border-radius:9px 9px 0 0;padding:10px 10px 2px;font-weight:500;font-size:13px;line-height:17px;letter-spacing:.25px}.balance-container .value-container{display:flex;flex-direction:row;align-items:center;padding:0 10px 5px}.balance-container .value-container span{font-size:2em;font-weight:700;color:var(--theme-secondary)}@media screen and (max-width:640px){.balance-container .value-container span{font-size:1.6em}}.balance-container .value-container .balance{margin-left:8px;width:70%}.balance-container .value-container .hidden-balance{background-color:var(--gray-lighter);padding:15px;margin-left:8px;width:70%;height:100%}.balance-container .value-container .icon-container{display:flex;flex:1;justify-content:center;align-items:center}.balance-container .value-container .icon-container i{cursor:pointer;font-size:2em;padding-top:2px;color:var(--theme-medium)}:host ::ng-deep .p-datatable-thead>tr>th,:host ::ng-deep .p-datatable-tbody>tr>td{text-align:center!important;vertical-align:middle!important}:host ::ng-deep .p-datatable-thead>tr>th>.flex,:host ::ng-deep .p-datatable-tbody>tr>td>.flex{justify-content:center!important}\n"] }]
+            args: [{ standalone: false, selector: 'vector-data-table', template: "<div class=\"grid\">\n  <div class=\"col-12\">\n    <vector-filters\n      [fields]=\"filters\"\n      (onSearch)=\"lazyLoaded({ filter: true, data: $event })\"\n      (formBuilded)=\"subscribeToFilterChanges()\"\n    ></vector-filters>\n  </div>\n  <div\n    class=\"table-header-actions field\"\n    *ngIf=\"addItemLabel || exportExcel || exportPDF || customFunction || customButtons\"\n  >\n    <button *ngIf=\"exportExcel\" (click)=\"onExportExcel.emit()\" class=\"export-button export-excel\">\n      <i class=\"fas fa-file-excel\"></i><span>Excel</span>\n    </button>\n    <button *ngIf=\"exportPDF\" (click)=\"onExportPDF.emit()\" class=\"export-button export-pdf\">\n      <i class=\"fas fa-file-pdf\"></i><span>PDF</span>\n    </button>\n    <button\n      *ngFor=\"let button of customFunction\"\n      (click)=\"button.clickFunction()\"\n      class=\"export-button custom-function\"\n    >\n      <i *ngIf=\"button?.icon\" class=\"{{ button?.icon }}\"></i><span>{{ button?.label }}</span>\n    </button>\n\n    <vector-button\n      *ngFor=\"let button of customButtons\"\n      class=\"add-item-button\"\n      [round]=\"true\"\n      [label]=\"button.label\"\n      (click)=\"button.clickFunction()\"\n      [rightIcon]=\"addItemButtonPlusSign ? 'pi pi-plus' : ''\"\n      [disabled]=\"button.disabled === true\"\n    ></vector-button>\n    <vector-button\n      *ngIf=\"addItemLabel\"\n      class=\"add-item-button\"\n      [label]=\"addItemLabel\"\n      (click)=\"onAdd.emit()\"\n      [rightIcon]=\"addItemButtonPlusSign ? 'pi pi-plus' : ''\"\n      [round]=\"true\"\n    ></vector-button>\n  </div>\n  @if (showLimitBalance) {\n    <div class=\"col-12 grid ml-0\">\n      @for (itemAccount of dataAccountBalance; track $index) {\n        @if (itemAccount.visible) {\n          <div class=\"card balance-container\">\n            <span class=\"card-header\">{{ itemAccount.name }}</span>\n            <div class=\"card-content value-container\">\n              <span>R$ </span>\n              <span *ngIf=\"itemAccount.showBalance\" class=\"balance\">{{ balance(itemAccount) }}</span>\n              <div class=\"hidden-balance\" *ngIf=\"!itemAccount.showBalance\"></div>\n              <div class=\"icon-container\">\n                <i\n                  class=\"fas\"\n                  [ngClass]=\"{ 'fa-eye': !itemAccount.showBalance, 'fa-eye-slash': itemAccount.showBalance }\"\n                  (click)=\"changeShowBalance(itemAccount)\"\n                ></i>\n              </div>\n            </div>\n          </div>\n        }\n      }\n    </div>\n  }\n  @if (showDataBalance) {\n    <div class=\"col-12 grid ml-0\">\n      @for (itemAccount of dataAccountBalance; track $index) {\n        <div class=\"card balance-container\">\n          <span class=\"card-header\">{{ itemAccount.name }}</span>\n          <div class=\"card-content value-container\">\n            <span class=\"balance\">{{ itemAccount.valueBalance }}</span>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"col-12\">\n    <vector-panel class=\"data-table-panel\">\n      <p-tabView (onChange)=\"onTabChange($event)\" *ngIf=\"tabs?.length\">\n        <p-tabPanel *ngFor=\"let tab of tabs\">\n          <ng-template pTemplate=\"header\">\n            <em *ngIf=\"tab.icon\" [class]=\"tab.icon\">&nbsp;</em>\n            <span>{{ tab.name }}</span>\n          </ng-template>\n        </p-tabPanel>\n      </p-tabView>\n      <p-table\n        currentPageReportTemplate=\"Mostrando {first} at\u00E9 {last} de {totalRecords} registros\"\n        sortMode=\"single\"\n        [rows]=\"10\"\n        [lazy]=\"pagination && !virtualPagination\"\n        [value]=\"data\"\n        [paginator]=\"pagination\"\n        [totalRecords]=\"totalRecords\"\n        [showCurrentPageReport]=\"true\"\n        [rowsPerPageOptions]=\"[10, 25, 50, 100]\"\n        [responsive]=\"true\"\n        [resizableColumns]=\"true\"\n        [scrollable]=\"true\"\n        scrollDirection=\"vertical\"\n        responsiveLayout=\"scroll\"\n        dataKey=\"id\"\n        [scrollHeight]=\"height\"\n        [selectionMode]=\"selectionType === 'checkbox' || selectionType === 'radiobutton' ? null : selectionMode\"\n        [(selection)]=\"selectedItems\"\n        (onRowSelect)=\"changeSelectedItems($event)\"\n        (onHeaderCheckboxToggle)=\"changeSelectedItems($event)\"\n        (onRowUnselect)=\"changeSelectedItems($event)\"\n        (onLazyLoad)=\"lazyLoaded({ filter: false, data: $event })\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [reorderableColumns]=\"reorderableColumns\"\n        editMode=\"cell\"\n      >\n        <ng-template pTemplate=\"header\">\n          <tr class=\"header\">\n            <th *ngIf=\"reorderableColumns\" style=\"width: 5rem\"></th>\n\n            <th *ngIf=\"selectionType === 'checkbox'\">\n              <p-tableHeaderCheckbox [disabled]=\"disabledHeadercheckbox\"></p-tableHeaderCheckbox>\n            </th>\n            <th class=\"px-1 w-max min-w-max white-space-nowrap text-center vertical-align-middle\" *ngIf=\"hasExpandableIcon\">\n              {{ addNameColumnExpand }}\n            </th>\n            <th *ngIf=\"hasActions\">{{ 'app.label.actions' | translate }}</th>\n            <th *ngIf=\"selectionType === 'radiobutton'\">\n              <div class=\"flex align-items-center\">\n                <span></span>\n              </div>\n            </th>\n            @for (col of columns; track $index) {\n              @if (!col.hidden) {\n                <th\n                  [ngStyle]=\"getColStyle(col)\"\n                  [pSortableColumn]=\"col.notSortable ? '' : col.field\"\n                  pReorderableColumn\n                >\n                  <div class=\"flex align-items-center\">\n                    <span>{{ col.header }}</span> <p-sortIcon *ngIf=\"!col.notSortable\" [field]=\"col.field\"></p-sortIcon>\n                  </div>\n                </th>\n              }\n            }\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-rowData let-item let-expanded=\"expanded\" let-index=\"rowIndex\">\n          <tr\n            class=\"row\"\n            [pSelectableRow]=\"rowData\"\n            [ngClass]=\"{ expandable: expandable }\"\n            [pRowToggler]=\"item\"\n            [pRowTogglerDisabled]=\"!expandable\"\n            (click)=\"onRowClick(item)\"\n            [pReorderableRow]=\"index\"\n          >\n            <ng-container *ngIf=\"reorderableColumns\">\n              <td style=\"max-width: 3rem; padding-left: 10px\" class=\"justify-content-center align-items-center\">\n                <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"selectionType === 'checkbox'\">\n              <td\n                style=\"max-width: 3rem; padding-left: 10px\"\n                class=\"justify-content-center align-items-center\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <p-tableCheckbox [value]=\"item\" [disabled]=\"item.disabledCheckBox\"></p-tableCheckbox>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"selectionType === 'radiobutton'\">\n              <td\n                style=\"max-width: 3rem; padding-left: 10px\"\n                class=\"justify-content-center align-items-center\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n              </td>\n            </ng-container>\n            <td *ngIf=\"hasExpandableIcon\" class=\"px-1 w-auto text-center vertical-align-middle\">\n              <p-menu #menu [model]=\"item.actions\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n              <i\n                [ngClass]=\"\n                  expanded ? 'actions-menu-button pi pi-chevron-down' : 'actions-menu-button pi pi-chevron-right'\n                \"\n              ></i>\n            </td>\n            <td *ngIf=\"hasActions\">\n              <p-menu\n                #menu\n                [model]=\"item.actions\"\n                [popup]=\"true\"\n                appendTo=\"body\"\n                (onShow)=\"item._menuOpen = true; onActionsMenuShow(menu)\"\n                (onHide)=\"item._menuOpen = false\"\n              ></p-menu>\n              <i\n                class=\"actions-menu-button fas fa-cog\"\n                [class.active]=\"item._menuOpen\"\n                (click)=\"menu.toggle($event)\"\n              ></i>\n            </td>\n            @for (col of columns; track $index) {\n              @if (!col.hidden) {\n                <ng-container>\n                  <td\n                    *ngIf=\"isEditableCell(col)\"\n                    class=\"cell\"\n                    [pEditableColumn]=\"item\"\n                    [pEditableColumnField]=\"col.field\"\n                    [ngStyle]=\"getColStyle(col)\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-inputNumber\n                          *ngIf=\"!col.cellEdit?.editType || col.cellEdit?.editType === 'number'\"\n                          [(ngModel)]=\"item[col.field]\"\n                          [suffix]=\"col.cellEdit?.editSuffix || ''\"\n                          mode=\"decimal\"\n                          [maxFractionDigits]=\"col.cellEdit?.editMaxFractionDigits ?? 2\"\n                          [min]=\"col.cellEdit?.editMin ?? 0\"\n                          [max]=\"col.cellEdit?.editMax\"\n                          (onBlur)=\"onCellEditComplete(item, col, item[col.field])\"\n                        ></p-inputNumber>\n                        <input\n                          *ngIf=\"col.cellEdit?.editType === 'text'\"\n                          pInputText\n                          [(ngModel)]=\"item[col.field]\"\n                          (blur)=\"onCellEditComplete(item, col, item[col.field])\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        <span>{{ item[col.field] }}{{ col.cellEdit?.editSuffix || '' }}</span>\n                        <i class=\"pi pi-pencil ml-2 text-primary\"></i>\n                      </ng-template>\n                    </p-cellEditor>\n                  </td>\n                  <td\n                    *ngIf=\"isHtmlCell(col) && !col.cellEdit\"\n                    class=\"cell\"\n                    [innerHTML]=\"getCellContent(item, col)\"\n                    (click)=\"col && col.clickFunction && col.clickFunction(item)\"\n                    [ngStyle]=\"getColStyle(col)\"\n                  ></td>\n                  <td\n                    *ngIf=\"(!isHtmlCell(col) && !!col.getStatus) || isScoreCell(col)\"\n                    class=\"cell\"\n                    (click)=\"col && col.clickFunction && col.clickFunction(item)\"\n                    [ngStyle]=\"getColStyle(col)\"\n                  >\n                    <vector-badge\n                      *ngIf=\"isBadgeCell(col)\"\n                      [label]=\"getCellText(item, col)\"\n                      [type]=\"col.getStatus && col.getStatus(item[col.field])\"\n                      [tooltip]=\"getTooltipText(item, col)\"\n                    ></vector-badge>\n                    <vector-score *ngIf=\"isScoreCell(col)\" [score]=\"item[col.field]\"></vector-score>\n                  </td>\n                </ng-container>\n              }\n            }\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"emptymessage\">\n          <tr class=\"row\">\n            <td class=\"no-results\" [attr.colspan]=\"columns.length + 1\">Nenhum resultado encontrado</td>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"paginatorright\"> </ng-template>\n        <ng-template let-item pTemplate=\"paginatordropdownitem\"> {{ item.value }} </ng-template>\n        <ng-template pTemplate=\"expandedrow\" let-item>\n          <tr>\n            <td [attr.colspan]=\"columns.length + (hasActions ? 1 : 0)\">\n              <ng-container *ngTemplateOutlet=\"expansionTemplate; context: { item }\"> </ng-container>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n    </vector-panel>\n  </div>\n</div>\n", styles: [".no-results{padding:15px;background-color:#fff;width:100%}.centered{display:flex;justify-content:center}.table-header-actions{display:flex;justify-content:flex-end;align-items:flex-end;width:100%;padding-right:7px;margin-bottom:15px!important}@media(min-width:768px){.table-header-actions{margin-top:-3px}}.table-header-actions .export-button{padding:7px 10px;color:#fff;display:flex;align-items:center;border:none;border-radius:5px;margin:5px;font-size:.75rem;cursor:pointer}.table-header-actions .export-button.export-excel{background-color:var(--success-color)}.table-header-actions .export-button.export-excel:hover{background-color:var(--success-color-dark)}.table-header-actions .export-button.export-pdf{background-color:var(--error-color)}.table-header-actions .export-button.export-pdf:hover{background-color:var(--error-color-dark)}.table-header-actions .export-button.custom-function{background-color:var(--theme-primary)}.table-header-actions .export-button.custom-function:hover{background-color:var(--theme-medium)}.table-header-actions .export-button i{color:#fff}.table-header-actions .export-button span{margin-left:5px}.table-header-actions .add-item-button{margin-left:10px}.actions-menu-button{font-size:23px;cursor:pointer;color:var(--theme-medium);padding:6px;border-radius:50%;transition:all .15s ease}.actions-menu-button:hover{background-color:#0000000d}.actions-menu-button:active{transform:scale(.92);background-color:#0000001a;color:var(--theme-dark)}.expandable{cursor:pointer}.balance-container{display:flex;flex-direction:column;min-width:13%;padding:0;margin-bottom:30px;top:30px;right:40px;border-radius:8px;margin-right:15px}.balance-container .header-right{flex:1;flex-direction:row;justify-content:flex-end;display:flex}@media screen and (max-width:1450px){.balance-container{width:40%}}@media screen and (max-width:960px){.balance-container{position:relative;width:80%;top:auto;right:auto}}.balance-container .card-header{color:var(--theme-medium);border-radius:9px 9px 0 0;padding:10px 10px 2px;font-weight:500;font-size:13px;line-height:17px;letter-spacing:.25px}.balance-container .value-container{display:flex;flex-direction:row;align-items:center;padding:0 10px 5px}.balance-container .value-container span{font-size:2em;font-weight:700;color:var(--theme-secondary)}@media screen and (max-width:640px){.balance-container .value-container span{font-size:1.6em}}.balance-container .value-container .balance{margin-left:8px;width:70%}.balance-container .value-container .hidden-balance{background-color:var(--gray-lighter);padding:15px;margin-left:8px;width:70%;height:100%}.balance-container .value-container .icon-container{display:flex;flex:1;justify-content:center;align-items:center}.balance-container .value-container .icon-container i{cursor:pointer;font-size:2em;padding-top:2px;color:var(--theme-medium)}:host ::ng-deep .p-datatable-thead>tr>th,:host ::ng-deep .p-datatable-tbody>tr>td{text-align:center!important;vertical-align:middle!important}:host ::ng-deep .p-datatable-thead>tr>th>.flex,:host ::ng-deep .p-datatable-tbody>tr>td>.flex{justify-content:center!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
                 type: Input
             }], data: [{