@onecx/angular-accelerator 5.24.0 → 5.25.0

package/fesm2022/onecx-angular-accelerator.mjs

@@ -1549,7 +1549,7 @@ class DataListGridComponent extends DataSortBase {
     set columns(value) {
         this._columns$.next(value);
         const obs = value.map((c) => this.getTemplate(c));
-        this.columnTemplates$ = combineLatest(obs).pipe(map((values) => Object.fromEntries(value.map((c, i) => [c.id, values[i]]))));
+        this.columnTemplates$ = combineLatest(obs).pipe(map((values) => Object.fromEntries(value.map((c, i) => [c.id, values[i]]))), debounceTime(50));
     }
     get totalRecordsOnServer() {
         return this.params['totalRecordsOnServer'] ? Number(this.params['totalRecordsOnServer']) : undefined;
@@ -1954,16 +1954,16 @@ class DataListGridComponent extends DataSortBase {
                             this.findTemplate(templates, ['stringListValue', 'defaultStringListValue'])?.template ??
                             null);
                 }
-            }), debounceTime(50));
+            }));
         }
         return this.templatesObservables[column.id];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DataListGridComponent, deps: [{ token: LOCALE_ID }, { token: i1$2.TranslateService }, { token: i3.UserService }, { token: i1$1.Router }, { token: i0.Injector }, { token: i3.AppStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: DataListGridComponent, selector: "ocx-data-list-grid", inputs: { titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", emptyResultsMessage: "emptyResultsMessage", fallbackImage: "fallbackImage", layout: "layout", viewPermission: "viewPermission", editPermission: "editPermission", deletePermission: "deletePermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", viewMenuItemKey: "viewMenuItemKey", editMenuItemKey: "editMenuItemKey", deleteMenuItemKey: "deleteMenuItemKey", paginator: "paginator", page: "page", columns: "columns", name: "name", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", data: "data", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", listItemTemplate: "listItemTemplate", gridItemTemplate: "gridItemTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", customListValueTemplate: "customListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { viewItem: "viewItem", editItem: "editItem", deleteItem: "deleteItem", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "customListValueChildTemplate", first: true, predicate: ["customListValue"], descendants: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n  <p-dataView\n    *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\n    [value]=\"(displayedItems$ | async) ?? []\"\n    [paginator]=\"paginator\"\n    [first]=\"page * displayedPageSize\"\n    (onPage)=\"onPageChange($event)\"\n    [rows]=\"displayedPageSize\"\n    [layout]=\"layout\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n    [rowsPerPageOptions]=\"(displayedPageSizes$ | async) ?? []\"\n    id=\"dataListGrid_{{name}}\"\n    paginatorDropdownAppendTo=\"body\"\n  >\n    <ng-template #gridItem let-rows pTemplate=\"gridItem\">\n      <div class=\"p-grid p-nogutter grid grid-nogutter\">\n        <ng-template ngFor let-item [ngForOf]=\"rows\">\n          <ng-container\n            [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n            [ngTemplateOutletContext]=\"{$implicit:item}\"\n          ></ng-container>\n        </ng-template>\n      </div>\n    </ng-template>\n\n    <ng-template #listItem let-rows pTemplate=\"listItem\">\n      <div class=\"p-grid p-nogutter grid grid-nogutter\">\n        <ng-template ngFor let-item [ngForOf]=\"rows\">\n          <ng-container\n            [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n            [ngTemplateOutletContext]=\"{\n              item:item,\n              columnTemplates: columnTemplates\n              }\"\n          ></ng-container>\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"empty\">\n      <span>{{ emptyResultsMessage || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n    </ng-template>\n  </p-dataView>\n</ng-container>\n\n<ng-template #defaultGridItem let-item>\n  <div class=\"col-12 lg:col-6 xl:col-4 flex\">\n    <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n      <div class=\"flex justify-content-center mb-3\">\n        <img\n          class=\"image\"\n          src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n          (error)=\"imgError(item)\"\n          alt=\"{{resolveFieldData(item, titleLineId)|| ''}}\"\n        />\n      </div>\n      <div class=\"flex flex-row justify-content-between align-items-center\">\n        <div class=\"data-grid-items flex-row\">\n          <div class=\"item-name font-medium mr-3 text-2xl\">\n            <a [routerLink]=\"\" (click)=\"onViewRow\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n          </div>\n          <ng-container\n            [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n            [ngTemplateOutletContext]=\"{$implicit:item}\"\n          ></ng-container>\n        </div>\n        <div>\n          <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            (click)=\"setSelectedItem(item); updateGridMenuItems(true); menu.toggle($event)\"\n            icon=\"pi pi-ellipsis-v\"\n            [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n            class=\"more-actions-menu-button menu-btn\"\n            [attr.name]=\"'data-grid-item-menu-button'\"\n            [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n            tooltipPosition=\"top\"\n          ></button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n  <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine edit-time text-xl my-3\">\n    {{ resolveFieldData(item, subtitleLineId) }}\n  </div>\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-columnTemplates=\"columnTemplates\">\n  <div class=\"col-12\">\n    <div class=\"data-list-items p-3\">\n      <div class=\"item-name-row flex flex-row justify-content-between\">\n        <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n          <span *ngIf=\"titleLineId\">{{ resolveFieldData(item, titleLineId) || '' }}</span>\n        </div>\n        <div class=\"flex flex-row\">\n          <ng-container\n            *ngIf=\"viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))\"\n          >\n            <button\n              type=\"button\"\n              icon=\"pi pi-eye\"\n              pButton\n              class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n              [pTooltip]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n              tooltipPosition=\"top\"\n              [attr.aria-label]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n              (click)=\"onViewRow(item)\"\n              *ocxIfPermission=\"viewPermission\"\n              [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)\"\n              [attr.name]=\"'data-list-action-button'\"\n            ></button>\n          </ng-container>\n          <ng-container\n            *ngIf=\"editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))\"\n          >\n            <button\n              type=\"button\"\n              class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n              icon=\"pi pi-pencil\"\n              pButton\n              [pTooltip]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n              tooltipPosition=\"top\"\n              [attr.aria-label]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n              (click)=\"onEditRow(item)\"\n              *ocxIfPermission=\"editPermission\"\n              [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)\"\n              [attr.name]=\"'data-list-action-button'\"\n            ></button>\n          </ng-container>\n          <ng-container\n            *ngIf=\"deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))\"\n          >\n            <button\n              type=\"button\"\n              icon=\"pi pi-trash\"\n              class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n              pButton\n              [pTooltip]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n              tooltipPosition=\"top\"\n              [attr.aria-label]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n              (click)=\"onDeleteRow(item)\"\n              *ocxIfPermission=\"deletePermission\"\n              [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)\"\n              [attr.name]=\"'data-list-action-button'\"\n            ></button>\n          </ng-container>\n          <ng-container *ngFor=\"let action of inlineListActions$ | async\">\n            <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(item, action.actionVisibleField))\">\n              <button\n                *ocxIfPermission=\"action.permission\"\n                pButton\n                class=\"p-button-rounded p-button-text\"\n                [ngClass]=\"action.classes\"\n                [icon]=\"action.icon || ''\"\n                (click)=\"action.callback(item)\"\n                [pTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n                tooltipPosition=\"top\"\n                [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n                [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n              ></button>\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"hasVisibleOverflowMenuItems(item) | async\">\n            <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n            <button\n              pButton\n              class=\"p-button-rounded p-button-text\"\n              [icon]=\"'pi pi-ellipsis-v'\"\n              (click)=\"toggleOverflowMenu($event, menu, item)\"\n              [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n              [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n              tooltipPosition=\"top\"\n            ></button>\n          </ng-container>\n        </div>\n      </div>\n      <div class=\"text-base font-light my-1\">\n        <ng-container\n          [ngTemplateOutlet]=\"_listItemSubtitleLines ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n          [ngTemplateOutletContext]=\"{$implicit:item}\"\n        ></ng-container>\n      </div>\n      <div class=\"flex flex-wrap\">\n        <div *ngFor=\"let col of getFilteredColumns()\" class=\"w-12rem my-2 mr-2\">\n          <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n            {{ col.nameKey | translate }}\n          </div>\n          <div\n            [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n            tooltipPosition=\"top\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"\n            _listValue ? _listValue: defaultListValue\n            \"\n              [ngTemplateOutletContext]=\"{\n                rowObject: item,\n                column: col,\n                columnTemplates: columnTemplates\n            }\"\n            ></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n  <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine text-xl my-3\">\n    {{ resolveFieldData(item, subtitleLineId) }}\n  </div>\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n  <ng-container\n    [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n    [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n  >\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomListValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{color:var(--primary-text-color);background-color:var(--primary-color);border:var(--button-border);border-radius:var(--border-radius);padding:var(--button-padding);cursor:pointer;min-width:4rem}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.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: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i8.DataView, selector: "p-dataView", inputs: ["paginator", "rows", "totalRecords", "pageLinks", "rowsPerPageOptions", "paginatorPosition", "paginatorStyleClass", "alwaysShowPaginator", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "lazy", "lazyLoadOnInit", "emptyMessage", "style", "styleClass", "gridStyleClass", "trackBy", "filterBy", "filterLocale", "loading", "loadingIcon", "first", "sortField", "sortOrder", "value", "layout"], outputs: ["onLazyLoad", "onPage", "onSort", "onChangeLayout"] }, { kind: "component", type: i9.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: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "directive", type: TooltipOnOverflowDirective, selector: "[ocxTooltipOnOverflow]", inputs: ["ocxTooltipOnOverflow"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: DataListGridComponent, selector: "ocx-data-list-grid", inputs: { titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", emptyResultsMessage: "emptyResultsMessage", fallbackImage: "fallbackImage", layout: "layout", viewPermission: "viewPermission", editPermission: "editPermission", deletePermission: "deletePermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", viewMenuItemKey: "viewMenuItemKey", editMenuItemKey: "editMenuItemKey", deleteMenuItemKey: "deleteMenuItemKey", paginator: "paginator", page: "page", columns: "columns", name: "name", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", data: "data", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", listItemTemplate: "listItemTemplate", gridItemTemplate: "gridItemTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", customListValueTemplate: "customListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { viewItem: "viewItem", editItem: "editItem", deleteItem: "deleteItem", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "customListValueChildTemplate", first: true, predicate: ["customListValue"], descendants: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n  <p-dataView\n    *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\n    [value]=\"(displayedItems$ | async) ?? []\"\n    [paginator]=\"paginator\"\n    [first]=\"page * displayedPageSize\"\n    (onPage)=\"onPageChange($event)\"\n    [rows]=\"displayedPageSize\"\n    [layout]=\"layout\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n    [rowsPerPageOptions]=\"(displayedPageSizes$ | async) ?? []\"\n    id=\"dataListGrid_{{name}}\"\n    paginatorDropdownAppendTo=\"body\"\n  >\n    <ng-template #gridItem let-rows pTemplate=\"gridItem\">\n      <div class=\"p-grid p-nogutter grid grid-nogutter\">\n        <ng-template ngFor let-item [ngForOf]=\"rows\">\n          <ng-container\n            [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n            [ngTemplateOutletContext]=\"{$implicit:item}\"\n          ></ng-container>\n        </ng-template>\n      </div>\n    </ng-template>\n\n    <ng-template #listItem let-rows pTemplate=\"listItem\">\n      <div class=\"p-grid p-nogutter grid grid-nogutter\">\n        <ng-template ngFor let-item [ngForOf]=\"rows\">\n          @defer (on viewport; on idle){\n          <ng-container\n            [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n            [ngTemplateOutletContext]=\"{\n              item:item,\n              columnTemplates: columnTemplates\n              }\"\n          ></ng-container>\n          } @placeholder {\n          <div style=\"width: 100%; height: 80px\"></div>\n          }\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"empty\">\n      <span>{{ emptyResultsMessage || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n    </ng-template>\n  </p-dataView>\n</ng-container>\n\n<ng-template #defaultGridItem let-item>\n  <div class=\"col-12 lg:col-6 xl:col-4 flex\">\n    <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n      <div class=\"flex justify-content-center mb-3\">\n        <img\n          class=\"image\"\n          src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n          (error)=\"imgError(item)\"\n          alt=\"{{resolveFieldData(item, titleLineId)|| ''}}\"\n        />\n      </div>\n      <div class=\"flex flex-row justify-content-between align-items-center\">\n        <div class=\"data-grid-items flex-row\">\n          <div class=\"item-name font-medium mr-3 text-2xl\">\n            <a [routerLink]=\"\" (click)=\"onViewRow\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n          </div>\n          <ng-container\n            [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n            [ngTemplateOutletContext]=\"{$implicit:item}\"\n          ></ng-container>\n        </div>\n        <div>\n          <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            (click)=\"setSelectedItem(item); updateGridMenuItems(true); menu.toggle($event)\"\n            icon=\"pi pi-ellipsis-v\"\n            [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n            class=\"more-actions-menu-button menu-btn\"\n            [attr.name]=\"'data-grid-item-menu-button'\"\n            [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n            tooltipPosition=\"top\"\n          ></button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n  <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine edit-time text-xl my-3\">\n    {{ resolveFieldData(item, subtitleLineId) }}\n  </div>\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-columnTemplates=\"columnTemplates\">\n  <div class=\"col-12\" *ngIf=\"columnTemplates\">\n    <div class=\"data-list-items p-3\">\n      <div class=\"item-name-row flex flex-row justify-content-between\">\n        <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n          <span *ngIf=\"titleLineId\">{{ resolveFieldData(item, titleLineId) || '' }}</span>\n        </div>\n        <div class=\"flex flex-row\">\n          <ng-container\n            *ngIf=\"viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))\"\n          >\n            <button\n              type=\"button\"\n              icon=\"pi pi-eye\"\n              pButton\n              class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n              [pTooltip]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n              tooltipPosition=\"top\"\n              [attr.aria-label]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n              (click)=\"onViewRow(item)\"\n              *ocxIfPermission=\"viewPermission\"\n              [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)\"\n              [attr.name]=\"'data-list-action-button'\"\n            ></button>\n          </ng-container>\n          <ng-container\n            *ngIf=\"editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))\"\n          >\n            <button\n              type=\"button\"\n              class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n              icon=\"pi pi-pencil\"\n              pButton\n              [pTooltip]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n              tooltipPosition=\"top\"\n              [attr.aria-label]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n              (click)=\"onEditRow(item)\"\n              *ocxIfPermission=\"editPermission\"\n              [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)\"\n              [attr.name]=\"'data-list-action-button'\"\n            ></button>\n          </ng-container>\n          <ng-container\n            *ngIf=\"deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))\"\n          >\n            <button\n              type=\"button\"\n              icon=\"pi pi-trash\"\n              class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n              pButton\n              [pTooltip]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n              tooltipPosition=\"top\"\n              [attr.aria-label]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n              (click)=\"onDeleteRow(item)\"\n              *ocxIfPermission=\"deletePermission\"\n              [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)\"\n              [attr.name]=\"'data-list-action-button'\"\n            ></button>\n          </ng-container>\n          <ng-container *ngFor=\"let action of inlineListActions$ | async\">\n            <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(item, action.actionVisibleField))\">\n              <button\n                *ocxIfPermission=\"action.permission\"\n                pButton\n                class=\"p-button-rounded p-button-text\"\n                [ngClass]=\"action.classes\"\n                [icon]=\"action.icon || ''\"\n                (click)=\"action.callback(item)\"\n                [pTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n                tooltipPosition=\"top\"\n                [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n                [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n              ></button>\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"hasVisibleOverflowMenuItems(item) | async\">\n            <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n            <button\n              pButton\n              class=\"p-button-rounded p-button-text\"\n              [icon]=\"'pi pi-ellipsis-v'\"\n              (click)=\"toggleOverflowMenu($event, menu, item)\"\n              [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n              [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n              tooltipPosition=\"top\"\n            ></button>\n          </ng-container>\n        </div>\n      </div>\n      <div class=\"text-base font-light my-1\">\n        <ng-container\n          [ngTemplateOutlet]=\"_listItemSubtitleLines ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n          [ngTemplateOutletContext]=\"{$implicit:item}\"\n        ></ng-container>\n      </div>\n      <div class=\"flex flex-wrap\">\n        <div *ngFor=\"let col of getFilteredColumns()\" class=\"w-12rem my-2 mr-2\">\n          <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n            {{ col.nameKey | translate }}\n          </div>\n          <div\n            [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n            tooltipPosition=\"top\"\n          >\n            @defer(on viewport;){\n            <ng-container\n              [ngTemplateOutlet]=\"_listValue ? _listValue: defaultListValue\"\n              [ngTemplateOutletContext]=\"{\n                rowObject: item,\n                column: col,\n                columnTemplates: columnTemplates\n                }\"\n            >\n            </ng-container>\n            } @placeholder {\n            <p-skeleton width=\"5rem\" />\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n  <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine text-xl my-3\">\n    {{ resolveFieldData(item, subtitleLineId) }}\n  </div>\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n  <ng-container\n    *ngIf=\"columnTemplates[column.id]\"\n    [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n    [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n  >\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomListValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{color:var(--primary-text-color);background-color:var(--primary-color);border:var(--button-border);border-radius:var(--border-radius);padding:var(--button-padding);cursor:pointer;min-width:4rem}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.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: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i8.DataView, selector: "p-dataView", inputs: ["paginator", "rows", "totalRecords", "pageLinks", "rowsPerPageOptions", "paginatorPosition", "paginatorStyleClass", "alwaysShowPaginator", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "lazy", "lazyLoadOnInit", "emptyMessage", "style", "styleClass", "gridStyleClass", "trackBy", "filterBy", "filterLocale", "loading", "loadingIcon", "first", "sortField", "sortOrder", "value", "layout"], outputs: ["onLazyLoad", "onPage", "onSort", "onChangeLayout"] }, { kind: "component", type: i9.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: i9$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "directive", type: TooltipOnOverflowDirective, selector: "[ocxTooltipOnOverflow]", inputs: ["ocxTooltipOnOverflow"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i4.NgTemplateOutlet], () => [i4.NgTemplateOutlet]] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DataListGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ocx-data-list-grid', template: "<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n  <p-dataView\n    *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\n    [value]=\"(displayedItems$ | async) ?? []\"\n    [paginator]=\"paginator\"\n    [first]=\"page * displayedPageSize\"\n    (onPage)=\"onPageChange($event)\"\n    [rows]=\"displayedPageSize\"\n    [layout]=\"layout\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n    [rowsPerPageOptions]=\"(displayedPageSizes$ | async) ?? []\"\n    id=\"dataListGrid_{{name}}\"\n    paginatorDropdownAppendTo=\"body\"\n  >\n    <ng-template #gridItem let-rows pTemplate=\"gridItem\">\n      <div class=\"p-grid p-nogutter grid grid-nogutter\">\n        <ng-template ngFor let-item [ngForOf]=\"rows\">\n          <ng-container\n            [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n            [ngTemplateOutletContext]=\"{$implicit:item}\"\n          ></ng-container>\n        </ng-template>\n      </div>\n    </ng-template>\n\n    <ng-template #listItem let-rows pTemplate=\"listItem\">\n      <div class=\"p-grid p-nogutter grid grid-nogutter\">\n        <ng-template ngFor let-item [ngForOf]=\"rows\">\n          <ng-container\n            [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n            [ngTemplateOutletContext]=\"{\n              item:item,\n              columnTemplates: columnTemplates\n              }\"\n          ></ng-container>\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"empty\">\n      <span>{{ emptyResultsMessage || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n    </ng-template>\n  </p-dataView>\n</ng-container>\n\n<ng-template #defaultGridItem let-item>\n  <div class=\"col-12 lg:col-6 xl:col-4 flex\">\n    <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n      <div class=\"flex justify-content-center mb-3\">\n        <img\n          class=\"image\"\n          src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n          (error)=\"imgError(item)\"\n          alt=\"{{resolveFieldData(item, titleLineId)|| ''}}\"\n        />\n      </div>\n      <div class=\"flex flex-row justify-content-between align-items-center\">\n        <div class=\"data-grid-items flex-row\">\n          <div class=\"item-name font-medium mr-3 text-2xl\">\n            <a [routerLink]=\"\" (click)=\"onViewRow\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n          </div>\n          <ng-container\n            [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n            [ngTemplateOutletContext]=\"{$implicit:item}\"\n          ></ng-container>\n        </div>\n        <div>\n          <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            (click)=\"setSelectedItem(item); updateGridMenuItems(true); menu.toggle($event)\"\n            icon=\"pi pi-ellipsis-v\"\n            [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n            class=\"more-actions-menu-button menu-btn\"\n            [attr.name]=\"'data-grid-item-menu-button'\"\n            [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n            tooltipPosition=\"top\"\n          ></button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n  <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine edit-time text-xl my-3\">\n    {{ resolveFieldData(item, subtitleLineId) }}\n  </div>\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-columnTemplates=\"columnTemplates\">\n  <div class=\"col-12\">\n    <div class=\"data-list-items p-3\">\n      <div class=\"item-name-row flex flex-row justify-content-between\">\n        <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n          <span *ngIf=\"titleLineId\">{{ resolveFieldData(item, titleLineId) || '' }}</span>\n        </div>\n        <div class=\"flex flex-row\">\n          <ng-container\n            *ngIf=\"viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))\"\n          >\n            <button\n              type=\"button\"\n              icon=\"pi pi-eye\"\n              pButton\n              class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n              [pTooltip]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n              tooltipPosition=\"top\"\n              [attr.aria-label]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n              (click)=\"onViewRow(item)\"\n              *ocxIfPermission=\"viewPermission\"\n              [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)\"\n              [attr.name]=\"'data-list-action-button'\"\n            ></button>\n          </ng-container>\n          <ng-container\n            *ngIf=\"editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))\"\n          >\n            <button\n              type=\"button\"\n              class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n              icon=\"pi pi-pencil\"\n              pButton\n              [pTooltip]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n              tooltipPosition=\"top\"\n              [attr.aria-label]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n              (click)=\"onEditRow(item)\"\n              *ocxIfPermission=\"editPermission\"\n              [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)\"\n              [attr.name]=\"'data-list-action-button'\"\n            ></button>\n          </ng-container>\n          <ng-container\n            *ngIf=\"deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))\"\n          >\n            <button\n              type=\"button\"\n              icon=\"pi pi-trash\"\n              class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n              pButton\n              [pTooltip]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n              tooltipPosition=\"top\"\n              [attr.aria-label]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n              (click)=\"onDeleteRow(item)\"\n              *ocxIfPermission=\"deletePermission\"\n              [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)\"\n              [attr.name]=\"'data-list-action-button'\"\n            ></button>\n          </ng-container>\n          <ng-container *ngFor=\"let action of inlineListActions$ | async\">\n            <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(item, action.actionVisibleField))\">\n              <button\n                *ocxIfPermission=\"action.permission\"\n                pButton\n                class=\"p-button-rounded p-button-text\"\n                [ngClass]=\"action.classes\"\n                [icon]=\"action.icon || ''\"\n                (click)=\"action.callback(item)\"\n                [pTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n                tooltipPosition=\"top\"\n                [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n                [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n              ></button>\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"hasVisibleOverflowMenuItems(item) | async\">\n            <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n            <button\n              pButton\n              class=\"p-button-rounded p-button-text\"\n              [icon]=\"'pi pi-ellipsis-v'\"\n              (click)=\"toggleOverflowMenu($event, menu, item)\"\n              [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n              [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n              tooltipPosition=\"top\"\n            ></button>\n          </ng-container>\n        </div>\n      </div>\n      <div class=\"text-base font-light my-1\">\n        <ng-container\n          [ngTemplateOutlet]=\"_listItemSubtitleLines ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n          [ngTemplateOutletContext]=\"{$implicit:item}\"\n        ></ng-container>\n      </div>\n      <div class=\"flex flex-wrap\">\n        <div *ngFor=\"let col of getFilteredColumns()\" class=\"w-12rem my-2 mr-2\">\n          <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n            {{ col.nameKey | translate }}\n          </div>\n          <div\n            [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n            tooltipPosition=\"top\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"\n            _listValue ? _listValue: defaultListValue\n            \"\n              [ngTemplateOutletContext]=\"{\n                rowObject: item,\n                column: col,\n                columnTemplates: columnTemplates\n            }\"\n            ></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n  <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine text-xl my-3\">\n    {{ resolveFieldData(item, subtitleLineId) }}\n  </div>\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n  <ng-container\n    [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n    [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n  >\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomListValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{color:var(--primary-text-color);background-color:var(--primary-color);border:var(--button-border);border-radius:var(--border-radius);padding:var(--button-padding);cursor:pointer;min-width:4rem}\n"] }]
+            args: [{ selector: 'ocx-data-list-grid', template: "<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n  <p-dataView\n    *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\n    [value]=\"(displayedItems$ | async) ?? []\"\n    [paginator]=\"paginator\"\n    [first]=\"page * displayedPageSize\"\n    (onPage)=\"onPageChange($event)\"\n    [rows]=\"displayedPageSize\"\n    [layout]=\"layout\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n    [rowsPerPageOptions]=\"(displayedPageSizes$ | async) ?? []\"\n    id=\"dataListGrid_{{name}}\"\n    paginatorDropdownAppendTo=\"body\"\n  >\n    <ng-template #gridItem let-rows pTemplate=\"gridItem\">\n      <div class=\"p-grid p-nogutter grid grid-nogutter\">\n        <ng-template ngFor let-item [ngForOf]=\"rows\">\n          <ng-container\n            [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n            [ngTemplateOutletContext]=\"{$implicit:item}\"\n          ></ng-container>\n        </ng-template>\n      </div>\n    </ng-template>\n\n    <ng-template #listItem let-rows pTemplate=\"listItem\">\n      <div class=\"p-grid p-nogutter grid grid-nogutter\">\n        <ng-template ngFor let-item [ngForOf]=\"rows\">\n          @defer (on viewport; on idle){\n          <ng-container\n            [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n            [ngTemplateOutletContext]=\"{\n              item:item,\n              columnTemplates: columnTemplates\n              }\"\n          ></ng-container>\n          } @placeholder {\n          <div style=\"width: 100%; height: 80px\"></div>\n          }\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"empty\">\n      <span>{{ emptyResultsMessage || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n    </ng-template>\n  </p-dataView>\n</ng-container>\n\n<ng-template #defaultGridItem let-item>\n  <div class=\"col-12 lg:col-6 xl:col-4 flex\">\n    <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n      <div class=\"flex justify-content-center mb-3\">\n        <img\n          class=\"image\"\n          src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n          (error)=\"imgError(item)\"\n          alt=\"{{resolveFieldData(item, titleLineId)|| ''}}\"\n        />\n      </div>\n      <div class=\"flex flex-row justify-content-between align-items-center\">\n        <div class=\"data-grid-items flex-row\">\n          <div class=\"item-name font-medium mr-3 text-2xl\">\n            <a [routerLink]=\"\" (click)=\"onViewRow\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n          </div>\n          <ng-container\n            [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n            [ngTemplateOutletContext]=\"{$implicit:item}\"\n          ></ng-container>\n        </div>\n        <div>\n          <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            (click)=\"setSelectedItem(item); updateGridMenuItems(true); menu.toggle($event)\"\n            icon=\"pi pi-ellipsis-v\"\n            [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n            class=\"more-actions-menu-button menu-btn\"\n            [attr.name]=\"'data-grid-item-menu-button'\"\n            [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n            tooltipPosition=\"top\"\n          ></button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n  <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine edit-time text-xl my-3\">\n    {{ resolveFieldData(item, subtitleLineId) }}\n  </div>\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-columnTemplates=\"columnTemplates\">\n  <div class=\"col-12\" *ngIf=\"columnTemplates\">\n    <div class=\"data-list-items p-3\">\n      <div class=\"item-name-row flex flex-row justify-content-between\">\n        <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n          <span *ngIf=\"titleLineId\">{{ resolveFieldData(item, titleLineId) || '' }}</span>\n        </div>\n        <div class=\"flex flex-row\">\n          <ng-container\n            *ngIf=\"viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))\"\n          >\n            <button\n              type=\"button\"\n              icon=\"pi pi-eye\"\n              pButton\n              class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n              [pTooltip]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n              tooltipPosition=\"top\"\n              [attr.aria-label]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n              (click)=\"onViewRow(item)\"\n              *ocxIfPermission=\"viewPermission\"\n              [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)\"\n              [attr.name]=\"'data-list-action-button'\"\n            ></button>\n          </ng-container>\n          <ng-container\n            *ngIf=\"editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))\"\n          >\n            <button\n              type=\"button\"\n              class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n              icon=\"pi pi-pencil\"\n              pButton\n              [pTooltip]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n              tooltipPosition=\"top\"\n              [attr.aria-label]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n              (click)=\"onEditRow(item)\"\n              *ocxIfPermission=\"editPermission\"\n              [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)\"\n              [attr.name]=\"'data-list-action-button'\"\n            ></button>\n          </ng-container>\n          <ng-container\n            *ngIf=\"deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))\"\n          >\n            <button\n              type=\"button\"\n              icon=\"pi pi-trash\"\n              class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n              pButton\n              [pTooltip]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n              tooltipPosition=\"top\"\n              [attr.aria-label]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n              (click)=\"onDeleteRow(item)\"\n              *ocxIfPermission=\"deletePermission\"\n              [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)\"\n              [attr.name]=\"'data-list-action-button'\"\n            ></button>\n          </ng-container>\n          <ng-container *ngFor=\"let action of inlineListActions$ | async\">\n            <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(item, action.actionVisibleField))\">\n              <button\n                *ocxIfPermission=\"action.permission\"\n                pButton\n                class=\"p-button-rounded p-button-text\"\n                [ngClass]=\"action.classes\"\n                [icon]=\"action.icon || ''\"\n                (click)=\"action.callback(item)\"\n                [pTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n                tooltipPosition=\"top\"\n                [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n                [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n              ></button>\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"hasVisibleOverflowMenuItems(item) | async\">\n            <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n            <button\n              pButton\n              class=\"p-button-rounded p-button-text\"\n              [icon]=\"'pi pi-ellipsis-v'\"\n              (click)=\"toggleOverflowMenu($event, menu, item)\"\n              [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n              [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n              tooltipPosition=\"top\"\n            ></button>\n          </ng-container>\n        </div>\n      </div>\n      <div class=\"text-base font-light my-1\">\n        <ng-container\n          [ngTemplateOutlet]=\"_listItemSubtitleLines ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n          [ngTemplateOutletContext]=\"{$implicit:item}\"\n        ></ng-container>\n      </div>\n      <div class=\"flex flex-wrap\">\n        <div *ngFor=\"let col of getFilteredColumns()\" class=\"w-12rem my-2 mr-2\">\n          <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n            {{ col.nameKey | translate }}\n          </div>\n          <div\n            [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n            tooltipPosition=\"top\"\n          >\n            @defer(on viewport;){\n            <ng-container\n              [ngTemplateOutlet]=\"_listValue ? _listValue: defaultListValue\"\n              [ngTemplateOutletContext]=\"{\n                rowObject: item,\n                column: col,\n                columnTemplates: columnTemplates\n                }\"\n            >\n            </ng-container>\n            } @placeholder {\n            <p-skeleton width=\"5rem\" />\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n  <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine text-xl my-3\">\n    {{ resolveFieldData(item, subtitleLineId) }}\n  </div>\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n  <ng-container\n    *ngIf=\"columnTemplates[column.id]\"\n    [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n    [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n  >\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomListValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{color:var(--primary-text-color);background-color:var(--primary-color);border:var(--button-border);border-radius:var(--border-radius);padding:var(--button-padding);cursor:pointer;min-width:4rem}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -2267,7 +2267,9 @@ class DataTableComponent extends DataSortBase {
     set columns(value) {
         this._columns$.next(value);
         const obs = value.map((c) => this.getTemplate(c, TemplateType.CELL));
-        this.columnTemplates$ = combineLatest(obs).pipe(map((values) => Object.fromEntries(value.map((c, i) => [c.id, values[i]]))));
+        const filterObs = value.map((c) => this.getTemplate(c, TemplateType.FILTERCELL));
+        this.columnTemplates$ = combineLatest(obs).pipe(map((values) => Object.fromEntries(value.map((c, i) => [c.id, values[i]]))), debounceTime(50));
+        this.columnFilterTemplates$ = combineLatest(filterObs).pipe(map((values) => Object.fromEntries(value.map((c, i) => [c.id, values[i]]))));
     }
     get pageSizes() {
         return this._pageSizes$.getValue();
@@ -2438,18 +2440,44 @@ class DataTableComponent extends DataSortBase {
         };
         this.filterTemplatesData = {
             templatesObservables: {},
-            idSuffix: ['IdTableFilterCell', 'IdFilterCell'],
+            idSuffix: ['IdTableFilterCell', 'IdFilterCell', 'IdTableCell', 'IdCell'],
             templateNames: {
-                [ColumnType.DATE]: ['dateFilterCell', 'dateTableFilterCell', 'defaultDateCell'],
-                [ColumnType.NUMBER]: ['numberFilterCell', 'numberTableFilterCell', 'defaultNumberCell'],
-                [ColumnType.RELATIVE_DATE]: ['relativeDateFilterCell', 'relativeDateTableFilterCell', 'defaultRelativeDateCell'],
+                [ColumnType.DATE]: ['dateFilterCell', 'dateTableFilterCell', 'dateCell', 'dateTableCell', 'defaultDateCell'],
+                [ColumnType.NUMBER]: [
+                    'numberFilterCell',
+                    'numberTableFilterCell',
+                    'numberCell',
+                    'numberTableCell',
+                    'defaultNumberCell',
+                ],
+                [ColumnType.RELATIVE_DATE]: [
+                    'relativeDateFilterCell',
+                    'relativeDateTableFilterCell',
+                    'relativeDateCell',
+                    'relativeDateTableCell',
+                    'defaultRelativeDateCell',
+                ],
                 [ColumnType.TRANSLATION_KEY]: [
                     'translationKeyFilterCell',
                     'translationKeyTableFilterCell',
                     'defaultTranslationKeyCell',
+                    'translationKeyCell',
+                    'translationKeyTableCell',
+                ],
+                [ColumnType.CUSTOM]: [
+                    'customFilterCell',
+                    'customTableFilterCell',
+                    'customCell',
+                    'customTableCell',
+                    'defaultCustomCell',
+                ],
+                [ColumnType.STRING]: [
+                    'stringFilterCell',
+                    'stringTableFilterCell',
+                    'stringCell',
+                    'stringTableCell',
+                    'defaultStringCell',
                 ],
-                [ColumnType.CUSTOM]: ['customFilterCell', 'customTableFilterCell', 'defaultCustomCell'],
-                [ColumnType.STRING]: ['stringFilterCell', 'stringTableFilterCell', 'defaultStringCell'],
             },
         };
         this.templatesDataMap = {
@@ -2473,6 +2501,7 @@ class DataTableComponent extends DataSortBase {
                 command: () => a.callback(row),
             }));
         }))));
+        this.rowSelectable = this.rowSelectable.bind(this);
     }
     ngOnInit() {
         this.displayedRows$ = combineLatest([this._rows$, this._filters$, this._sortColumn$, this._sortDirection$]).pipe(mergeMap((params) => this.translateItems(params, this.columns, this.clientSideFiltering, this.clientSideSorting)), map((params) => this.filterItems(params, this.clientSideFiltering)), map((params) => this.sortItems(params, this.columns, this.clientSideSorting)), map(([rows]) => this.flattenItems(rows)));
@@ -2489,7 +2518,7 @@ class DataTableComponent extends DataSortBase {
         }));
         this.currentEqualFilterOptions$ = combineLatest([this._rows$, this.currentFilterColumn$, this._filters$]).pipe(filter(([_, currentFilterColumn, __]) => !currentFilterColumn?.filterType || currentFilterColumn.filterType === FilterType.EQUAL), mergeMap(([rows, currentFilterColumn, filters]) => {
             if (!currentFilterColumn?.id) {
-                return of([]);
+                return of({ options: [], column: undefined });
             }
             const currentFilters = filters
                 .filter((filter) => filter.columnId === currentFilterColumn?.id &&
@@ -2507,6 +2536,11 @@ class DataTableComponent extends DataSortBase {
                     label: filterOption,
                     value: filterOption,
                 }));
+            }), map((options) => {
+                return {
+                    options: options,
+                    column: currentFilterColumn,
+                };
             }));
         }));
         this.filterAmounts$ = this._filters$.pipe(map((filters) => filters
@@ -2654,6 +2688,12 @@ class DataTableComponent extends DataSortBase {
             });
         }));
     }
+    isRowSelectionDisabled(rowObject) {
+        return !!this.selectionEnabledField && !this.fieldIsTruthy(rowObject, this.selectionEnabledField);
+    }
+    rowSelectable(event) {
+        return !this.isRowSelectionDisabled(event.data);
+    }
     onSelectionChange(selection) {
         let newSelectionIds = selection.map((row) => row.id);
         const rows = this._rows$.getValue();
@@ -2786,7 +2826,7 @@ class DataTableComponent extends DataSortBase {
                     return columnTemplate;
                 }
                 return this.getColumnTypeTemplate(templates, column.columnType, templateType);
-            }), debounceTime(50));
+            }));
         }
         return templatesData.templatesObservables[column.id];
     }
@@ -2799,11 +2839,11 @@ class DataTableComponent extends DataSortBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DataTableComponent, deps: [{ token: LOCALE_ID }, { token: i1$2.TranslateService }, { token: i1$1.Router }, { token: i0.Injector }, { token: i3.UserService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: DataTableComponent, selector: "ocx-data-table", inputs: { rows: "rows", selectedRows: "selectedRows", filters: "filters", sortDirection: "sortDirection", sortColumn: "sortColumn", columns: "columns", clientSideFiltering: "clientSideFiltering", clientSideSorting: "clientSideSorting", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", emptyResultsMessage: "emptyResultsMessage", name: "name", deletePermission: "deletePermission", viewPermission: "viewPermission", editPermission: "editPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", selectionEnabledField: "selectionEnabledField", allowSelectAll: "allowSelectAll", paginator: "paginator", page: "page", tableStyle: "tableStyle", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", stringCellTemplate: "stringCellTemplate", numberCellTemplate: "numberCellTemplate", customCellTemplate: "customCellTemplate", dateCellTemplate: "dateCellTemplate", relativeDateCellTemplate: "relativeDateCellTemplate", cellTemplate: "cellTemplate", translationKeyCellTemplate: "translationKeyCellTemplate", stringFilterCellTemplate: "stringFilterCellTemplate", numberFilterCellTemplate: "numberFilterCellTemplate", customFilterCellTemplate: "customFilterCellTemplate", dateFilterCellTemplate: "dateFilterCellTemplate", relativeDateFilterCellTemplate: "relativeDateFilterCellTemplate", filterCellTemplate: "filterCellTemplate", translationKeyFilterCellTemplate: "translationKeyFilterCellTemplate", additionalActions: "additionalActions", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "stringCellChildTemplate", first: true, predicate: ["stringCell"], descendants: true }, { propertyName: "numberCellChildTemplate", first: true, predicate: ["numberCell"], descendants: true }, { propertyName: "customCellChildTemplate", first: true, predicate: ["customCell"], descendants: true }, { propertyName: "dateCellChildTemplate", first: true, predicate: ["dateCell"], descendants: true }, { propertyName: "relativeDateCellChildTemplate", first: true, predicate: ["relativeDateCell"], descendants: true }, { propertyName: "cellChildTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "translationKeyCellChildTemplate", first: true, predicate: ["translationKeyCell"], descendants: true }, { propertyName: "stringFilterCellChildTemplate", first: true, predicate: ["stringFilterCell"], descendants: true }, { propertyName: "numberFilterCellChildTemplate", first: true, predicate: ["numberFilterCell"], descendants: true }, { propertyName: "customFilterCellChildTemplate", first: true, predicate: ["customFilterCell"], descendants: true }, { propertyName: "dateFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateFilterCellChildTemplate", first: true, predicate: ["relativeDateFilterCell"], descendants: true }, { propertyName: "filterCellChildTemplate", first: true, predicate: ["filterCell"], descendants: true }, { propertyName: "translationKeyFilterCellChildTemplate", first: true, predicate: ["translationKeyFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <td\n      class=\"actions\"\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-left' : 'action-column-right'\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n    >\n      <div class=\"icon-button-row-wrapper\">\n        <ng-container\n          *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\"\n        >\n          <button\n            *ocxIfPermission=\"viewPermission\"\n            [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(rowObject, viewActionEnabledField)\"\n            pButton\n            class=\"p-button-rounded p-button-text viewTableRowButton\"\n            title=\"{{ 'OCX_DATA_TABLE.ACTIONS.VIEW' | translate }}\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n            icon=\"pi pi-eye\"\n            (click)=\"onViewRow(rowObject)\"\n            [attr.name]=\"'data-table-action-button'\"\n          ></button>\n        </ng-container>\n        <ng-container\n          *ngIf=\"editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))\"\n        >\n          <button\n            *ocxIfPermission=\"editPermission\"\n            [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(rowObject, editActionEnabledField)\"\n            pButton\n            class=\"p-button-rounded p-button-text editTableRowButton\"\n            title=\"{{ 'OCX_DATA_TABLE.ACTIONS.EDIT' | translate }}\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n            icon=\"pi pi-pencil\"\n            (click)=\"onEditRow(rowObject)\"\n            [attr.name]=\"'data-table-action-button'\"\n          ></button>\n        </ng-container>\n        <ng-container\n          *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\"\n        >\n          <button\n            *ocxIfPermission=\"deletePermission\"\n            [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(rowObject, deleteActionEnabledField)\"\n            pButton\n            class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n            title=\"{{ 'OCX_DATA_TABLE.ACTIONS.DELETE' | translate }}\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n            icon=\"pi pi-trash\"\n            (click)=\"onDeleteRow(rowObject)\"\n            [attr.name]=\"'data-table-action-button'\"\n          ></button>\n        </ng-container>\n        <ng-container *ngFor=\"let action of inlineActions$ | async\">\n          <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\">\n            <button\n              *ocxIfPermission=\"action.permission\"\n              pButton\n              class=\"p-button-rounded p-button-text\"\n              [ngClass]=\"action.classes\"\n              [icon]=\"action.icon || ''\"\n              (click)=\"action.callback(rowObject)\"\n              [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n              [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n              [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\"\n            ></button>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"hasVisibleOverflowMenuItems(rowObject) | async\">\n          <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            class=\"p-button-rounded p-button-text\"\n            [icon]=\"'pi pi-ellipsis-v'\"\n            (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n            [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n          ></button>\n        </ng-container>\n      </div>\n    </td>\n  </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0  || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <th\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    >\n      {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n    </th>\n  </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n  <p-table\n    *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\n    [value]=\"(displayedRows$ | async) ?? []\"\n    responsiveLayout=\"scroll\"\n    [paginator]=\"paginator\"\n    [first]=\"page * displayedPageSize\"\n    (onPage)=\"onPageChange($event)\"\n    [rows]=\"displayedPageSize\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n    [rowsPerPageOptions]=\"(displayedPageSizes$ | async) ?? []\"\n    id=\"dataTable_{{name}}\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [selection]=\"(selectedRows$ | async) ?? []\"\n    [scrollable]=\"true\"\n    scrollHeight=\"flex\"\n    [style]=\"tableStyle\"\n    paginatorDropdownAppendTo=\"body\"\n    tableStyleClass=\"h-full\"\n  >\n    <ng-template pTemplate=\"header\">\n      <tr style=\"vertical-align: top\">\n        <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n          <p-tableHeaderCheckbox\n            *ngIf=\"allowSelectAll\"\n            ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n          ></p-tableHeaderCheckbox>\n        </th>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n        <ng-container *ngFor=\"let column of columns\">\n          <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n            <div\n              class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n              style=\"height: 100%\"\n            >\n              <span class=\"flex\" id=\"{{column.id}}-header-name\">{{ column.nameKey | translate }}</span>\n              <span class=\"flex icon-button-header-wrapper\">\n                <button\n                  *ngIf=\"column.sortable\"\n                  class=\"pi sortButton pl-0\"\n                  [class.pi-sort-alt]=\"(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn\"\n                  [class.pi-sort-amount-up]=\"column?.id === sortColumn && sortDirection === 'ASCENDING'\"\n                  [class.pi-sort-amount-down]=\"column?.id === sortColumn && sortDirection === 'DESCENDING'\"\n                  (click)=\"onSortColumnClick(column.id)\"\n                  [title]=\"(sortIconTitle(column.id) | translate)\"\n                  [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n                ></button>\n                <p-multiSelect\n                  class=\"filterMultiSelect\"\n                  *ngIf=\"column.filterable && (!column.filterType || column.filterType === FilterType.EQUAL)\"\n                  [options]=\"(currentEqualFilterOptions$ | async) || []\"\n                  [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\n                  [showToggleAll]=\"true\"\n                  emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n                  [displaySelectedLabel]=\"false\"\n                  [resetFilterOnHide]=\"true\"\n                  (onChange)=\"onMultiselectFilterChange(column, $event)\"\n                  placeholder=\"Icon\"\n                  appendTo=\"body\"\n                  (onFocus)=\"onFilterChosen(column)\"\n                  [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n                  [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n                  [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n                >\n                  <ng-template pTemplate=\"selectedItems\" let-value>\n                    <div\n                      class=\"pi\"\n                      [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                      [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                    ></div>\n                  </ng-template>\n                  <ng-template pTemplate=\"item\" let-value>\n                    <ng-container\n                      *ngIf=\"columnTemplates[column.id] as template\"\n                      [ngTemplateOutlet]=\"template\"\n                      [ngTemplateOutletContext]=\"{\n                      rowObject: getRowObjectFromMultiselectItem(value, column),\n                      column: column\n                  }\"\n                    >\n                    </ng-container>\n                  </ng-template>\n                </p-multiSelect>\n                <p-multiSelect\n                  class=\"filterMultiSelect\"\n                  *ngIf=\"column.filterable && column.filterType === FilterType.TRUTHY\"\n                  [options]=\"truthyFilterOptions\"\n                  [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\n                  [showToggleAll]=\"true\"\n                  emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n                  [displaySelectedLabel]=\"false\"\n                  [resetFilterOnHide]=\"true\"\n                  (onChange)=\"onMultiselectFilterChange(column, $event)\"\n                  placeholder=\"Icon\"\n                  appendTo=\"body\"\n                  (onFocus)=\"onFilterChosen(column)\"\n                  [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n                  [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n                  [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n                >\n                  <ng-template pTemplate=\"selectedItems\" let-value>\n                    <div\n                      class=\"pi\"\n                      [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                      [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                    ></div>\n                  </ng-template>\n                  <ng-template pTemplate=\"item\" let-value> {{value.key | translate}} </ng-template>\n                </p-multiSelect>\n              </span>\n            </div>\n          </th>\n          <ng-template #simpleHeader>\n            <th scope=\"col\">{{ column.nameKey | translate }}</th>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-rowObject>\n      <tr>\n        <td *ngIf=\"selectionChangedObserved\">\n          <p-checkbox\n            *ngIf=\"(!!selectionEnabledField && !fieldIsTruthy(rowObject, selectionEnabledField)) && isSelected(rowObject); else defaultCheckbox\"\n            [(ngModel)]=\"checked\"\n            [binary]=\"true\"\n            [disabled]=\"true\"\n            [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n          ></p-checkbox>\n          <ng-template #defaultCheckbox>\n            <p-tableCheckbox\n              [value]=\"rowObject\"\n              [disabled]=\"!!selectionEnabledField && !fieldIsTruthy(rowObject, selectionEnabledField)\"\n              [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n            ></p-tableCheckbox>\n          </ng-template>\n        </td>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n        </ng-container>\n        <td *ngFor=\"let column of columns\">\n          <ng-container\n            [ngTemplateOutlet]=\"\n              _cell ? _cell: columnTemplates[column.id]\n              \"\n            [ngTemplateOutletContext]=\"{\n                  rowObject: rowObject,\n                  column: column,\n              }\"\n          ></ng-container>\n        </td>\n        <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n          <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\n          {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</ng-container>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomCell\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$1.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i8$1.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: i8$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i8$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i8$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i9.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: i10.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: DataTableComponent, selector: "ocx-data-table", inputs: { rows: "rows", selectedRows: "selectedRows", filters: "filters", sortDirection: "sortDirection", sortColumn: "sortColumn", columns: "columns", clientSideFiltering: "clientSideFiltering", clientSideSorting: "clientSideSorting", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", emptyResultsMessage: "emptyResultsMessage", name: "name", deletePermission: "deletePermission", viewPermission: "viewPermission", editPermission: "editPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", selectionEnabledField: "selectionEnabledField", allowSelectAll: "allowSelectAll", paginator: "paginator", page: "page", tableStyle: "tableStyle", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", stringCellTemplate: "stringCellTemplate", numberCellTemplate: "numberCellTemplate", customCellTemplate: "customCellTemplate", dateCellTemplate: "dateCellTemplate", relativeDateCellTemplate: "relativeDateCellTemplate", cellTemplate: "cellTemplate", translationKeyCellTemplate: "translationKeyCellTemplate", stringFilterCellTemplate: "stringFilterCellTemplate", numberFilterCellTemplate: "numberFilterCellTemplate", customFilterCellTemplate: "customFilterCellTemplate", dateFilterCellTemplate: "dateFilterCellTemplate", relativeDateFilterCellTemplate: "relativeDateFilterCellTemplate", filterCellTemplate: "filterCellTemplate", translationKeyFilterCellTemplate: "translationKeyFilterCellTemplate", additionalActions: "additionalActions", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "stringCellChildTemplate", first: true, predicate: ["stringCell"], descendants: true }, { propertyName: "numberCellChildTemplate", first: true, predicate: ["numberCell"], descendants: true }, { propertyName: "customCellChildTemplate", first: true, predicate: ["customCell"], descendants: true }, { propertyName: "dateCellChildTemplate", first: true, predicate: ["dateCell"], descendants: true }, { propertyName: "relativeDateCellChildTemplate", first: true, predicate: ["relativeDateCell"], descendants: true }, { propertyName: "cellChildTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "translationKeyCellChildTemplate", first: true, predicate: ["translationKeyCell"], descendants: true }, { propertyName: "stringFilterCellChildTemplate", first: true, predicate: ["stringFilterCell"], descendants: true }, { propertyName: "numberFilterCellChildTemplate", first: true, predicate: ["numberFilterCell"], descendants: true }, { propertyName: "customFilterCellChildTemplate", first: true, predicate: ["customFilterCell"], descendants: true }, { propertyName: "dateFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateFilterCellChildTemplate", first: true, predicate: ["relativeDateFilterCell"], descendants: true }, { propertyName: "filterCellChildTemplate", first: true, predicate: ["filterCell"], descendants: true }, { propertyName: "translationKeyFilterCellChildTemplate", first: true, predicate: ["translationKeyFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <td\n      class=\"actions\"\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-left' : 'action-column-right'\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n    >\n      <div class=\"icon-button-row-wrapper\">\n        <ng-container\n          *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\"\n        >\n          <button\n            *ocxIfPermission=\"viewPermission\"\n            [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(rowObject, viewActionEnabledField)\"\n            pButton\n            class=\"p-button-rounded p-button-text viewTableRowButton\"\n            title=\"{{ 'OCX_DATA_TABLE.ACTIONS.VIEW' | translate }}\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n            icon=\"pi pi-eye\"\n            (click)=\"onViewRow(rowObject)\"\n            [attr.name]=\"'data-table-action-button'\"\n          ></button>\n        </ng-container>\n        <ng-container\n          *ngIf=\"editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))\"\n        >\n          <button\n            *ocxIfPermission=\"editPermission\"\n            [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(rowObject, editActionEnabledField)\"\n            pButton\n            class=\"p-button-rounded p-button-text editTableRowButton\"\n            title=\"{{ 'OCX_DATA_TABLE.ACTIONS.EDIT' | translate }}\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n            icon=\"pi pi-pencil\"\n            (click)=\"onEditRow(rowObject)\"\n            [attr.name]=\"'data-table-action-button'\"\n          ></button>\n        </ng-container>\n        <ng-container\n          *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\"\n        >\n          <button\n            *ocxIfPermission=\"deletePermission\"\n            [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(rowObject, deleteActionEnabledField)\"\n            pButton\n            class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n            title=\"{{ 'OCX_DATA_TABLE.ACTIONS.DELETE' | translate }}\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n            icon=\"pi pi-trash\"\n            (click)=\"onDeleteRow(rowObject)\"\n            [attr.name]=\"'data-table-action-button'\"\n          ></button>\n        </ng-container>\n        <ng-container *ngFor=\"let action of inlineActions$ | async\">\n          <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\">\n            <button\n              *ocxIfPermission=\"action.permission\"\n              pButton\n              class=\"p-button-rounded p-button-text\"\n              [ngClass]=\"action.classes\"\n              [icon]=\"action.icon || ''\"\n              (click)=\"action.callback(rowObject)\"\n              [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n              [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n              [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\"\n            ></button>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"hasVisibleOverflowMenuItems(rowObject) | async\">\n          <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            class=\"p-button-rounded p-button-text\"\n            [icon]=\"'pi pi-ellipsis-v'\"\n            (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n            [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n          ></button>\n        </ng-container>\n      </div>\n    </td>\n  </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0  || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <th\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    >\n      {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n    </th>\n  </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n  <p-table\n    *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\n    [value]=\"(displayedRows$ | async) ?? []\"\n    responsiveLayout=\"scroll\"\n    [paginator]=\"paginator\"\n    [first]=\"page * displayedPageSize\"\n    (onPage)=\"onPageChange($event)\"\n    [rows]=\"displayedPageSize\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n    [rowsPerPageOptions]=\"(displayedPageSizes$ | async) ?? []\"\n    id=\"dataTable_{{name}}\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [selection]=\"(selectedRows$ | async) ?? []\"\n    [scrollable]=\"true\"\n    scrollHeight=\"flex\"\n    [style]=\"tableStyle\"\n    paginatorDropdownAppendTo=\"body\"\n    [rowSelectable]=\"rowSelectable\"\n    tableStyleClass=\"h-full\"\n  >\n    <ng-template pTemplate=\"header\">\n      <tr style=\"vertical-align: top\">\n        <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n          <p-tableHeaderCheckbox\n            *ngIf=\"allowSelectAll\"\n            ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n          ></p-tableHeaderCheckbox>\n        </th>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n        <ng-container *ngFor=\"let column of columns\">\n          <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n            <div\n              class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n              style=\"height: 100%\"\n            >\n              <span class=\"flex\" id=\"{{column.id}}-header-name\">{{ column.nameKey | translate }}</span>\n              <span class=\"flex icon-button-header-wrapper\">\n                <button\n                  *ngIf=\"column.sortable\"\n                  class=\"pi sortButton pl-0\"\n                  [class.pi-sort-alt]=\"(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn\"\n                  [class.pi-sort-amount-up]=\"column?.id === sortColumn && sortDirection === 'ASCENDING'\"\n                  [class.pi-sort-amount-down]=\"column?.id === sortColumn && sortDirection === 'DESCENDING'\"\n                  (click)=\"onSortColumnClick(column.id)\"\n                  [title]=\"(sortIconTitle(column.id) | translate)\"\n                  [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n                ></button>\n                <ng-container *ngIf=\"currentEqualFilterOptions$ | async as equalFilterOptions\">\n                  <ng-container *ngIf=\"columnFilterTemplates$ | async as columnFilterTemplates\">\n                    <p-multiSelect\n                      class=\"filterMultiSelect\"\n                      *ngIf=\"column.filterable && (!column.filterType || column.filterType === FilterType.EQUAL)\"\n                      [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n                      [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\n                      [showToggleAll]=\"true\"\n                      emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n                      [displaySelectedLabel]=\"false\"\n                      [resetFilterOnHide]=\"true\"\n                      (onChange)=\"onMultiselectFilterChange(column, $event)\"\n                      placeholder=\"Icon\"\n                      appendTo=\"body\"\n                      (onFocus)=\"onFilterChosen(column)\"\n                      [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n                      [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n                      [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n                    >\n                      <ng-template pTemplate=\"selectedItems\" let-value>\n                        <div\n                          class=\"pi\"\n                          [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                          [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                        ></div>\n                      </ng-template>\n                      <ng-template pTemplate=\"item\" let-value>\n                        <ng-container\n                          *ngIf=\"columnFilterTemplates[column.id] as template\"\n                          [ngTemplateOutlet]=\"template\"\n                          [ngTemplateOutletContext]=\"{\n                      rowObject: getRowObjectFromMultiselectItem(value, column),\n                      column: column\n                  }\"\n                        >\n                        </ng-container>\n                      </ng-template>\n                    </p-multiSelect>\n                  </ng-container>\n                </ng-container>\n                <p-multiSelect\n                  class=\"filterMultiSelect\"\n                  *ngIf=\"column.filterable && column.filterType === FilterType.TRUTHY\"\n                  [options]=\"truthyFilterOptions\"\n                  [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\n                  [showToggleAll]=\"true\"\n                  emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n                  [displaySelectedLabel]=\"false\"\n                  [resetFilterOnHide]=\"true\"\n                  (onChange)=\"onMultiselectFilterChange(column, $event)\"\n                  placeholder=\"Icon\"\n                  appendTo=\"body\"\n                  (onFocus)=\"onFilterChosen(column)\"\n                  [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n                  [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n                  [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n                >\n                  <ng-template pTemplate=\"selectedItems\" let-value>\n                    <div\n                      class=\"pi\"\n                      [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                      [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                    ></div>\n                  </ng-template>\n                  <ng-template pTemplate=\"item\" let-value> {{value.key | translate}} </ng-template>\n                </p-multiSelect>\n              </span>\n            </div>\n          </th>\n          <ng-template #simpleHeader>\n            <th scope=\"col\">{{ column.nameKey | translate }}</th>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-rowObject>\n      <tr *ngIf=\"columnTemplates\">\n        <td *ngIf=\"selectionChangedObserved\">\n          <p-checkbox\n            *ngIf=\"isRowSelectionDisabled(rowObject) && isSelected(rowObject); else defaultCheckbox\"\n            [(ngModel)]=\"checked\"\n            [binary]=\"true\"\n            [disabled]=\"true\"\n            [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n          ></p-checkbox>\n          <ng-template #defaultCheckbox>\n            <p-tableCheckbox\n              [value]=\"rowObject\"\n              [disabled]=\"isRowSelectionDisabled(rowObject)\"\n              [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n            ></p-tableCheckbox>\n          </ng-template>\n        </td>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n        </ng-container>\n        <td *ngFor=\"let column of columns\">\n          @defer(on viewport){\n          <ng-container\n            *ngIf=\"columnTemplates[column.id]\"\n            [ngTemplateOutlet]=\"\n                _cell ? _cell: columnTemplates[column.id]\n              \"\n            [ngTemplateOutletContext]=\"{\n                  rowObject: rowObject,\n                  column: column,\n              }\"\n          >\n          </ng-container>\n          } @placeholder {\n          <p-skeleton width=\"3rem\" />\n          }\n        </td>\n        <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n          <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\n          {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</ng-container>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomCell\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$1.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i8$1.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: i8$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i8$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i8$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i9.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: i10.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i4.NgIf, i4.NgTemplateOutlet]] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <td\n      class=\"actions\"\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-left' : 'action-column-right'\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n    >\n      <div class=\"icon-button-row-wrapper\">\n        <ng-container\n          *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\"\n        >\n          <button\n            *ocxIfPermission=\"viewPermission\"\n            [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(rowObject, viewActionEnabledField)\"\n            pButton\n            class=\"p-button-rounded p-button-text viewTableRowButton\"\n            title=\"{{ 'OCX_DATA_TABLE.ACTIONS.VIEW' | translate }}\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n            icon=\"pi pi-eye\"\n            (click)=\"onViewRow(rowObject)\"\n            [attr.name]=\"'data-table-action-button'\"\n          ></button>\n        </ng-container>\n        <ng-container\n          *ngIf=\"editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))\"\n        >\n          <button\n            *ocxIfPermission=\"editPermission\"\n            [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(rowObject, editActionEnabledField)\"\n            pButton\n            class=\"p-button-rounded p-button-text editTableRowButton\"\n            title=\"{{ 'OCX_DATA_TABLE.ACTIONS.EDIT' | translate }}\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n            icon=\"pi pi-pencil\"\n            (click)=\"onEditRow(rowObject)\"\n            [attr.name]=\"'data-table-action-button'\"\n          ></button>\n        </ng-container>\n        <ng-container\n          *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\"\n        >\n          <button\n            *ocxIfPermission=\"deletePermission\"\n            [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(rowObject, deleteActionEnabledField)\"\n            pButton\n            class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n            title=\"{{ 'OCX_DATA_TABLE.ACTIONS.DELETE' | translate }}\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n            icon=\"pi pi-trash\"\n            (click)=\"onDeleteRow(rowObject)\"\n            [attr.name]=\"'data-table-action-button'\"\n          ></button>\n        </ng-container>\n        <ng-container *ngFor=\"let action of inlineActions$ | async\">\n          <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\">\n            <button\n              *ocxIfPermission=\"action.permission\"\n              pButton\n              class=\"p-button-rounded p-button-text\"\n              [ngClass]=\"action.classes\"\n              [icon]=\"action.icon || ''\"\n              (click)=\"action.callback(rowObject)\"\n              [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n              [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n              [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\"\n            ></button>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"hasVisibleOverflowMenuItems(rowObject) | async\">\n          <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            class=\"p-button-rounded p-button-text\"\n            [icon]=\"'pi pi-ellipsis-v'\"\n            (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n            [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n          ></button>\n        </ng-container>\n      </div>\n    </td>\n  </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0  || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <th\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    >\n      {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n    </th>\n  </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n  <p-table\n    *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\n    [value]=\"(displayedRows$ | async) ?? []\"\n    responsiveLayout=\"scroll\"\n    [paginator]=\"paginator\"\n    [first]=\"page * displayedPageSize\"\n    (onPage)=\"onPageChange($event)\"\n    [rows]=\"displayedPageSize\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n    [rowsPerPageOptions]=\"(displayedPageSizes$ | async) ?? []\"\n    id=\"dataTable_{{name}}\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [selection]=\"(selectedRows$ | async) ?? []\"\n    [scrollable]=\"true\"\n    scrollHeight=\"flex\"\n    [style]=\"tableStyle\"\n    paginatorDropdownAppendTo=\"body\"\n    tableStyleClass=\"h-full\"\n  >\n    <ng-template pTemplate=\"header\">\n      <tr style=\"vertical-align: top\">\n        <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n          <p-tableHeaderCheckbox\n            *ngIf=\"allowSelectAll\"\n            ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n          ></p-tableHeaderCheckbox>\n        </th>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n        <ng-container *ngFor=\"let column of columns\">\n          <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n            <div\n              class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n              style=\"height: 100%\"\n            >\n              <span class=\"flex\" id=\"{{column.id}}-header-name\">{{ column.nameKey | translate }}</span>\n              <span class=\"flex icon-button-header-wrapper\">\n                <button\n                  *ngIf=\"column.sortable\"\n                  class=\"pi sortButton pl-0\"\n                  [class.pi-sort-alt]=\"(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn\"\n                  [class.pi-sort-amount-up]=\"column?.id === sortColumn && sortDirection === 'ASCENDING'\"\n                  [class.pi-sort-amount-down]=\"column?.id === sortColumn && sortDirection === 'DESCENDING'\"\n                  (click)=\"onSortColumnClick(column.id)\"\n                  [title]=\"(sortIconTitle(column.id) | translate)\"\n                  [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n                ></button>\n                <p-multiSelect\n                  class=\"filterMultiSelect\"\n                  *ngIf=\"column.filterable && (!column.filterType || column.filterType === FilterType.EQUAL)\"\n                  [options]=\"(currentEqualFilterOptions$ | async) || []\"\n                  [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\n                  [showToggleAll]=\"true\"\n                  emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n                  [displaySelectedLabel]=\"false\"\n                  [resetFilterOnHide]=\"true\"\n                  (onChange)=\"onMultiselectFilterChange(column, $event)\"\n                  placeholder=\"Icon\"\n                  appendTo=\"body\"\n                  (onFocus)=\"onFilterChosen(column)\"\n                  [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n                  [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n                  [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n                >\n                  <ng-template pTemplate=\"selectedItems\" let-value>\n                    <div\n                      class=\"pi\"\n                      [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                      [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                    ></div>\n                  </ng-template>\n                  <ng-template pTemplate=\"item\" let-value>\n                    <ng-container\n                      *ngIf=\"columnTemplates[column.id] as template\"\n                      [ngTemplateOutlet]=\"template\"\n                      [ngTemplateOutletContext]=\"{\n                      rowObject: getRowObjectFromMultiselectItem(value, column),\n                      column: column\n                  }\"\n                    >\n                    </ng-container>\n                  </ng-template>\n                </p-multiSelect>\n                <p-multiSelect\n                  class=\"filterMultiSelect\"\n                  *ngIf=\"column.filterable && column.filterType === FilterType.TRUTHY\"\n                  [options]=\"truthyFilterOptions\"\n                  [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\n                  [showToggleAll]=\"true\"\n                  emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n                  [displaySelectedLabel]=\"false\"\n                  [resetFilterOnHide]=\"true\"\n                  (onChange)=\"onMultiselectFilterChange(column, $event)\"\n                  placeholder=\"Icon\"\n                  appendTo=\"body\"\n                  (onFocus)=\"onFilterChosen(column)\"\n                  [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n                  [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n                  [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n                >\n                  <ng-template pTemplate=\"selectedItems\" let-value>\n                    <div\n                      class=\"pi\"\n                      [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                      [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                    ></div>\n                  </ng-template>\n                  <ng-template pTemplate=\"item\" let-value> {{value.key | translate}} </ng-template>\n                </p-multiSelect>\n              </span>\n            </div>\n          </th>\n          <ng-template #simpleHeader>\n            <th scope=\"col\">{{ column.nameKey | translate }}</th>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-rowObject>\n      <tr>\n        <td *ngIf=\"selectionChangedObserved\">\n          <p-checkbox\n            *ngIf=\"(!!selectionEnabledField && !fieldIsTruthy(rowObject, selectionEnabledField)) && isSelected(rowObject); else defaultCheckbox\"\n            [(ngModel)]=\"checked\"\n            [binary]=\"true\"\n            [disabled]=\"true\"\n            [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n          ></p-checkbox>\n          <ng-template #defaultCheckbox>\n            <p-tableCheckbox\n              [value]=\"rowObject\"\n              [disabled]=\"!!selectionEnabledField && !fieldIsTruthy(rowObject, selectionEnabledField)\"\n              [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n            ></p-tableCheckbox>\n          </ng-template>\n        </td>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n        </ng-container>\n        <td *ngFor=\"let column of columns\">\n          <ng-container\n            [ngTemplateOutlet]=\"\n              _cell ? _cell: columnTemplates[column.id]\n              \"\n            [ngTemplateOutletContext]=\"{\n                  rowObject: rowObject,\n                  column: column,\n              }\"\n          ></ng-container>\n        </td>\n        <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n          <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\n          {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</ng-container>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomCell\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}\n"] }]
+            args: [{ selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <td\n      class=\"actions\"\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-left' : 'action-column-right'\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n    >\n      <div class=\"icon-button-row-wrapper\">\n        <ng-container\n          *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\"\n        >\n          <button\n            *ocxIfPermission=\"viewPermission\"\n            [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(rowObject, viewActionEnabledField)\"\n            pButton\n            class=\"p-button-rounded p-button-text viewTableRowButton\"\n            title=\"{{ 'OCX_DATA_TABLE.ACTIONS.VIEW' | translate }}\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n            icon=\"pi pi-eye\"\n            (click)=\"onViewRow(rowObject)\"\n            [attr.name]=\"'data-table-action-button'\"\n          ></button>\n        </ng-container>\n        <ng-container\n          *ngIf=\"editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))\"\n        >\n          <button\n            *ocxIfPermission=\"editPermission\"\n            [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(rowObject, editActionEnabledField)\"\n            pButton\n            class=\"p-button-rounded p-button-text editTableRowButton\"\n            title=\"{{ 'OCX_DATA_TABLE.ACTIONS.EDIT' | translate }}\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n            icon=\"pi pi-pencil\"\n            (click)=\"onEditRow(rowObject)\"\n            [attr.name]=\"'data-table-action-button'\"\n          ></button>\n        </ng-container>\n        <ng-container\n          *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\"\n        >\n          <button\n            *ocxIfPermission=\"deletePermission\"\n            [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(rowObject, deleteActionEnabledField)\"\n            pButton\n            class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n            title=\"{{ 'OCX_DATA_TABLE.ACTIONS.DELETE' | translate }}\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n            icon=\"pi pi-trash\"\n            (click)=\"onDeleteRow(rowObject)\"\n            [attr.name]=\"'data-table-action-button'\"\n          ></button>\n        </ng-container>\n        <ng-container *ngFor=\"let action of inlineActions$ | async\">\n          <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\">\n            <button\n              *ocxIfPermission=\"action.permission\"\n              pButton\n              class=\"p-button-rounded p-button-text\"\n              [ngClass]=\"action.classes\"\n              [icon]=\"action.icon || ''\"\n              (click)=\"action.callback(rowObject)\"\n              [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n              [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n              [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\"\n            ></button>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"hasVisibleOverflowMenuItems(rowObject) | async\">\n          <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            class=\"p-button-rounded p-button-text\"\n            [icon]=\"'pi pi-ellipsis-v'\"\n            (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n            [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n          ></button>\n        </ng-container>\n      </div>\n    </td>\n  </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0  || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <th\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    >\n      {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n    </th>\n  </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n  <p-table\n    *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\n    [value]=\"(displayedRows$ | async) ?? []\"\n    responsiveLayout=\"scroll\"\n    [paginator]=\"paginator\"\n    [first]=\"page * displayedPageSize\"\n    (onPage)=\"onPageChange($event)\"\n    [rows]=\"displayedPageSize\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n    [rowsPerPageOptions]=\"(displayedPageSizes$ | async) ?? []\"\n    id=\"dataTable_{{name}}\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [selection]=\"(selectedRows$ | async) ?? []\"\n    [scrollable]=\"true\"\n    scrollHeight=\"flex\"\n    [style]=\"tableStyle\"\n    paginatorDropdownAppendTo=\"body\"\n    [rowSelectable]=\"rowSelectable\"\n    tableStyleClass=\"h-full\"\n  >\n    <ng-template pTemplate=\"header\">\n      <tr style=\"vertical-align: top\">\n        <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n          <p-tableHeaderCheckbox\n            *ngIf=\"allowSelectAll\"\n            ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n          ></p-tableHeaderCheckbox>\n        </th>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n        <ng-container *ngFor=\"let column of columns\">\n          <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n            <div\n              class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n              style=\"height: 100%\"\n            >\n              <span class=\"flex\" id=\"{{column.id}}-header-name\">{{ column.nameKey | translate }}</span>\n              <span class=\"flex icon-button-header-wrapper\">\n                <button\n                  *ngIf=\"column.sortable\"\n                  class=\"pi sortButton pl-0\"\n                  [class.pi-sort-alt]=\"(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn\"\n                  [class.pi-sort-amount-up]=\"column?.id === sortColumn && sortDirection === 'ASCENDING'\"\n                  [class.pi-sort-amount-down]=\"column?.id === sortColumn && sortDirection === 'DESCENDING'\"\n                  (click)=\"onSortColumnClick(column.id)\"\n                  [title]=\"(sortIconTitle(column.id) | translate)\"\n                  [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n                ></button>\n                <ng-container *ngIf=\"currentEqualFilterOptions$ | async as equalFilterOptions\">\n                  <ng-container *ngIf=\"columnFilterTemplates$ | async as columnFilterTemplates\">\n                    <p-multiSelect\n                      class=\"filterMultiSelect\"\n                      *ngIf=\"column.filterable && (!column.filterType || column.filterType === FilterType.EQUAL)\"\n                      [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n                      [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\n                      [showToggleAll]=\"true\"\n                      emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n                      [displaySelectedLabel]=\"false\"\n                      [resetFilterOnHide]=\"true\"\n                      (onChange)=\"onMultiselectFilterChange(column, $event)\"\n                      placeholder=\"Icon\"\n                      appendTo=\"body\"\n                      (onFocus)=\"onFilterChosen(column)\"\n                      [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n                      [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n                      [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n                    >\n                      <ng-template pTemplate=\"selectedItems\" let-value>\n                        <div\n                          class=\"pi\"\n                          [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                          [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                        ></div>\n                      </ng-template>\n                      <ng-template pTemplate=\"item\" let-value>\n                        <ng-container\n                          *ngIf=\"columnFilterTemplates[column.id] as template\"\n                          [ngTemplateOutlet]=\"template\"\n                          [ngTemplateOutletContext]=\"{\n                      rowObject: getRowObjectFromMultiselectItem(value, column),\n                      column: column\n                  }\"\n                        >\n                        </ng-container>\n                      </ng-template>\n                    </p-multiSelect>\n                  </ng-container>\n                </ng-container>\n                <p-multiSelect\n                  class=\"filterMultiSelect\"\n                  *ngIf=\"column.filterable && column.filterType === FilterType.TRUTHY\"\n                  [options]=\"truthyFilterOptions\"\n                  [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\n                  [showToggleAll]=\"true\"\n                  emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n                  [displaySelectedLabel]=\"false\"\n                  [resetFilterOnHide]=\"true\"\n                  (onChange)=\"onMultiselectFilterChange(column, $event)\"\n                  placeholder=\"Icon\"\n                  appendTo=\"body\"\n                  (onFocus)=\"onFilterChosen(column)\"\n                  [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n                  [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n                  [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n                >\n                  <ng-template pTemplate=\"selectedItems\" let-value>\n                    <div\n                      class=\"pi\"\n                      [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                      [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                    ></div>\n                  </ng-template>\n                  <ng-template pTemplate=\"item\" let-value> {{value.key | translate}} </ng-template>\n                </p-multiSelect>\n              </span>\n            </div>\n          </th>\n          <ng-template #simpleHeader>\n            <th scope=\"col\">{{ column.nameKey | translate }}</th>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-rowObject>\n      <tr *ngIf=\"columnTemplates\">\n        <td *ngIf=\"selectionChangedObserved\">\n          <p-checkbox\n            *ngIf=\"isRowSelectionDisabled(rowObject) && isSelected(rowObject); else defaultCheckbox\"\n            [(ngModel)]=\"checked\"\n            [binary]=\"true\"\n            [disabled]=\"true\"\n            [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n          ></p-checkbox>\n          <ng-template #defaultCheckbox>\n            <p-tableCheckbox\n              [value]=\"rowObject\"\n              [disabled]=\"isRowSelectionDisabled(rowObject)\"\n              [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n            ></p-tableCheckbox>\n          </ng-template>\n        </td>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n        </ng-container>\n        <td *ngFor=\"let column of columns\">\n          @defer(on viewport){\n          <ng-container\n            *ngIf=\"columnTemplates[column.id]\"\n            [ngTemplateOutlet]=\"\n                _cell ? _cell: columnTemplates[column.id]\n              \"\n            [ngTemplateOutletContext]=\"{\n                  rowObject: rowObject,\n                  column: column,\n              }\"\n          >\n          </ng-container>\n          } @placeholder {\n          <p-skeleton width=\"3rem\" />\n          }\n        </td>\n        <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n          <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\n          {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</ng-container>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomCell\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -4396,7 +4436,7 @@ class InteractiveDataViewComponent {
                 .filter((column) => column.predefinedGroupKeys?.includes(this.defaultGroupKey))
                 .map((column) => column.id);
         }
-        this.displayedColumns$ = this.displayedColumnKeys$.pipe(distinctUntilChanged((prev, curr) => prev.length === curr.length && prev.every((v) => curr.includes(v))), map((columnKeys) => columnKeys.map((key) => this.columns.find((col) => col.id === key)).filter((d) => d) ??
+        this.displayedColumns$ = this.displayedColumnKeys$.pipe(distinctUntilChanged((prev, curr) => prev.length === curr.length && prev.every((v, i) => curr[i] === v)), map((columnKeys) => columnKeys.map((key) => this.columns.find((col) => col.id === key)).filter((d) => d) ??
             []));
         this.displayedColumnsChange.emit(this.displayedColumns);
         this.displayedColumnKeysChange.emit(this.displayedColumnKeys);
@@ -5399,13 +5439,13 @@ function _hasShowTime(calendars, formKey) {
 }
 /**
  * Safely builds the search criteria based on form values
- * @param formValues the form values to use
+ * @param formRawValue the raw value of the form to use
  * @param calendars a list of primeng calendars of the form (use `@ViewChildren(Calendar) calendars!: QueryList<Calendar>;`)
  * @param parameters {@link BuildSearchCriteriaParameters}  to use when building the search criteria
  * @returns the search criteria as a partial of T (T = type of the search criteria)
  */
-function buildSearchCriteria(formValues, calendars, { removeNullValues = false }) {
-    return Object.entries(formValues).reduce((acc, [key, value]) => {
+function buildSearchCriteria(formRawValue, calendars, { removeNullValues = false }) {
+    return Object.entries(formRawValue).reduce((acc, [key, value]) => {
         if (value == null && removeNullValues) {
             return acc;
         }