@onecx/angular-accelerator 5.53.1 → 5.55.0

package/fesm2022/onecx-angular-accelerator.mjs

@@ -1028,11 +1028,11 @@ class ColumnGroupSelectionComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnGroupSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: { selectedGroupKey: "selectedGroupKey", columns: "columns", placeholderKey: "placeholderKey", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey" }, outputs: { groupSelectionChanged: "groupSelectionChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-floatLabel>\n  <p-dropdown\n    inputId=\"columnGroupSelectionDropdown\"\n    id=\"columnGroupSelectionDropdownElement\"\n    *ngIf=\"(allGroupKeys$ | async)?.length\"\n    (onChange)=\"changeGroupSelection($event)\"\n    [options]=\"(allGroupKeys$ | async) || []\"\n    [placeholder]=\"placeholderKey | translate\"\n    [(ngModel)]=\"selectedGroupKey\"\n    [ariaLabel]=\"'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABEL' | translate\"\n  >\n    <ng-template let-item pTemplate=\"item\"> {{ item ? (item | translate) : ''}} </ng-template>\n    <ng-template let-item pTemplate=\"selectedItem\"> {{ item ? (item | translate) : ''}} </ng-template>\n  </p-dropdown>\n  <label *ngIf=\"(allGroupKeys$ | async)?.length\" for=\"columnGroupSelectionDropdown\"\n    >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n  >\n</p-floatLabel>\n", styles: [":host ::ng-deep .p-dropdown{min-width:12rem}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4.FloatLabel, selector: "p-floatLabel" }, { kind: "directive", type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: { selectedGroupKey: "selectedGroupKey", columns: "columns", placeholderKey: "placeholderKey", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey" }, outputs: { groupSelectionChanged: "groupSelectionChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-floatLabel>\n  <p-dropdown\n    class=\"p-inputwrapper-filled\"\n    inputId=\"columnGroupSelectionDropdown\"\n    id=\"columnGroupSelectionDropdownElement\"\n    *ngIf=\"(allGroupKeys$ | async)?.length\"\n    (onChange)=\"changeGroupSelection($event)\"\n    [options]=\"(allGroupKeys$ | async) || []\"\n    [placeholder]=\"placeholderKey | translate\"\n    [(ngModel)]=\"selectedGroupKey\"\n    [ariaLabel]=\"'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABEL' | translate\"\n  >\n    <ng-template let-item pTemplate=\"item\"> {{ item ? (item | translate) : ''}} </ng-template>\n    <ng-template let-item pTemplate=\"selectedItem\"> {{ item ? (item | translate) : ''}} </ng-template>\n  </p-dropdown>\n  <label *ngIf=\"(allGroupKeys$ | async)?.length\" for=\"columnGroupSelectionDropdown\"\n    >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n  >\n</p-floatLabel>\n", styles: [":host ::ng-deep .p-dropdown{min-width:12rem}:host ::ng-deep .p-float-label .p-dropdown .p-placeholder{opacity:1}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4.FloatLabel, selector: "p-floatLabel" }, { kind: "directive", type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnGroupSelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ocx-column-group-selection', template: "<p-floatLabel>\n  <p-dropdown\n    inputId=\"columnGroupSelectionDropdown\"\n    id=\"columnGroupSelectionDropdownElement\"\n    *ngIf=\"(allGroupKeys$ | async)?.length\"\n    (onChange)=\"changeGroupSelection($event)\"\n    [options]=\"(allGroupKeys$ | async) || []\"\n    [placeholder]=\"placeholderKey | translate\"\n    [(ngModel)]=\"selectedGroupKey\"\n    [ariaLabel]=\"'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABEL' | translate\"\n  >\n    <ng-template let-item pTemplate=\"item\"> {{ item ? (item | translate) : ''}} </ng-template>\n    <ng-template let-item pTemplate=\"selectedItem\"> {{ item ? (item | translate) : ''}} </ng-template>\n  </p-dropdown>\n  <label *ngIf=\"(allGroupKeys$ | async)?.length\" for=\"columnGroupSelectionDropdown\"\n    >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n  >\n</p-floatLabel>\n", styles: [":host ::ng-deep .p-dropdown{min-width:12rem}\n"] }]
+            args: [{ selector: 'ocx-column-group-selection', template: "<p-floatLabel>\n  <p-dropdown\n    class=\"p-inputwrapper-filled\"\n    inputId=\"columnGroupSelectionDropdown\"\n    id=\"columnGroupSelectionDropdownElement\"\n    *ngIf=\"(allGroupKeys$ | async)?.length\"\n    (onChange)=\"changeGroupSelection($event)\"\n    [options]=\"(allGroupKeys$ | async) || []\"\n    [placeholder]=\"placeholderKey | translate\"\n    [(ngModel)]=\"selectedGroupKey\"\n    [ariaLabel]=\"'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABEL' | translate\"\n  >\n    <ng-template let-item pTemplate=\"item\"> {{ item ? (item | translate) : ''}} </ng-template>\n    <ng-template let-item pTemplate=\"selectedItem\"> {{ item ? (item | translate) : ''}} </ng-template>\n  </p-dropdown>\n  <label *ngIf=\"(allGroupKeys$ | async)?.length\" for=\"columnGroupSelectionDropdown\"\n    >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n  >\n</p-floatLabel>\n", styles: [":host ::ng-deep .p-dropdown{min-width:12rem}:host ::ng-deep .p-float-label .p-dropdown .p-placeholder{opacity:1}\n"] }]
         }], propDecorators: { selectedGroupKey: [{
                 type: Input
             }], columns: [{
@@ -2482,6 +2482,18 @@ class DataTableComponent extends DataSortBase {
     set additionalActions(value) {
         this._additionalActions$.next(value);
     }
+    set expandedRows(value) {
+        const ids = (value ?? [])
+            .filter((row) => row !== null && row !== undefined)
+            .map((row) => {
+            if (typeof row === 'object') {
+                return row.id;
+            }
+            return row;
+        });
+        this.expandedRowIds$.next(ids);
+        this.expandedRowKeys = Object.fromEntries(ids.map((id) => [id, true]));
+    }
     set templates(value) {
         this.templates$.next(value);
     }
@@ -2506,6 +2518,15 @@ class DataTableComponent extends DataSortBase {
     get anyRowActionObserved() {
         return this.viewTableRowObserved || this.editTableRowObserved || this.deleteTableRowObserved;
     }
+    get actionColumnVisible() {
+        return this.anyRowActionObserved || this.additionalActions.length > 0;
+    }
+    getRowColspan(hasExpansionTemplate) {
+        return (this.columns.length +
+            (this.selectionChangedObserved ? 1 : 0) +
+            (this.expandable && hasExpansionTemplate ? 1 : 0) +
+            (this.actionColumnVisible ? 1 : 0));
+    }
     get selectionChangedObserved() {
         const dv = this.injector.get('DataViewComponent', null);
         return dv?.selectionChangedObserved || dv?.selectionChanged.observed || this.selectionChanged.observed;
@@ -2547,12 +2568,14 @@ class DataTableComponent extends DataSortBase {
                 first: '{first}',
                 last: '{last}',
                 totalRecords: '{totalRecords}',
-                totalRecordsOnServer: this.totalRecordsOnServer()
+                totalRecordsOnServer: this.totalRecordsOnServer(),
             };
         });
         this._additionalActions$ = new BehaviorSubject([]);
         this.frozenActionColumn = false;
         this.actionColumnPosition = 'right';
+        this.expandable = false;
+        this.frozenExpandColumn = false;
         this.filtered = new EventEmitter();
         this.sorted = new EventEmitter();
         this.viewTableRow = new EventEmitter();
@@ -2562,6 +2585,8 @@ class DataTableComponent extends DataSortBase {
         this.pageChanged = new EventEmitter();
         this.pageSizeChanged = new EventEmitter();
         this.componentStateChanged = new EventEmitter();
+        this.rowExpanded = new EventEmitter();
+        this.rowCollapsed = new EventEmitter();
         this.currentFilterColumn$ = new BehaviorSubject(null);
         this.truthyFilterOptions = [
             {
@@ -2578,6 +2603,8 @@ class DataTableComponent extends DataSortBase {
         this.viewTemplates$ = new BehaviorSubject(undefined);
         this.parentTemplates$ = new BehaviorSubject(undefined);
         this.templatesObservables = {};
+        this.expandedRowIds$ = new BehaviorSubject([]);
+        this.expandedRowKeys = {};
         this.cellTemplatesData = {
             templatesObservables: {},
             idSuffix: ['IdTableCell', 'IdCell'],
@@ -2729,8 +2756,8 @@ class DataTableComponent extends DataSortBase {
     }
     emitComponentStateChanged(state = {}) {
         this.displayedPageSize$
-            .pipe(withLatestFrom(this._selectionIds$, this._rows$), first())
-            .subscribe(([pageSize, selectedIds, rows]) => {
+            .pipe(withLatestFrom(this._selectionIds$, this.expandedRowIds$, this._rows$), first())
+            .subscribe(([pageSize, selectedIds, expandedIds, rows]) => {
             this.componentStateChanged.emit({
                 filters: this.filters,
                 sorting: {
@@ -2740,6 +2767,7 @@ class DataTableComponent extends DataSortBase {
                 pageSize,
                 activePage: this.page,
                 selectedRows: rows.filter((row) => selectedIds.includes(row.id)),
+                expandedRows: rows.filter((row) => expandedIds.includes(row.id)),
                 ...state,
             });
         });
@@ -2791,6 +2819,44 @@ class DataTableComponent extends DataSortBase {
                     break;
             }
         });
+        this.allTemplates$ = combineLatest([this.templates$, this.viewTemplates$, this.parentTemplates$]).pipe(map(([templates, viewTemplates, parentTemplates]) => {
+            const all = templates
+                ?.toArray()
+                .concat(viewTemplates?.toArray() ?? [])
+                .concat(parentTemplates?.toArray() ?? []) ?? [];
+            return all.filter((t, index, self) => self.findIndex((pt) => pt.getType() === t.getType()) === index);
+        }));
+        this.expansionTemplate$ = this.allTemplates$.pipe(map((templates) => templates.find((t) => t.getType() === 'expansion')));
+    }
+    onRowExpand(event) {
+        const expandedIds = this.expandedRowIds$.getValue();
+        if (!expandedIds.includes(event.data.id)) {
+            this.expandedRowIds$.next([...expandedIds, event.data.id]);
+        }
+        this.rowExpanded.emit(event.data);
+        this.emitComponentStateChanged();
+    }
+    onRowCollapse(event) {
+        const expandedIds = this.expandedRowIds$.getValue();
+        this.expandedRowIds$.next(expandedIds.filter((id) => id !== event.data.id));
+        this.rowCollapsed.emit(event.data);
+        this.emitComponentStateChanged();
+    }
+    isRowExpanded(row) {
+        return this.expandedRowIds$.getValue().includes(row.id);
+    }
+    toggleRowExpansion(row) {
+        const isExpanded = this.isRowExpanded(row);
+        if (isExpanded) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { [row.id]: _removed, ...rest } = this.expandedRowKeys;
+            this.expandedRowKeys = rest;
+            this.onRowCollapse({ data: row });
+        }
+        else {
+            this.expandedRowKeys = { ...this.expandedRowKeys, [row.id]: true };
+            this.onRowExpand({ data: row });
+        }
     }
     onSortColumnClick(sortColumn) {
         const newSortDirection = this.columnNextSortDirection(sortColumn);
@@ -3028,11 +3094,11 @@ class DataTableComponent extends DataSortBase {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataTableComponent, deps: [{ token: LOCALE_ID }, { token: i1$2.TranslateService }, { token: i1$1.Router }, { token: i0.Injector }, { token: i3.UserService }, { token: i4$1.LiveAnnouncer }, { token: HAS_PERMISSION_CHECKER, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DataTableComponent, selector: "ocx-data-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: false, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: false, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: false, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: false, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: false, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, showAllOption: { classPropertyName: "showAllOption", publicName: "showAllOption", isSignal: false, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: false, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: false, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: false, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: false, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: false, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: false, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, selectionEnabledField: { classPropertyName: "selectionEnabledField", publicName: "selectionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: false, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: false, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: false, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: false, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: false, isRequired: false, transformFunction: null }, stringCellTemplate: { classPropertyName: "stringCellTemplate", publicName: "stringCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, numberCellTemplate: { classPropertyName: "numberCellTemplate", publicName: "numberCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, customCellTemplate: { classPropertyName: "customCellTemplate", publicName: "customCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, dateCellTemplate: { classPropertyName: "dateCellTemplate", publicName: "dateCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, relativeDateCellTemplate: { classPropertyName: "relativeDateCellTemplate", publicName: "relativeDateCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: false, isRequired: false, transformFunction: null }, translationKeyCellTemplate: { classPropertyName: "translationKeyCellTemplate", publicName: "translationKeyCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, stringFilterCellTemplate: { classPropertyName: "stringFilterCellTemplate", publicName: "stringFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, numberFilterCellTemplate: { classPropertyName: "numberFilterCellTemplate", publicName: "numberFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, customFilterCellTemplate: { classPropertyName: "customFilterCellTemplate", publicName: "customFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, dateFilterCellTemplate: { classPropertyName: "dateFilterCellTemplate", publicName: "dateFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, relativeDateFilterCellTemplate: { classPropertyName: "relativeDateFilterCellTemplate", publicName: "relativeDateFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, filterCellTemplate: { classPropertyName: "filterCellTemplate", publicName: "filterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, translationKeyFilterCellTemplate: { classPropertyName: "translationKeyFilterCellTemplate", publicName: "translationKeyFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: false, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: false, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: false, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: false, isRequired: false, transformFunction: null } }, 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            id=\"{{resolveFieldData(rowObject, 'id')}}-viewButton\"\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            id=\"{{resolveFieldData(rowObject, 'id')}}-editButton\"\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            id=\"{{resolveFieldData(rowObject, 'id')}}-deleteButton\"\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              id=\"{{resolveFieldData(rowObject, 'id')}}-{{action.id ? action.id.concat('ActionButton') : 'inlineActionButton'}}\"\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              [attr.name]=\"'data-table-action-button'\"\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            [name]=\"'data-table-overflow-action-button'\"\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    dataKey=\"id\"\n    [rowTrackBy]=\"rowTrackByFunction\"\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            pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\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                  [pTooltip]=\"sortIconTitle(column.id) | translate \"\n                  tooltipPosition=\"bottom\"\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                      filterBy=\"toFilterBy\"\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        <!-- If allowSelectAll is set to true, an additional column for checkbox selection is added and\n       the colSpan needs to be increased by one so that the row is rendered the whole width of the table. -->\n        <td\n          [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0) +\n  (allowSelectAll ? 1 : 0)\"\n        >\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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i8$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: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i10$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: i10$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i10$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i10$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: i12.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: i10.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.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", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i5.NgIf, i5.NgTemplateOutlet]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DataTableComponent, selector: "ocx-data-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: false, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: false, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: false, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: false, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: false, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, showAllOption: { classPropertyName: "showAllOption", publicName: "showAllOption", isSignal: false, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: false, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: false, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: false, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: false, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: false, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: false, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, selectionEnabledField: { classPropertyName: "selectionEnabledField", publicName: "selectionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: false, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: false, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: false, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: false, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: false, isRequired: false, transformFunction: null }, stringCellTemplate: { classPropertyName: "stringCellTemplate", publicName: "stringCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, numberCellTemplate: { classPropertyName: "numberCellTemplate", publicName: "numberCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, customCellTemplate: { classPropertyName: "customCellTemplate", publicName: "customCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, dateCellTemplate: { classPropertyName: "dateCellTemplate", publicName: "dateCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, relativeDateCellTemplate: { classPropertyName: "relativeDateCellTemplate", publicName: "relativeDateCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: false, isRequired: false, transformFunction: null }, translationKeyCellTemplate: { classPropertyName: "translationKeyCellTemplate", publicName: "translationKeyCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, stringFilterCellTemplate: { classPropertyName: "stringFilterCellTemplate", publicName: "stringFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, numberFilterCellTemplate: { classPropertyName: "numberFilterCellTemplate", publicName: "numberFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, customFilterCellTemplate: { classPropertyName: "customFilterCellTemplate", publicName: "customFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, dateFilterCellTemplate: { classPropertyName: "dateFilterCellTemplate", publicName: "dateFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, relativeDateFilterCellTemplate: { classPropertyName: "relativeDateFilterCellTemplate", publicName: "relativeDateFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, filterCellTemplate: { classPropertyName: "filterCellTemplate", publicName: "filterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, translationKeyFilterCellTemplate: { classPropertyName: "translationKeyFilterCellTemplate", publicName: "translationKeyFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: false, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: false, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: false, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: false, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: false, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: false, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed" }, 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 *ngIf=\"actionColumnVisible\">\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            id=\"{{resolveFieldData(rowObject, 'id')}}-viewButton\"\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            id=\"{{resolveFieldData(rowObject, 'id')}}-editButton\"\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            id=\"{{resolveFieldData(rowObject, 'id')}}-deleteButton\"\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              id=\"{{resolveFieldData(rowObject, 'id')}}-{{action.id ? action.id.concat('ActionButton') : 'inlineActionButton'}}\"\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              [attr.name]=\"'data-table-action-button'\"\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            [name]=\"'data-table-overflow-action-button'\"\n          ></button>\n        </ng-container>\n      </div>\n    </td>\n  </ng-container>\n</ng-template>\n\n<ng-template #expansionColumnHeader>\n  @if (expandable && (expansionTemplate$ | async)) {\n  <th\n    pFrozenColumn\n    [frozen]=\"frozenExpandColumn\"\n    alignFrozen=\"left\"\n    [attr.name]=\"'expansion-column-header'\"\n    style=\"width: 4rem\"\n  ></th>\n  }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  <ng-container *ngIf=\"actionColumnVisible\">\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    dataKey=\"id\"\n    [rowTrackBy]=\"rowTrackByFunction\"\n    [scrollable]=\"true\"\n    scrollHeight=\"flex\"\n    [style]=\"tableStyle\"\n    paginatorDropdownAppendTo=\"body\"\n    [rowSelectable]=\"rowSelectable\"\n    tableStyleClass=\"h-full\"\n    [expandedRowKeys]=\"expandedRowKeys\"\n    (onRowExpand)=\"onRowExpand($event)\"\n    (onRowCollapse)=\"onRowCollapse($event)\"\n  >\n    <ng-template pTemplate=\"header\">\n      <tr style=\"vertical-align: top\">\n        <ng-container *ngTemplateOutlet=\"expansionColumnHeader\"></ng-container>\n        <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n          <p-tableHeaderCheckbox\n            *ngIf=\"allowSelectAll\"\n            pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\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                  [pTooltip]=\"sortIconTitle(column.id) | translate \"\n                  tooltipPosition=\"bottom\"\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                      filterBy=\"toFilterBy\"\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        <ng-container *ngTemplateOutlet=\"expansionColumn; context: {localRowObject: rowObject}\"></ng-container>\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\n    <ng-template pTemplate=\"rowexpansion\" let-rowObject>\n      @if (expansionTemplate$ | async; as expansionTemplate) {\n      <tr>\n        <td [attr.colspan]=\"getRowColspan(!!expansionTemplate)\">\n          <ng-container\n            [ngTemplateOutlet]=\"expansionTemplate.template\"\n            [ngTemplateOutletContext]=\"{\n            rowObject: rowObject\n          }\"\n          >\n          </ng-container>\n        </td>\n      </tr>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td [colSpan]=\"getRowColspan(!!(expansionTemplate$ | async))\">\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 #expansionColumn let-rowObject=\"localRowObject\">\n  @if (expandable && (expansionTemplate$ | async)) {\n  <td pFrozenColumn [frozen]=\"frozenExpandColumn\" alignFrozen=\"left\" [attr.name]=\"'expansion-column'\">\n    <button\n      type=\"button\"\n      pButton\n      pRipple\n      [icon]=\"isRowExpanded(rowObject) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n      class=\"p-button-rounded p-button-text\"\n      (click)=\"toggleRowExpansion(rowObject)\"\n      [attr.aria-label]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate) : ('OCX_DATA_TABLE.EXPANDED_ROW' | translate)\"\n      [title]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate) : ('OCX_DATA_TABLE.EXPANDED_ROW' | translate)\"\n    ></button>\n  </td>\n  }\n</ng-template>\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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i8$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: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i10$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: i10$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i10$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i10$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: i12.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: i10.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.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", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i5.NgIf, i5.NgTemplateOutlet]] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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            id=\"{{resolveFieldData(rowObject, 'id')}}-viewButton\"\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            id=\"{{resolveFieldData(rowObject, 'id')}}-editButton\"\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            id=\"{{resolveFieldData(rowObject, 'id')}}-deleteButton\"\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              id=\"{{resolveFieldData(rowObject, 'id')}}-{{action.id ? action.id.concat('ActionButton') : 'inlineActionButton'}}\"\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              [attr.name]=\"'data-table-action-button'\"\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            [name]=\"'data-table-overflow-action-button'\"\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    dataKey=\"id\"\n    [rowTrackBy]=\"rowTrackByFunction\"\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            pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\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                  [pTooltip]=\"sortIconTitle(column.id) | translate \"\n                  tooltipPosition=\"bottom\"\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                      filterBy=\"toFilterBy\"\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        <!-- If allowSelectAll is set to true, an additional column for checkbox selection is added and\n       the colSpan needs to be increased by one so that the row is rendered the whole width of the table. -->\n        <td\n          [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0) +\n  (allowSelectAll ? 1 : 0)\"\n        >\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 *ngIf=\"actionColumnVisible\">\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            id=\"{{resolveFieldData(rowObject, 'id')}}-viewButton\"\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            id=\"{{resolveFieldData(rowObject, 'id')}}-editButton\"\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            id=\"{{resolveFieldData(rowObject, 'id')}}-deleteButton\"\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              id=\"{{resolveFieldData(rowObject, 'id')}}-{{action.id ? action.id.concat('ActionButton') : 'inlineActionButton'}}\"\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              [attr.name]=\"'data-table-action-button'\"\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            [name]=\"'data-table-overflow-action-button'\"\n          ></button>\n        </ng-container>\n      </div>\n    </td>\n  </ng-container>\n</ng-template>\n\n<ng-template #expansionColumnHeader>\n  @if (expandable && (expansionTemplate$ | async)) {\n  <th\n    pFrozenColumn\n    [frozen]=\"frozenExpandColumn\"\n    alignFrozen=\"left\"\n    [attr.name]=\"'expansion-column-header'\"\n    style=\"width: 4rem\"\n  ></th>\n  }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  <ng-container *ngIf=\"actionColumnVisible\">\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    dataKey=\"id\"\n    [rowTrackBy]=\"rowTrackByFunction\"\n    [scrollable]=\"true\"\n    scrollHeight=\"flex\"\n    [style]=\"tableStyle\"\n    paginatorDropdownAppendTo=\"body\"\n    [rowSelectable]=\"rowSelectable\"\n    tableStyleClass=\"h-full\"\n    [expandedRowKeys]=\"expandedRowKeys\"\n    (onRowExpand)=\"onRowExpand($event)\"\n    (onRowCollapse)=\"onRowCollapse($event)\"\n  >\n    <ng-template pTemplate=\"header\">\n      <tr style=\"vertical-align: top\">\n        <ng-container *ngTemplateOutlet=\"expansionColumnHeader\"></ng-container>\n        <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n          <p-tableHeaderCheckbox\n            *ngIf=\"allowSelectAll\"\n            pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\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                  [pTooltip]=\"sortIconTitle(column.id) | translate \"\n                  tooltipPosition=\"bottom\"\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                      filterBy=\"toFilterBy\"\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        <ng-container *ngTemplateOutlet=\"expansionColumn; context: {localRowObject: rowObject}\"></ng-container>\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\n    <ng-template pTemplate=\"rowexpansion\" let-rowObject>\n      @if (expansionTemplate$ | async; as expansionTemplate) {\n      <tr>\n        <td [attr.colspan]=\"getRowColspan(!!expansionTemplate)\">\n          <ng-container\n            [ngTemplateOutlet]=\"expansionTemplate.template\"\n            [ngTemplateOutletContext]=\"{\n            rowObject: rowObject\n          }\"\n          >\n          </ng-container>\n        </td>\n      </tr>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td [colSpan]=\"getRowColspan(!!(expansionTemplate$ | async))\">\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 #expansionColumn let-rowObject=\"localRowObject\">\n  @if (expandable && (expansionTemplate$ | async)) {\n  <td pFrozenColumn [frozen]=\"frozenExpandColumn\" alignFrozen=\"left\" [attr.name]=\"'expansion-column'\">\n    <button\n      type=\"button\"\n      pButton\n      pRipple\n      [icon]=\"isRowExpanded(rowObject) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n      class=\"p-button-rounded p-button-text\"\n      (click)=\"toggleRowExpansion(rowObject)\"\n      [attr.aria-label]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate) : ('OCX_DATA_TABLE.EXPANDED_ROW' | translate)\"\n      [title]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate) : ('OCX_DATA_TABLE.EXPANDED_ROW' | translate)\"\n    ></button>\n  </td>\n  }\n</ng-template>\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]
@@ -3177,6 +3243,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], actionColumnPosition: [{
                 type: Input
+            }], expandedRows: [{
+                type: Input
+            }], expandable: [{
+                type: Input
+            }], frozenExpandColumn: [{
+                type: Input
             }], filtered: [{
                 type: Output
             }], sorted: [{
@@ -3195,6 +3267,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }], componentStateChanged: [{
                 type: Output
+            }], rowExpanded: [{
+                type: Output
+            }], rowCollapsed: [{
+                type: Output
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
@@ -3389,6 +3465,9 @@ class DataViewComponent {
         this.selectedRows = [];
         this.frozenActionColumn = false;
         this.actionColumnPosition = 'right';
+        this.expandable = false;
+        this.frozenExpandColumn = false;
+        this.expandedRows = [];
         this.sortStates = ["ASCENDING" /* DataSortDirection.ASCENDING */, "DESCENDING" /* DataSortDirection.DESCENDING */];
         this.pageSizes = [10, 25, 50];
         this.showAllOption = false;
@@ -3402,6 +3481,8 @@ class DataViewComponent {
         this.pageChanged = new EventEmitter();
         this.pageSizeChanged = new EventEmitter();
         this.componentStateChanged = new EventEmitter();
+        this.rowExpanded = new EventEmitter();
+        this.rowCollapsed = new EventEmitter();
         this.parentTemplates$ = new BehaviorSubject(undefined);
         this.templates$ = new BehaviorSubject(undefined);
         this.templatesForChildren$ = combineLatest([
@@ -3626,11 +3707,11 @@ class DataViewComponent {
         this.pageSizeChanged.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataViewComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DataViewComponent, selector: "ocx-data-view", inputs: { deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", data: "data", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", layout: "layout", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortField: "sortField", sortDirection: "sortDirection", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", page: "page", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", selectedRows: "selectedRows", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", paginator: "paginator", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", stringTableCellTemplate: "stringTableCellTemplate", numberTableCellTemplate: "numberTableCellTemplate", customTableCellTemplate: "customTableCellTemplate", dateTableCellTemplate: "dateTableCellTemplate", tableDateCellTemplate: "tableDateCellTemplate", tableCellTemplate: "tableCellTemplate", translationKeyTableCellTemplate: "translationKeyTableCellTemplate", tableTranslationKeyCellTemplate: "tableTranslationKeyCellTemplate", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", gridItemTemplate: "gridItemTemplate", listItemTemplate: "listItemTemplate", relativeDateTableCellTemplate: "relativeDateTableCellTemplate", tableRelativeDateCellTemplate: "tableRelativeDateCellTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", customListValueTemplate: "customListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", tableFilterCellTemplate: "tableFilterCellTemplate", dateTableFilterCellTemplate: "dateTableFilterCellTemplate", relativeDateTableFilterCellTemplate: "relativeDateTableFilterCellTemplate", translationKeyTableFilterCellTemplate: "translationKeyTableFilterCellTemplate", stringTableFilterCellTemplate: "stringTableFilterCellTemplate", numberTableFilterCellTemplate: "numberTableFilterCellTemplate", customTableFilterCellTemplate: "customTableFilterCellTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], queries: [{ propertyName: "stringTableCellChildTemplate", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCellChildTemplate", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "customTableCellChildTemplate", first: true, predicate: ["customTableCell"], descendants: true }, { propertyName: "tableDateCellChildTemplate", first: true, predicate: ["tableDateCell"], descendants: true }, { propertyName: "dateTableCellChildTemplate", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableCellChildTemplate", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "tableTranslationKeyCellChildTemplate", first: true, predicate: ["tableTranslationKeyCell"], descendants: true }, { propertyName: "translationKeyTableCellChildTemplate", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "tableRelativeDateCellChildTemplate", first: true, predicate: ["tableRelativeDateCell"], descendants: true }, { propertyName: "relativeDateTableCellChildTemplate", first: true, predicate: ["relativeDateTableCell"], 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: "tableFilterCellChildTemplate", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCellChildTemplate", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCellChildTemplate", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCellChildTemplate", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCellChildTemplate", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "customTableFilterCellChildTemplate", first: true, predicate: ["customTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listGrid", first: true, predicate: DataListGridComponent, descendants: true }, { propertyName: "dataTable", first: true, predicate: DataTableComponent, descendants: true }], ngImport: i0, template: "<div *ngIf=\"layout !== 'table'\">\n  <ocx-data-list-grid\n    #ocxdatalistgrid\n    [name]=\"name\"\n    [data]=\"data\"\n    [columns]=\"columns\"\n    [filters]=\"filters\"\n    [sortDirection]=\"sortDirection\"\n    [sortField]=\"sortField\"\n    [sortStates]=\"sortStates\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"true\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [showAllOption]=\"showAllOption\"\n    [paginator]=\"listGridPaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n    [listItemTemplate]=\"_listItem ? listItem : undefined\"\n    [listValueTemplate]=\"_listValue ? listValue : undefined\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n    [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n    [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n    [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n    [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [parentTemplates]=\"templatesForChildren$ | async\"\n  >\n  </ocx-data-list-grid>\n  <ng-template #listItemSubtitleLines let-item>\n    <ng-container\n      *ngIf=\"_listItemSubtitleLines\"\n      [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n      [ngTemplateOutletContext]=\"{$implicit:item}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #gridItemSubtitleLines let-item>\n    <ng-container\n      *ngIf=\"_gridItemSubtitleLines\"\n      [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n      [ngTemplateOutletContext]=\"{$implicit:item}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #gridItem let-item>\n    <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container\n  ></ng-template>\n  <ng-template #listItem let-item>\n    <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container\n  ></ng-template>\n  <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_listValue\"\n      [ngTemplateOutlet]=\"_listValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_translationKeyListValue\"\n      [ngTemplateOutlet]=\"_translationKeyListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_numberListValue\"\n      [ngTemplateOutlet]=\"_numberListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_relativeDateListValue\"\n      [ngTemplateOutlet]=\"_relativeDateListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_customListValue\"\n      [ngTemplateOutlet]=\"_customListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_stringListValue\"\n      [ngTemplateOutlet]=\"_stringListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_dateListValue\"\n      [ngTemplateOutlet]=\"_dateListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n</div>\n\n<div *ngIf=\"layout === 'table'\">\n  <ocx-data-table\n    #ocxdatatable\n    [rows]=\"data\"\n    [columns]=\"columns\"\n    [filters]=\"filters\"\n    [sortDirection]=\"sortDirection\"\n    [sortColumn]=\"sortField\"\n    [sortStates]=\"sortStates\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [showAllOption]=\"showAllOption\"\n    [paginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [stringCellTemplate]=\"_stringTableCell ? stringCell : undefined\"\n    [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n    [customCellTemplate]=\"_customTableCell ? customCell : undefined\"\n    [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n    [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n    [cellTemplate]=\"_tableCell ? cell : undefined\"\n    [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n    [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n    [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n    [customFilterCellTemplate]=\"_customTableFilterCell ? customFilterCell : undefined\"\n    [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n    [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n    [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n    [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    [parentTemplates]=\"templatesForChildren$ | async\"\n    [allowSelectAll]=\"tableAllowSelectAll\"\n    [selectionEnabledField]=\"tableSelectionEnabledField\"\n  >\n  </ocx-data-table>\n  <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_stringTableCell\"\n      [ngTemplateOutlet]=\"_stringTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_numberTableCell\"\n      [ngTemplateOutlet]=\"_numberTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_customTableCell\"\n      [ngTemplateOutlet]=\"_customTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_dateTableCell\"\n      [ngTemplateOutlet]=\"_dateTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_relativeDateTableCell\"\n      [ngTemplateOutlet]=\"_relativeDateTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_tableCell\"\n      [ngTemplateOutlet]=\"_tableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_translationKeyTableCell\"\n      [ngTemplateOutlet]=\"_translationKeyTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_stringTableFilterCell\"\n      [ngTemplateOutlet]=\"_stringTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_tableFilterCell\"\n      [ngTemplateOutlet]=\"_tableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_dateTableFilterCell\"\n      [ngTemplateOutlet]=\"_dateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #customFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_customTableFilterCell\"\n      [ngTemplateOutlet]=\"_customTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_numberTableFilterCell\"\n      [ngTemplateOutlet]=\"_numberTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_relativeDateTableFilterCell\"\n      [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_translationKeyTableFilterCell\"\n      [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataListGridComponent, selector: "ocx-data-list-grid", inputs: ["titleLineId", "subtitleLineIds", "clientSideSorting", "clientSideFiltering", "sortStates", "pageSizes", "pageSize", "showAllOption", "emptyResultsMessage", "fallbackImage", "layout", "viewPermission", "editPermission", "deletePermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "viewMenuItemKey", "editMenuItemKey", "deleteMenuItemKey", "paginator", "page", "columns", "name", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "data", "filters", "sortDirection", "sortField", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "listItemTemplate", "gridItemTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "customListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "additionalActions", "parentTemplates"], outputs: ["viewItem", "editItem", "deleteItem", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "showAllOption", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "customCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "customFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DataViewComponent, selector: "ocx-data-view", inputs: { deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", data: "data", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", layout: "layout", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortField: "sortField", sortDirection: "sortDirection", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", page: "page", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", selectedRows: "selectedRows", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", expandable: "expandable", frozenExpandColumn: "frozenExpandColumn", expandedRows: "expandedRows", paginator: "paginator", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", stringTableCellTemplate: "stringTableCellTemplate", numberTableCellTemplate: "numberTableCellTemplate", customTableCellTemplate: "customTableCellTemplate", dateTableCellTemplate: "dateTableCellTemplate", tableDateCellTemplate: "tableDateCellTemplate", tableCellTemplate: "tableCellTemplate", translationKeyTableCellTemplate: "translationKeyTableCellTemplate", tableTranslationKeyCellTemplate: "tableTranslationKeyCellTemplate", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", gridItemTemplate: "gridItemTemplate", listItemTemplate: "listItemTemplate", relativeDateTableCellTemplate: "relativeDateTableCellTemplate", tableRelativeDateCellTemplate: "tableRelativeDateCellTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", customListValueTemplate: "customListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", tableFilterCellTemplate: "tableFilterCellTemplate", dateTableFilterCellTemplate: "dateTableFilterCellTemplate", relativeDateTableFilterCellTemplate: "relativeDateTableFilterCellTemplate", translationKeyTableFilterCellTemplate: "translationKeyTableFilterCellTemplate", stringTableFilterCellTemplate: "stringTableFilterCellTemplate", numberTableFilterCellTemplate: "numberTableFilterCellTemplate", customTableFilterCellTemplate: "customTableFilterCellTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed" }, providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], queries: [{ propertyName: "stringTableCellChildTemplate", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCellChildTemplate", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "customTableCellChildTemplate", first: true, predicate: ["customTableCell"], descendants: true }, { propertyName: "tableDateCellChildTemplate", first: true, predicate: ["tableDateCell"], descendants: true }, { propertyName: "dateTableCellChildTemplate", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableCellChildTemplate", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "tableTranslationKeyCellChildTemplate", first: true, predicate: ["tableTranslationKeyCell"], descendants: true }, { propertyName: "translationKeyTableCellChildTemplate", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "tableRelativeDateCellChildTemplate", first: true, predicate: ["tableRelativeDateCell"], descendants: true }, { propertyName: "relativeDateTableCellChildTemplate", first: true, predicate: ["relativeDateTableCell"], 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: "tableFilterCellChildTemplate", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCellChildTemplate", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCellChildTemplate", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCellChildTemplate", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCellChildTemplate", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "customTableFilterCellChildTemplate", first: true, predicate: ["customTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listGrid", first: true, predicate: DataListGridComponent, descendants: true }, { propertyName: "dataTable", first: true, predicate: DataTableComponent, descendants: true }], ngImport: i0, template: "<div *ngIf=\"layout !== 'table'\">\n  <ocx-data-list-grid\n    #ocxdatalistgrid\n    [name]=\"name\"\n    [data]=\"data\"\n    [columns]=\"columns\"\n    [filters]=\"filters\"\n    [sortDirection]=\"sortDirection\"\n    [sortField]=\"sortField\"\n    [sortStates]=\"sortStates\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"true\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [showAllOption]=\"showAllOption\"\n    [paginator]=\"listGridPaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n    [listItemTemplate]=\"_listItem ? listItem : undefined\"\n    [listValueTemplate]=\"_listValue ? listValue : undefined\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n    [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n    [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n    [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n    [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [parentTemplates]=\"templatesForChildren$ | async\"\n  >\n  </ocx-data-list-grid>\n  <ng-template #listItemSubtitleLines let-item>\n    <ng-container\n      *ngIf=\"_listItemSubtitleLines\"\n      [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n      [ngTemplateOutletContext]=\"{$implicit:item}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #gridItemSubtitleLines let-item>\n    <ng-container\n      *ngIf=\"_gridItemSubtitleLines\"\n      [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n      [ngTemplateOutletContext]=\"{$implicit:item}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #gridItem let-item>\n    <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container\n  ></ng-template>\n  <ng-template #listItem let-item>\n    <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container\n  ></ng-template>\n  <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_listValue\"\n      [ngTemplateOutlet]=\"_listValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_translationKeyListValue\"\n      [ngTemplateOutlet]=\"_translationKeyListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_numberListValue\"\n      [ngTemplateOutlet]=\"_numberListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_relativeDateListValue\"\n      [ngTemplateOutlet]=\"_relativeDateListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_customListValue\"\n      [ngTemplateOutlet]=\"_customListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_stringListValue\"\n      [ngTemplateOutlet]=\"_stringListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_dateListValue\"\n      [ngTemplateOutlet]=\"_dateListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n</div>\n\n<div *ngIf=\"layout === 'table'\">\n  <ocx-data-table\n    #ocxdatatable\n    [rows]=\"data\"\n    [columns]=\"columns\"\n    [filters]=\"filters\"\n    [sortDirection]=\"sortDirection\"\n    [sortColumn]=\"sortField\"\n    [sortStates]=\"sortStates\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [showAllOption]=\"showAllOption\"\n    [paginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [stringCellTemplate]=\"_stringTableCell ? stringCell : undefined\"\n    [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n    [customCellTemplate]=\"_customTableCell ? customCell : undefined\"\n    [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n    [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n    [cellTemplate]=\"_tableCell ? cell : undefined\"\n    [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n    [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n    [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n    [customFilterCellTemplate]=\"_customTableFilterCell ? customFilterCell : undefined\"\n    [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n    [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n    [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n    [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    [parentTemplates]=\"templatesForChildren$ | async\"\n    [allowSelectAll]=\"tableAllowSelectAll\"\n    [selectionEnabledField]=\"tableSelectionEnabledField\"\n    [expandable]=\"expandable\"\n    [frozenExpandColumn]=\"frozenExpandColumn\"\n    [expandedRows]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-table>\n  <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_stringTableCell\"\n      [ngTemplateOutlet]=\"_stringTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_numberTableCell\"\n      [ngTemplateOutlet]=\"_numberTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_customTableCell\"\n      [ngTemplateOutlet]=\"_customTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_dateTableCell\"\n      [ngTemplateOutlet]=\"_dateTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_relativeDateTableCell\"\n      [ngTemplateOutlet]=\"_relativeDateTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_tableCell\"\n      [ngTemplateOutlet]=\"_tableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_translationKeyTableCell\"\n      [ngTemplateOutlet]=\"_translationKeyTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_stringTableFilterCell\"\n      [ngTemplateOutlet]=\"_stringTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_tableFilterCell\"\n      [ngTemplateOutlet]=\"_tableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_dateTableFilterCell\"\n      [ngTemplateOutlet]=\"_dateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #customFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_customTableFilterCell\"\n      [ngTemplateOutlet]=\"_customTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_numberTableFilterCell\"\n      [ngTemplateOutlet]=\"_numberTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_relativeDateTableFilterCell\"\n      [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_translationKeyTableFilterCell\"\n      [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataListGridComponent, selector: "ocx-data-list-grid", inputs: ["titleLineId", "subtitleLineIds", "clientSideSorting", "clientSideFiltering", "sortStates", "pageSizes", "pageSize", "showAllOption", "emptyResultsMessage", "fallbackImage", "layout", "viewPermission", "editPermission", "deletePermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "viewMenuItemKey", "editMenuItemKey", "deleteMenuItemKey", "paginator", "page", "columns", "name", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "data", "filters", "sortDirection", "sortField", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "listItemTemplate", "gridItemTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "customListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "additionalActions", "parentTemplates"], outputs: ["viewItem", "editItem", "deleteItem", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "showAllOption", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "customCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "customFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "expandedRows", "expandable", "frozenExpandColumn", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ocx-data-view', providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], template: "<div *ngIf=\"layout !== 'table'\">\n  <ocx-data-list-grid\n    #ocxdatalistgrid\n    [name]=\"name\"\n    [data]=\"data\"\n    [columns]=\"columns\"\n    [filters]=\"filters\"\n    [sortDirection]=\"sortDirection\"\n    [sortField]=\"sortField\"\n    [sortStates]=\"sortStates\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"true\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [showAllOption]=\"showAllOption\"\n    [paginator]=\"listGridPaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n    [listItemTemplate]=\"_listItem ? listItem : undefined\"\n    [listValueTemplate]=\"_listValue ? listValue : undefined\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n    [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n    [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n    [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n    [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [parentTemplates]=\"templatesForChildren$ | async\"\n  >\n  </ocx-data-list-grid>\n  <ng-template #listItemSubtitleLines let-item>\n    <ng-container\n      *ngIf=\"_listItemSubtitleLines\"\n      [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n      [ngTemplateOutletContext]=\"{$implicit:item}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #gridItemSubtitleLines let-item>\n    <ng-container\n      *ngIf=\"_gridItemSubtitleLines\"\n      [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n      [ngTemplateOutletContext]=\"{$implicit:item}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #gridItem let-item>\n    <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container\n  ></ng-template>\n  <ng-template #listItem let-item>\n    <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container\n  ></ng-template>\n  <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_listValue\"\n      [ngTemplateOutlet]=\"_listValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_translationKeyListValue\"\n      [ngTemplateOutlet]=\"_translationKeyListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_numberListValue\"\n      [ngTemplateOutlet]=\"_numberListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_relativeDateListValue\"\n      [ngTemplateOutlet]=\"_relativeDateListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_customListValue\"\n      [ngTemplateOutlet]=\"_customListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_stringListValue\"\n      [ngTemplateOutlet]=\"_stringListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_dateListValue\"\n      [ngTemplateOutlet]=\"_dateListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n</div>\n\n<div *ngIf=\"layout === 'table'\">\n  <ocx-data-table\n    #ocxdatatable\n    [rows]=\"data\"\n    [columns]=\"columns\"\n    [filters]=\"filters\"\n    [sortDirection]=\"sortDirection\"\n    [sortColumn]=\"sortField\"\n    [sortStates]=\"sortStates\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [showAllOption]=\"showAllOption\"\n    [paginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [stringCellTemplate]=\"_stringTableCell ? stringCell : undefined\"\n    [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n    [customCellTemplate]=\"_customTableCell ? customCell : undefined\"\n    [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n    [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n    [cellTemplate]=\"_tableCell ? cell : undefined\"\n    [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n    [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n    [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n    [customFilterCellTemplate]=\"_customTableFilterCell ? customFilterCell : undefined\"\n    [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n    [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n    [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n    [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    [parentTemplates]=\"templatesForChildren$ | async\"\n    [allowSelectAll]=\"tableAllowSelectAll\"\n    [selectionEnabledField]=\"tableSelectionEnabledField\"\n  >\n  </ocx-data-table>\n  <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_stringTableCell\"\n      [ngTemplateOutlet]=\"_stringTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_numberTableCell\"\n      [ngTemplateOutlet]=\"_numberTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_customTableCell\"\n      [ngTemplateOutlet]=\"_customTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_dateTableCell\"\n      [ngTemplateOutlet]=\"_dateTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_relativeDateTableCell\"\n      [ngTemplateOutlet]=\"_relativeDateTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_tableCell\"\n      [ngTemplateOutlet]=\"_tableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_translationKeyTableCell\"\n      [ngTemplateOutlet]=\"_translationKeyTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_stringTableFilterCell\"\n      [ngTemplateOutlet]=\"_stringTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_tableFilterCell\"\n      [ngTemplateOutlet]=\"_tableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_dateTableFilterCell\"\n      [ngTemplateOutlet]=\"_dateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #customFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_customTableFilterCell\"\n      [ngTemplateOutlet]=\"_customTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_numberTableFilterCell\"\n      [ngTemplateOutlet]=\"_numberTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_relativeDateTableFilterCell\"\n      [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_translationKeyTableFilterCell\"\n      [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'ocx-data-view', providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], template: "<div *ngIf=\"layout !== 'table'\">\n  <ocx-data-list-grid\n    #ocxdatalistgrid\n    [name]=\"name\"\n    [data]=\"data\"\n    [columns]=\"columns\"\n    [filters]=\"filters\"\n    [sortDirection]=\"sortDirection\"\n    [sortField]=\"sortField\"\n    [sortStates]=\"sortStates\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"true\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [showAllOption]=\"showAllOption\"\n    [paginator]=\"listGridPaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n    [listItemTemplate]=\"_listItem ? listItem : undefined\"\n    [listValueTemplate]=\"_listValue ? listValue : undefined\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n    [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n    [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n    [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n    [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [parentTemplates]=\"templatesForChildren$ | async\"\n  >\n  </ocx-data-list-grid>\n  <ng-template #listItemSubtitleLines let-item>\n    <ng-container\n      *ngIf=\"_listItemSubtitleLines\"\n      [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n      [ngTemplateOutletContext]=\"{$implicit:item}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #gridItemSubtitleLines let-item>\n    <ng-container\n      *ngIf=\"_gridItemSubtitleLines\"\n      [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n      [ngTemplateOutletContext]=\"{$implicit:item}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #gridItem let-item>\n    <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container\n  ></ng-template>\n  <ng-template #listItem let-item>\n    <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container\n  ></ng-template>\n  <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_listValue\"\n      [ngTemplateOutlet]=\"_listValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_translationKeyListValue\"\n      [ngTemplateOutlet]=\"_translationKeyListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_numberListValue\"\n      [ngTemplateOutlet]=\"_numberListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_relativeDateListValue\"\n      [ngTemplateOutlet]=\"_relativeDateListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_customListValue\"\n      [ngTemplateOutlet]=\"_customListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_stringListValue\"\n      [ngTemplateOutlet]=\"_stringListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_dateListValue\"\n      [ngTemplateOutlet]=\"_dateListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n</div>\n\n<div *ngIf=\"layout === 'table'\">\n  <ocx-data-table\n    #ocxdatatable\n    [rows]=\"data\"\n    [columns]=\"columns\"\n    [filters]=\"filters\"\n    [sortDirection]=\"sortDirection\"\n    [sortColumn]=\"sortField\"\n    [sortStates]=\"sortStates\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [showAllOption]=\"showAllOption\"\n    [paginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [stringCellTemplate]=\"_stringTableCell ? stringCell : undefined\"\n    [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n    [customCellTemplate]=\"_customTableCell ? customCell : undefined\"\n    [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n    [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n    [cellTemplate]=\"_tableCell ? cell : undefined\"\n    [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n    [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n    [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n    [customFilterCellTemplate]=\"_customTableFilterCell ? customFilterCell : undefined\"\n    [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n    [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n    [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n    [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    [parentTemplates]=\"templatesForChildren$ | async\"\n    [allowSelectAll]=\"tableAllowSelectAll\"\n    [selectionEnabledField]=\"tableSelectionEnabledField\"\n    [expandable]=\"expandable\"\n    [frozenExpandColumn]=\"frozenExpandColumn\"\n    [expandedRows]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-table>\n  <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_stringTableCell\"\n      [ngTemplateOutlet]=\"_stringTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_numberTableCell\"\n      [ngTemplateOutlet]=\"_numberTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_customTableCell\"\n      [ngTemplateOutlet]=\"_customTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_dateTableCell\"\n      [ngTemplateOutlet]=\"_dateTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_relativeDateTableCell\"\n      [ngTemplateOutlet]=\"_relativeDateTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_tableCell\"\n      [ngTemplateOutlet]=\"_tableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_translationKeyTableCell\"\n      [ngTemplateOutlet]=\"_translationKeyTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_stringTableFilterCell\"\n      [ngTemplateOutlet]=\"_stringTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n  <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_tableFilterCell\"\n      [ngTemplateOutlet]=\"_tableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_dateTableFilterCell\"\n      [ngTemplateOutlet]=\"_dateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #customFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_customTableFilterCell\"\n      [ngTemplateOutlet]=\"_customTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_numberTableFilterCell\"\n      [ngTemplateOutlet]=\"_numberTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_relativeDateTableFilterCell\"\n      [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n  <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_translationKeyTableFilterCell\"\n      [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { listGrid: [{
                 type: ViewChild,
                 args: [DataListGridComponent]
@@ -3703,6 +3784,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], actionColumnPosition: [{
                 type: Input
+            }], expandable: [{
+                type: Input
+            }], frozenExpandColumn: [{
+                type: Input
+            }], expandedRows: [{
+                type: Input
             }], paginator: [{
                 type: Input
             }], sortStates: [{
@@ -3873,6 +3960,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }], componentStateChanged: [{
                 type: Output
+            }], rowExpanded: [{
+                type: Output
+            }], rowCollapsed: [{
+                type: Output
             }], parentTemplates: [{
                 type: Input
             }], templates: [{
@@ -4279,7 +4370,7 @@ class FilterViewComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FilterViewComponent, selector: "ocx-filter-view", inputs: { filters: "filters", columns: "columns", displayMode: "displayMode", selectDisplayedChips: "selectDisplayedChips", chipStyleClass: "chipStyleClass", tableStyle: "tableStyle", panelStyle: "panelStyle", templates: "templates" }, outputs: { filtered: "filtered", componentStateChanged: "componentStateChanged" }, viewQueries: [{ propertyName: "panel", first: true, predicate: OverlayPanel, descendants: true }, { propertyName: "manageButton", first: true, predicate: ["manageButton"], descendants: true }, { propertyName: "defaultTemplates", predicate: PrimeTemplate, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"columns$ | async as columns\">\n  <div *ngIf=\"filters$ | async as filters\" class=\"flex flex-wrap align-items-center gap-2\">\n    <ng-container *ngIf=\"displayMode === 'chips'; else noChipsContent\">\n      <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n        <ng-container *ngIf=\"selectDisplayedChips(filters, columns) as selectedFilters\">\n          <p-button\n            #chipFilterResetButton\n            id=\"ocxFilterViewReset\"\n            (onClick)=\"onResetFilersClick()\"\n            icon=\"pi pi-eraser\"\n            pTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n            tooltipPosition=\"top\"\n            tooltipEvent=\"hover\"\n            [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n          ></p-button>\n          <ng-container *ngIf=\"filters.length <= 0\">\n            <ng-container\n              *ngIf=\"_fitlerViewNoSelection; else defaultNoFilters\"\n              [ngTemplateOutlet]=\"_fitlerViewNoSelection\"\n            >\n            </ng-container>\n            <ng-template #defaultNoFilters>\n              <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"(chipTemplates$ | async) ?? {} as templates\">\n            <ng-container *ngFor=\"let filter of selectedFilters\">\n              <ng-container *ngIf=\"getColumnForFilter(filter, columns) as column\">\n                <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass\">\n                  <ng-container\n                    *ngIf=\"_filterViewChipContent; else chipContentTemplate\"\n                    [ngTemplateOutlet]=\"_filterViewChipContent\"\n                    [ngTemplateOutletContext]=\"{\n                filter: filter,\n                column: column,\n                filterValueTemplates: templates,\n                truthyTemplate: truthyTemplate,\n                filterValueTemplate: chipTemplate\n              }\"\n                  >\n                  </ng-container>\n                  <ng-template #chipContentTemplate>\n                    <span\n                      *ngIf=\"columns$ | async as columns\"\n                      style=\"white-space: nowrap\"\n                      class=\"p-chip-text flex flex-nowrap\"\n                      >{{column?.nameKey ?? '' | translate }}:<ng-container\n                        *ngIf=\"filter.filterType === FilterType.EQUAL || !filter.filterType\"\n                        [ngTemplateOutlet]=\"chipTemplate\"\n                        [ngTemplateOutletContext]=\"{\n                        templates: templates,\n                        filter: filter,\n                        column: column\n                      }\"\n                      ></ng-container>\n                      <ng-container *ngIf=\"filter.filterType === FilterType.TRUTHY\">\n                        <ng-container\n                          [ngTemplateOutlet]=\"truthyTemplate\"\n                          [ngTemplateOutletContext]=\"{\n                      value: filter.value\n                    }\"\n                        ></ng-container>\n                      </ng-container>\n                    </span>\n                  </ng-template>\n                </p-chip>\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"selectedFilters.length < filters.length\">\n              <p-chip\n                #showMoreChip\n                id=\"ocxFilterViewShowMore\"\n                tabindex=\"0\"\n                role=\"button\"\n                (click)=\"showPanel($event)\"\n                class=\"cursor-pointer filter-view-focusable\"\n                (keydown.enter)=\"showPanel($event)\"\n                (keydown.space)=\"showPanel($event)\"\n              >\n                <ng-container\n                  *ngIf=\"_filterViewShowMoreChip; else showMoreChipTemplate\"\n                  [ngTemplateOutlet]=\"_filterViewShowMoreChip\"\n                  [ngTemplateOutletContext]=\"{\n            $implicit: filters.length - selectedFilters.length\n          }\"\n                >\n                </ng-container>\n                <ng-template #showMoreChipTemplate>\n                  <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n                </ng-template>\n                <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n              </p-chip>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n    <ng-template #noChipsContent>\n      <p-button\n        #manageButton\n        id=\"ocxFilterViewManage\"\n        (onClick)=\"showPanel($event)\"\n        icon=\"pi pi-sliders-h\"\n        label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n        pTooltip=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate }}\"\n        tooltipPosition=\"top\"\n        tooltipEvent=\"hover\"\n        [badge]=\"filters.length.toString()\"\n        [ariaLabel]=\"'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n      ></p-button>\n      <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n    </ng-template>\n\n    <ng-template #filterTablePanel>\n      <p-overlayPanel *ngIf=\"tableTemplates$ | async as templates\" #op [style]=\"panelStyle\" (onHide)=\"focusTrigger()\">\n        <ng-template pTemplate=\"content\">\n          <div pFocusTrap>\n            <div class=\"flex justify-content-between align-items-center mb-2\">\n              <span class=\"text-2xl font-medium\">{{'OCX_FILTER_VIEW.PANEL_TITLE' | translate}}</span>\n              <div>\n                <p-button\n                  pAutoFocus\n                  [autofocus]=\"true\"\n                  id=\"ocxFilterViewOverlayReset\"\n                  (onClick)=\"onResetFilersClick()\"\n                  icon=\"pi pi-eraser\"\n                  pTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n                  tooltipPosition=\"top\"\n                  tooltipEvent=\"hover\"\n                  [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n                ></p-button>\n              </div>\n            </div>\n            <ocx-data-table\n              id=\"ocxFilterViewDataTable\"\n              [rows]=\"(columnFilterDataRows$ | async) ?? []\"\n              [columns]=\"columnFilterTableColumns\"\n              [emptyResultsMessage]=\"'OCX_FILTER_VIEW.NO_FILTERS' | translate\"\n              [paginator]=\"false\"\n              [tableStyle]=\"tableStyle\"\n            >\n              <ng-template pTemplate=\"columnIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n                <ng-container\n                  [ngTemplateOutlet]=\"templates[column.id]\"\n                  [ngTemplateOutletContext]=\"{\n            rowObject: rowObject,\n            column: column,\n          }\"\n                >\n                </ng-container>\n              </ng-template>\n              <ng-template pTemplate=\"valueIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n                <ng-container *ngIf=\"getColumn(rowObject['valueColumnId'], columns) as valueColumn\">\n                  <ng-container\n                    *ngIf=\"!valueColumn.filterType || valueColumn.filterType === FilterType.EQUAL\"\n                    [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n                    [ngTemplateOutletContext]=\"{\n              rowObject: getRowForValueColumn(rowObject),\n              column: valueColumn\n            }\"\n                  >\n                  </ng-container>\n                  <ng-container\n                    *ngIf=\"valueColumn.filterType === FilterType.TRUTHY\"\n                    [ngTemplateOutlet]=\"truthyTemplate\"\n                    [ngTemplateOutletContext]=\"{\n        value: resolveFieldData(rowObject, column.id)\n      }\"\n                  >\n                  </ng-container>\n                </ng-container>\n              </ng-template>\n              <ng-template pTemplate=\"actionsIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n                <div>\n                  <button\n                    pButton\n                    class=\"p-button-rounded p-button-danger p-button-text\"\n                    title=\"{{ 'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_TITLE' | translate }}\"\n                    [attr.aria-label]=\"'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_ARIA_LABEL' | translate\"\n                    icon=\"pi pi-trash\"\n                    (click)=\"onFilterDelete(rowObject)\"\n                  ></button>\n                </div>\n              </ng-template>\n            </ocx-data-table>\n          </div>\n        </ng-template>\n      </p-overlayPanel>\n    </ng-template>\n  </div>\n</ng-container>\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"templates[column.id] as template\"\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n            rowObject: getRowObjectFromFiterData(filter),\n            column: column\n          }\"\n  >\n  </ng-container>\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n  <ng-container *ngIf=\"value\"> {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} </ng-container>\n  <ng-container *ngIf=\"!value\"> {{'OCX_FILTER_VIEW.FILTER_NO' | translate}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateValue\" 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=\"defaultRelativeDateValue\" 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=\"defaultTranslationKeyValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }}</ng-container>\n</ng-template>\n", styles: [".filter-view-focusable:focus{outline:1px solid var(--primary-color, var(--primary-color-default));outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i8.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i6$3.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i7$3.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "showAllOption", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "customCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "customFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "directive", type: IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: ["ocxIfBreakpoint", "ocxIfBreakpointElseTemplate"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FilterViewComponent, selector: "ocx-filter-view", inputs: { filters: "filters", columns: "columns", displayMode: "displayMode", selectDisplayedChips: "selectDisplayedChips", chipStyleClass: "chipStyleClass", tableStyle: "tableStyle", panelStyle: "panelStyle", templates: "templates" }, outputs: { filtered: "filtered", componentStateChanged: "componentStateChanged" }, viewQueries: [{ propertyName: "panel", first: true, predicate: OverlayPanel, descendants: true }, { propertyName: "manageButton", first: true, predicate: ["manageButton"], descendants: true }, { propertyName: "defaultTemplates", predicate: PrimeTemplate, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"columns$ | async as columns\">\n  <div *ngIf=\"filters$ | async as filters\" class=\"flex flex-wrap align-items-center gap-2\">\n    <ng-container *ngIf=\"displayMode === 'chips'; else noChipsContent\">\n      <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n        <ng-container *ngIf=\"selectDisplayedChips(filters, columns) as selectedFilters\">\n          <p-button\n            #chipFilterResetButton\n            id=\"ocxFilterViewReset\"\n            (onClick)=\"onResetFilersClick()\"\n            icon=\"pi pi-eraser\"\n            pTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n            tooltipPosition=\"top\"\n            tooltipEvent=\"hover\"\n            [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n          ></p-button>\n          <ng-container *ngIf=\"filters.length <= 0\">\n            <ng-container\n              *ngIf=\"_fitlerViewNoSelection; else defaultNoFilters\"\n              [ngTemplateOutlet]=\"_fitlerViewNoSelection\"\n            >\n            </ng-container>\n            <ng-template #defaultNoFilters>\n              <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"(chipTemplates$ | async) ?? {} as templates\">\n            <ng-container *ngFor=\"let filter of selectedFilters\">\n              <ng-container *ngIf=\"getColumnForFilter(filter, columns) as column\">\n                <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass\">\n                  <ng-container\n                    *ngIf=\"_filterViewChipContent; else chipContentTemplate\"\n                    [ngTemplateOutlet]=\"_filterViewChipContent\"\n                    [ngTemplateOutletContext]=\"{\n                filter: filter,\n                column: column,\n                filterValueTemplates: templates,\n                truthyTemplate: truthyTemplate,\n                filterValueTemplate: chipTemplate\n              }\"\n                  >\n                  </ng-container>\n                  <ng-template #chipContentTemplate>\n                    <span\n                      *ngIf=\"columns$ | async as columns\"\n                      style=\"white-space: nowrap\"\n                      class=\"p-chip-text flex flex-nowrap\"\n                      >{{column?.nameKey ?? '' | translate }}:<ng-container\n                        *ngIf=\"filter.filterType === FilterType.EQUAL || !filter.filterType\"\n                        [ngTemplateOutlet]=\"chipTemplate\"\n                        [ngTemplateOutletContext]=\"{\n                        templates: templates,\n                        filter: filter,\n                        column: column\n                      }\"\n                      ></ng-container>\n                      <ng-container *ngIf=\"filter.filterType === FilterType.TRUTHY\">\n                        <ng-container\n                          [ngTemplateOutlet]=\"truthyTemplate\"\n                          [ngTemplateOutletContext]=\"{\n                      value: filter.value\n                    }\"\n                        ></ng-container>\n                      </ng-container>\n                    </span>\n                  </ng-template>\n                </p-chip>\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"selectedFilters.length < filters.length\">\n              <p-chip\n                #showMoreChip\n                id=\"ocxFilterViewShowMore\"\n                tabindex=\"0\"\n                role=\"button\"\n                (click)=\"showPanel($event)\"\n                class=\"cursor-pointer filter-view-focusable\"\n                (keydown.enter)=\"showPanel($event)\"\n                (keydown.space)=\"showPanel($event)\"\n              >\n                <ng-container\n                  *ngIf=\"_filterViewShowMoreChip; else showMoreChipTemplate\"\n                  [ngTemplateOutlet]=\"_filterViewShowMoreChip\"\n                  [ngTemplateOutletContext]=\"{\n            $implicit: filters.length - selectedFilters.length\n          }\"\n                >\n                </ng-container>\n                <ng-template #showMoreChipTemplate>\n                  <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n                </ng-template>\n                <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n              </p-chip>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n    <ng-template #noChipsContent>\n      <p-button\n        #manageButton\n        id=\"ocxFilterViewManage\"\n        (onClick)=\"showPanel($event)\"\n        icon=\"pi pi-sliders-h\"\n        label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n        pTooltip=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate }}\"\n        tooltipPosition=\"top\"\n        tooltipEvent=\"hover\"\n        [badge]=\"filters.length.toString()\"\n        [ariaLabel]=\"'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n      ></p-button>\n      <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n    </ng-template>\n\n    <ng-template #filterTablePanel>\n      <p-overlayPanel *ngIf=\"tableTemplates$ | async as templates\" #op [style]=\"panelStyle\" (onHide)=\"focusTrigger()\">\n        <ng-template pTemplate=\"content\">\n          <div pFocusTrap>\n            <div class=\"flex justify-content-between align-items-center mb-2\">\n              <span class=\"text-2xl font-medium\">{{'OCX_FILTER_VIEW.PANEL_TITLE' | translate}}</span>\n              <div>\n                <p-button\n                  pAutoFocus\n                  [autofocus]=\"true\"\n                  id=\"ocxFilterViewOverlayReset\"\n                  (onClick)=\"onResetFilersClick()\"\n                  icon=\"pi pi-eraser\"\n                  pTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n                  tooltipPosition=\"top\"\n                  tooltipEvent=\"hover\"\n                  [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n                ></p-button>\n              </div>\n            </div>\n            <ocx-data-table\n              id=\"ocxFilterViewDataTable\"\n              [rows]=\"(columnFilterDataRows$ | async) ?? []\"\n              [columns]=\"columnFilterTableColumns\"\n              [emptyResultsMessage]=\"'OCX_FILTER_VIEW.NO_FILTERS' | translate\"\n              [paginator]=\"false\"\n              [tableStyle]=\"tableStyle\"\n            >\n              <ng-template pTemplate=\"columnIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n                <ng-container\n                  [ngTemplateOutlet]=\"templates[column.id]\"\n                  [ngTemplateOutletContext]=\"{\n            rowObject: rowObject,\n            column: column,\n          }\"\n                >\n                </ng-container>\n              </ng-template>\n              <ng-template pTemplate=\"valueIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n                <ng-container *ngIf=\"getColumn(rowObject['valueColumnId'], columns) as valueColumn\">\n                  <ng-container\n                    *ngIf=\"!valueColumn.filterType || valueColumn.filterType === FilterType.EQUAL\"\n                    [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n                    [ngTemplateOutletContext]=\"{\n              rowObject: getRowForValueColumn(rowObject),\n              column: valueColumn\n            }\"\n                  >\n                  </ng-container>\n                  <ng-container\n                    *ngIf=\"valueColumn.filterType === FilterType.TRUTHY\"\n                    [ngTemplateOutlet]=\"truthyTemplate\"\n                    [ngTemplateOutletContext]=\"{\n        value: resolveFieldData(rowObject, column.id)\n      }\"\n                  >\n                  </ng-container>\n                </ng-container>\n              </ng-template>\n              <ng-template pTemplate=\"actionsIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n                <div>\n                  <button\n                    pButton\n                    class=\"p-button-rounded p-button-danger p-button-text\"\n                    title=\"{{ 'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_TITLE' | translate }}\"\n                    [attr.aria-label]=\"'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_ARIA_LABEL' | translate\"\n                    icon=\"pi pi-trash\"\n                    (click)=\"onFilterDelete(rowObject)\"\n                  ></button>\n                </div>\n              </ng-template>\n            </ocx-data-table>\n          </div>\n        </ng-template>\n      </p-overlayPanel>\n    </ng-template>\n  </div>\n</ng-container>\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"templates[column.id] as template\"\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n            rowObject: getRowObjectFromFiterData(filter),\n            column: column\n          }\"\n  >\n  </ng-container>\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n  <ng-container *ngIf=\"value\"> {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} </ng-container>\n  <ng-container *ngIf=\"!value\"> {{'OCX_FILTER_VIEW.FILTER_NO' | translate}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateValue\" 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=\"defaultRelativeDateValue\" 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=\"defaultTranslationKeyValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }}</ng-container>\n</ng-template>\n", styles: [".filter-view-focusable:focus{outline:1px solid var(--primary-color, var(--primary-color-default));outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i8.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i6$3.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i7$3.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "showAllOption", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "customCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "customFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "expandedRows", "expandable", "frozenExpandColumn", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed"] }, { kind: "directive", type: IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: ["ocxIfBreakpoint", "ocxIfBreakpointElseTemplate"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterViewComponent, decorators: [{
             type: Component,
@@ -4616,6 +4707,9 @@ class InteractiveDataViewComponent {
         this.displayedColumnKeys$ = new BehaviorSubject([]);
         this.frozenActionColumn = false;
         this.actionColumnPosition = 'right';
+        this.expandable = false;
+        this.frozenExpandColumn = false;
+        this.expandedRows = [];
         this.templates$ = new BehaviorSubject(undefined);
         this.filtered = new EventEmitter();
         this.sorted = new EventEmitter();
@@ -4629,6 +4723,8 @@ class InteractiveDataViewComponent {
         this.selectionChanged = new EventEmitter();
         this.pageChanged = new EventEmitter();
         this.pageSizeChanged = new EventEmitter();
+        this.rowExpanded = new EventEmitter();
+        this.rowCollapsed = new EventEmitter();
         this.componentStateChanged = new EventEmitter();
         this.selectedGroupKey$ = new BehaviorSubject('');
         this._data = [];
@@ -4917,11 +5013,11 @@ class InteractiveDataViewComponent {
         this.pageSizeChanged.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InteractiveDataViewComponent, deps: [{ token: i1$3.SlotService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InteractiveDataViewComponent, selector: "ocx-interactive-data-view", inputs: { searchConfigPermission: "searchConfigPermission", deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", supportedViewLayouts: "supportedViewLayouts", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", totalRecordsOnServer: "totalRecordsOnServer", layout: "layout", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey", groupSelectionNoGroupSelectedKey: "groupSelectionNoGroupSelectedKey", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", additionalActions: "additionalActions", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", disableFilterView: "disableFilterView", filterViewDisplayMode: "filterViewDisplayMode", filterViewChipStyleClass: "filterViewChipStyleClass", filterViewTableStyle: "filterViewTableStyle", filterViewPanelStyle: "filterViewPanelStyle", selectDisplayedChips: "selectDisplayedChips", page: "page", selectedRows: "selectedRows", displayedColumnKeys: "displayedColumnKeys", displayedColumns: "displayedColumns", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", paginator: "paginator", data: "data" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnsChange: "displayedColumnsChange", displayedColumnKeysChange: "displayedColumnKeysChange", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], queries: [{ propertyName: "tableCell", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "tableDateCell", first: true, predicate: ["tableDateCell"], descendants: true }, { propertyName: "dateTableCell", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableRelativeDateCell", first: true, predicate: ["tableRelativeDateCell"], descendants: true }, { propertyName: "relativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "tableTranslationKeyCell", first: true, predicate: ["tableTranslationKeyCell"], descendants: true }, { propertyName: "translationKeyTableCell", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLines", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLines", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "stringTableCell", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCell", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "customTableCell", first: true, predicate: ["customTableCell"], descendants: true }, { propertyName: "gridItem", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItem", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "topCenter", first: true, predicate: ["topCenter"], descendants: true }, { propertyName: "listValue", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValue", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValue", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValue", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "customListValue", first: true, predicate: ["customListValue"], descendants: true }, { propertyName: "stringListValue", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValue", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "tableFilterCell", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCell", first: true, predicate: ["dateTableFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCell", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCell", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCell", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCell", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "customTableFilterCell", first: true, predicate: ["customTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "dataView", first: true, predicate: DataViewComponent, descendants: true }], ngImport: i0, template: "<div class=\"p-3 border-bottom-1 surface-border\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n      <ocx-data-layout-selection\n        [supportedViewLayouts]=\"supportedViewLayouts\"\n        [layout]=\"layout\"\n        (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n        (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n      ></ocx-data-layout-selection>\n      <ocx-filter-view\n        *ngIf=\"!disableFilterView\"\n        [filters]=\"filters\"\n        [columns]=\"columns\"\n        [templates]=\"templates$ | async\"\n        [displayMode]=\"filterViewDisplayMode\"\n        [selectDisplayedChips]=\"selectDisplayedChips\"\n        [chipStyleClass]=\"filterViewChipStyleClass\"\n        [tableStyle]=\"filterViewTableStyle\"\n        (filtered)=\"filtering($event)\"\n        (componentStateChanged)=\"filterViewComponentState$.next($event)\"\n      ></ocx-filter-view>\n    </div>\n\n    <div *ngIf=\"topCenter\">\n      <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n    </div>\n\n    <div *ngIf=\"layout !== 'table'\" class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection\"\n        [sortField]=\"sortField\"\n        [columns]=\"(displayedColumns$ | async) ?? []\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n\n    <div\n      [ngStyle]=\"layout !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      <ng-container *ngIf=\"isColumnGroupSelectionComponentDefined$ | async; else defaultColumnGroupSelectionComponent\">\n        <ng-container *ngIf=\"displayedColumnKeys$ | async as displayedColumnKeys\">\n          <ocx-slot\n            [ngStyle]=\"layout !== 'table' ? {'display' : 'none'}  : {}\"\n            *ocxIfPermission=\"searchConfigPermission; elseTemplate: defaultColumnGroupSelectionComponent\"\n            name=\"{{columnGroupSlotName}}\"\n            [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey, defaultGroupKey: defaultGroupKey, customGroupKey: customGroupKey, columns: columns, selectedGroupKey: selectedGroupKey, layout: layout, displayedColumnsIds: displayedColumnKeys }\"\n            [outputs]=\"{ groupSelectionChanged: groupSelectionChangedSlotEmitter }\"\n          >\n            <ng-template #skeleton>\n              <div class=\"flex\">\n                <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n              </div>\n            </ng-template>\n          </ocx-slot>\n        </ng-container>\n      </ng-container>\n\n      <ocx-custom-group-column-selector\n        *ngIf=\"layout === 'table'\"\n        [columns]=\"columns\"\n        [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\n        [customGroupKey]=\"customGroupKey\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n    </div>\n  </div>\n</div>\n<div class=\"p-3\">\n  <ocx-data-view\n    [columns]=\"(displayedColumns$ | async) ?? []\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [showAllOption]=\"showAllOption\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [listGridPaginator]=\"listGridPaginator\"\n    [tablePaginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [stringTableCellTemplate]=\"primeNgStringTableCell ?? _stringTableCell\"\n    [numberTableCellTemplate]=\"primeNgNumberTableCell ?? _numberTableCell\"\n    [customTableCellTemplate]=\"primeNgCustomTableCell ?? _customTableCell\"\n    [dateTableCellTemplate]=\"primeNgDateTableCell ?? _dateTableCell ?? primeNgTableDateCell ?? _tableDateCell\"\n    [relativeDateTableCellTemplate]=\"primeNgRelativeDateTableCell ?? _relativeDateTableCell ?? primeNgTableRelativeDateCell ?? _tableRelativeDateCell\"\n    [tableCellTemplate]=\"primeNgTableCell ?? _tableCell\"\n    [translationKeyTableCellTemplate]=\"primeNgTranslationKeyTableCell ?? _translationKeyTableCell ?? primeNgTableTranslationKeyCell ?? _tableTranslationKeyCell\"\n    [gridItemSubtitleLinesTemplate]=\"primeNgGridItemSubtitleLines ?? _gridItemSubtitleLines\"\n    [listItemSubtitleLinesTemplate]=\"primeNgListItemSubtitleLines ?? _listItemSubtitleLines\"\n    [listItemTemplate]=\"primeNgListItem ?? _listItem\"\n    [listValueTemplate]=\"primeNgListValue ?? _listValue\"\n    [translationKeyListValueTemplate]=\"primeNgTranslationKeyListValue ?? _translationKeyListValue\"\n    [numberListValueTemplate]=\"primeNgNumberListValue ?? _numberListValue\"\n    [relativeDateListValueTemplate]=\"primeNgRelativeDateListValue ?? _relativeDateListValue\"\n    [customListValueTemplate]=\"primeNgCustomListValue ?? _customListValue\"\n    [stringListValueTemplate]=\"primeNgStringListValue ?? _stringListValue\"\n    [dateListValueTemplate]=\"primeNgDateListValue ?? _dateListValue\"\n    [gridItemTemplate]=\"primeNgGridItem ?? _gridItem\"\n    [tableFilterCellTemplate]=\"primeNgTableFilterCell ?? _tableFilterCell\"\n    [dateTableFilterCellTemplate]=\"primeNgDateTableFilterCell ?? _dateTableFilterCell\"\n    [customTableFilterCellTemplate]=\"primeNgCustomTableFilterCell ?? _customTableFilterCell\"\n    [numberTableFilterCellTemplate]=\"primeNgNumberTableFilterCell ?? _numberTableFilterCell\"\n    [stringTableFilterCellTemplate]=\"primeNgStringTableFilterCell ?? _stringTableFilterCell\"\n    [relativeDateTableFilterCellTemplate]=\"primeNgRelativeDateTableFilterCell ?? _relativeDateTableFilterCell\"\n    [translationKeyTableFilterCellTemplate]=\"primeNgTranslationKeyTableFilterCell ?? _translationKeyTableFilterCell\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates$ | async\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  <ocx-column-group-selection\n    *ngIf=\"layout === 'table'\"\n    [selectedGroupKey]=\"selectedGroupKey ?? defaultGroupKey\"\n    [columns]=\"columns\"\n    [defaultGroupKey]=\"defaultGroupKey !== customGroupKey ? defaultGroupKey : ''\"\n    [customGroupKey]=\"customGroupKey\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableCell\"\n    [ngTemplateOutlet]=\"_stringTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  <ng-template #numberTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_numberTableCell\"\n      [ngTemplateOutlet]=\"_numberTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n</ng-template>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableDateCell\"\n    [ngTemplateOutlet]=\"_tableDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableCell\"\n    [ngTemplateOutlet]=\"_dateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableRelativeDateCell\"\n    [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableCell\"\n    [ngTemplateOutlet]=\"_tableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableTranslationKeyCell\"\n    [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_gridItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container>\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_listItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItem let-item>\n  <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listItem let-item>\n  <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_listValue\"\n    [ngTemplateOutlet]=\"_listValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyListValue\"\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberListValue\"\n    [ngTemplateOutlet]=\"_numberListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateListValue\"\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customListValue\"\n    [ngTemplateOutlet]=\"_customListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringListValue\"\n    [ngTemplateOutlet]=\"_stringListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateListValue\"\n    [ngTemplateOutlet]=\"_dateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableFilterCell\"\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberTableFilterCell\"\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customTableFilterCell\"\n    [ngTemplateOutlet]=\"_customTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableFilterCell\"\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i10.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i1$3.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "inputs", "outputs"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["groupSelectionChanged", "componentStateChanged"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "customGroupKey", "dialogTitle", "dialogTitleKey", "openButtonTitle", "openButtonTitleKey", "openButtonAriaLabel", "openButtonAriaLabelKey", "saveButtonLabel", "saveButtonLabelKey", "saveButtonAriaLabel", "saveButtonAriaLabelKey", "cancelButtonLabel", "cancelButtonLabelKey", "cancelButtonAriaLabel", "cancelButtonAriaLabelKey", "activeColumnsLabel", "activeColumnsLabelKey", "inactiveColumnsLabel", "inactiveColumnsLabelKey", "frozenActionColumn", "actionColumnPosition"], outputs: ["columnSelectionChanged", "actionColumnConfigChanged", "componentStateChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["dataViewLayoutChange", "componentStateChanged"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortChange", "sortDirectionChange", "componentStateChanged", "columnsChange"] }, { kind: "component", type: DataViewComponent, selector: "ocx-data-view", inputs: ["deletePermission", "editPermission", "viewPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "tableSelectionEnabledField", "tableAllowSelectAll", "data", "name", "titleLineId", "subtitleLineIds", "layout", "columns", "emptyResultsMessage", "clientSideSorting", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "listGridPaginator", "tablePaginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "paginator", "sortStates", "pageSizes", "pageSize", "showAllOption", "stringTableCellTemplate", "numberTableCellTemplate", "customTableCellTemplate", "dateTableCellTemplate", "tableDateCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "tableTranslationKeyCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "tableRelativeDateCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "customListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "tableFilterCellTemplate", "dateTableFilterCellTemplate", "relativeDateTableFilterCellTemplate", "translationKeyTableFilterCellTemplate", "stringTableFilterCellTemplate", "numberTableFilterCellTemplate", "customTableFilterCellTemplate", "additionalActions", "parentTemplates"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "component", type: FilterViewComponent, selector: "ocx-filter-view", inputs: ["filters", "columns", "displayMode", "selectDisplayedChips", "chipStyleClass", "tableStyle", "panelStyle", "templates"], outputs: ["filtered", "componentStateChanged"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InteractiveDataViewComponent, selector: "ocx-interactive-data-view", inputs: { searchConfigPermission: "searchConfigPermission", deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", supportedViewLayouts: "supportedViewLayouts", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", totalRecordsOnServer: "totalRecordsOnServer", layout: "layout", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey", groupSelectionNoGroupSelectedKey: "groupSelectionNoGroupSelectedKey", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", additionalActions: "additionalActions", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", disableFilterView: "disableFilterView", filterViewDisplayMode: "filterViewDisplayMode", filterViewChipStyleClass: "filterViewChipStyleClass", filterViewTableStyle: "filterViewTableStyle", filterViewPanelStyle: "filterViewPanelStyle", selectDisplayedChips: "selectDisplayedChips", page: "page", selectedRows: "selectedRows", displayedColumnKeys: "displayedColumnKeys", displayedColumns: "displayedColumns", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", expandable: "expandable", frozenExpandColumn: "frozenExpandColumn", expandedRows: "expandedRows", paginator: "paginator", data: "data" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnsChange: "displayedColumnsChange", displayedColumnKeysChange: "displayedColumnKeysChange", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], queries: [{ propertyName: "tableCell", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "tableDateCell", first: true, predicate: ["tableDateCell"], descendants: true }, { propertyName: "dateTableCell", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableRelativeDateCell", first: true, predicate: ["tableRelativeDateCell"], descendants: true }, { propertyName: "relativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "tableTranslationKeyCell", first: true, predicate: ["tableTranslationKeyCell"], descendants: true }, { propertyName: "translationKeyTableCell", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLines", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLines", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "stringTableCell", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCell", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "customTableCell", first: true, predicate: ["customTableCell"], descendants: true }, { propertyName: "gridItem", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItem", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "topCenter", first: true, predicate: ["topCenter"], descendants: true }, { propertyName: "listValue", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValue", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValue", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValue", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "customListValue", first: true, predicate: ["customListValue"], descendants: true }, { propertyName: "stringListValue", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValue", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "tableFilterCell", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCell", first: true, predicate: ["dateTableFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCell", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCell", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCell", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCell", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "customTableFilterCell", first: true, predicate: ["customTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "dataView", first: true, predicate: DataViewComponent, descendants: true }], ngImport: i0, template: "<div class=\"p-3 border-bottom-1 surface-border\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n      <ocx-data-layout-selection\n        [supportedViewLayouts]=\"supportedViewLayouts\"\n        [layout]=\"layout\"\n        (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n        (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n      ></ocx-data-layout-selection>\n      <ocx-filter-view\n        *ngIf=\"!disableFilterView\"\n        [filters]=\"filters\"\n        [columns]=\"columns\"\n        [templates]=\"templates$ | async\"\n        [displayMode]=\"filterViewDisplayMode\"\n        [selectDisplayedChips]=\"selectDisplayedChips\"\n        [chipStyleClass]=\"filterViewChipStyleClass\"\n        [tableStyle]=\"filterViewTableStyle\"\n        (filtered)=\"filtering($event)\"\n        (componentStateChanged)=\"filterViewComponentState$.next($event)\"\n      ></ocx-filter-view>\n    </div>\n\n    <div *ngIf=\"topCenter\">\n      <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n    </div>\n\n    <div *ngIf=\"layout !== 'table'\" class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection\"\n        [sortField]=\"sortField\"\n        [columns]=\"(displayedColumns$ | async) ?? []\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n\n    <div\n      [ngStyle]=\"layout !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      <ng-container *ngIf=\"isColumnGroupSelectionComponentDefined$ | async; else defaultColumnGroupSelectionComponent\">\n        <ng-container *ngIf=\"displayedColumnKeys$ | async as displayedColumnKeys\">\n          <ocx-slot\n            [ngStyle]=\"layout !== 'table' ? {'display' : 'none'}  : {}\"\n            *ocxIfPermission=\"searchConfigPermission; elseTemplate: defaultColumnGroupSelectionComponent\"\n            name=\"{{columnGroupSlotName}}\"\n            [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey, defaultGroupKey: defaultGroupKey, customGroupKey: customGroupKey, columns: columns, selectedGroupKey: selectedGroupKey, layout: layout, displayedColumnsIds: displayedColumnKeys }\"\n            [outputs]=\"{ groupSelectionChanged: groupSelectionChangedSlotEmitter }\"\n          >\n            <ng-template #skeleton>\n              <div class=\"flex\">\n                <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n              </div>\n            </ng-template>\n          </ocx-slot>\n        </ng-container>\n      </ng-container>\n\n      <ocx-custom-group-column-selector\n        *ngIf=\"layout === 'table'\"\n        [columns]=\"columns\"\n        [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\n        [customGroupKey]=\"customGroupKey\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n    </div>\n  </div>\n</div>\n<div class=\"p-3\">\n  <ocx-data-view\n    [columns]=\"(displayedColumns$ | async) ?? []\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [showAllOption]=\"showAllOption\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [listGridPaginator]=\"listGridPaginator\"\n    [tablePaginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [stringTableCellTemplate]=\"primeNgStringTableCell ?? _stringTableCell\"\n    [numberTableCellTemplate]=\"primeNgNumberTableCell ?? _numberTableCell\"\n    [customTableCellTemplate]=\"primeNgCustomTableCell ?? _customTableCell\"\n    [dateTableCellTemplate]=\"primeNgDateTableCell ?? _dateTableCell ?? primeNgTableDateCell ?? _tableDateCell\"\n    [relativeDateTableCellTemplate]=\"primeNgRelativeDateTableCell ?? _relativeDateTableCell ?? primeNgTableRelativeDateCell ?? _tableRelativeDateCell\"\n    [tableCellTemplate]=\"primeNgTableCell ?? _tableCell\"\n    [translationKeyTableCellTemplate]=\"primeNgTranslationKeyTableCell ?? _translationKeyTableCell ?? primeNgTableTranslationKeyCell ?? _tableTranslationKeyCell\"\n    [gridItemSubtitleLinesTemplate]=\"primeNgGridItemSubtitleLines ?? _gridItemSubtitleLines\"\n    [listItemSubtitleLinesTemplate]=\"primeNgListItemSubtitleLines ?? _listItemSubtitleLines\"\n    [listItemTemplate]=\"primeNgListItem ?? _listItem\"\n    [listValueTemplate]=\"primeNgListValue ?? _listValue\"\n    [translationKeyListValueTemplate]=\"primeNgTranslationKeyListValue ?? _translationKeyListValue\"\n    [numberListValueTemplate]=\"primeNgNumberListValue ?? _numberListValue\"\n    [relativeDateListValueTemplate]=\"primeNgRelativeDateListValue ?? _relativeDateListValue\"\n    [customListValueTemplate]=\"primeNgCustomListValue ?? _customListValue\"\n    [stringListValueTemplate]=\"primeNgStringListValue ?? _stringListValue\"\n    [dateListValueTemplate]=\"primeNgDateListValue ?? _dateListValue\"\n    [gridItemTemplate]=\"primeNgGridItem ?? _gridItem\"\n    [tableFilterCellTemplate]=\"primeNgTableFilterCell ?? _tableFilterCell\"\n    [dateTableFilterCellTemplate]=\"primeNgDateTableFilterCell ?? _dateTableFilterCell\"\n    [customTableFilterCellTemplate]=\"primeNgCustomTableFilterCell ?? _customTableFilterCell\"\n    [numberTableFilterCellTemplate]=\"primeNgNumberTableFilterCell ?? _numberTableFilterCell\"\n    [stringTableFilterCellTemplate]=\"primeNgStringTableFilterCell ?? _stringTableFilterCell\"\n    [relativeDateTableFilterCellTemplate]=\"primeNgRelativeDateTableFilterCell ?? _relativeDateTableFilterCell\"\n    [translationKeyTableFilterCellTemplate]=\"primeNgTranslationKeyTableFilterCell ?? _translationKeyTableFilterCell\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates$ | async\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\n    [expandable]=\"expandable\"\n    [frozenExpandColumn]=\"frozenExpandColumn\"\n    [expandedRows]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  <ocx-column-group-selection\n    *ngIf=\"layout === 'table'\"\n    [selectedGroupKey]=\"selectedGroupKey ?? defaultGroupKey\"\n    [columns]=\"columns\"\n    [defaultGroupKey]=\"defaultGroupKey !== customGroupKey ? defaultGroupKey : ''\"\n    [customGroupKey]=\"customGroupKey\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableCell\"\n    [ngTemplateOutlet]=\"_stringTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  <ng-template #numberTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_numberTableCell\"\n      [ngTemplateOutlet]=\"_numberTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n</ng-template>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableDateCell\"\n    [ngTemplateOutlet]=\"_tableDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableCell\"\n    [ngTemplateOutlet]=\"_dateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableRelativeDateCell\"\n    [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableCell\"\n    [ngTemplateOutlet]=\"_tableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableTranslationKeyCell\"\n    [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_gridItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container>\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_listItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItem let-item>\n  <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listItem let-item>\n  <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_listValue\"\n    [ngTemplateOutlet]=\"_listValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyListValue\"\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberListValue\"\n    [ngTemplateOutlet]=\"_numberListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateListValue\"\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customListValue\"\n    [ngTemplateOutlet]=\"_customListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringListValue\"\n    [ngTemplateOutlet]=\"_stringListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateListValue\"\n    [ngTemplateOutlet]=\"_dateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableFilterCell\"\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberTableFilterCell\"\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customTableFilterCell\"\n    [ngTemplateOutlet]=\"_customTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableFilterCell\"\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i10.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i1$3.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "inputs", "outputs"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["groupSelectionChanged", "componentStateChanged"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "customGroupKey", "dialogTitle", "dialogTitleKey", "openButtonTitle", "openButtonTitleKey", "openButtonAriaLabel", "openButtonAriaLabelKey", "saveButtonLabel", "saveButtonLabelKey", "saveButtonAriaLabel", "saveButtonAriaLabelKey", "cancelButtonLabel", "cancelButtonLabelKey", "cancelButtonAriaLabel", "cancelButtonAriaLabelKey", "activeColumnsLabel", "activeColumnsLabelKey", "inactiveColumnsLabel", "inactiveColumnsLabelKey", "frozenActionColumn", "actionColumnPosition"], outputs: ["columnSelectionChanged", "actionColumnConfigChanged", "componentStateChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["dataViewLayoutChange", "componentStateChanged"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortChange", "sortDirectionChange", "componentStateChanged", "columnsChange"] }, { kind: "component", type: DataViewComponent, selector: "ocx-data-view", inputs: ["deletePermission", "editPermission", "viewPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "tableSelectionEnabledField", "tableAllowSelectAll", "data", "name", "titleLineId", "subtitleLineIds", "layout", "columns", "emptyResultsMessage", "clientSideSorting", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "listGridPaginator", "tablePaginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "expandable", "frozenExpandColumn", "expandedRows", "paginator", "sortStates", "pageSizes", "pageSize", "showAllOption", "stringTableCellTemplate", "numberTableCellTemplate", "customTableCellTemplate", "dateTableCellTemplate", "tableDateCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "tableTranslationKeyCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "tableRelativeDateCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "customListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "tableFilterCellTemplate", "dateTableFilterCellTemplate", "relativeDateTableFilterCellTemplate", "translationKeyTableFilterCellTemplate", "stringTableFilterCellTemplate", "numberTableFilterCellTemplate", "customTableFilterCellTemplate", "additionalActions", "parentTemplates"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "component", type: FilterViewComponent, selector: "ocx-filter-view", inputs: ["filters", "columns", "displayMode", "selectDisplayedChips", "chipStyleClass", "tableStyle", "panelStyle", "templates"], outputs: ["filtered", "componentStateChanged"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InteractiveDataViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ocx-interactive-data-view', providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], template: "<div class=\"p-3 border-bottom-1 surface-border\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n      <ocx-data-layout-selection\n        [supportedViewLayouts]=\"supportedViewLayouts\"\n        [layout]=\"layout\"\n        (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n        (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n      ></ocx-data-layout-selection>\n      <ocx-filter-view\n        *ngIf=\"!disableFilterView\"\n        [filters]=\"filters\"\n        [columns]=\"columns\"\n        [templates]=\"templates$ | async\"\n        [displayMode]=\"filterViewDisplayMode\"\n        [selectDisplayedChips]=\"selectDisplayedChips\"\n        [chipStyleClass]=\"filterViewChipStyleClass\"\n        [tableStyle]=\"filterViewTableStyle\"\n        (filtered)=\"filtering($event)\"\n        (componentStateChanged)=\"filterViewComponentState$.next($event)\"\n      ></ocx-filter-view>\n    </div>\n\n    <div *ngIf=\"topCenter\">\n      <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n    </div>\n\n    <div *ngIf=\"layout !== 'table'\" class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection\"\n        [sortField]=\"sortField\"\n        [columns]=\"(displayedColumns$ | async) ?? []\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n\n    <div\n      [ngStyle]=\"layout !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      <ng-container *ngIf=\"isColumnGroupSelectionComponentDefined$ | async; else defaultColumnGroupSelectionComponent\">\n        <ng-container *ngIf=\"displayedColumnKeys$ | async as displayedColumnKeys\">\n          <ocx-slot\n            [ngStyle]=\"layout !== 'table' ? {'display' : 'none'}  : {}\"\n            *ocxIfPermission=\"searchConfigPermission; elseTemplate: defaultColumnGroupSelectionComponent\"\n            name=\"{{columnGroupSlotName}}\"\n            [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey, defaultGroupKey: defaultGroupKey, customGroupKey: customGroupKey, columns: columns, selectedGroupKey: selectedGroupKey, layout: layout, displayedColumnsIds: displayedColumnKeys }\"\n            [outputs]=\"{ groupSelectionChanged: groupSelectionChangedSlotEmitter }\"\n          >\n            <ng-template #skeleton>\n              <div class=\"flex\">\n                <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n              </div>\n            </ng-template>\n          </ocx-slot>\n        </ng-container>\n      </ng-container>\n\n      <ocx-custom-group-column-selector\n        *ngIf=\"layout === 'table'\"\n        [columns]=\"columns\"\n        [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\n        [customGroupKey]=\"customGroupKey\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n    </div>\n  </div>\n</div>\n<div class=\"p-3\">\n  <ocx-data-view\n    [columns]=\"(displayedColumns$ | async) ?? []\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [showAllOption]=\"showAllOption\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [listGridPaginator]=\"listGridPaginator\"\n    [tablePaginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [stringTableCellTemplate]=\"primeNgStringTableCell ?? _stringTableCell\"\n    [numberTableCellTemplate]=\"primeNgNumberTableCell ?? _numberTableCell\"\n    [customTableCellTemplate]=\"primeNgCustomTableCell ?? _customTableCell\"\n    [dateTableCellTemplate]=\"primeNgDateTableCell ?? _dateTableCell ?? primeNgTableDateCell ?? _tableDateCell\"\n    [relativeDateTableCellTemplate]=\"primeNgRelativeDateTableCell ?? _relativeDateTableCell ?? primeNgTableRelativeDateCell ?? _tableRelativeDateCell\"\n    [tableCellTemplate]=\"primeNgTableCell ?? _tableCell\"\n    [translationKeyTableCellTemplate]=\"primeNgTranslationKeyTableCell ?? _translationKeyTableCell ?? primeNgTableTranslationKeyCell ?? _tableTranslationKeyCell\"\n    [gridItemSubtitleLinesTemplate]=\"primeNgGridItemSubtitleLines ?? _gridItemSubtitleLines\"\n    [listItemSubtitleLinesTemplate]=\"primeNgListItemSubtitleLines ?? _listItemSubtitleLines\"\n    [listItemTemplate]=\"primeNgListItem ?? _listItem\"\n    [listValueTemplate]=\"primeNgListValue ?? _listValue\"\n    [translationKeyListValueTemplate]=\"primeNgTranslationKeyListValue ?? _translationKeyListValue\"\n    [numberListValueTemplate]=\"primeNgNumberListValue ?? _numberListValue\"\n    [relativeDateListValueTemplate]=\"primeNgRelativeDateListValue ?? _relativeDateListValue\"\n    [customListValueTemplate]=\"primeNgCustomListValue ?? _customListValue\"\n    [stringListValueTemplate]=\"primeNgStringListValue ?? _stringListValue\"\n    [dateListValueTemplate]=\"primeNgDateListValue ?? _dateListValue\"\n    [gridItemTemplate]=\"primeNgGridItem ?? _gridItem\"\n    [tableFilterCellTemplate]=\"primeNgTableFilterCell ?? _tableFilterCell\"\n    [dateTableFilterCellTemplate]=\"primeNgDateTableFilterCell ?? _dateTableFilterCell\"\n    [customTableFilterCellTemplate]=\"primeNgCustomTableFilterCell ?? _customTableFilterCell\"\n    [numberTableFilterCellTemplate]=\"primeNgNumberTableFilterCell ?? _numberTableFilterCell\"\n    [stringTableFilterCellTemplate]=\"primeNgStringTableFilterCell ?? _stringTableFilterCell\"\n    [relativeDateTableFilterCellTemplate]=\"primeNgRelativeDateTableFilterCell ?? _relativeDateTableFilterCell\"\n    [translationKeyTableFilterCellTemplate]=\"primeNgTranslationKeyTableFilterCell ?? _translationKeyTableFilterCell\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates$ | async\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  <ocx-column-group-selection\n    *ngIf=\"layout === 'table'\"\n    [selectedGroupKey]=\"selectedGroupKey ?? defaultGroupKey\"\n    [columns]=\"columns\"\n    [defaultGroupKey]=\"defaultGroupKey !== customGroupKey ? defaultGroupKey : ''\"\n    [customGroupKey]=\"customGroupKey\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableCell\"\n    [ngTemplateOutlet]=\"_stringTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  <ng-template #numberTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_numberTableCell\"\n      [ngTemplateOutlet]=\"_numberTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n</ng-template>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableDateCell\"\n    [ngTemplateOutlet]=\"_tableDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableCell\"\n    [ngTemplateOutlet]=\"_dateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableRelativeDateCell\"\n    [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableCell\"\n    [ngTemplateOutlet]=\"_tableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableTranslationKeyCell\"\n    [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_gridItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container>\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_listItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItem let-item>\n  <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listItem let-item>\n  <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_listValue\"\n    [ngTemplateOutlet]=\"_listValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyListValue\"\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberListValue\"\n    [ngTemplateOutlet]=\"_numberListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateListValue\"\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customListValue\"\n    [ngTemplateOutlet]=\"_customListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringListValue\"\n    [ngTemplateOutlet]=\"_stringListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateListValue\"\n    [ngTemplateOutlet]=\"_dateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableFilterCell\"\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberTableFilterCell\"\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customTableFilterCell\"\n    [ngTemplateOutlet]=\"_customTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableFilterCell\"\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n" }]
+            args: [{ selector: 'ocx-interactive-data-view', providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], template: "<div class=\"p-3 border-bottom-1 surface-border\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n      <ocx-data-layout-selection\n        [supportedViewLayouts]=\"supportedViewLayouts\"\n        [layout]=\"layout\"\n        (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n        (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n      ></ocx-data-layout-selection>\n      <ocx-filter-view\n        *ngIf=\"!disableFilterView\"\n        [filters]=\"filters\"\n        [columns]=\"columns\"\n        [templates]=\"templates$ | async\"\n        [displayMode]=\"filterViewDisplayMode\"\n        [selectDisplayedChips]=\"selectDisplayedChips\"\n        [chipStyleClass]=\"filterViewChipStyleClass\"\n        [tableStyle]=\"filterViewTableStyle\"\n        (filtered)=\"filtering($event)\"\n        (componentStateChanged)=\"filterViewComponentState$.next($event)\"\n      ></ocx-filter-view>\n    </div>\n\n    <div *ngIf=\"topCenter\">\n      <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n    </div>\n\n    <div *ngIf=\"layout !== 'table'\" class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection\"\n        [sortField]=\"sortField\"\n        [columns]=\"(displayedColumns$ | async) ?? []\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n\n    <div\n      [ngStyle]=\"layout !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      <ng-container *ngIf=\"isColumnGroupSelectionComponentDefined$ | async; else defaultColumnGroupSelectionComponent\">\n        <ng-container *ngIf=\"displayedColumnKeys$ | async as displayedColumnKeys\">\n          <ocx-slot\n            [ngStyle]=\"layout !== 'table' ? {'display' : 'none'}  : {}\"\n            *ocxIfPermission=\"searchConfigPermission; elseTemplate: defaultColumnGroupSelectionComponent\"\n            name=\"{{columnGroupSlotName}}\"\n            [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey, defaultGroupKey: defaultGroupKey, customGroupKey: customGroupKey, columns: columns, selectedGroupKey: selectedGroupKey, layout: layout, displayedColumnsIds: displayedColumnKeys }\"\n            [outputs]=\"{ groupSelectionChanged: groupSelectionChangedSlotEmitter }\"\n          >\n            <ng-template #skeleton>\n              <div class=\"flex\">\n                <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n              </div>\n            </ng-template>\n          </ocx-slot>\n        </ng-container>\n      </ng-container>\n\n      <ocx-custom-group-column-selector\n        *ngIf=\"layout === 'table'\"\n        [columns]=\"columns\"\n        [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\n        [customGroupKey]=\"customGroupKey\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n    </div>\n  </div>\n</div>\n<div class=\"p-3\">\n  <ocx-data-view\n    [columns]=\"(displayedColumns$ | async) ?? []\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [showAllOption]=\"showAllOption\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [listGridPaginator]=\"listGridPaginator\"\n    [tablePaginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [stringTableCellTemplate]=\"primeNgStringTableCell ?? _stringTableCell\"\n    [numberTableCellTemplate]=\"primeNgNumberTableCell ?? _numberTableCell\"\n    [customTableCellTemplate]=\"primeNgCustomTableCell ?? _customTableCell\"\n    [dateTableCellTemplate]=\"primeNgDateTableCell ?? _dateTableCell ?? primeNgTableDateCell ?? _tableDateCell\"\n    [relativeDateTableCellTemplate]=\"primeNgRelativeDateTableCell ?? _relativeDateTableCell ?? primeNgTableRelativeDateCell ?? _tableRelativeDateCell\"\n    [tableCellTemplate]=\"primeNgTableCell ?? _tableCell\"\n    [translationKeyTableCellTemplate]=\"primeNgTranslationKeyTableCell ?? _translationKeyTableCell ?? primeNgTableTranslationKeyCell ?? _tableTranslationKeyCell\"\n    [gridItemSubtitleLinesTemplate]=\"primeNgGridItemSubtitleLines ?? _gridItemSubtitleLines\"\n    [listItemSubtitleLinesTemplate]=\"primeNgListItemSubtitleLines ?? _listItemSubtitleLines\"\n    [listItemTemplate]=\"primeNgListItem ?? _listItem\"\n    [listValueTemplate]=\"primeNgListValue ?? _listValue\"\n    [translationKeyListValueTemplate]=\"primeNgTranslationKeyListValue ?? _translationKeyListValue\"\n    [numberListValueTemplate]=\"primeNgNumberListValue ?? _numberListValue\"\n    [relativeDateListValueTemplate]=\"primeNgRelativeDateListValue ?? _relativeDateListValue\"\n    [customListValueTemplate]=\"primeNgCustomListValue ?? _customListValue\"\n    [stringListValueTemplate]=\"primeNgStringListValue ?? _stringListValue\"\n    [dateListValueTemplate]=\"primeNgDateListValue ?? _dateListValue\"\n    [gridItemTemplate]=\"primeNgGridItem ?? _gridItem\"\n    [tableFilterCellTemplate]=\"primeNgTableFilterCell ?? _tableFilterCell\"\n    [dateTableFilterCellTemplate]=\"primeNgDateTableFilterCell ?? _dateTableFilterCell\"\n    [customTableFilterCellTemplate]=\"primeNgCustomTableFilterCell ?? _customTableFilterCell\"\n    [numberTableFilterCellTemplate]=\"primeNgNumberTableFilterCell ?? _numberTableFilterCell\"\n    [stringTableFilterCellTemplate]=\"primeNgStringTableFilterCell ?? _stringTableFilterCell\"\n    [relativeDateTableFilterCellTemplate]=\"primeNgRelativeDateTableFilterCell ?? _relativeDateTableFilterCell\"\n    [translationKeyTableFilterCellTemplate]=\"primeNgTranslationKeyTableFilterCell ?? _translationKeyTableFilterCell\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates$ | async\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\n    [expandable]=\"expandable\"\n    [frozenExpandColumn]=\"frozenExpandColumn\"\n    [expandedRows]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  <ocx-column-group-selection\n    *ngIf=\"layout === 'table'\"\n    [selectedGroupKey]=\"selectedGroupKey ?? defaultGroupKey\"\n    [columns]=\"columns\"\n    [defaultGroupKey]=\"defaultGroupKey !== customGroupKey ? defaultGroupKey : ''\"\n    [customGroupKey]=\"customGroupKey\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableCell\"\n    [ngTemplateOutlet]=\"_stringTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  <ng-template #numberTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_numberTableCell\"\n      [ngTemplateOutlet]=\"_numberTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n</ng-template>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableDateCell\"\n    [ngTemplateOutlet]=\"_tableDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableCell\"\n    [ngTemplateOutlet]=\"_dateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableRelativeDateCell\"\n    [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableCell\"\n    [ngTemplateOutlet]=\"_tableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableTranslationKeyCell\"\n    [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_gridItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container>\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_listItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItem let-item>\n  <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listItem let-item>\n  <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_listValue\"\n    [ngTemplateOutlet]=\"_listValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyListValue\"\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberListValue\"\n    [ngTemplateOutlet]=\"_numberListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateListValue\"\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customListValue\"\n    [ngTemplateOutlet]=\"_customListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringListValue\"\n    [ngTemplateOutlet]=\"_stringListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateListValue\"\n    [ngTemplateOutlet]=\"_dateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableFilterCell\"\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberTableFilterCell\"\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customTableFilterCell\"\n    [ngTemplateOutlet]=\"_customTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableFilterCell\"\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1$3.SlotService }], propDecorators: { dataView: [{
                 type: ViewChild,
                 args: [DataViewComponent]
@@ -5025,6 +5121,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], actionColumnPosition: [{
                 type: Input
+            }], expandable: [{
+                type: Input
+            }], frozenExpandColumn: [{
+                type: Input
+            }], expandedRows: [{
+                type: Input
             }], tableCell: [{
                 type: ContentChild,
                 args: ['tableCell']
@@ -5137,6 +5239,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }], pageSizeChanged: [{
                 type: Output
+            }], rowExpanded: [{
+                type: Output
+            }], rowCollapsed: [{
+                type: Output
             }], componentStateChanged: [{
                 type: Output
             }], paginator: [{