@onecx/angular-accelerator 5.38.0 → 6.0.0-rc.11

package/fesm2022/onecx-angular-accelerator.mjs

@@ -1,65 +1,67 @@
 import { HAS_PERMISSION_CHECKER, providePermissionChecker, TRANSLATION_PATH } from '@onecx/angular-utils';
 export { AlwaysGrantPermissionChecker, HAS_PERMISSION_CHECKER } from '@onecx/angular-utils';
 import * as i0 from '@angular/core';
-import { Directive, Optional, Inject, Input, HostListener, EventEmitter, Output, Injectable, Injector, LOCALE_ID, Pipe, Component, ViewEncapsulation, ContentChild, ContentChildren, ViewChild, PLATFORM_ID, ViewChildren, QueryList, NgModule, APP_INITIALIZER, inject } from '@angular/core';
-import * as i3 from '@onecx/angular-integration-interface';
-import { CONFIG_KEY, UserService, AppConfigService } from '@onecx/angular-integration-interface';
-import * as i1 from '@angular/common/http';
-import * as i5$1 from '@angular/forms';
+import { inject, ElementRef, Input, Directive, Renderer2, ViewContainerRef, TemplateRef, HostListener, EventEmitter, Output, Injectable, Injector, LOCALE_ID, Pipe, ContentChild, ViewEncapsulation, Component, ViewChild, ContentChildren, NgZone, ChangeDetectorRef, ViewChildren, QueryList, NgModule, ENVIRONMENT_INITIALIZER, APP_INITIALIZER } from '@angular/core';
+import { UserService, AppStateService, ConfigurationService, CONFIG_KEY, AppConfigService } from '@onecx/angular-integration-interface';
+import { HttpClient } from '@angular/common/http';
+import * as i3$1 from '@angular/forms';
 import { FormGroupDirective, FormControlName, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { BehaviorSubject, map, filter, concat, of, combineLatest, startWith, debounceTime, mergeMap, first, withLatestFrom, ReplaySubject, timestamp, distinctUntilChanged, tap, firstValueFrom, skip, defaultIfEmpty, forkJoin, catchError } from 'rxjs';
+import { BehaviorSubject, map, filter, concat, of, from, combineLatest, startWith, debounceTime, mergeMap, first, forkJoin, shareReplay, switchMap, toArray, withLatestFrom, ReplaySubject, timestamp, distinctUntilChanged, tap, firstValueFrom, skip, defaultIfEmpty, catchError } from 'rxjs';
 import { SyncableTopic, getLocation, isValidDate as isValidDate$1, getUTCDateWithoutTimezoneIssues } from '@onecx/accelerator';
-import * as i4 from '@angular/common';
-import { CurrencyPipe, DecimalPipe, DatePipe, formatDate, CommonModule, Location } from '@angular/common';
-import * as i2 from 'primeng/tooltip';
-import { Tooltip } from 'primeng/tooltip';
-import * as i7 from 'primeng/button';
+import * as i1 from '@angular/common';
+import { DatePipe, DecimalPipe, CurrencyPipe, formatDate, CommonModule, Location } from '@angular/common';
+import * as i3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i9 from 'primeng/skeleton';
+import * as i5 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
-import * as i1$3 from '@onecx/angular-remote-components';
-import { AngularRemoteComponentsModule } from '@onecx/angular-remote-components';
-import * as i1$2 from '@ngx-translate/core';
+import * as i4$1 from 'primeng/tooltip';
+import { Tooltip, TooltipStyle, TooltipModule } from 'primeng/tooltip';
+import * as i5$1 from '@onecx/angular-remote-components';
+import { SlotService, AngularRemoteComponentsModule } from '@onecx/angular-remote-components';
+import * as i8 from '@ngx-translate/core';
 import { TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
-import * as i3$1 from 'primeng/api';
+import * as i2$2 from 'primeng/api';
 import { PrimeIcons, PrimeTemplate, SharedModule } from 'primeng/api';
 import { __decorate, __metadata } from 'tslib';
-import * as i1$1 from '@angular/router';
-import { NavigationEnd, Router, ActivatedRoute, RouterModule } from '@angular/router';
+import * as i8$1 from '@angular/router';
+import { Router, ActivatedRoute, NavigationEnd, RouterModule } from '@angular/router';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
-import * as i5 from 'primeng/breadcrumb';
+import * as i2 from 'primeng/breadcrumb';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
-import * as i8 from 'primeng/menu';
+import * as i4 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
-import * as i3$2 from 'primeng/dropdown';
-import { DropdownModule } from 'primeng/dropdown';
-import * as i4$1 from 'primeng/floatlabel';
+import * as i1$1 from 'primeng/select';
+import { SelectModule } from 'primeng/select';
+import * as i2$1 from 'primeng/floatlabel';
 import { FloatLabelModule } from 'primeng/floatlabel';
-import * as i5$2 from 'primeng/dialog';
+import * as i3$2 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i6 from 'primeng/picklist';
+import * as i4$2 from 'primeng/picklist';
 import { PickListModule } from 'primeng/picklist';
-import * as i7$1 from 'primeng/selectbutton';
+import * as i1$2 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
-import * as i8$1 from 'primeng/dataview';
+import * as i4$3 from 'primeng/dataview';
 import { DataViewModule } from 'primeng/dataview';
-import * as i7$2 from 'primeng/checkbox';
+import * as i3$3 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
-import * as i9$1 from 'primeng/table';
+import * as i5$2 from 'primeng/table';
 import { TableModule } from 'primeng/table';
-import * as i11 from 'primeng/multiselect';
+import * as i7 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import * as d3 from 'd3-scale-chromatic';
-import * as i6$1 from 'primeng/chart';
+import * as i2$3 from 'primeng/chart';
 import { ChartModule } from 'primeng/chart';
-import * as i7$3 from 'primeng/message';
+import * as i3$4 from 'primeng/message';
 import { MessageModule } from 'primeng/message';
-import * as i6$2 from 'primeng/overlaypanel';
-import { OverlayPanel, OverlayPanelModule } from 'primeng/overlaypanel';
-import * as i4$2 from 'primeng/chip';
+import * as i5$3 from 'primeng/popover';
+import { Popover, PopoverModule } from 'primeng/popover';
+import * as i3$5 from 'primeng/chip';
 import { ChipModule } from 'primeng/chip';
-import * as i7$4 from 'primeng/focustrap';
+import * as i6 from 'primeng/focustrap';
 import { FocusTrapModule } from 'primeng/focustrap';
+import * as i3$6 from 'primeng/timeline';
+import { TimelineModule } from 'primeng/timeline';
+import { providePrimeNG } from 'primeng/config';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 /**
@@ -67,6 +69,150 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
  * @deprecated Please import from `@onecx/angular-utils` instead.
  */
 
+class OcxContentContainerDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+        /**
+         * Used for passing the direction, in which the content inside the container should be rendered.
+         * Default: horizontal
+         * @example [ocxContentContainer]="horizontal"
+         * @example [ocxContentContainer]="vertical"
+         */
+        this.layout = 'horizontal';
+        /**
+         * Used for passing in the breakpoint below which a horizontal layout should switch to a vertical layout.
+         * Only necessary if horizontal layout is used
+         * Default: md
+         */
+        this.breakpoint = 'md';
+    }
+    ngOnInit() {
+        this.el.nativeElement.classList.add('flex', 'gap-3', 'flex-column', 'md:flex-row');
+        this.addContainerStyles();
+    }
+    ngOnChanges() {
+        this.addContainerStyles();
+    }
+    addContainerStyles() {
+        const addClasses = (classes) => this.el.nativeElement.classList.add(...classes);
+        const removeClasses = (classes) => this.el.nativeElement.classList.remove(...classes);
+        // We need to ensure that all breakpoint dependent flex-row classes are removed from the element
+        // This way we can avoid multiple contradictory layout classes and unexpected effects
+        const removeResponsiveLayoutClasses = () => {
+            const classesToRemove = [];
+            const regexPattern = /\w+:flex-row$/;
+            this.el.nativeElement.classList.forEach((className) => {
+                if (regexPattern.test(className)) {
+                    classesToRemove.push(className);
+                }
+            });
+            removeClasses(classesToRemove);
+        };
+        const addSharedClasses = () => {
+            let styleClasses = Array.from(this.el.nativeElement.classList);
+            const defaultClasses = ['gap-3', 'flex-column', 'md:flex-row'];
+            removeClasses(defaultClasses);
+            if (styleClasses.some((cls) => cls.startsWith('gap-') && cls !== 'gap-3')) {
+                styleClasses = styleClasses.filter((cls) => !cls.startsWith('gap-3'));
+            }
+            const flexClasses = ['flex-row', 'flex-row-reverse', 'flex-column-reverse'];
+            if (styleClasses.some((cls) => flexClasses.includes(cls))) {
+                styleClasses = styleClasses.filter((cls) => cls !== 'flex-column');
+            }
+            if (this.layout != 'vertical') {
+                const responsiveLayoutClass = `${this.breakpoint || 'md'}:flex-row`;
+                styleClasses.push(responsiveLayoutClass);
+            }
+            addClasses(styleClasses);
+        };
+        removeResponsiveLayoutClasses();
+        addSharedClasses();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OcxContentContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: OcxContentContainerDirective, isStandalone: false, selector: "[ocxContentContainer]", inputs: { layout: "layout", breakpoint: "breakpoint" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OcxContentContainerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ocxContentContainer]', standalone: false }]
+        }], propDecorators: { layout: [{
+                type: Input
+            }], breakpoint: [{
+                type: Input
+            }] } });
+
+class OcxContentDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+        /**
+         * Used for passing a title text which should be rendered in the upper left corner of the content area.
+         * @example [ocxContent]="My Cool Title"
+         */
+        this.ocxContent = '';
+        this.baseId = 'ocx_content_title_element';
+    }
+    ngOnInit() {
+        this.titleElementId = this.getUniqueTitleID(this.baseId);
+        this.init();
+    }
+    ngOnChanges() {
+        this.init();
+    }
+    init() {
+        this.addContentStyles();
+        if (this.ocxContent) {
+            this.prependTitle();
+        }
+        else {
+            this.removeTitle();
+        }
+    }
+    addContentStyles() {
+        const addClasses = (classes) => this.el.nativeElement.classList.add(...classes);
+        addClasses(['card']);
+    }
+    prependTitle() {
+        if (this.titleElementId) {
+            const titleElement = this.el.nativeElement.querySelector(`#${this.titleElementId}`);
+            if (titleElement) {
+                titleElement.textContent = this.ocxContent;
+            }
+            else {
+                const title = document.createElement('p');
+                title.classList.add('font-medium');
+                title.classList.add('text-lg');
+                title.id = this.titleElementId;
+                title.textContent = this.ocxContent;
+                this.el.nativeElement.prepend(title);
+            }
+        }
+    }
+    getUniqueTitleID(baseId) {
+        let counter = 0;
+        let generatedID = baseId;
+        while (document.getElementById(generatedID)) {
+            generatedID = baseId + counter;
+            counter++;
+        }
+        return generatedID;
+    }
+    removeTitle() {
+        if (this.titleElementId) {
+            const titleElement = this.el.nativeElement.querySelector(`#${this.titleElementId}`);
+            if (titleElement) {
+                titleElement.remove();
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OcxContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: OcxContentDirective, isStandalone: false, selector: "[ocxContent]", inputs: { ocxContent: "ocxContent" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OcxContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ocxContent]', standalone: false }]
+        }], propDecorators: { ocxContent: [{
+                type: Input
+            }] } });
+
 class IfPermissionDirective {
     set notPermission(value) {
         this.permission = value;
@@ -78,43 +224,46 @@ class IfPermissionDirective {
     set ocxIfNotPermissionElseTemplate(value) {
         this.ocxIfPermissionElseTemplate = value;
     }
-    constructor(renderer, el, viewContainer, hasPermissionChecker, templateRef, userService) {
-        this.renderer = renderer;
-        this.el = el;
-        this.viewContainer = viewContainer;
-        this.hasPermissionChecker = hasPermissionChecker;
-        this.templateRef = templateRef;
-        this.userService = userService;
+    constructor() {
+        this.renderer = inject(Renderer2);
+        this.el = inject(ElementRef);
+        this.viewContainer = inject(ViewContainerRef);
+        this.hasPermissionChecker = inject(HAS_PERMISSION_CHECKER, { optional: true });
+        this.templateRef = inject(TemplateRef, { optional: true });
+        this.userService = inject(UserService, { optional: true });
         this.onMissingPermission = 'hide';
         this.negate = false;
+        const hasPermissionChecker = this.hasPermissionChecker;
+        const userService = this.userService;
         if (!(hasPermissionChecker || userService)) {
             throw 'IfPermission requires UserService or HasPermissionChecker to be provided!';
         }
         this.permissionChecker = hasPermissionChecker ?? userService;
     }
     ngOnInit() {
-        if ((this.permission &&
-            this.negate === this.hasPermission(Array.isArray(this.permission) ? this.permission : [this.permission])) ||
-            !this.permission) {
-            if (this.ocxIfPermissionElseTemplate) {
-                this.viewContainer.createEmbeddedView(this.ocxIfPermissionElseTemplate);
-            }
-            else {
-                if (this.onMissingPermission === 'disable') {
-                    this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'disabled');
+        const permissions = (Array.isArray(this.permission) ? this.permission : [this.permission]).filter((p) => p !== undefined);
+        this.hasPermission(permissions).then((hasPerm) => {
+            if ((this.permission && this.negate === hasPerm) || !this.permission) {
+                if (this.ocxIfPermissionElseTemplate) {
+                    this.viewContainer.createEmbeddedView(this.ocxIfPermissionElseTemplate);
                 }
                 else {
-                    this.viewContainer.clear();
+                    if (this.onMissingPermission === 'disable') {
+                        this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'disabled');
+                    }
+                    else {
+                        this.viewContainer.clear();
+                    }
                 }
             }
-        }
-        else {
-            if (this.templateRef) {
-                this.viewContainer.createEmbeddedView(this.templateRef);
+            else {
+                if (this.templateRef) {
+                    this.viewContainer.createEmbeddedView(this.templateRef);
+                }
             }
-        }
+        });
     }
-    hasPermission(permission) {
+    async hasPermission(permission) {
         if (this.ocxIfPermissionPermissions) {
             const result = permission.every((p) => this.ocxIfPermissionPermissions?.includes(p));
             if (!result) {
@@ -122,24 +271,15 @@ class IfPermissionDirective {
             }
             return result;
         }
-        return permission.every((p) => this.permissionChecker?.hasPermission(p));
+        return (await this.permissionChecker?.hasPermission(permission)) ?? false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IfPermissionDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: HAS_PERMISSION_CHECKER, optional: true }, { token: i0.TemplateRef, optional: true }, { token: i3.UserService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: { permission: ["ocxIfPermission", "permission"], notPermission: ["ocxIfNotPermission", "notPermission"], onMissingPermission: "onMissingPermission", ocxIfPermissionPermissions: "ocxIfPermissionPermissions", ocxIfNotPermissionPermissions: "ocxIfNotPermissionPermissions", ocxIfPermissionElseTemplate: "ocxIfPermissionElseTemplate", ocxIfNotPermissionElseTemplate: "ocxIfNotPermissionElseTemplate" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: IfPermissionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: IfPermissionDirective, isStandalone: false, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: { permission: ["ocxIfPermission", "permission"], notPermission: ["ocxIfNotPermission", "notPermission"], onMissingPermission: "onMissingPermission", ocxIfPermissionPermissions: "ocxIfPermissionPermissions", ocxIfNotPermissionPermissions: "ocxIfNotPermissionPermissions", ocxIfPermissionElseTemplate: "ocxIfPermissionElseTemplate", ocxIfNotPermissionElseTemplate: "ocxIfNotPermissionElseTemplate" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IfPermissionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: IfPermissionDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[ocxIfPermission], [ocxIfNotPermission]' }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [HAS_PERMISSION_CHECKER]
-                }] }, { type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }, { type: i3.UserService, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { permission: [{
+            args: [{ selector: '[ocxIfPermission], [ocxIfNotPermission]', standalone: false }]
+        }], ctorParameters: () => [], propDecorators: { permission: [{
                 type: Input,
                 args: ['ocxIfPermission']
             }], notPermission: [{
@@ -158,9 +298,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class IfBreakpointDirective {
-    constructor(viewContainer, templateRef) {
-        this.viewContainer = viewContainer;
-        this.templateRef = templateRef;
+    constructor() {
+        this.viewContainer = inject(ViewContainerRef);
+        this.templateRef = inject(TemplateRef, { optional: true });
     }
     ngOnInit() {
         this.onResize();
@@ -184,15 +324,13 @@ class IfBreakpointDirective {
         }
         this.state = newState;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IfBreakpointDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: { breakpoint: ["ocxIfBreakpoint", "breakpoint"], ocxIfBreakpointElseTemplate: "ocxIfBreakpointElseTemplate" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: IfBreakpointDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: IfBreakpointDirective, isStandalone: false, selector: "[ocxIfBreakpoint]", inputs: { breakpoint: ["ocxIfBreakpoint", "breakpoint"], ocxIfBreakpointElseTemplate: "ocxIfBreakpointElseTemplate" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IfBreakpointDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: IfBreakpointDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[ocxIfBreakpoint]' }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { breakpoint: [{
+            args: [{ selector: '[ocxIfBreakpoint]', standalone: false }]
+        }], propDecorators: { breakpoint: [{
                 type: Input,
                 args: ['ocxIfBreakpoint']
             }], ocxIfBreakpointElseTemplate: [{
@@ -244,20 +382,20 @@ class SrcDirective {
             this._src = value;
         }
     }
-    constructor(el, httpClient) {
-        this.el = el;
-        this.httpClient = httpClient;
+    constructor() {
+        this.el = inject(ElementRef);
+        this.httpClient = inject(HttpClient);
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.error = new EventEmitter();
         this.el.nativeElement.style.visibility = 'hidden';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SrcDirective, deps: [{ token: i0.ElementRef }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SrcDirective, selector: "[ocxSrc]", inputs: { ocxSrc: "ocxSrc" }, outputs: { error: "error" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SrcDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: SrcDirective, isStandalone: false, selector: "[ocxSrc]", inputs: { ocxSrc: "ocxSrc" }, outputs: { error: "error" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SrcDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SrcDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[ocxSrc]' }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.HttpClient }], propDecorators: { error: [{
+            args: [{ selector: '[ocxSrc]', standalone: false }]
+        }], ctorParameters: () => [], propDecorators: { error: [{
                 type: Output
             }], ocxSrc: [{
                 type: Input
@@ -272,10 +410,10 @@ class ManualBreadcrumbsTopic extends SyncableTopic {
     }
 }
 let BreadcrumbService = class BreadcrumbService {
-    constructor(router, activeRoute, translateService) {
-        this.router = router;
-        this.activeRoute = activeRoute;
-        this.translateService = translateService;
+    constructor() {
+        this.router = inject(Router);
+        this.activeRoute = inject(ActivatedRoute);
+        this.translateService = inject(TranslateService);
         this.itemsSource$ = new ManualBreadcrumbsTopic();
         this.generatedItemsSource = new BehaviorSubject([]);
         this.itemsHandler = this.itemsSource$.pipe(map((manualBreadcrumbs) => manualBreadcrumbs.menuItems));
@@ -366,24 +504,23 @@ let BreadcrumbService = class BreadcrumbService {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BreadcrumbService, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BreadcrumbService, providedIn: 'any' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BreadcrumbService, providedIn: 'any' }); }
 };
 BreadcrumbService = __decorate([
     UntilDestroy(),
-    __metadata("design:paramtypes", [Router,
-        ActivatedRoute,
-        TranslateService])
+    __metadata("design:paramtypes", [])
 ], BreadcrumbService);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BreadcrumbService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BreadcrumbService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'any' }]
-        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i1$2.TranslateService }] });
+        }], ctorParameters: () => [] });
 
 class DynamicPipe {
-    constructor(locale, injector) {
-        this.injector = injector;
+    constructor() {
+        this.injector = inject(Injector);
         this.knownPipes = {};
+        const locale = inject(LOCALE_ID);
         this.knownPipes = {
             currency: new CurrencyPipe(locale),
             decimal: new DecimalPipe(locale),
@@ -422,18 +559,16 @@ class DynamicPipe {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicPipe, deps: [{ token: LOCALE_ID }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DynamicPipe, name: "dynamicPipe" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DynamicPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: DynamicPipe, isStandalone: false, name: "dynamicPipe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DynamicPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dynamicPipe',
+                    standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }, { type: i0.Injector }] });
+        }], ctorParameters: () => [] });
 
 class PageHeaderComponent {
     get actions() {
@@ -444,10 +579,10 @@ class PageHeaderComponent {
         this.generateInlineActions();
         this.generateOverflowActions();
     }
-    constructor(breadcrumbs, translateService, appStateService, userService) {
-        this.translateService = translateService;
-        this.appStateService = appStateService;
-        this.userService = userService;
+    constructor() {
+        this.translateService = inject(TranslateService);
+        this.appStateService = inject(AppStateService);
+        this.userService = inject(UserService);
         this.loading = false;
         this.figureBackground = true;
         this.showFigure = true;
@@ -464,13 +599,14 @@ class PageHeaderComponent {
         this.objectInfoGridLayoutClasses = 'col-12 flex gap-4 md:col-6 align-items-center p-0';
         this.objectInfoColumnLayoutClasses = 'flex flex-column align-items-center gap-2 min-w-120';
         this.objectInfoDefaultLayoutClasses = 'flex flex-row md:flex-column md:align-items-center md:gap-2';
+        const breadcrumbs = inject(BreadcrumbService);
         this.breadcrumbs = breadcrumbs;
-        this.home$ = concat(of({ menuItem: { icon: PrimeIcons.HOME, routerLink: '/' } }), this.appStateService.currentPortal$.pipe(map((portal) => ({
+        this.home$ = concat(of({ menuItem: { icon: PrimeIcons.HOME, routerLink: '/' } }), this.appStateService.currentWorkspace$.pipe(map((workspace) => ({
             menuItem: {
                 icon: PrimeIcons.HOME,
-                routerLink: portal.baseUrl,
+                routerLink: workspace.baseUrl,
             },
-            page: portal.portalName,
+            page: workspace.workspaceName,
         }))));
     }
     ngOnChanges(changes) {
@@ -539,6 +675,7 @@ class PageHeaderComponent {
             const translations$ = translationKeys.length ? this.translateService.get(translationKeys) : of([]);
             translations$.subscribe((translations) => {
                 const allowedActions = [];
+                const permissionPromises = [];
                 if (this.actions) {
                     this.actions
                         .filter((a) => a.show === 'asOverflow')
@@ -552,22 +689,25 @@ class PageHeaderComponent {
                             return a;
                     })
                         .forEach((action) => {
-                        this.checkActionPermission(allowedActions, action);
+                        const permissionPromise = this.checkActionPermission(allowedActions, action);
+                        permissionPromises.push(permissionPromise);
+                    });
+                    Promise.all(permissionPromises).then(() => {
+                        this.overflowActions = [
+                            ...allowedActions.map((a) => ({
+                                id: a.id,
+                                label: a.labelKey ? translations[a.labelKey] : a.label,
+                                icon: a.icon,
+                                tooltipOptions: {
+                                    tooltipLabel: a.titleKey ? translations[a.titleKey] : a.title,
+                                    tooltipEvent: 'hover',
+                                    tooltipPosition: 'top',
+                                },
+                                command: a.actionCallback,
+                                disabled: a.disabled,
+                            })),
+                        ];
                     });
-                    this.overflowActions = [
-                        ...allowedActions.map((a) => ({
-                            id: a.id,
-                            label: a.labelKey ? translations[a.labelKey] : a.label,
-                            icon: a.icon,
-                            tooltipOptions: {
-                                tooltipLabel: a.titleKey ? translations[a.titleKey] : a.title,
-                                tooltipEvent: 'hover',
-                                tooltipPosition: 'top',
-                            },
-                            command: a.actionCallback,
-                            disabled: a.disabled,
-                        })),
-                    ];
                 }
             });
         }
@@ -579,6 +719,7 @@ class PageHeaderComponent {
         if (this.actions) {
             // Temp array to hold all inline actions that should be visible to the current user
             const allowedActions = [];
+            const permissionPromises = [];
             // Check permissions for all actions that should be rendered 'always'
             this.actions
                 .filter((a) => a.show === 'always')
@@ -590,9 +731,12 @@ class PageHeaderComponent {
                     return a;
             })
                 .forEach((action) => {
-                this.checkActionPermission(allowedActions, action);
+                const permissionPromise = this.checkActionPermission(allowedActions, action);
+                permissionPromises.push(permissionPromise);
+            });
+            Promise.all(permissionPromises).then(() => {
+                this.inlineActions = [...allowedActions];
             });
-            this.inlineActions = [...allowedActions];
         }
     }
     /**
@@ -601,24 +745,29 @@ class PageHeaderComponent {
      * @param action Action for which a permission check should be executed
      */
     checkActionPermission(allowedActions, action) {
-        if (action.permission) {
-            if (this.userService.hasPermission(action.permission)) {
-                // Push action to allowed array if user has sufficient permissions
+        return new Promise((resolve) => {
+            if (action.permission) {
+                this.userService.hasPermission(action.permission).then((hasPermission) => {
+                    if (hasPermission) {
+                        allowedActions.push(action);
+                    }
+                    resolve();
+                });
+            }
+            else {
+                // Push action to allowed array if no permission was specified
                 allowedActions.push(action);
+                resolve();
             }
-        }
-        else {
-            // Push action to allowed array if no permission was specified
-            allowedActions.push(action);
-        }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PageHeaderComponent, deps: [{ token: BreadcrumbService }, { token: i1$2.TranslateService }, { token: i3.AppStateService }, { token: i3.UserService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PageHeaderComponent, selector: "ocx-page-header", inputs: { header: "header", loading: "loading", figureBackground: "figureBackground", showFigure: "showFigure", figureImage: "figureImage", disableDefaultActions: "disableDefaultActions", subheader: "subheader", actions: "actions", objectDetails: "objectDetails", showBreadcrumbs: "showBreadcrumbs", manualBreadcrumbs: "manualBreadcrumbs", enableGridView: "enableGridView", gridLayoutDesktopColumns: "gridLayoutDesktopColumns" }, outputs: { save: "save" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n  <ng-container *ngIf=\"showBreadcrumbs\">\n    <p-breadcrumb\n      *ngIf=\"breadcrumbs$ | async as items\"\n      [model]=\"items\"\n      [home]=\"(home$ | async)?.menuItem ?? {}\"\n      [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n      [attr.manual]=\"manualBreadcrumbs\"\n    ></p-breadcrumb>\n  </ng-container>\n\n  <div class=\"p-3 title-bar flex flex-row flex-wrap justify-content-between align-items-center gap-2\">\n    <div class=\"title-wrap\">\n      <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\" *ngIf=\"showFigure\">\n        <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n          <ng-content select=\"[figureImage]\"></ng-content>\n          <img\n            *ngIf=\"figureImage && !figureImageLoadError\"\n            [ocxSrc]=\"figureImage\"\n            alt=\"Figure Image\"\n            class=\"w-full border-round-sm\"\n            (error)=\"handleImageError()\"\n          />\n        </div>\n        <div\n          class=\"colorblob flex-1 border-round\"\n          *ngIf=\"previewImage.children.length === 0 || figureImageLoadError\"\n        ></div>\n      </div>\n      <ng-template #skeletonBar>\n        <div class=\"header justify-content-evenly\">\n          <p-skeleton width=\"10rem\"></p-skeleton>\n          <p-skeleton width=\"10rem\"></p-skeleton>\n        </div>\n      </ng-template>\n      <div class=\"header\" *ngIf=\"!loading; else skeletonBar\">\n        <h1 id=\"page-header\" *ngIf=\"!!header\">{{ header }}</h1>\n        <h2 id=\"page-subheader\" *ngIf=\"!!subheader\">{{ subheader }}</h2>\n      </div>\n    </div>\n\n    <div class=\"action-items-wrap mt-2 md:mt-0\">\n      <ng-container *ngIf=\"additionalToolbarContentLeft\" [ngTemplateOutlet]=\"additionalToolbarContentLeft\">\n      </ng-container>\n\n      <ng-container *ngIf=\"!disableDefaultActions\"> </ng-container>\n      <ng-template #skeletonActions>\n        <div class=\"flex\">\n          <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n          <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n        </div>\n      </ng-template>\n      <ng-container *ngIf=\"!loading; else skeletonActions\">\n        <div *ngIf=\"inlineActions && inlineActions.length > 0\" class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n          <ng-container *ngFor=\"let action of inlineActions\">\n            <span\n              [pTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n              tooltipPosition=\"top\"\n              tooltipEvent=\"hover\"\n            >\n              <p-button\n                id=\"{{ action.id }}\"\n                [icon]=\"action.icon ?? ''\"\n                [iconPos]=\"action.iconPos ?? 'left'\"\n                type=\"button\"\n                class=\"action-button\"\n                [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n                (onClick)=\"action.actionCallback()\"\n                [disabled]=\"action.disabled ? action.disabled : false\"\n                [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n                [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n              ></p-button>\n            </span>\n          </ng-container>\n        </div>\n        <ng-content select=\"[toolbarItems]\"></ng-content>\n        <ng-container>\n          <div *ngIf=\"overflowActions.length !== 0\">\n            <button\n              id=\"pageHeaderMenuButton\"\n              type=\"button\"\n              pButton\n              icon=\"pi pi-ellipsis-v\"\n              pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n              tooltipEvent=\"hover\"\n              tooltipPosition=\"top\"\n              class=\"more-actions-menu-button action-button ml-2\"\n              (click)=\"menu.toggle($event)\"\n              name=\"ocx-page-header-overflow-action-button\"\n              [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n            ></button>\n            <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n          </div>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"additionalToolbarContent\" [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n    </div>\n  </div>\n\n  <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n    <ng-container *ngIf=\"objectDetails\">\n      <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\" *ngFor=\"let item of objectDetails\">\n        <span\n          class=\"flex font-medium text-600 object-info-grid-label\"\n          name=\"object-detail-label\"\n          [pTooltip]=\"item.labelTooltip || ''\"\n          tooltipEvent=\"hover\"\n          tooltipPosition=\"top\"\n          >{{ item.label | dynamicPipe:item.labelPipe }}</span\n        >\n        <span *ngIf=\"item.icon || item.value\" class=\"object-info-grid-value\">\n          <span\n            class=\"flex text-900 align-items-center gap-2 w-max\"\n            [ngClass]=\"generateItemStyle(item)\"\n            name=\"object-detail-value\"\n          >\n            <span\n              class=\"flex align-items-center gap-2\"\n              [pTooltip]=\"item.valueTooltip || item.tooltip || ''\"\n              tooltipEvent=\"hover\"\n              tooltipPosition=\"top\"\n            >\n              <i\n                *ngIf=\"item.icon\"\n                class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}'\n                name=\"object-detail-icon\"\n              ></i>\n              {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n            </span>\n            <p-button\n              *ngIf=\"item.actionItemIcon && item.actionItemCallback\"\n              [icon]=\"item.actionItemIcon\"\n              styleClass=\"p-button-text p-0 w-full\"\n              [pTooltip]=\"item.actionItemTooltip || ''\"\n              tooltipPosition=\"top\"\n              tooltipEvent=\"hover\"\n              [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n              (onClick)=\"item.actionItemCallback()\"\n            ></p-button>\n          </span>\n        </span>\n      </div>\n    </ng-container>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7.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: i8.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: SrcDirective, selector: "[ocxSrc]", inputs: ["ocxSrc"], outputs: ["error"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: PageHeaderComponent, isStandalone: false, selector: "ocx-page-header", inputs: { header: "header", loading: "loading", figureBackground: "figureBackground", showFigure: "showFigure", figureImage: "figureImage", disableDefaultActions: "disableDefaultActions", subheader: "subheader", actions: "actions", objectDetails: "objectDetails", showBreadcrumbs: "showBreadcrumbs", manualBreadcrumbs: "manualBreadcrumbs", enableGridView: "enableGridView", gridLayoutDesktopColumns: "gridLayoutDesktopColumns" }, outputs: { save: "save" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n  @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n  <p-breadcrumb\n    [model]=\"items\"\n    [home]=\"(home$ | async)?.menuItem ?? {}\"\n    [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n    [attr.manual]=\"manualBreadcrumbs\"\n  ></p-breadcrumb>\n  } }\n  <div class=\"title-bar flex flex-row md:justify-content-between align-items-center p-3\">\n    <div class=\"title-wrap\">\n      @if (showFigure) {\n      <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n        <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n          <ng-content select=\"[figureImage]\"></ng-content>\n          @if (figureImage && !figureImageLoadError) {\n          <img [ocxSrc]=\"figureImage\" alt=\"Figure Image\" class=\"w-full border-round-sm\" (error)=\"handleImageError()\" />\n          }\n        </div>\n        @if (previewImage.children.length === 0 || figureImageLoadError) {\n        <div class=\"colorblob flex-1 border-round\"></div>\n        }\n      </div>\n      } @if (!loading) {\n      <div class=\"header\">\n        @if (!!header) {\n        <h1 id=\"page-header\">{{ header }}</h1>\n        } @if (!!subheader) {\n        <h2 id=\"page-subheader\">{{ subheader }}</h2>\n        }\n      </div>\n      } @else {\n      <div class=\"header justify-content-evenly\">\n        <p-skeleton width=\"10rem\"></p-skeleton>\n        <p-skeleton width=\"10rem\"></p-skeleton>\n      </div>\n      }\n    </div>\n\n    <div class=\"action-items-wrap mt-2 md:mt-0\">\n      @if (additionalToolbarContentLeft) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n      } @if (!loading) { @if (inlineActions && inlineActions.length > 0) {\n      <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n        @for (action of inlineActions; track action) {\n        <span\n          [pTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n          tooltipPosition=\"top\"\n          tooltipEvent=\"hover\"\n        >\n          <p-button\n            id=\"{{ action.id }}\"\n            [icon]=\"action.icon ?? ''\"\n            [iconPos]=\"action.iconPos ?? 'left'\"\n            type=\"button\"\n            class=\"action-button\"\n            [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n            (onClick)=\"action.actionCallback()\"\n            [disabled]=\"action.disabled ? action.disabled : false\"\n            [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n            [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n          ></p-button>\n        </span>\n        }\n      </div>\n      }\n      <ng-content select=\"[toolbarItems]\"></ng-content>\n      <ng-container>\n        @if (overflowActions.length !== 0) {\n        <div>\n          <button\n            id=\"pageHeaderMenuButton\"\n            type=\"button\"\n            pButton\n            icon=\"pi pi-ellipsis-v\"\n            pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n            tooltipEvent=\"hover\"\n            tooltipPosition=\"top\"\n            class=\"more-actions-menu-button action-button ml-2\"\n            (click)=\"menu.toggle($event)\"\n            name=\"ocx-page-header-overflow-action-button\"\n            [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n          ></button>\n          <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n        </div>\n        }\n      </ng-container>\n      } @else {\n      <div class=\"flex\">\n        <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n        <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n      </div>\n      } @if (additionalToolbarContent) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n      }\n    </div>\n  </div>\n\n  <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n    @if (objectDetails) { @for (item of objectDetails; track item) {\n    <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n      <span\n        class=\"flex font-medium text-600 object-info-grid-label\"\n        name=\"object-detail-label\"\n        [pTooltip]=\"item.labelTooltip || ''\"\n        tooltipEvent=\"hover\"\n        tooltipPosition=\"top\"\n        >{{ item.label | dynamicPipe:item.labelPipe }}</span\n      >\n      @if (item.icon || item.value) {\n      <span class=\"object-info-grid-value\">\n        <span\n          class=\"flex text-900 align-items-center gap-2 w-max\"\n          [ngClass]=\"generateItemStyle(item)\"\n          name=\"object-detail-value\"\n        >\n          <span\n            class=\"flex align-items-center gap-2\"\n            [pTooltip]=\"item.valueTooltip || item.tooltip || ''\"\n            tooltipEvent=\"hover\"\n            tooltipPosition=\"top\"\n          >\n            @if (item.icon) {\n            <i class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}' name=\"object-detail-icon\"></i>\n            } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n          </span>\n          @if (item.actionItemIcon && item.actionItemCallback) {\n          <p-button\n            [icon]=\"item.actionItemIcon\"\n            styleClass=\"p-button-text p-0 w-full\"\n            [pTooltip]=\"item.actionItemTooltip || ''\"\n            tooltipPosition=\"top\"\n            tooltipEvent=\"hover\"\n            [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n            (onClick)=\"item.actionItemCallback()\"\n          ></p-button>\n          }\n        </span>\n      </span>\n      }\n    </div>\n    } }\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.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: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.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: SrcDirective, selector: "[ocxSrc]", inputs: ["ocxSrc"], outputs: ["error"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PageHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ocx-page-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n  <ng-container *ngIf=\"showBreadcrumbs\">\n    <p-breadcrumb\n      *ngIf=\"breadcrumbs$ | async as items\"\n      [model]=\"items\"\n      [home]=\"(home$ | async)?.menuItem ?? {}\"\n      [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n      [attr.manual]=\"manualBreadcrumbs\"\n    ></p-breadcrumb>\n  </ng-container>\n\n  <div class=\"p-3 title-bar flex flex-row flex-wrap justify-content-between align-items-center gap-2\">\n    <div class=\"title-wrap\">\n      <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\" *ngIf=\"showFigure\">\n        <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n          <ng-content select=\"[figureImage]\"></ng-content>\n          <img\n            *ngIf=\"figureImage && !figureImageLoadError\"\n            [ocxSrc]=\"figureImage\"\n            alt=\"Figure Image\"\n            class=\"w-full border-round-sm\"\n            (error)=\"handleImageError()\"\n          />\n        </div>\n        <div\n          class=\"colorblob flex-1 border-round\"\n          *ngIf=\"previewImage.children.length === 0 || figureImageLoadError\"\n        ></div>\n      </div>\n      <ng-template #skeletonBar>\n        <div class=\"header justify-content-evenly\">\n          <p-skeleton width=\"10rem\"></p-skeleton>\n          <p-skeleton width=\"10rem\"></p-skeleton>\n        </div>\n      </ng-template>\n      <div class=\"header\" *ngIf=\"!loading; else skeletonBar\">\n        <h1 id=\"page-header\" *ngIf=\"!!header\">{{ header }}</h1>\n        <h2 id=\"page-subheader\" *ngIf=\"!!subheader\">{{ subheader }}</h2>\n      </div>\n    </div>\n\n    <div class=\"action-items-wrap mt-2 md:mt-0\">\n      <ng-container *ngIf=\"additionalToolbarContentLeft\" [ngTemplateOutlet]=\"additionalToolbarContentLeft\">\n      </ng-container>\n\n      <ng-container *ngIf=\"!disableDefaultActions\"> </ng-container>\n      <ng-template #skeletonActions>\n        <div class=\"flex\">\n          <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n          <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n        </div>\n      </ng-template>\n      <ng-container *ngIf=\"!loading; else skeletonActions\">\n        <div *ngIf=\"inlineActions && inlineActions.length > 0\" class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n          <ng-container *ngFor=\"let action of inlineActions\">\n            <span\n              [pTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n              tooltipPosition=\"top\"\n              tooltipEvent=\"hover\"\n            >\n              <p-button\n                id=\"{{ action.id }}\"\n                [icon]=\"action.icon ?? ''\"\n                [iconPos]=\"action.iconPos ?? 'left'\"\n                type=\"button\"\n                class=\"action-button\"\n                [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n                (onClick)=\"action.actionCallback()\"\n                [disabled]=\"action.disabled ? action.disabled : false\"\n                [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n                [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n              ></p-button>\n            </span>\n          </ng-container>\n        </div>\n        <ng-content select=\"[toolbarItems]\"></ng-content>\n        <ng-container>\n          <div *ngIf=\"overflowActions.length !== 0\">\n            <button\n              id=\"pageHeaderMenuButton\"\n              type=\"button\"\n              pButton\n              icon=\"pi pi-ellipsis-v\"\n              pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n              tooltipEvent=\"hover\"\n              tooltipPosition=\"top\"\n              class=\"more-actions-menu-button action-button ml-2\"\n              (click)=\"menu.toggle($event)\"\n              name=\"ocx-page-header-overflow-action-button\"\n              [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n            ></button>\n            <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n          </div>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"additionalToolbarContent\" [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n    </div>\n  </div>\n\n  <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n    <ng-container *ngIf=\"objectDetails\">\n      <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\" *ngFor=\"let item of objectDetails\">\n        <span\n          class=\"flex font-medium text-600 object-info-grid-label\"\n          name=\"object-detail-label\"\n          [pTooltip]=\"item.labelTooltip || ''\"\n          tooltipEvent=\"hover\"\n          tooltipPosition=\"top\"\n          >{{ item.label | dynamicPipe:item.labelPipe }}</span\n        >\n        <span *ngIf=\"item.icon || item.value\" class=\"object-info-grid-value\">\n          <span\n            class=\"flex text-900 align-items-center gap-2 w-max\"\n            [ngClass]=\"generateItemStyle(item)\"\n            name=\"object-detail-value\"\n          >\n            <span\n              class=\"flex align-items-center gap-2\"\n              [pTooltip]=\"item.valueTooltip || item.tooltip || ''\"\n              tooltipEvent=\"hover\"\n              tooltipPosition=\"top\"\n            >\n              <i\n                *ngIf=\"item.icon\"\n                class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}'\n                name=\"object-detail-icon\"\n              ></i>\n              {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n            </span>\n            <p-button\n              *ngIf=\"item.actionItemIcon && item.actionItemCallback\"\n              [icon]=\"item.actionItemIcon\"\n              styleClass=\"p-button-text p-0 w-full\"\n              [pTooltip]=\"item.actionItemTooltip || ''\"\n              tooltipPosition=\"top\"\n              tooltipEvent=\"hover\"\n              [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n              (onClick)=\"item.actionItemCallback()\"\n            ></p-button>\n          </span>\n        </span>\n      </div>\n    </ng-container>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"] }]
-        }], ctorParameters: () => [{ type: BreadcrumbService }, { type: i1$2.TranslateService }, { type: i3.AppStateService }, { type: i3.UserService }], propDecorators: { header: [{
+            args: [{ standalone: false, selector: 'ocx-page-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n  @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n  <p-breadcrumb\n    [model]=\"items\"\n    [home]=\"(home$ | async)?.menuItem ?? {}\"\n    [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n    [attr.manual]=\"manualBreadcrumbs\"\n  ></p-breadcrumb>\n  } }\n  <div class=\"title-bar flex flex-row md:justify-content-between align-items-center p-3\">\n    <div class=\"title-wrap\">\n      @if (showFigure) {\n      <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n        <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n          <ng-content select=\"[figureImage]\"></ng-content>\n          @if (figureImage && !figureImageLoadError) {\n          <img [ocxSrc]=\"figureImage\" alt=\"Figure Image\" class=\"w-full border-round-sm\" (error)=\"handleImageError()\" />\n          }\n        </div>\n        @if (previewImage.children.length === 0 || figureImageLoadError) {\n        <div class=\"colorblob flex-1 border-round\"></div>\n        }\n      </div>\n      } @if (!loading) {\n      <div class=\"header\">\n        @if (!!header) {\n        <h1 id=\"page-header\">{{ header }}</h1>\n        } @if (!!subheader) {\n        <h2 id=\"page-subheader\">{{ subheader }}</h2>\n        }\n      </div>\n      } @else {\n      <div class=\"header justify-content-evenly\">\n        <p-skeleton width=\"10rem\"></p-skeleton>\n        <p-skeleton width=\"10rem\"></p-skeleton>\n      </div>\n      }\n    </div>\n\n    <div class=\"action-items-wrap mt-2 md:mt-0\">\n      @if (additionalToolbarContentLeft) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n      } @if (!loading) { @if (inlineActions && inlineActions.length > 0) {\n      <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n        @for (action of inlineActions; track action) {\n        <span\n          [pTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n          tooltipPosition=\"top\"\n          tooltipEvent=\"hover\"\n        >\n          <p-button\n            id=\"{{ action.id }}\"\n            [icon]=\"action.icon ?? ''\"\n            [iconPos]=\"action.iconPos ?? 'left'\"\n            type=\"button\"\n            class=\"action-button\"\n            [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n            (onClick)=\"action.actionCallback()\"\n            [disabled]=\"action.disabled ? action.disabled : false\"\n            [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n            [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n          ></p-button>\n        </span>\n        }\n      </div>\n      }\n      <ng-content select=\"[toolbarItems]\"></ng-content>\n      <ng-container>\n        @if (overflowActions.length !== 0) {\n        <div>\n          <button\n            id=\"pageHeaderMenuButton\"\n            type=\"button\"\n            pButton\n            icon=\"pi pi-ellipsis-v\"\n            pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n            tooltipEvent=\"hover\"\n            tooltipPosition=\"top\"\n            class=\"more-actions-menu-button action-button ml-2\"\n            (click)=\"menu.toggle($event)\"\n            name=\"ocx-page-header-overflow-action-button\"\n            [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n          ></button>\n          <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n        </div>\n        }\n      </ng-container>\n      } @else {\n      <div class=\"flex\">\n        <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n        <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n      </div>\n      } @if (additionalToolbarContent) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n      }\n    </div>\n  </div>\n\n  <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n    @if (objectDetails) { @for (item of objectDetails; track item) {\n    <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n      <span\n        class=\"flex font-medium text-600 object-info-grid-label\"\n        name=\"object-detail-label\"\n        [pTooltip]=\"item.labelTooltip || ''\"\n        tooltipEvent=\"hover\"\n        tooltipPosition=\"top\"\n        >{{ item.label | dynamicPipe:item.labelPipe }}</span\n      >\n      @if (item.icon || item.value) {\n      <span class=\"object-info-grid-value\">\n        <span\n          class=\"flex text-900 align-items-center gap-2 w-max\"\n          [ngClass]=\"generateItemStyle(item)\"\n          name=\"object-detail-value\"\n        >\n          <span\n            class=\"flex align-items-center gap-2\"\n            [pTooltip]=\"item.valueTooltip || item.tooltip || ''\"\n            tooltipEvent=\"hover\"\n            tooltipPosition=\"top\"\n          >\n            @if (item.icon) {\n            <i class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}' name=\"object-detail-icon\"></i>\n            } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n          </span>\n          @if (item.actionItemIcon && item.actionItemCallback) {\n          <p-button\n            [icon]=\"item.actionItemIcon\"\n            styleClass=\"p-button-text p-0 w-full\"\n            [pTooltip]=\"item.actionItemTooltip || ''\"\n            tooltipPosition=\"top\"\n            tooltipEvent=\"hover\"\n            [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n            (onClick)=\"item.actionItemCallback()\"\n          ></p-button>\n          }\n        </span>\n      </span>\n      }\n    </div>\n    } }\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { header: [{
                 type: Input
             }], loading: [{
                 type: Input
@@ -700,7 +849,7 @@ class SearchHeaderComponent {
     get searchConfigChangeObserved() {
         return this.selectedSearchConfigChanged.observed;
     }
-    constructor(configurationService) {
+    constructor() {
         this.header = '';
         this._viewMode = 'basic';
         this.manualBreadcrumbs = false;
@@ -720,17 +869,17 @@ class SearchHeaderComponent {
             show: 'always',
         };
         this.headerActions = [];
-        this.searchButtonsReversed = false;
+        this.searchButtonsReversed$ = of(false);
         this.fieldValues$ = of({});
         this.searchConfigChangedSlotEmitter = new EventEmitter();
+        const configurationService = inject(ConfigurationService);
         this.searchConfigChangedSlotEmitter.subscribe((config) => {
             this.componentStateChanged.emit({
                 selectedSearchConfig: config?.name ?? null,
             });
             this.selectedSearchConfigChanged.emit(config);
         });
-        this.searchButtonsReversed =
-            configurationService.getProperty(CONFIG_KEY.ONECX_PORTAL_SEARCH_BUTTONS_REVERSED) === 'true';
+        this.searchButtonsReversed$ = from(configurationService.getProperty(CONFIG_KEY.ONECX_PORTAL_SEARCH_BUTTONS_REVERSED)).pipe(map((config) => config === 'true'));
     }
     ngAfterContentInit() {
         if (this.formGroup) {
@@ -758,12 +907,15 @@ class SearchHeaderComponent {
     updateHeaderActions() {
         const headerActions = [];
         if (this.hasAdvanced) {
-            this.simpleAdvancedAction.labelKey = this.viewMode === 'basic'
-                ? 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.ADVANCED.TEXT'
-                : 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.SIMPLE.TEXT',
-                this.simpleAdvancedAction.titleKey = this.viewMode === 'basic'
-                    ? 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.ADVANCED.DETAIL'
-                    : 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.SIMPLE.DETAIL',
+            ;
+            (this.simpleAdvancedAction.labelKey =
+                this.viewMode === 'basic'
+                    ? 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.ADVANCED.TEXT'
+                    : 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.SIMPLE.TEXT'),
+                (this.simpleAdvancedAction.titleKey =
+                    this.viewMode === 'basic'
+                        ? 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.ADVANCED.DETAIL'
+                        : 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.SIMPLE.DETAIL'),
                 headerActions.push(this.simpleAdvancedAction);
         }
         this.headerActions = headerActions.concat(this.actions);
@@ -785,13 +937,13 @@ class SearchHeaderComponent {
     isVisible(control) {
         return this.visibleFormControls.some((formControl) => formControl.name !== null && String(formControl.name) === control);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchHeaderComponent, deps: [{ token: i3.ConfigurationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SearchHeaderComponent, selector: "ocx-search-header", inputs: { header: "header", headline: "headline", subheader: "subheader", viewMode: "viewMode", manualBreadcrumbs: "manualBreadcrumbs", actions: "actions", searchConfigPermission: "searchConfigPermission", searchButtonDisabled: "searchButtonDisabled", resetButtonDisabled: "resetButtonDisabled", pageName: "pageName" }, outputs: { searched: "searched", resetted: "resetted", selectedSearchConfigChanged: "selectedSearchConfigChanged", viewModeChanged: "viewModeChanged", componentStateChanged: "componentStateChanged" }, providers: [], queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }, { propertyName: "formGroup", first: true, predicate: FormGroupDirective, descendants: true }, { propertyName: "visibleFormControls", predicate: FormControlName, descendants: true }], viewQueries: [{ propertyName: "searchParameterFields", first: true, predicate: ["searchParameterFields"], descendants: true }], ngImport: i0, template: "<ocx-page-header\n  [header]=\"header || ('OCX_SEARCH_HEADER.HEADER' | translate)\"\n  [subheader]=\"subheader\"\n  [manualBreadcrumbs]=\"manualBreadcrumbs\"\n  [actions]=\"headerActions\"\n>\n  <ng-template #additionalToolbarContentLeft>\n    <ng-container *ngIf=\"searchConfigChangeObserved && pageName\">\n      <ocx-slot\n        *ocxIfPermission=\"searchConfigPermission\"\n        name=\"onecx-search-config\"\n        [inputs]=\"{ pageName: pageName, currentFieldValues: fieldValues$ | async, viewMode: viewMode }\"\n        [outputs]=\"{ searchConfigSelected: searchConfigChangedSlotEmitter }\"\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      *ngIf=\"_additionalToolbarContentLeft\"\n      [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"\n    ></ng-container>\n  </ng-template>\n  <ng-template #additionalToolbarContent>\n    <ng-container *ngIf=\"_additionalToolbarContent\" [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\n  </ng-template>\n  <div class=\"flex row-gap-3 column-gap-6 flex-wrap align-items-center\">\n    <div>\n      <div #searchParameterFields>\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"flex flex-wrap gap-2\" [ngClass]=\"searchButtonsReversed ? 'flex-row-reverse' : 'flex-row'\">\n      <p-button\n        id=\"resetButton\"\n        *ngIf=\"resetted.observed\"\n        (onClick)=\"onResetClicked()\"\n        label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n        icon=\"pi pi-eraser\"\n        pTooltip=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n        tooltipPosition=\"top\"\n        tooltipEvent=\"hover\"\n        [disabled]=\"resetButtonDisabled\"\n        [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.ARIA_LABEL' | translate\"\n      >\n      </p-button>\n\n      <p-button\n        id=\"searchButton\"\n        (onClick)=\"onSearchClicked()\"\n        label=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}\"\n        icon=\"pi pi-search\"\n        pTooltip=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n        tooltipPosition=\"top\"\n        tooltipEvent=\"hover\"\n        [disabled]=\"searchButtonDisabled || formGroup?.invalid\"\n        [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.ARIA_LABEL' | translate\"\n      >\n      </p-button>\n    </div>\n  </div>\n</ocx-page-header>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i7.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: i9.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: PageHeaderComponent, selector: "ocx-page-header", inputs: ["header", "loading", "figureBackground", "showFigure", "figureImage", "disableDefaultActions", "subheader", "actions", "objectDetails", "showBreadcrumbs", "manualBreadcrumbs", "enableGridView", "gridLayoutDesktopColumns"], outputs: ["save"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SearchHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: SearchHeaderComponent, isStandalone: false, selector: "ocx-search-header", inputs: { header: "header", headline: "headline", subheader: "subheader", viewMode: "viewMode", manualBreadcrumbs: "manualBreadcrumbs", actions: "actions", searchConfigPermission: "searchConfigPermission", searchButtonDisabled: "searchButtonDisabled", resetButtonDisabled: "resetButtonDisabled", pageName: "pageName" }, outputs: { searched: "searched", resetted: "resetted", selectedSearchConfigChanged: "selectedSearchConfigChanged", viewModeChanged: "viewModeChanged", componentStateChanged: "componentStateChanged" }, providers: [], queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }, { propertyName: "formGroup", first: true, predicate: FormGroupDirective, descendants: true }, { propertyName: "visibleFormControls", predicate: FormControlName, descendants: true }], viewQueries: [{ propertyName: "searchParameterFields", first: true, predicate: ["searchParameterFields"], descendants: true }], ngImport: i0, template: "<ocx-page-header\n  [header]=\"header || ('OCX_SEARCH_HEADER.HEADER' | translate)\"\n  [subheader]=\"subheader\"\n  [manualBreadcrumbs]=\"manualBreadcrumbs\"\n  [actions]=\"headerActions\"\n  >\n  <ng-template #additionalToolbarContentLeft>\n    @if (searchConfigChangeObserved && pageName) {\n      <ocx-slot\n        *ocxIfPermission=\"searchConfigPermission\"\n        name=\"onecx-search-config\"\n        [inputs]=\"{ pageName: pageName, currentFieldValues: fieldValues$ | async, viewMode: viewMode }\"\n        [outputs]=\"{ searchConfigSelected: searchConfigChangedSlotEmitter }\"\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    }\n    @if (_additionalToolbarContentLeft) {\n      <ng-container\n        [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"\n      ></ng-container>\n    }\n  </ng-template>\n  <ng-template #additionalToolbarContent>\n    @if (_additionalToolbarContent) {\n      <ng-container [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\n    }\n  </ng-template>\n  <div class=\"flex row-gap-3 column-gap-6 flex-wrap align-items-center\">\n    <div>\n      <div #searchParameterFields>\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"flex flex-wrap gap-2\" [ngClass]=\"(searchButtonsReversed$ | async) ? 'flex-row-reverse' : 'flex-row'\">\n      @if (resetted.observed) {\n        <p-button\n          id=\"resetButton\"\n          (onClick)=\"onResetClicked()\"\n          label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n          icon=\"pi pi-eraser\"\n          pTooltip=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n          tooltipPosition=\"top\"\n          tooltipEvent=\"hover\"\n          [disabled]=\"resetButtonDisabled\"\n          [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.ARIA_LABEL' | translate\"\n          >\n        </p-button>\n      }\n\n      <p-button\n        id=\"searchButton\"\n        (onClick)=\"onSearchClicked()\"\n        label=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}\"\n        icon=\"pi pi-search\"\n        pTooltip=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n        tooltipPosition=\"top\"\n        tooltipEvent=\"hover\"\n        [disabled]=\"searchButtonDisabled || formGroup?.invalid\"\n        [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.ARIA_LABEL' | translate\"\n        >\n      </p-button>\n    </div>\n  </div>\n</ocx-page-header>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i5$1.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "slotStyles", "slotClasses", "inputs", "outputs"] }, { kind: "component", type: PageHeaderComponent, selector: "ocx-page-header", inputs: ["header", "loading", "figureBackground", "showFigure", "figureImage", "disableDefaultActions", "subheader", "actions", "objectDetails", "showBreadcrumbs", "manualBreadcrumbs", "enableGridView", "gridLayoutDesktopColumns"], outputs: ["save"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SearchHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ocx-search-header', providers: [], template: "<ocx-page-header\n  [header]=\"header || ('OCX_SEARCH_HEADER.HEADER' | translate)\"\n  [subheader]=\"subheader\"\n  [manualBreadcrumbs]=\"manualBreadcrumbs\"\n  [actions]=\"headerActions\"\n>\n  <ng-template #additionalToolbarContentLeft>\n    <ng-container *ngIf=\"searchConfigChangeObserved && pageName\">\n      <ocx-slot\n        *ocxIfPermission=\"searchConfigPermission\"\n        name=\"onecx-search-config\"\n        [inputs]=\"{ pageName: pageName, currentFieldValues: fieldValues$ | async, viewMode: viewMode }\"\n        [outputs]=\"{ searchConfigSelected: searchConfigChangedSlotEmitter }\"\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      *ngIf=\"_additionalToolbarContentLeft\"\n      [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"\n    ></ng-container>\n  </ng-template>\n  <ng-template #additionalToolbarContent>\n    <ng-container *ngIf=\"_additionalToolbarContent\" [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\n  </ng-template>\n  <div class=\"flex row-gap-3 column-gap-6 flex-wrap align-items-center\">\n    <div>\n      <div #searchParameterFields>\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"flex flex-wrap gap-2\" [ngClass]=\"searchButtonsReversed ? 'flex-row-reverse' : 'flex-row'\">\n      <p-button\n        id=\"resetButton\"\n        *ngIf=\"resetted.observed\"\n        (onClick)=\"onResetClicked()\"\n        label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n        icon=\"pi pi-eraser\"\n        pTooltip=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n        tooltipPosition=\"top\"\n        tooltipEvent=\"hover\"\n        [disabled]=\"resetButtonDisabled\"\n        [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.ARIA_LABEL' | translate\"\n      >\n      </p-button>\n\n      <p-button\n        id=\"searchButton\"\n        (onClick)=\"onSearchClicked()\"\n        label=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}\"\n        icon=\"pi pi-search\"\n        pTooltip=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n        tooltipPosition=\"top\"\n        tooltipEvent=\"hover\"\n        [disabled]=\"searchButtonDisabled || formGroup?.invalid\"\n        [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.ARIA_LABEL' | translate\"\n      >\n      </p-button>\n    </div>\n  </div>\n</ocx-page-header>\n" }]
-        }], ctorParameters: () => [{ type: i3.ConfigurationService }], propDecorators: { header: [{
+            args: [{ standalone: false, selector: 'ocx-search-header', providers: [], template: "<ocx-page-header\n  [header]=\"header || ('OCX_SEARCH_HEADER.HEADER' | translate)\"\n  [subheader]=\"subheader\"\n  [manualBreadcrumbs]=\"manualBreadcrumbs\"\n  [actions]=\"headerActions\"\n  >\n  <ng-template #additionalToolbarContentLeft>\n    @if (searchConfigChangeObserved && pageName) {\n      <ocx-slot\n        *ocxIfPermission=\"searchConfigPermission\"\n        name=\"onecx-search-config\"\n        [inputs]=\"{ pageName: pageName, currentFieldValues: fieldValues$ | async, viewMode: viewMode }\"\n        [outputs]=\"{ searchConfigSelected: searchConfigChangedSlotEmitter }\"\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    }\n    @if (_additionalToolbarContentLeft) {\n      <ng-container\n        [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"\n      ></ng-container>\n    }\n  </ng-template>\n  <ng-template #additionalToolbarContent>\n    @if (_additionalToolbarContent) {\n      <ng-container [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\n    }\n  </ng-template>\n  <div class=\"flex row-gap-3 column-gap-6 flex-wrap align-items-center\">\n    <div>\n      <div #searchParameterFields>\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"flex flex-wrap gap-2\" [ngClass]=\"(searchButtonsReversed$ | async) ? 'flex-row-reverse' : 'flex-row'\">\n      @if (resetted.observed) {\n        <p-button\n          id=\"resetButton\"\n          (onClick)=\"onResetClicked()\"\n          label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n          icon=\"pi pi-eraser\"\n          pTooltip=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n          tooltipPosition=\"top\"\n          tooltipEvent=\"hover\"\n          [disabled]=\"resetButtonDisabled\"\n          [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.ARIA_LABEL' | translate\"\n          >\n        </p-button>\n      }\n\n      <p-button\n        id=\"searchButton\"\n        (onClick)=\"onSearchClicked()\"\n        label=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}\"\n        icon=\"pi pi-search\"\n        pTooltip=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n        tooltipPosition=\"top\"\n        tooltipEvent=\"hover\"\n        [disabled]=\"searchButtonDisabled || formGroup?.invalid\"\n        [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.ARIA_LABEL' | translate\"\n        >\n      </p-button>\n    </div>\n  </div>\n</ocx-page-header>\n" }]
+        }], ctorParameters: () => [], propDecorators: { header: [{
                 type: Input
             }], headline: [{
                 type: Input
@@ -839,10 +991,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class AdvancedDirective {
-    constructor(viewContainer, templateRef, searchHeader) {
-        this.viewContainer = viewContainer;
-        this.templateRef = templateRef;
-        this.searchHeader = searchHeader;
+    constructor() {
+        this.viewContainer = inject(ViewContainerRef);
+        this.templateRef = inject(TemplateRef, { optional: true });
+        this.searchHeader = inject(SearchHeaderComponent, { optional: true });
+        const searchHeader = this.searchHeader;
         if (!searchHeader) {
             throw 'Advanced directive can only be used inside search header component';
         }
@@ -858,17 +1011,13 @@ class AdvancedDirective {
             this.viewContainer.clear();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AdvancedDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef, optional: true }, { token: SearchHeaderComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AdvancedDirective, selector: "[ocxAdvanced]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AdvancedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: AdvancedDirective, isStandalone: false, selector: "[ocxAdvanced]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AdvancedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AdvancedDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[ocxAdvanced]' }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }, { type: SearchHeaderComponent, decorators: [{
-                    type: Optional
-                }] }] });
+            args: [{ selector: '[ocxAdvanced]', standalone: false }]
+        }], ctorParameters: () => [] });
 
 class TooltipOnOverflowDirective extends Tooltip {
     get ocxTooltipOnOverflow() {
@@ -886,8 +1035,11 @@ class TooltipOnOverflowDirective extends Tooltip {
         super.ngAfterViewInit();
         this.mutationObserver.observe(this.el.nativeElement, { subtree: true, characterData: true, childList: true });
     }
-    constructor(platformId, el, zone, config, renderer, viewContainer) {
-        super(platformId, el, zone, config, renderer, viewContainer);
+    constructor() {
+        const zone = inject(NgZone);
+        const renderer = inject(Renderer2);
+        const viewContainer = inject(ViewContainerRef);
+        super(zone, viewContainer);
         this.mutationObserver = new MutationObserver(() => {
             this.zone.run(() => {
                 this.disabled = this.el.nativeElement.scrollWidth <= this.el.nativeElement.offsetWidth;
@@ -900,19 +1052,38 @@ class TooltipOnOverflowDirective extends Tooltip {
         this.disabled = true;
         this.setOption({ disabled: this.disabled });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipOnOverflowDirective, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3$1.PrimeNGConfig }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: TooltipOnOverflowDirective, selector: "[ocxTooltipOnOverflow]", inputs: { ocxTooltipOnOverflow: "ocxTooltipOnOverflow" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TooltipOnOverflowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: TooltipOnOverflowDirective, isStandalone: false, selector: "[ocxTooltipOnOverflow]", inputs: { ocxTooltipOnOverflow: "ocxTooltipOnOverflow" }, providers: [TooltipStyle], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipOnOverflowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TooltipOnOverflowDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[ocxTooltipOnOverflow]' }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3$1.PrimeNGConfig }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], propDecorators: { ocxTooltipOnOverflow: [{
+            args: [{ selector: '[ocxTooltipOnOverflow]', standalone: false, providers: [TooltipStyle] }]
+        }], ctorParameters: () => [], propDecorators: { ocxTooltipOnOverflow: [{
                 type: Input
             }] } });
 
+class TemplateDirective {
+    constructor() {
+        this.template = inject(TemplateRef);
+        this.name = '';
+    }
+    getType() {
+        return this.name;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: TemplateDirective, isStandalone: false, selector: "[ocxTemplate]", inputs: { name: ["ocxTemplate", "name"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ocxTemplate]', standalone: false }]
+        }], propDecorators: { name: [{
+                type: Input,
+                args: [{
+                        required: true,
+                        alias: 'ocxTemplate',
+                    }]
+            }] } });
+
 class ColumnGroupSelectionComponent {
     constructor() {
         this.selectedGroupKey$ = new BehaviorSubject('');
@@ -972,12 +1143,12 @@ class ColumnGroupSelectionComponent {
             displayedColumns: activeColumns,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnGroupSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$2.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$1.FloatLabel, selector: "p-floatLabel" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ColumnGroupSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ColumnGroupSelectionComponent, isStandalone: false, 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 variant=\"on\">\n  @if ((allGroupKeys$ | async)?.length) {\n    <p-select\n      inputId=\"columnGroupSelectionDropdown\"\n      id=\"columnGroupSelectionDropdownElement\"\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 #item> {{ item ? (item | translate) : ''}} </ng-template>\n      <ng-template let-item #selectedItem> {{ item ? (item | translate) : ''}} </ng-template>\n    </p-select>\n  }\n  @if ((allGroupKeys$ | async)?.length) {\n    <label for=\"columnGroupSelectionDropdown\"\n      >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n      >\n    }\n  </p-floatlabel>\n", styles: [":host ::ng-deep .p-select{min-width:12rem}\n"], dependencies: [{ kind: "component", type: i1$1.Select, selector: "p-select", 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", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i2$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnGroupSelectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", 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: [{ standalone: false, selector: 'ocx-column-group-selection', template: "<p-floatlabel variant=\"on\">\n  @if ((allGroupKeys$ | async)?.length) {\n    <p-select\n      inputId=\"columnGroupSelectionDropdown\"\n      id=\"columnGroupSelectionDropdownElement\"\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 #item> {{ item ? (item | translate) : ''}} </ng-template>\n      <ng-template let-item #selectedItem> {{ item ? (item | translate) : ''}} </ng-template>\n    </p-select>\n  }\n  @if ((allGroupKeys$ | async)?.length) {\n    <label for=\"columnGroupSelectionDropdown\"\n      >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n      >\n    }\n  </p-floatlabel>\n", styles: [":host ::ng-deep .p-select{min-width:12rem}\n"] }]
         }], propDecorators: { selectedGroupKey: [{
                 type: Input
             }], columns: [{
@@ -994,22 +1165,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }] } });
 
-class CustomGroupColumnSelectorComponent {
-    get displayedColumns() {
-        return this._displayedColumns;
+class OcxContentComponent {
+    constructor() {
+        /**
+         * Optionally allows specifying a title for the content card
+         */
+        this.title = '';
     }
-    set displayedColumns(value) {
-        this._displayedColumns = value;
-        this.componentStateChanged.emit({
-            actionColumnConfig: {
-                frozen: this.frozenActionColumn,
-                position: this.actionColumnPosition,
-            },
-            displayedColumns: this._displayedColumns,
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OcxContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: OcxContentComponent, isStandalone: false, selector: "ocx-content", inputs: { title: "title", styleClass: "styleClass" }, ngImport: i0, template: "<div [ocxContent]=\"title\" [ngClass]=\"styleClass\">\n    <ng-content></ng-content>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OcxContentDirective, selector: "[ocxContent]", inputs: ["ocxContent"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OcxContentComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'ocx-content', template: "<div [ocxContent]=\"title\" [ngClass]=\"styleClass\">\n    <ng-content></ng-content>\n</div>" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }] } });
+
+class OcxContentContainerComponent {
+    constructor() {
+        /**
+         * Allows specifying the layout direction of the container
+         */
+        this.layout = 'horizontal';
+        /**
+         * Allows specifying the breakpoint below which a horizontal layout switches to a vertical layout.
+         * Only necessary if horizontal layout is used
+         * Default: md
+         */
+        this.breakpoint = 'md';
     }
-    constructor(translate) {
-        this.translate = translate;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OcxContentContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: OcxContentContainerComponent, isStandalone: false, selector: "ocx-content-container", inputs: { layout: "layout", breakpoint: "breakpoint", styleClass: "styleClass" }, ngImport: i0, template: "<div ocxContentContainer [layout]=\"layout\" [breakpoint]=\"breakpoint\" [ngClass]=\"styleClass\">\n    <ng-content></ng-content>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OcxContentContainerDirective, selector: "[ocxContentContainer]", inputs: ["layout", "breakpoint"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OcxContentContainerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'ocx-content-container', template: "<div ocxContentContainer [layout]=\"layout\" [breakpoint]=\"breakpoint\" [ngClass]=\"styleClass\">\n    <ng-content></ng-content>\n</div>" }]
+        }], propDecorators: { layout: [{
+                type: Input
+            }], breakpoint: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }] } });
+
+class CustomGroupColumnSelectorComponent {
+    constructor() {
+        this.translate = inject(TranslateService);
         this.columns = [];
         this._displayedColumns = [];
         this.customGroupKey = '';
@@ -1062,6 +1266,19 @@ class CustomGroupColumnSelectorComponent {
             },
         ];
     }
+    get displayedColumns() {
+        return this._displayedColumns;
+    }
+    set displayedColumns(value) {
+        this._displayedColumns = value;
+        this.componentStateChanged.emit({
+            actionColumnConfig: {
+                frozen: this.frozenActionColumn,
+                position: this.actionColumnPosition,
+            },
+            displayedColumns: this._displayedColumns,
+        });
+    }
     ngOnInit() {
         this.componentStateChanged.emit({
             actionColumnConfig: {
@@ -1107,13 +1324,13 @@ class CustomGroupColumnSelectorComponent {
     onCancelClick() {
         this.visible = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomGroupColumnSelectorComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: { columns: "columns", displayedColumns: "displayedColumns", customGroupKey: "customGroupKey", dialogTitle: "dialogTitle", dialogTitleKey: "dialogTitleKey", openButtonTitle: "openButtonTitle", openButtonTitleKey: "openButtonTitleKey", openButtonAriaLabel: "openButtonAriaLabel", openButtonAriaLabelKey: "openButtonAriaLabelKey", saveButtonLabel: "saveButtonLabel", saveButtonLabelKey: "saveButtonLabelKey", saveButtonAriaLabel: "saveButtonAriaLabel", saveButtonAriaLabelKey: "saveButtonAriaLabelKey", cancelButtonLabel: "cancelButtonLabel", cancelButtonLabelKey: "cancelButtonLabelKey", cancelButtonAriaLabel: "cancelButtonAriaLabel", cancelButtonAriaLabelKey: "cancelButtonAriaLabelKey", activeColumnsLabel: "activeColumnsLabel", activeColumnsLabelKey: "activeColumnsLabelKey", inactiveColumnsLabel: "inactiveColumnsLabel", inactiveColumnsLabelKey: "inactiveColumnsLabelKey", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition" }, outputs: { columnSelectionChanged: "columnSelectionChanged", actionColumnConfigChanged: "actionColumnConfigChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-button\n  id=\"customGroupColumnSelectorButton\"\n  type=\"button\"\n  (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n  [pTooltip]=\"openButtonTitle || (openButtonTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  tooltipPosition=\"top\"\n  icon=\"pi pi-cog\"\n  styleClass=\"p-button\"\n  [ariaLabel]=\"(openButtonAriaLabelKey ? (openButtonAriaLabelKey | translate) : openButtonAriaLabel) || openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  [attr.aria-controls]=\"visible ? 'customGroupColumnSelectorDialog' : null\"\n  [attr.aria-expanded]=\"visible ? true : false\"\n></p-button>\n\n<p-dialog\n  #dialog\n  id=\"customGroupColumnSelectorDialog\"\n  [(visible)]=\"visible\"\n  [style]=\"{ width: '70%' }\"\n  [modal]=\"true\"\n  [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n  <ng-template pTemplate=\"header\">\n    <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n      >{{ dialogTitle || (dialogTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' | translate)\n      }}</span\n    >\n  </ng-template>\n\n  <p-pickList\n    [source]=\"displayedColumnsModel\"\n    [target]=\"hiddenColumnsModel\"\n    [sourceHeader]=\"activeColumnsLabel || (activeColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n    [targetHeader]=\"inactiveColumnsLabel || (inactiveColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)\"\n    [dragdrop]=\"true\"\n    [responsive]=\"false\"\n    [sourceStyle]=\"{ height: '300px' }\"\n    [targetStyle]=\"{ height: '300px' }\"\n    [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n    [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n    [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n    [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n    [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n    [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n    [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n    [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\"\n  >\n    <ng-template let-item pTemplate=\"item\">\n      <div>{{ item.nameKey | translate }}</div>\n    </ng-template>\n  </p-pickList>\n\n  <div class=\"pt-4\">\n    <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n    <div class=\"flex gap-6 px-3\">\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</p>\n        <p-selectButton\n          [options]=\"frozenOptions\"\n          [(ngModel)]=\"frozenActionColumnModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"frozenActionColumn\"\n          name=\"frozen-action-column-select-button\"\n        >\n          <ng-template let-option pTemplate>\n            <label id=\"{{option.label}}\">{{option.label | translate}}</label>\n          </ng-template>\n        </p-selectButton>\n      </div>\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</p>\n        <p-selectButton\n          [options]=\"alignmentOptions\"\n          [(ngModel)]=\"actionColumnPositionModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"actionColumnPosition\"\n          class=\"mt-2\"\n          name=\"action-column-position-select-button\"\n        >\n          <ng-template let-option pTemplate>\n            <label id=\"{{option.label}}\">{{option.label | translate}}</label>\n          </ng-template>\n        </p-selectButton>\n      </div>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button\n      id=\"cancelButton\"\n      (onClick)=\"onCancelClick()\"\n      [label]=\"cancelButtonLabel || (cancelButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n      styleClass=\"p-button\"\n      [ariaLabel]=\"cancelButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n    <p-button\n      id=\"saveButton\"\n      (onClick)=\"onSaveClick()\"\n      [label]=\"saveButtonLabel || (saveButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n      [ariaLabel]=\"saveButtonAriaLabelKey || (saveButtonAriaLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n  </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}.p-button{height:100%}\n"], dependencies: [{ kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7.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: i5$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i6.PickList, selector: "p-pickList", inputs: ["source", "target", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "targetHeader", "responsive", "filterBy", "filterLocale", "trackBy", "sourceTrackBy", "targetTrackBy", "showSourceFilter", "showTargetFilter", "metaKeySelection", "dragdrop", "style", "styleClass", "sourceStyle", "targetStyle", "showSourceControls", "showTargetControls", "sourceFilterPlaceholder", "targetFilterPlaceholder", "disabled", "ariaSourceFilterLabel", "ariaTargetFilterLabel", "filterMatchMode", "stripedRows", "keepSelection", "breakpoint"], outputs: ["onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "component", type: i7$1.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CustomGroupColumnSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: CustomGroupColumnSelectorComponent, isStandalone: false, selector: "ocx-custom-group-column-selector", inputs: { columns: "columns", displayedColumns: "displayedColumns", customGroupKey: "customGroupKey", dialogTitle: "dialogTitle", dialogTitleKey: "dialogTitleKey", openButtonTitle: "openButtonTitle", openButtonTitleKey: "openButtonTitleKey", openButtonAriaLabel: "openButtonAriaLabel", openButtonAriaLabelKey: "openButtonAriaLabelKey", saveButtonLabel: "saveButtonLabel", saveButtonLabelKey: "saveButtonLabelKey", saveButtonAriaLabel: "saveButtonAriaLabel", saveButtonAriaLabelKey: "saveButtonAriaLabelKey", cancelButtonLabel: "cancelButtonLabel", cancelButtonLabelKey: "cancelButtonLabelKey", cancelButtonAriaLabel: "cancelButtonAriaLabel", cancelButtonAriaLabelKey: "cancelButtonAriaLabelKey", activeColumnsLabel: "activeColumnsLabel", activeColumnsLabelKey: "activeColumnsLabelKey", inactiveColumnsLabel: "inactiveColumnsLabel", inactiveColumnsLabelKey: "inactiveColumnsLabelKey", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition" }, outputs: { columnSelectionChanged: "columnSelectionChanged", actionColumnConfigChanged: "actionColumnConfigChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-button\n  id=\"customGroupColumnSelectorButton\"\n  type=\"button\"\n  (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n  [pTooltip]=\"openButtonTitle || (openButtonTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  tooltipPosition=\"top\"\n  icon=\"pi pi-cog\"\n  styleClass=\"p-button\"\n  [ariaLabel]=\"(openButtonAriaLabelKey ? (openButtonAriaLabelKey | translate) : openButtonAriaLabel) || openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  [attr.aria-controls]=\"visible ? 'customGroupColumnSelectorDialog' : null\"\n  [attr.aria-expanded]=\"visible ? true : false\"\n></p-button>\n\n<p-dialog\n  #dialog\n  id=\"customGroupColumnSelectorDialog\"\n  [(visible)]=\"visible\"\n  [style]=\"{ width: '70%' }\"\n  [modal]=\"true\"\n  [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n  <ng-template pTemplate=\"header\">\n    <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n      >{{ dialogTitle || (dialogTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' | translate)\n      }}</span\n    >\n  </ng-template>\n\n  <p-pickList\n    [source]=\"displayedColumnsModel\"\n    [target]=\"hiddenColumnsModel\"\n    [sourceHeader]=\"activeColumnsLabel || (activeColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n    [targetHeader]=\"inactiveColumnsLabel || (inactiveColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)\"\n    [dragdrop]=\"true\"\n    [responsive]=\"false\"\n    [sourceStyle]=\"{ height: '300px' }\"\n    [targetStyle]=\"{ height: '300px' }\"\n    [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n    [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n    [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n    [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n    [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n    [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n    [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n    [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\"\n  >\n    <ng-template let-item #item>\n      <div>{{ item.nameKey | translate }}</div>\n    </ng-template>\n  </p-pickList>\n\n  <div class=\"pt-4\">\n    <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n    <div class=\"flex gap-6 px-3\">\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</p>\n        <p-selectbutton\n          [options]=\"frozenOptions\"\n          [(ngModel)]=\"frozenActionColumnModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"frozenActionColumn\"\n          name=\"frozen-action-column-select-button\"\n          [allowEmpty]=\"false\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</p>\n        <p-selectbutton\n          [options]=\"alignmentOptions\"\n          [(ngModel)]=\"actionColumnPositionModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"actionColumnPosition\"\n          name=\"action-column-position-select-button\"\n          [allowEmpty]=\"false\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button\n      id=\"cancelButton\"\n      (onClick)=\"onCancelClick()\"\n      [label]=\"cancelButtonLabel || (cancelButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n      styleClass=\"p-button\"\n      [ariaLabel]=\"cancelButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n    <p-button\n      id=\"saveButton\"\n      (onClick)=\"onSaveClick()\"\n      [label]=\"saveButtonLabel || (saveButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n      [ariaLabel]=\"saveButtonAriaLabelKey || (saveButtonAriaLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n  </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}.p-button{height:100%}\n"], dependencies: [{ kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i4$2.PickList, selector: "p-pickList, p-picklist, p-pick-list", inputs: ["source", "target", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "targetHeader", "responsive", "filterBy", "filterLocale", "trackBy", "sourceTrackBy", "targetTrackBy", "showSourceFilter", "showTargetFilter", "metaKeySelection", "dragdrop", "style", "styleClass", "sourceStyle", "targetStyle", "showSourceControls", "showTargetControls", "sourceFilterPlaceholder", "targetFilterPlaceholder", "disabled", "sourceOptionDisabled", "targetOptionDisabled", "ariaSourceFilterLabel", "ariaTargetFilterLabel", "filterMatchMode", "stripedRows", "keepSelection", "scrollHeight", "autoOptionFocus", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps", "moveToTargetProps", "moveAllToTargetProps", "moveToSourceProps", "moveAllToSourceProps", "breakpoint"], outputs: ["onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "component", type: i1$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomGroupColumnSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CustomGroupColumnSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ocx-custom-group-column-selector', template: "<p-button\n  id=\"customGroupColumnSelectorButton\"\n  type=\"button\"\n  (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n  [pTooltip]=\"openButtonTitle || (openButtonTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  tooltipPosition=\"top\"\n  icon=\"pi pi-cog\"\n  styleClass=\"p-button\"\n  [ariaLabel]=\"(openButtonAriaLabelKey ? (openButtonAriaLabelKey | translate) : openButtonAriaLabel) || openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  [attr.aria-controls]=\"visible ? 'customGroupColumnSelectorDialog' : null\"\n  [attr.aria-expanded]=\"visible ? true : false\"\n></p-button>\n\n<p-dialog\n  #dialog\n  id=\"customGroupColumnSelectorDialog\"\n  [(visible)]=\"visible\"\n  [style]=\"{ width: '70%' }\"\n  [modal]=\"true\"\n  [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n  <ng-template pTemplate=\"header\">\n    <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n      >{{ dialogTitle || (dialogTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' | translate)\n      }}</span\n    >\n  </ng-template>\n\n  <p-pickList\n    [source]=\"displayedColumnsModel\"\n    [target]=\"hiddenColumnsModel\"\n    [sourceHeader]=\"activeColumnsLabel || (activeColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n    [targetHeader]=\"inactiveColumnsLabel || (inactiveColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)\"\n    [dragdrop]=\"true\"\n    [responsive]=\"false\"\n    [sourceStyle]=\"{ height: '300px' }\"\n    [targetStyle]=\"{ height: '300px' }\"\n    [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n    [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n    [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n    [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n    [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n    [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n    [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n    [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\"\n  >\n    <ng-template let-item pTemplate=\"item\">\n      <div>{{ item.nameKey | translate }}</div>\n    </ng-template>\n  </p-pickList>\n\n  <div class=\"pt-4\">\n    <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n    <div class=\"flex gap-6 px-3\">\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</p>\n        <p-selectButton\n          [options]=\"frozenOptions\"\n          [(ngModel)]=\"frozenActionColumnModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"frozenActionColumn\"\n          name=\"frozen-action-column-select-button\"\n        >\n          <ng-template let-option pTemplate>\n            <label id=\"{{option.label}}\">{{option.label | translate}}</label>\n          </ng-template>\n        </p-selectButton>\n      </div>\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</p>\n        <p-selectButton\n          [options]=\"alignmentOptions\"\n          [(ngModel)]=\"actionColumnPositionModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"actionColumnPosition\"\n          class=\"mt-2\"\n          name=\"action-column-position-select-button\"\n        >\n          <ng-template let-option pTemplate>\n            <label id=\"{{option.label}}\">{{option.label | translate}}</label>\n          </ng-template>\n        </p-selectButton>\n      </div>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button\n      id=\"cancelButton\"\n      (onClick)=\"onCancelClick()\"\n      [label]=\"cancelButtonLabel || (cancelButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n      styleClass=\"p-button\"\n      [ariaLabel]=\"cancelButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n    <p-button\n      id=\"saveButton\"\n      (onClick)=\"onSaveClick()\"\n      [label]=\"saveButtonLabel || (saveButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n      [ariaLabel]=\"saveButtonAriaLabelKey || (saveButtonAriaLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n  </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}.p-button{height:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }], propDecorators: { columns: [{
+            args: [{ standalone: false, selector: 'ocx-custom-group-column-selector', template: "<p-button\n  id=\"customGroupColumnSelectorButton\"\n  type=\"button\"\n  (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n  [pTooltip]=\"openButtonTitle || (openButtonTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  tooltipPosition=\"top\"\n  icon=\"pi pi-cog\"\n  styleClass=\"p-button\"\n  [ariaLabel]=\"(openButtonAriaLabelKey ? (openButtonAriaLabelKey | translate) : openButtonAriaLabel) || openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  [attr.aria-controls]=\"visible ? 'customGroupColumnSelectorDialog' : null\"\n  [attr.aria-expanded]=\"visible ? true : false\"\n></p-button>\n\n<p-dialog\n  #dialog\n  id=\"customGroupColumnSelectorDialog\"\n  [(visible)]=\"visible\"\n  [style]=\"{ width: '70%' }\"\n  [modal]=\"true\"\n  [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n  <ng-template pTemplate=\"header\">\n    <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n      >{{ dialogTitle || (dialogTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' | translate)\n      }}</span\n    >\n  </ng-template>\n\n  <p-pickList\n    [source]=\"displayedColumnsModel\"\n    [target]=\"hiddenColumnsModel\"\n    [sourceHeader]=\"activeColumnsLabel || (activeColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n    [targetHeader]=\"inactiveColumnsLabel || (inactiveColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)\"\n    [dragdrop]=\"true\"\n    [responsive]=\"false\"\n    [sourceStyle]=\"{ height: '300px' }\"\n    [targetStyle]=\"{ height: '300px' }\"\n    [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n    [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n    [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n    [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n    [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n    [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n    [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n    [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\"\n  >\n    <ng-template let-item #item>\n      <div>{{ item.nameKey | translate }}</div>\n    </ng-template>\n  </p-pickList>\n\n  <div class=\"pt-4\">\n    <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n    <div class=\"flex gap-6 px-3\">\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</p>\n        <p-selectbutton\n          [options]=\"frozenOptions\"\n          [(ngModel)]=\"frozenActionColumnModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"frozenActionColumn\"\n          name=\"frozen-action-column-select-button\"\n          [allowEmpty]=\"false\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</p>\n        <p-selectbutton\n          [options]=\"alignmentOptions\"\n          [(ngModel)]=\"actionColumnPositionModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"actionColumnPosition\"\n          name=\"action-column-position-select-button\"\n          [allowEmpty]=\"false\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button\n      id=\"cancelButton\"\n      (onClick)=\"onCancelClick()\"\n      [label]=\"cancelButtonLabel || (cancelButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n      styleClass=\"p-button\"\n      [ariaLabel]=\"cancelButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n    <p-button\n      id=\"saveButton\"\n      (onClick)=\"onSaveClick()\"\n      [label]=\"saveButtonLabel || (saveButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n      [ariaLabel]=\"saveButtonAriaLabelKey || (saveButtonAriaLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n  </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}.p-button{height:100%}\n"] }]
+        }], propDecorators: { columns: [{
                 type: Input
             }], displayedColumns: [{
                 type: Input
@@ -1215,12 +1432,12 @@ class DataLayoutSelectionComponent {
             layout: event.layout,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataLayoutSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: { supportedViewLayouts: "supportedViewLayouts", layout: "layout" }, outputs: { dataViewLayoutChange: "dataViewLayoutChange", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n  <p-selectButton\n    *ngIf=\"viewingLayouts.length > 1\"\n    [options]=\"viewingLayouts\"\n    [(ngModel)]=\"selectedViewLayout\"\n    optionLabel=\"id\"\n    (onChange)=\"onDataViewLayoutChange($event.value)\"\n  >\n    <ng-template let-item pTemplate>\n      <i [class]=\"item.icon\" [pTooltip]=\"item.tooltip || (item.tooltipKey | translate)\" tooltipPosition=\"top\"></i>\n      <label style=\"display: none\" id=\"{{item.id}}\">{{item.labelKey | translate}}</label>\n    </ng-template>\n  </p-selectButton>\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$1.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DataLayoutSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: DataLayoutSelectionComponent, isStandalone: false, selector: "ocx-data-layout-selection", inputs: { supportedViewLayouts: "supportedViewLayouts", layout: "layout" }, outputs: { dataViewLayoutChange: "dataViewLayoutChange", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n  @if (viewingLayouts.length > 1) {\n    <p-selectbutton\n      [options]=\"viewingLayouts\"\n      [(ngModel)]=\"selectedViewLayout\"\n      optionLabel=\"id\"\n      (onChange)=\"onDataViewLayoutChange($event.value)\"\n      >\n      <ng-template #item let-item>\n        <i [class]=\"item.icon\" [pTooltip]=\"item.tooltip || (item.tooltipKey | translate)\" tooltipPosition=\"top\"></i>\n        <label style=\"display: none\" id=\"{{item.id}}\">{{item.labelKey | translate}}</label>\n      </ng-template>\n    </p-selectbutton>\n  }\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"], dependencies: [{ kind: "component", type: i1$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataLayoutSelectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DataLayoutSelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ocx-data-layout-selection', template: "<div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n  <p-selectButton\n    *ngIf=\"viewingLayouts.length > 1\"\n    [options]=\"viewingLayouts\"\n    [(ngModel)]=\"selectedViewLayout\"\n    optionLabel=\"id\"\n    (onChange)=\"onDataViewLayoutChange($event.value)\"\n  >\n    <ng-template let-item pTemplate>\n      <i [class]=\"item.icon\" [pTooltip]=\"item.tooltip || (item.tooltipKey | translate)\" tooltipPosition=\"top\"></i>\n      <label style=\"display: none\" id=\"{{item.id}}\">{{item.labelKey | translate}}</label>\n    </ng-template>\n  </p-selectButton>\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"] }]
+            args: [{ standalone: false, selector: 'ocx-data-layout-selection', template: "<div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n  @if (viewingLayouts.length > 1) {\n    <p-selectbutton\n      [options]=\"viewingLayouts\"\n      [(ngModel)]=\"selectedViewLayout\"\n      optionLabel=\"id\"\n      (onChange)=\"onDataViewLayoutChange($event.value)\"\n      >\n      <ng-template #item let-item>\n        <i [class]=\"item.icon\" [pTooltip]=\"item.tooltip || (item.tooltipKey | translate)\" tooltipPosition=\"top\"></i>\n        <label style=\"display: none\" id=\"{{item.id}}\">{{item.labelKey | translate}}</label>\n      </ng-template>\n    </p-selectbutton>\n  }\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"] }]
         }], propDecorators: { supportedViewLayouts: [{
                 type: Input
             }], layout: [{
@@ -1299,8 +1516,18 @@ function flattenObject(ob) {
 
 var FilterType;
 (function (FilterType) {
-    FilterType["EQUAL"] = "EQUAL";
-    FilterType["TRUTHY"] = "TRUTHY";
+    FilterType["ENDS_WITH"] = "endsWith";
+    FilterType["STARTS_WITH"] = "startsWith";
+    FilterType["CONTAINS"] = "contains";
+    FilterType["NOT_CONTAINS"] = "notContains";
+    FilterType["EQUALS"] = "equals";
+    FilterType["NOT_EQUALS"] = "notEquals";
+    FilterType["LESS_THAN"] = "lessThan";
+    FilterType["GREATER_THAN"] = "greaterThan";
+    FilterType["LESS_THAN_OR_EQUAL"] = "lessThanOrEqual";
+    FilterType["GREATER_THAN_OR_EQUAL"] = "greaterThanOrEqual";
+    FilterType["IS_EMPTY"] = "isEmpty";
+    FilterType["IS_NOT_EMPTY"] = "isNotEmpty";
 })(FilterType || (FilterType = {}));
 
 class DataSortBase {
@@ -1348,11 +1575,13 @@ class DataSortBase {
                     ObjectUtils.resolveFieldData(item, filter.columnId))?.toString();
                 switch (filter.filterType) {
                     case undefined:
-                    case FilterType.EQUAL:
+                    case FilterType.EQUALS:
                         return value === String(filter.value);
-                    case FilterType.TRUTHY: {
+                    case FilterType.IS_NOT_EMPTY: {
                         return filter.value ? !!value : !value;
                     }
+                    default:
+                        return true;
                 }
             }))),
             filters,
@@ -1434,10 +1663,12 @@ class DataSortBase {
 
 // eslint-disable-next-line @angular-eslint/use-pipe-transform-interface
 class OcxTimeAgoPipe extends TranslatePipe {
-    constructor(changeDetectorRef, ngZone, translateService) {
+    constructor() {
+        const changeDetectorRef = inject(ChangeDetectorRef);
+        const translateService = inject(TranslateService);
         super(translateService, changeDetectorRef);
+        this.ngZone = inject(NgZone);
         this.changeDetectorRef = changeDetectorRef;
-        this.ngZone = ngZone;
         this.translateService = translateService;
     }
     transform(value) {
@@ -1525,15 +1756,16 @@ class OcxTimeAgoPipe extends TranslatePipe {
             return 3600;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcxTimeAgoPipe, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: OcxTimeAgoPipe, name: "timeago" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OcxTimeAgoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: OcxTimeAgoPipe, isStandalone: false, name: "timeago" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcxTimeAgoPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OcxTimeAgoPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'timeago',
+                    standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$2.TranslateService }] });
+        }], ctorParameters: () => [] });
 
 class DataListGridComponent extends DataSortBase {
     get pageSizes() {
@@ -1548,9 +1780,10 @@ class DataListGridComponent extends DataSortBase {
     set pageSize(value) {
         this._pageSize$.next(value);
     }
-    set showAllOption(value) {
-        this._showAllOption$.next(value);
-    }
+    /**
+     * @deprecated
+     */
+    set showAllOption(value) { }
     get columns() {
         return this._columns$.getValue();
     }
@@ -1569,7 +1802,8 @@ class DataListGridComponent extends DataSortBase {
         return this._data$.getValue();
     }
     set data(value) {
-        !this._data$.getValue().length ?? this.resetPage();
+        if (this._data$.getValue().length)
+            this.resetPage();
         this._originalData = [...value];
         this._data$.next([...value]);
     }
@@ -1577,7 +1811,8 @@ class DataListGridComponent extends DataSortBase {
         return this._filters$.getValue();
     }
     set filters(value) {
-        !this._filters$.getValue().length ?? this.resetPage();
+        if (this._filters$.getValue().length)
+            this.resetPage();
         this._filters$.next(value);
     }
     get sortDirection() {
@@ -1663,19 +1898,20 @@ class DataListGridComponent extends DataSortBase {
     set parentTemplates(value) {
         this.parentTemplates$.next(value);
     }
-    constructor(locale, translateService, userService, router, injector, appStateService) {
+    constructor() {
+        const locale = inject(LOCALE_ID);
+        const translateService = inject(TranslateService);
         super(locale, translateService);
-        this.userService = userService;
-        this.router = router;
-        this.injector = injector;
-        this.appStateService = appStateService;
+        this.userService = inject(UserService);
+        this.router = inject(Router);
+        this.injector = inject(Injector);
+        this.appStateService = inject(AppStateService);
         this.subtitleLineIds = [];
         this.clientSideSorting = true;
         this.clientSideFiltering = true;
         this.sortStates = [];
         this._pageSizes$ = new BehaviorSubject([10, 25, 50]);
         this._pageSize$ = new BehaviorSubject(undefined);
-        this._showAllOption$ = new BehaviorSubject(false);
         this.fallbackImage = 'placeholder.png';
         this.layout = 'grid';
         this.paginator = true;
@@ -1705,7 +1941,6 @@ class DataListGridComponent extends DataSortBase {
         this.pageChanged = new EventEmitter();
         this.pageSizeChanged = new EventEmitter();
         this.componentStateChanged = new EventEmitter();
-        this.showMenu = false;
         this.gridMenuItems = [];
         this.observedOutputs = 0;
         this.templates$ = new BehaviorSubject(undefined);
@@ -1715,18 +1950,17 @@ class DataListGridComponent extends DataSortBase {
         this.templatesObservables = {};
         this.name = this.name || this.router.url.replace(/[^A-Za-z0-9]/, '_');
         this.fallbackImagePath$ = this.appStateService.currentMfe$.pipe(map((currentMfe) => this.getFallbackImagePath(currentMfe)));
-        this.displayedPageSizes$ = combineLatest([
-            this._pageSizes$,
-            this.translateService.get('OCX_DATA_TABLE.ALL'),
-            this._showAllOption$,
-        ]).pipe(map(([pageSizes, translation, showAllOption]) => showAllOption ? pageSizes.concat({ showAll: translation }) : pageSizes));
         this.displayedPageSize$ = combineLatest([this._pageSize$, this._pageSizes$]).pipe(map(([pageSize, pageSizes]) => pageSize ?? pageSizes.find((val) => typeof val === 'number') ?? 50));
         this.inlineListActions$ = this._additionalActions$.pipe(map((actions) => actions.filter((action) => !action.showAsOverflow)));
         this.overflowListActions$ = this._additionalActions$.pipe(map((actions) => actions.filter((action) => action.showAsOverflow)));
-        this.overflowMenuItems$ = combineLatest([this.overflowListActions$, this.currentMenuRow$]).pipe(mergeMap(([actions, row]) => this.translateService.get([...actions.map((a) => a.labelKey || '')]).pipe(map((translations) => {
-            return actions
-                .filter((a) => this.userService.hasPermission(a.permission))
-                .map((a) => ({
+        this.overflowMenuItems$ = combineLatest([this.overflowListActions$, this.currentMenuRow$]).pipe(mergeMap(([actions, row]) => this.translateService.get([...actions.map((a) => a.labelKey || '')]).pipe(mergeMap(async (translations) => {
+            const filteredActions = [];
+            for (const a of actions) {
+                if (await this.userService.hasPermission(a.permission)) {
+                    filteredActions.push(a);
+                }
+            }
+            return filteredActions.map((a) => ({
                 label: translations[a.labelKey || ''],
                 icon: a.icon,
                 styleClass: (a.classes || []).join(' '),
@@ -1745,10 +1979,6 @@ class DataListGridComponent extends DataSortBase {
     }
     ngOnInit() {
         this.displayedItems$ = combineLatest([this._data$, this._filters$, this._sortField$, this._sortDirection$]).pipe(mergeMap((params) => this.translateItems(params, this.columns, this.clientSideFiltering, this.clientSideSorting)), map((params) => this.filterItems(params, this.clientSideFiltering)), map((params) => this.sortItems(params, this.columns, this.clientSideSorting)), map(([items]) => items));
-        this.showMenu =
-            (!!this.viewPermission && this.userService.hasPermission(this.viewPermission)) ||
-                (!!this.editPermission && this.userService.hasPermission(this.editPermission)) ||
-                (!!this.deletePermission && this.userService.hasPermission(this.deletePermission));
         this.emitComponentStateChanged();
     }
     ngAfterContentInit() {
@@ -1782,8 +2012,12 @@ class DataListGridComponent extends DataSortBase {
         this.deleteItem.emit(element);
     }
     onViewRow(element) {
-        if (!!this.viewPermission && this.userService.hasPermission(this.viewPermission)) {
-            this.viewItem.emit(element);
+        if (this.viewPermission) {
+            this.userService.hasPermission(this.viewPermission).then((hasPermission) => {
+                if (hasPermission) {
+                    this.viewItem.emit(element);
+                }
+            });
         }
     }
     onEditRow(element) {
@@ -1824,50 +2058,62 @@ class DataListGridComponent extends DataSortBase {
             ...this.additionalActions.map((a) => a.labelKey || ''),
         ])
             .subscribe((translations) => {
-            let menuItems = [];
             const automationId = 'data-grid-action-button';
             const automationIdHidden = 'data-grid-action-button-hidden';
-            if (this.viewItem.observed && this.userService.hasPermission(this.viewPermission || '')) {
-                menuItems.push({
-                    label: translations[this.viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW'],
-                    icon: PrimeIcons.EYE,
-                    command: () => this.viewItem.emit(this.selectedItem),
-                    disabled: viewDisabled,
-                    visible: viewVisible,
-                    automationId: viewVisible ? automationId : automationIdHidden,
-                });
-            }
-            if (this.editItem.observed && this.userService.hasPermission(this.editPermission || '')) {
-                menuItems.push({
-                    label: translations[this.editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT'],
-                    icon: PrimeIcons.PENCIL,
-                    command: () => this.editItem.emit(this.selectedItem),
-                    disabled: editDisabled,
-                    visible: editVisible,
-                    automationId: editVisible ? automationId : automationIdHidden,
-                });
-            }
-            if (this.deleteItem.observed && this.userService.hasPermission(this.deletePermission || '')) {
-                menuItems.push({
-                    label: translations[this.deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE'],
-                    icon: PrimeIcons.TRASH,
-                    command: () => this.deleteItem.emit(this.selectedItem),
-                    disabled: deleteDisabled,
-                    visible: deleteVisible,
-                    automationId: deleteVisible ? automationId : automationIdHidden,
+            const permissionChecks = Promise.all([
+                this.userService.hasPermission(this.viewPermission),
+                this.userService.hasPermission(this.editPermission),
+                this.userService.hasPermission(this.deletePermission),
+            ]);
+            permissionChecks.then(([hasViewPermission, hasEditPermission, hasDeletePermission]) => {
+                const menuItems = [];
+                if (this.viewItem.observed && hasViewPermission) {
+                    menuItems.push({
+                        label: translations[this.viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW'],
+                        icon: PrimeIcons.EYE,
+                        command: () => this.viewItem.emit(this.selectedItem),
+                        disabled: viewDisabled,
+                        visible: viewVisible,
+                        automationId: viewVisible ? automationId : automationIdHidden,
+                    });
+                }
+                if (this.editItem.observed && hasEditPermission) {
+                    menuItems.push({
+                        label: translations[this.editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT'],
+                        icon: PrimeIcons.PENCIL,
+                        command: () => this.editItem.emit(this.selectedItem),
+                        disabled: editDisabled,
+                        visible: editVisible,
+                        automationId: editVisible ? automationId : automationIdHidden,
+                    });
+                }
+                if (this.deleteItem.observed && hasDeletePermission) {
+                    menuItems.push({
+                        label: translations[this.deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE'],
+                        icon: PrimeIcons.TRASH,
+                        command: () => this.deleteItem.emit(this.selectedItem),
+                        disabled: deleteDisabled,
+                        visible: deleteVisible,
+                        automationId: deleteVisible ? automationId : automationIdHidden,
+                    });
+                }
+                Promise.all(this.additionalActions.map((a) => this.userService.hasPermission(a.permission).then((hasPermission) => {
+                    if (!hasPermission)
+                        return null;
+                    const visible = !a.actionVisibleField || this.fieldIsTruthy(this.selectedItem, a.actionVisibleField);
+                    return {
+                        label: translations[a.labelKey || ''],
+                        icon: a.icon,
+                        styleClass: (a.classes || []).join(' '),
+                        disabled: a.disabled ||
+                            (!!a.actionEnabledField && !this.fieldIsTruthy(this.selectedItem, a.actionEnabledField)),
+                        visible,
+                        command: () => a.callback(this.selectedItem),
+                    };
+                }))).then((additionalMenuItems) => {
+                    this.gridMenuItems = menuItems.concat(additionalMenuItems.filter((item) => item !== null));
                 });
-            }
-            menuItems = menuItems.concat(this.additionalActions
-                .filter((a) => this.userService.hasPermission(a.permission))
-                .map((a) => ({
-                label: translations[a.labelKey || ''],
-                icon: a.icon,
-                styleClass: (a.classes || []).join(' '),
-                disabled: a.disabled || (!!a.actionEnabledField && !this.fieldIsTruthy(this.selectedItem, a.actionEnabledField)),
-                visible: !a.actionVisibleField || this.fieldIsTruthy(this.selectedItem, a.actionVisibleField),
-                command: () => a.callback(this.selectedItem),
-            })));
-            this.gridMenuItems = menuItems;
+            });
         });
     }
     setSelectedItem(item) {
@@ -1904,9 +2150,18 @@ class DataListGridComponent extends DataSortBase {
     fieldIsTruthy(object, key) {
         return !!this.resolveFieldData(object, key);
     }
+    // A new Observable is created with each ChangeDetection.
+    // The async pipe subscribes to it, triggering another ChangeDetection when a new value is emitted, which creates a loop.
+    // To prevent this, cache the Observable by using shareReplay to avoid recreating it with every ChangeDetection.
     hasVisibleOverflowMenuItems(item) {
-        return this.overflowListActions$.pipe(map((actions) => actions.some((a) => (!a.actionVisibleField || this.fieldIsTruthy(item, a.actionVisibleField)) &&
-            this.userService.hasPermission(a.permission))));
+        if (this.cachedOverflowMenuItemsVisibility$) {
+            return this.cachedOverflowMenuItemsVisibility$;
+        }
+        const overflowMenuItemsVisibility$ = this.overflowListActions$.pipe(mergeMap((actions) => forkJoin(actions.map((a) => !a.actionVisibleField || this.fieldIsTruthy(item, a.actionVisibleField)
+            ? from(this.userService.hasPermission(a.permission))
+            : of(false)))), map((results) => results.some((isVisible) => isVisible)));
+        this.cachedOverflowMenuItemsVisibility$ = overflowMenuItemsVisibility$.pipe(shareReplay(1));
+        return this.cachedOverflowMenuItemsVisibility$;
     }
     toggleOverflowMenu(event, menu, row) {
         this.currentMenuRow$.next(row);
@@ -1971,16 +2226,13 @@ class DataListGridComponent extends DataSortBase {
         }
         return this.templatesObservables[column.id];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataListGridComponent, deps: [{ token: LOCALE_ID }, { token: i1$2.TranslateService }, { token: i3.UserService }, { token: i1$1.Router }, { token: i0.Injector }, { token: i3.AppStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DataListGridComponent, selector: "ocx-data-list-grid", inputs: { titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", emptyResultsMessage: "emptyResultsMessage", fallbackImage: "fallbackImage", layout: "layout", viewPermission: "viewPermission", editPermission: "editPermission", deletePermission: "deletePermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", viewMenuItemKey: "viewMenuItemKey", editMenuItemKey: "editMenuItemKey", deleteMenuItemKey: "deleteMenuItemKey", paginator: "paginator", page: "page", columns: "columns", name: "name", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", data: "data", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", listItemTemplate: "listItemTemplate", gridItemTemplate: "gridItemTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", customListValueTemplate: "customListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { viewItem: "viewItem", editItem: "editItem", deleteItem: "deleteItem", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "customListValueChildTemplate", first: true, predicate: ["customListValue"], descendants: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n  <p-dataView\n    *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\n    [value]=\"(displayedItems$ | async) ?? []\"\n    [paginator]=\"paginator\"\n    [first]=\"page * displayedPageSize\"\n    (onPage)=\"onPageChange($event)\"\n    [rows]=\"displayedPageSize\"\n    [layout]=\"layout\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n    [rowsPerPageOptions]=\"(displayedPageSizes$ | async) ?? []\"\n    id=\"dataListGrid_{{name}}\"\n    paginatorDropdownAppendTo=\"body\"\n  >\n    <ng-template #gridItem let-rows pTemplate=\"gridItem\">\n      <div class=\"p-grid p-nogutter grid grid-nogutter\">\n        <ng-template ngFor let-item [ngForOf]=\"rows\">\n          <ng-container\n            [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n            [ngTemplateOutletContext]=\"{$implicit:item}\"\n          ></ng-container>\n        </ng-template>\n      </div>\n    </ng-template>\n\n    <ng-template #listItem let-rows pTemplate=\"listItem\">\n      <div class=\"p-grid p-nogutter grid grid-nogutter\">\n        <ng-template ngFor let-item [ngForOf]=\"rows\">\n          @defer (on viewport; on idle){\n          <ng-container\n            [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n            [ngTemplateOutletContext]=\"{\n              item:item,\n              columnTemplates: columnTemplates\n              }\"\n          ></ng-container>\n          } @placeholder {\n          <div style=\"width: 100%; height: 80px\"></div>\n          }\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"empty\">\n      <span>{{ emptyResultsMessage || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n    </ng-template>\n  </p-dataView>\n</ng-container>\n\n<ng-template #defaultGridItem let-item>\n  <div class=\"col-12 lg:col-6 xl:col-4 flex\">\n    <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n      <div class=\"flex justify-content-center mb-3\">\n        <img\n          class=\"image\"\n          src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n          (error)=\"imgError(item)\"\n          alt=\"{{resolveFieldData(item, titleLineId)|| ''}}\"\n        />\n      </div>\n      <div class=\"flex flex-row justify-content-between align-items-center\">\n        <div class=\"data-grid-items flex-row\">\n          <div class=\"item-name font-medium mr-3 text-2xl\">\n            <a [routerLink]=\"\" (click)=\"onViewRow\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n          </div>\n          <ng-container\n            [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n            [ngTemplateOutletContext]=\"{$implicit:item}\"\n          ></ng-container>\n        </div>\n        <div>\n          <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            (click)=\"setSelectedItem(item); updateGridMenuItems(true); menu.toggle($event)\"\n            icon=\"pi pi-ellipsis-v\"\n            [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n            class=\"more-actions-menu-button menu-btn\"\n            [attr.name]=\"'data-grid-item-menu-button'\"\n            [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n            tooltipPosition=\"top\"\n          ></button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n  <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine edit-time text-xl my-3\">\n    {{ resolveFieldData(item, subtitleLineId) }}\n  </div>\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-columnTemplates=\"columnTemplates\">\n  <div class=\"col-12\" *ngIf=\"columnTemplates\">\n    <div class=\"data-list-items p-3\">\n      <div class=\"item-name-row flex flex-row justify-content-between\">\n        <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n          <span *ngIf=\"titleLineId\">{{ resolveFieldData(item, titleLineId) || '' }}</span>\n        </div>\n        <div class=\"flex flex-row\">\n          <ng-container\n            *ngIf=\"viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))\"\n          >\n            <button\n              id=\"{{resolveFieldData(item, 'id')}}-viewButton\"\n              type=\"button\"\n              icon=\"pi pi-eye\"\n              pButton\n              class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n              [pTooltip]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n              tooltipPosition=\"top\"\n              [attr.aria-label]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n              (click)=\"onViewRow(item)\"\n              *ocxIfPermission=\"viewPermission\"\n              [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)\"\n              [attr.name]=\"'data-list-action-button'\"\n            ></button>\n          </ng-container>\n          <ng-container\n            *ngIf=\"editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))\"\n          >\n            <button\n              id=\"{{resolveFieldData(item, 'id')}}-editButton\"\n              type=\"button\"\n              class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n              icon=\"pi pi-pencil\"\n              pButton\n              [pTooltip]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n              tooltipPosition=\"top\"\n              [attr.aria-label]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n              (click)=\"onEditRow(item)\"\n              *ocxIfPermission=\"editPermission\"\n              [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)\"\n              [attr.name]=\"'data-list-action-button'\"\n            ></button>\n          </ng-container>\n          <ng-container\n            *ngIf=\"deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))\"\n          >\n            <button\n              id=\"{{resolveFieldData(item, 'id')}}-deleteButton\"\n              type=\"button\"\n              icon=\"pi pi-trash\"\n              class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n              pButton\n              [pTooltip]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n              tooltipPosition=\"top\"\n              [attr.aria-label]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n              (click)=\"onDeleteRow(item)\"\n              *ocxIfPermission=\"deletePermission\"\n              [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)\"\n              [attr.name]=\"'data-list-action-button'\"\n            ></button>\n          </ng-container>\n          <ng-container *ngFor=\"let action of inlineListActions$ | async\">\n            <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(item, action.actionVisibleField))\">\n              <button\n                id=\"{{resolveFieldData(item, '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(item)\"\n                [pTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n                tooltipPosition=\"top\"\n                [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n                [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n                [attr.name]=\"'data-list-action-button'\"\n              ></button>\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"hasVisibleOverflowMenuItems(item) | async\">\n            <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n            <button\n              pButton\n              class=\"p-button-rounded p-button-text\"\n              [icon]=\"'pi pi-ellipsis-v'\"\n              (click)=\"toggleOverflowMenu($event, menu, item)\"\n              [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n              [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n              tooltipPosition=\"top\"\n            ></button>\n          </ng-container>\n        </div>\n      </div>\n      <div class=\"text-base font-light my-1\">\n        <ng-container\n          [ngTemplateOutlet]=\"_listItemSubtitleLines ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n          [ngTemplateOutletContext]=\"{$implicit:item}\"\n        ></ng-container>\n      </div>\n      <div class=\"flex flex-wrap\">\n        <div *ngFor=\"let col of getFilteredColumns()\" class=\"w-12rem my-2 mr-2\">\n          <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n            {{ col.nameKey | translate }}\n          </div>\n          <div\n            [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n            tooltipPosition=\"top\"\n          >\n            @defer(on viewport;){\n            <ng-container\n              [ngTemplateOutlet]=\"_listValue ? _listValue: defaultListValue\"\n              [ngTemplateOutletContext]=\"{\n                rowObject: item,\n                column: col,\n                columnTemplates: columnTemplates\n                }\"\n            >\n            </ng-container>\n            } @placeholder {\n            <p-skeleton width=\"5rem\" />\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n  <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine text-xl my-3\">\n    {{ resolveFieldData(item, subtitleLineId) }}\n  </div>\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n  <ng-container\n    *ngIf=\"columnTemplates[column.id]\"\n    [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n    [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n  >\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomListValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{color:var(--primary-text-color);background-color:var(--primary-color);border:var(--button-border);border-radius:var(--border-radius);padding:var(--button-padding);cursor:pointer;min-width:4rem}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i8$1.DataView, selector: "p-dataView", inputs: ["paginator", "rows", "totalRecords", "pageLinks", "rowsPerPageOptions", "paginatorPosition", "paginatorStyleClass", "alwaysShowPaginator", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "lazy", "lazyLoadOnInit", "emptyMessage", "style", "styleClass", "gridStyleClass", "trackBy", "filterBy", "filterLocale", "loading", "loadingIcon", "first", "sortField", "sortOrder", "value", "layout"], outputs: ["onLazyLoad", "onPage", "onSort", "onChangeLayout"] }, { kind: "component", type: i8.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "directive", type: TooltipOnOverflowDirective, selector: "[ocxTooltipOnOverflow]", inputs: ["ocxTooltipOnOverflow"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i4.NgTemplateOutlet], () => [i4.NgTemplateOutlet]] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DataListGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: DataListGridComponent, isStandalone: false, selector: "ocx-data-list-grid", inputs: { titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", emptyResultsMessage: "emptyResultsMessage", fallbackImage: "fallbackImage", layout: "layout", viewPermission: "viewPermission", editPermission: "editPermission", deletePermission: "deletePermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", viewMenuItemKey: "viewMenuItemKey", editMenuItemKey: "editMenuItemKey", deleteMenuItemKey: "deleteMenuItemKey", paginator: "paginator", page: "page", columns: "columns", name: "name", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", data: "data", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", listItemTemplate: "listItemTemplate", gridItemTemplate: "gridItemTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", customListValueTemplate: "customListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { viewItem: "viewItem", editItem: "editItem", deleteItem: "deleteItem", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "customListValueChildTemplate", first: true, predicate: ["customListValue"], descendants: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if ((displayedPageSize$ | async); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-dataView\n  [value]=\"(displayedItems$ | async) ?? []\"\n  [paginator]=\"paginator\"\n  [first]=\"page * displayedPageSize\"\n  (onPage)=\"onPageChange($event)\"\n  [rows]=\"displayedPageSize\"\n  [layout]=\"layout\"\n  [showCurrentPageReport]=\"true\"\n  currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n  [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n  id=\"dataListGrid_{{name}}\"\n  paginatorDropdownAppendTo=\"body\"\n>\n  <ng-template #grid let-rows>\n    <div class=\"grid grid-cols-12 gap-4\">\n      @for (item of rows; track item) {\n      <ng-container\n        [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n        [ngTemplateOutletContext]=\"{$implicit:item}\"\n      ></ng-container>\n      }\n    </div>\n  </ng-template>\n  <ng-template #list let-rows>\n    <div class=\"p-grid p-nogutter grid grid-nogutter\">\n      @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n      <ng-container\n        [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n        [ngTemplateOutletContext]=\"{\n              item:item,\n              first:first,\n              columnTemplates: columnTemplates\n              }\"\n      ></ng-container>\n      } @placeholder {\n      <div style=\"width: 100%; height: 80px\"></div>\n      } }\n    </div>\n  </ng-template>\n  <ng-template pTemplate=\"empty\">\n    <span>{{ emptyResultsMessage || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n  </ng-template>\n</p-dataView>\n} }\n\n<ng-template #defaultGridItem let-item>\n  <div class=\"col-12 lg:col-6 xl:col-4 p-1 flex justify-content-center grid-border-divider\">\n    <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n      <div class=\"flex justify-content-center mb-3\">\n        <img\n          class=\"image\"\n          src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n          (error)=\"imgError(item)\"\n          alt=\"{{resolveFieldData(item, titleLineId)|| ''}}\"\n        />\n      </div>\n      <div class=\"flex flex-row justify-content-between align-items-center\">\n        <div class=\"data-grid-items flex-row\">\n          <div class=\"item-name font-medium mr-3 text-2xl\">\n            <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n          </div>\n          <ng-container\n            [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n            [ngTemplateOutletContext]=\"{$implicit:item}\"\n          ></ng-container>\n        </div>\n        <div>\n          <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            (click)=\"setSelectedItem(item); updateGridMenuItems(true); menu.toggle($event)\"\n            icon=\"pi pi-ellipsis-v\"\n            [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n            class=\"more-actions-menu-button menu-btn\"\n            [attr.name]=\"'data-grid-item-menu-button'\"\n            [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n            tooltipPosition=\"top\"\n          ></button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n  @for (subtitleLineId of subtitleLineIds; track subtitleLineId) {\n  <div class=\"subtitleLine edit-time text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n  }\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-first=\"first\" let-columnTemplates=\"columnTemplates\">\n  @if (columnTemplates) {\n  <div class=\"col-12\">\n    <div class=\"data-list-items p-1\" [ngClass]=\"{ 'list-border-divider': !first }\">\n      <div class=\"item-name-row flex flex-row justify-content-between\">\n        <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n          @if (titleLineId) {\n          <span>{{ resolveFieldData(item, titleLineId) || '' }}</span>\n          }\n        </div>\n        <div class=\"flex flex-row\">\n          @if (viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-viewButton\"\n            type=\"button\"\n            icon=\"pi pi-eye\"\n            pButton\n            class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n            [pTooltip]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: !!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)\n            }\"\n            [attr.aria-label]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n            (click)=\"onViewRow(item)\"\n            *ocxIfPermission=\"viewPermission\"\n            [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } @if (editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-editButton\"\n            type=\"button\"\n            class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n            icon=\"pi pi-pencil\"\n            pButton\n            [pTooltip]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: !!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)\n            }\"\n            [attr.aria-label]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n            (click)=\"onEditRow(item)\"\n            *ocxIfPermission=\"editPermission\"\n            [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } @if (deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-deleteButton\"\n            type=\"button\"\n            icon=\"pi pi-trash\"\n            class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n            pButton\n            [pTooltip]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: !!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)\n            }\"\n            [attr.aria-label]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n            (click)=\"onDeleteRow(item)\"\n            *ocxIfPermission=\"deletePermission\"\n            [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } @for (action of inlineListActions$ | async; track action) { @if ((!action.actionVisibleField ||\n          fieldIsTruthy(item, action.actionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, '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(item)\"\n            [pTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\n            }\"\n            [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n            [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } } @if (hasVisibleOverflowMenuItems(item) | async) {\n          <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            class=\"p-button-rounded p-button-text\"\n            [icon]=\"'pi pi-ellipsis-v'\"\n            (click)=\"toggleOverflowMenu($event, menu, item)\"\n            [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n            [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n            tooltipPosition=\"top\"\n          ></button>\n          }\n        </div>\n      </div>\n      <div class=\"text-base font-light my-1\">\n        <ng-container\n          [ngTemplateOutlet]=\"_listItemSubtitleLines ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n          [ngTemplateOutletContext]=\"{$implicit:item}\"\n        ></ng-container>\n      </div>\n      <div class=\"flex flex-wrap\">\n        @for (col of getFilteredColumns(); track col) {\n        <div class=\"w-12rem my-2 mr-2\">\n          <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n            {{ col.nameKey | translate }}\n          </div>\n          <div\n            [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n            tooltipPosition=\"top\"\n          >\n            @defer(on viewport;){\n            <ng-container\n              [ngTemplateOutlet]=\"_listValue ? _listValue: defaultListValue\"\n              [ngTemplateOutletContext]=\"{\n                rowObject: item,\n                column: col,\n                columnTemplates: columnTemplates\n                }\"\n            >\n            </ng-container>\n            } @placeholder {\n            <p-skeleton width=\"5rem\" />\n            }\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n  @for (subtitleLineId of subtitleLineIds; track subtitleLineId) {\n  <div class=\"subtitleLine text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n  }\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n  @if (columnTemplates[column.id]) {\n  <ng-container\n    [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n    [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n  >\n  </ng-container>\n  }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomListValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{cursor:pointer;min-width:4rem}.list-border-divider{border-top:.0625rem;border-top-style:solid;border-color:var(--p-surface-200)}.grid-border-divider{border:.0625rem;border-style:solid;border-color:var(--p-surface-200)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i4$3.DataView, selector: "p-dataView, p-dataview, p-data-view", inputs: ["paginator", "rows", "totalRecords", "pageLinks", "rowsPerPageOptions", "paginatorPosition", "paginatorStyleClass", "alwaysShowPaginator", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "lazy", "lazyLoadOnInit", "emptyMessage", "style", "styleClass", "gridStyleClass", "trackBy", "filterBy", "filterLocale", "loading", "loadingIcon", "first", "sortField", "sortOrder", "value", "layout"], outputs: ["onLazyLoad", "onPage", "onSort", "onChangeLayout"] }, { kind: "component", type: i4.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: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.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: i8$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "directive", type: TooltipOnOverflowDirective, selector: "[ocxTooltipOnOverflow]", inputs: ["ocxTooltipOnOverflow"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet], () => [i1.NgTemplateOutlet]] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataListGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DataListGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ocx-data-list-grid', template: "<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n  <p-dataView\n    *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\n    [value]=\"(displayedItems$ | async) ?? []\"\n    [paginator]=\"paginator\"\n    [first]=\"page * displayedPageSize\"\n    (onPage)=\"onPageChange($event)\"\n    [rows]=\"displayedPageSize\"\n    [layout]=\"layout\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n    [rowsPerPageOptions]=\"(displayedPageSizes$ | async) ?? []\"\n    id=\"dataListGrid_{{name}}\"\n    paginatorDropdownAppendTo=\"body\"\n  >\n    <ng-template #gridItem let-rows pTemplate=\"gridItem\">\n      <div class=\"p-grid p-nogutter grid grid-nogutter\">\n        <ng-template ngFor let-item [ngForOf]=\"rows\">\n          <ng-container\n            [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n            [ngTemplateOutletContext]=\"{$implicit:item}\"\n          ></ng-container>\n        </ng-template>\n      </div>\n    </ng-template>\n\n    <ng-template #listItem let-rows pTemplate=\"listItem\">\n      <div class=\"p-grid p-nogutter grid grid-nogutter\">\n        <ng-template ngFor let-item [ngForOf]=\"rows\">\n          @defer (on viewport; on idle){\n          <ng-container\n            [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n            [ngTemplateOutletContext]=\"{\n              item:item,\n              columnTemplates: columnTemplates\n              }\"\n          ></ng-container>\n          } @placeholder {\n          <div style=\"width: 100%; height: 80px\"></div>\n          }\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"empty\">\n      <span>{{ emptyResultsMessage || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n    </ng-template>\n  </p-dataView>\n</ng-container>\n\n<ng-template #defaultGridItem let-item>\n  <div class=\"col-12 lg:col-6 xl:col-4 flex\">\n    <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n      <div class=\"flex justify-content-center mb-3\">\n        <img\n          class=\"image\"\n          src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n          (error)=\"imgError(item)\"\n          alt=\"{{resolveFieldData(item, titleLineId)|| ''}}\"\n        />\n      </div>\n      <div class=\"flex flex-row justify-content-between align-items-center\">\n        <div class=\"data-grid-items flex-row\">\n          <div class=\"item-name font-medium mr-3 text-2xl\">\n            <a [routerLink]=\"\" (click)=\"onViewRow\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n          </div>\n          <ng-container\n            [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n            [ngTemplateOutletContext]=\"{$implicit:item}\"\n          ></ng-container>\n        </div>\n        <div>\n          <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            (click)=\"setSelectedItem(item); updateGridMenuItems(true); menu.toggle($event)\"\n            icon=\"pi pi-ellipsis-v\"\n            [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n            class=\"more-actions-menu-button menu-btn\"\n            [attr.name]=\"'data-grid-item-menu-button'\"\n            [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n            tooltipPosition=\"top\"\n          ></button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n  <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine edit-time text-xl my-3\">\n    {{ resolveFieldData(item, subtitleLineId) }}\n  </div>\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-columnTemplates=\"columnTemplates\">\n  <div class=\"col-12\" *ngIf=\"columnTemplates\">\n    <div class=\"data-list-items p-3\">\n      <div class=\"item-name-row flex flex-row justify-content-between\">\n        <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n          <span *ngIf=\"titleLineId\">{{ resolveFieldData(item, titleLineId) || '' }}</span>\n        </div>\n        <div class=\"flex flex-row\">\n          <ng-container\n            *ngIf=\"viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))\"\n          >\n            <button\n              id=\"{{resolveFieldData(item, 'id')}}-viewButton\"\n              type=\"button\"\n              icon=\"pi pi-eye\"\n              pButton\n              class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n              [pTooltip]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n              tooltipPosition=\"top\"\n              [attr.aria-label]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n              (click)=\"onViewRow(item)\"\n              *ocxIfPermission=\"viewPermission\"\n              [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)\"\n              [attr.name]=\"'data-list-action-button'\"\n            ></button>\n          </ng-container>\n          <ng-container\n            *ngIf=\"editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))\"\n          >\n            <button\n              id=\"{{resolveFieldData(item, 'id')}}-editButton\"\n              type=\"button\"\n              class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n              icon=\"pi pi-pencil\"\n              pButton\n              [pTooltip]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n              tooltipPosition=\"top\"\n              [attr.aria-label]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n              (click)=\"onEditRow(item)\"\n              *ocxIfPermission=\"editPermission\"\n              [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)\"\n              [attr.name]=\"'data-list-action-button'\"\n            ></button>\n          </ng-container>\n          <ng-container\n            *ngIf=\"deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))\"\n          >\n            <button\n              id=\"{{resolveFieldData(item, 'id')}}-deleteButton\"\n              type=\"button\"\n              icon=\"pi pi-trash\"\n              class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n              pButton\n              [pTooltip]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n              tooltipPosition=\"top\"\n              [attr.aria-label]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n              (click)=\"onDeleteRow(item)\"\n              *ocxIfPermission=\"deletePermission\"\n              [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)\"\n              [attr.name]=\"'data-list-action-button'\"\n            ></button>\n          </ng-container>\n          <ng-container *ngFor=\"let action of inlineListActions$ | async\">\n            <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(item, action.actionVisibleField))\">\n              <button\n                id=\"{{resolveFieldData(item, '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(item)\"\n                [pTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n                tooltipPosition=\"top\"\n                [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n                [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n                [attr.name]=\"'data-list-action-button'\"\n              ></button>\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"hasVisibleOverflowMenuItems(item) | async\">\n            <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n            <button\n              pButton\n              class=\"p-button-rounded p-button-text\"\n              [icon]=\"'pi pi-ellipsis-v'\"\n              (click)=\"toggleOverflowMenu($event, menu, item)\"\n              [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n              [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n              tooltipPosition=\"top\"\n            ></button>\n          </ng-container>\n        </div>\n      </div>\n      <div class=\"text-base font-light my-1\">\n        <ng-container\n          [ngTemplateOutlet]=\"_listItemSubtitleLines ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n          [ngTemplateOutletContext]=\"{$implicit:item}\"\n        ></ng-container>\n      </div>\n      <div class=\"flex flex-wrap\">\n        <div *ngFor=\"let col of getFilteredColumns()\" class=\"w-12rem my-2 mr-2\">\n          <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n            {{ col.nameKey | translate }}\n          </div>\n          <div\n            [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n            tooltipPosition=\"top\"\n          >\n            @defer(on viewport;){\n            <ng-container\n              [ngTemplateOutlet]=\"_listValue ? _listValue: defaultListValue\"\n              [ngTemplateOutletContext]=\"{\n                rowObject: item,\n                column: col,\n                columnTemplates: columnTemplates\n                }\"\n            >\n            </ng-container>\n            } @placeholder {\n            <p-skeleton width=\"5rem\" />\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n  <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine text-xl my-3\">\n    {{ resolveFieldData(item, subtitleLineId) }}\n  </div>\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n  <ng-container\n    *ngIf=\"columnTemplates[column.id]\"\n    [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n    [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n  >\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomListValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{color:var(--primary-text-color);background-color:var(--primary-color);border:var(--button-border);border-radius:var(--border-radius);padding:var(--button-padding);cursor:pointer;min-width:4rem}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }, { type: i1$2.TranslateService }, { type: i3.UserService }, { type: i1$1.Router }, { type: i0.Injector }, { type: i3.AppStateService }], propDecorators: { titleLineId: [{
+            args: [{ standalone: false, selector: 'ocx-data-list-grid', template: "@if ((displayedPageSize$ | async); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-dataView\n  [value]=\"(displayedItems$ | async) ?? []\"\n  [paginator]=\"paginator\"\n  [first]=\"page * displayedPageSize\"\n  (onPage)=\"onPageChange($event)\"\n  [rows]=\"displayedPageSize\"\n  [layout]=\"layout\"\n  [showCurrentPageReport]=\"true\"\n  currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n  [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n  id=\"dataListGrid_{{name}}\"\n  paginatorDropdownAppendTo=\"body\"\n>\n  <ng-template #grid let-rows>\n    <div class=\"grid grid-cols-12 gap-4\">\n      @for (item of rows; track item) {\n      <ng-container\n        [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n        [ngTemplateOutletContext]=\"{$implicit:item}\"\n      ></ng-container>\n      }\n    </div>\n  </ng-template>\n  <ng-template #list let-rows>\n    <div class=\"p-grid p-nogutter grid grid-nogutter\">\n      @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n      <ng-container\n        [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n        [ngTemplateOutletContext]=\"{\n              item:item,\n              first:first,\n              columnTemplates: columnTemplates\n              }\"\n      ></ng-container>\n      } @placeholder {\n      <div style=\"width: 100%; height: 80px\"></div>\n      } }\n    </div>\n  </ng-template>\n  <ng-template pTemplate=\"empty\">\n    <span>{{ emptyResultsMessage || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n  </ng-template>\n</p-dataView>\n} }\n\n<ng-template #defaultGridItem let-item>\n  <div class=\"col-12 lg:col-6 xl:col-4 p-1 flex justify-content-center grid-border-divider\">\n    <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n      <div class=\"flex justify-content-center mb-3\">\n        <img\n          class=\"image\"\n          src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n          (error)=\"imgError(item)\"\n          alt=\"{{resolveFieldData(item, titleLineId)|| ''}}\"\n        />\n      </div>\n      <div class=\"flex flex-row justify-content-between align-items-center\">\n        <div class=\"data-grid-items flex-row\">\n          <div class=\"item-name font-medium mr-3 text-2xl\">\n            <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n          </div>\n          <ng-container\n            [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n            [ngTemplateOutletContext]=\"{$implicit:item}\"\n          ></ng-container>\n        </div>\n        <div>\n          <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            (click)=\"setSelectedItem(item); updateGridMenuItems(true); menu.toggle($event)\"\n            icon=\"pi pi-ellipsis-v\"\n            [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n            class=\"more-actions-menu-button menu-btn\"\n            [attr.name]=\"'data-grid-item-menu-button'\"\n            [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n            tooltipPosition=\"top\"\n          ></button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n  @for (subtitleLineId of subtitleLineIds; track subtitleLineId) {\n  <div class=\"subtitleLine edit-time text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n  }\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-first=\"first\" let-columnTemplates=\"columnTemplates\">\n  @if (columnTemplates) {\n  <div class=\"col-12\">\n    <div class=\"data-list-items p-1\" [ngClass]=\"{ 'list-border-divider': !first }\">\n      <div class=\"item-name-row flex flex-row justify-content-between\">\n        <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n          @if (titleLineId) {\n          <span>{{ resolveFieldData(item, titleLineId) || '' }}</span>\n          }\n        </div>\n        <div class=\"flex flex-row\">\n          @if (viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-viewButton\"\n            type=\"button\"\n            icon=\"pi pi-eye\"\n            pButton\n            class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n            [pTooltip]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: !!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)\n            }\"\n            [attr.aria-label]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n            (click)=\"onViewRow(item)\"\n            *ocxIfPermission=\"viewPermission\"\n            [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } @if (editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-editButton\"\n            type=\"button\"\n            class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n            icon=\"pi pi-pencil\"\n            pButton\n            [pTooltip]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: !!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)\n            }\"\n            [attr.aria-label]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n            (click)=\"onEditRow(item)\"\n            *ocxIfPermission=\"editPermission\"\n            [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } @if (deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-deleteButton\"\n            type=\"button\"\n            icon=\"pi pi-trash\"\n            class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n            pButton\n            [pTooltip]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: !!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)\n            }\"\n            [attr.aria-label]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n            (click)=\"onDeleteRow(item)\"\n            *ocxIfPermission=\"deletePermission\"\n            [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } @for (action of inlineListActions$ | async; track action) { @if ((!action.actionVisibleField ||\n          fieldIsTruthy(item, action.actionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, '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(item)\"\n            [pTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\n            }\"\n            [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n            [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } } @if (hasVisibleOverflowMenuItems(item) | async) {\n          <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            class=\"p-button-rounded p-button-text\"\n            [icon]=\"'pi pi-ellipsis-v'\"\n            (click)=\"toggleOverflowMenu($event, menu, item)\"\n            [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n            [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n            tooltipPosition=\"top\"\n          ></button>\n          }\n        </div>\n      </div>\n      <div class=\"text-base font-light my-1\">\n        <ng-container\n          [ngTemplateOutlet]=\"_listItemSubtitleLines ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n          [ngTemplateOutletContext]=\"{$implicit:item}\"\n        ></ng-container>\n      </div>\n      <div class=\"flex flex-wrap\">\n        @for (col of getFilteredColumns(); track col) {\n        <div class=\"w-12rem my-2 mr-2\">\n          <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n            {{ col.nameKey | translate }}\n          </div>\n          <div\n            [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n            tooltipPosition=\"top\"\n          >\n            @defer(on viewport;){\n            <ng-container\n              [ngTemplateOutlet]=\"_listValue ? _listValue: defaultListValue\"\n              [ngTemplateOutletContext]=\"{\n                rowObject: item,\n                column: col,\n                columnTemplates: columnTemplates\n                }\"\n            >\n            </ng-container>\n            } @placeholder {\n            <p-skeleton width=\"5rem\" />\n            }\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n  @for (subtitleLineId of subtitleLineIds; track subtitleLineId) {\n  <div class=\"subtitleLine text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n  }\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n  @if (columnTemplates[column.id]) {\n  <ng-container\n    [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n    [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n  >\n  </ng-container>\n  }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomListValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{cursor:pointer;min-width:4rem}.list-border-divider{border-top:.0625rem;border-top-style:solid;border-color:var(--p-surface-200)}.grid-border-divider{border:.0625rem;border-style:solid;border-color:var(--p-surface-200)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { titleLineId: [{
                 type: Input
             }], subtitleLineIds: [{
                 type: Input
@@ -2201,12 +2453,12 @@ class DataListGridSortingComponent {
                 return 'OCX_LIST_GRID_SORT.TOGGLE_BUTTON.DEFAULT_TOOLTIP';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataListGridSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: { columns: "columns", sortStates: "sortStates", sortDirection: "sortDirection", sortField: "sortField" }, outputs: { sortChange: "sortChange", sortDirectionChange: "sortDirectionChange", componentStateChanged: "componentStateChanged", columnsChange: "columnsChange" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n  <p-dropdown\n    id=\"dataListGridSortingDropdown\"\n    [(ngModel)]=\"selectedSortingOption\"\n    class=\"sort-dropdown\"\n    [options]=\"dropdownOptions\"\n    [placeholder]=\"('OCX_LIST_GRID_SORT.DROPDOWN.PLACEHOLDER' | translate)\"\n    (onChange)=\"selectSorting($event)\"\n    [ariaLabel]=\"('OCX_LIST_GRID_SORT.DROPDOWN.ARIA_LABEL' | translate)\"\n  >\n    <ng-template let-item pTemplate=\"item\"> {{ item?.columnName ? (item.columnName | translate) : ''}} </ng-template>\n    <ng-template let-item pTemplate=\"selectedItem\">\n      {{ item?.columnName ? (item.columnName | translate) : ''}}\n    </ng-template></p-dropdown\n  >\n  <p-button\n    id=\"dataListGridSortingButton\"\n    type=\"button\"\n    icon=\"pi {{sortIcon()}}\"\n    styleClass=\"p-button-outlined\"\n    (onClick)=\"sortDirectionChanged()\"\n    [pTooltip]=\"(sortIconTitle() | translate)\"\n    tooltipPosition=\"top\"\n    [ariaLabel]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{direction: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n  ></p-button>\n</div>\n", styles: [".pi{border-radius:var(--border-radius);border-width:thin;background:none;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$2.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: i7.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: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DataListGridSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: DataListGridSortingComponent, isStandalone: false, selector: "ocx-data-list-grid-sorting", inputs: { columns: "columns", sortStates: "sortStates", sortDirection: "sortDirection", sortField: "sortField" }, outputs: { sortChange: "sortChange", sortDirectionChange: "sortDirectionChange", componentStateChanged: "componentStateChanged", columnsChange: "columnsChange" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n  <p-floatLabel variant=\"on\">\n    <p-select\n      id=\"dataListGridSortingDropdown\"\n      inputId=\"dataListGridSortingDropdownInput\"\n      [(ngModel)]=\"selectedSortingOption\"\n      [options]=\"dropdownOptions\"\n      (onChange)=\"selectSorting($event)\"\n      [ariaLabel]=\"('OCX_LIST_GRID_SORT.DROPDOWN.ARIA_LABEL' | translate)\"\n    >\n      <ng-template let-item #item> {{ item?.columnName ? (item.columnName | translate) : ''}} </ng-template>\n      <ng-template let-item #selectedItem>\n        {{ item?.columnName ? (item.columnName | translate) : ''}}\n      </ng-template></p-select\n    >\n    <label for=\"dataListGridSortingDropdownInput\">{{ (\"OCX_LIST_GRID_SORT.DROPDOWN.LABEL\" | translate) }}</label>\n  </p-floatLabel>\n  <p-button\n    id=\"dataListGridSortingButton\"\n    type=\"button\"\n    icon=\"pi {{sortIcon()}}\"\n    styleClass=\"p-button-outlined\"\n    (onClick)=\"sortDirectionChanged()\"\n    [pTooltip]=\"(sortIconTitle() | translate)\"\n    tooltipPosition=\"top\"\n    [ariaLabel]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{direction: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n  ></p-button>\n</div>\n", styles: [".pi{border-radius:var(--border-radius);border-width:thin;background:none;cursor:pointer}:host ::ng-deep .p-select{min-width:12rem}\n"], dependencies: [{ kind: "component", type: i1$1.Select, selector: "p-select", 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", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataListGridSortingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DataListGridSortingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ocx-data-list-grid-sorting', template: "<div class=\"flex align-items-center gap-2\">\n  <p-dropdown\n    id=\"dataListGridSortingDropdown\"\n    [(ngModel)]=\"selectedSortingOption\"\n    class=\"sort-dropdown\"\n    [options]=\"dropdownOptions\"\n    [placeholder]=\"('OCX_LIST_GRID_SORT.DROPDOWN.PLACEHOLDER' | translate)\"\n    (onChange)=\"selectSorting($event)\"\n    [ariaLabel]=\"('OCX_LIST_GRID_SORT.DROPDOWN.ARIA_LABEL' | translate)\"\n  >\n    <ng-template let-item pTemplate=\"item\"> {{ item?.columnName ? (item.columnName | translate) : ''}} </ng-template>\n    <ng-template let-item pTemplate=\"selectedItem\">\n      {{ item?.columnName ? (item.columnName | translate) : ''}}\n    </ng-template></p-dropdown\n  >\n  <p-button\n    id=\"dataListGridSortingButton\"\n    type=\"button\"\n    icon=\"pi {{sortIcon()}}\"\n    styleClass=\"p-button-outlined\"\n    (onClick)=\"sortDirectionChanged()\"\n    [pTooltip]=\"(sortIconTitle() | translate)\"\n    tooltipPosition=\"top\"\n    [ariaLabel]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{direction: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n  ></p-button>\n</div>\n", styles: [".pi{border-radius:var(--border-radius);border-width:thin;background:none;cursor:pointer}\n"] }]
+            args: [{ standalone: false, selector: 'ocx-data-list-grid-sorting', template: "<div class=\"flex align-items-center gap-2\">\n  <p-floatLabel variant=\"on\">\n    <p-select\n      id=\"dataListGridSortingDropdown\"\n      inputId=\"dataListGridSortingDropdownInput\"\n      [(ngModel)]=\"selectedSortingOption\"\n      [options]=\"dropdownOptions\"\n      (onChange)=\"selectSorting($event)\"\n      [ariaLabel]=\"('OCX_LIST_GRID_SORT.DROPDOWN.ARIA_LABEL' | translate)\"\n    >\n      <ng-template let-item #item> {{ item?.columnName ? (item.columnName | translate) : ''}} </ng-template>\n      <ng-template let-item #selectedItem>\n        {{ item?.columnName ? (item.columnName | translate) : ''}}\n      </ng-template></p-select\n    >\n    <label for=\"dataListGridSortingDropdownInput\">{{ (\"OCX_LIST_GRID_SORT.DROPDOWN.LABEL\" | translate) }}</label>\n  </p-floatLabel>\n  <p-button\n    id=\"dataListGridSortingButton\"\n    type=\"button\"\n    icon=\"pi {{sortIcon()}}\"\n    styleClass=\"p-button-outlined\"\n    (onClick)=\"sortDirectionChanged()\"\n    [pTooltip]=\"(sortIconTitle() | translate)\"\n    tooltipPosition=\"top\"\n    [ariaLabel]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{direction: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n  ></p-button>\n</div>\n", styles: [".pi{border-radius:var(--border-radius);border-width:thin;background:none;cursor:pointer}:host ::ng-deep .p-select{min-width:12rem}\n"] }]
         }], propDecorators: { columns: [{
                 type: Input
             }], sortStates: [{
@@ -2246,7 +2498,7 @@ class DataTableComponent extends DataSortBase {
         return this._rows$.getValue();
     }
     set rows(value) {
-        !this._rows$.getValue().length ?? this.resetPage();
+        !this._rows$.getValue().length;
         this._rows$.next(value);
     }
     set selectedRows(value) {
@@ -2261,7 +2513,7 @@ class DataTableComponent extends DataSortBase {
         return this._filters$.getValue();
     }
     set filters(value) {
-        !this._filters$.getValue().length ?? this.resetPage();
+        !this._filters$.getValue().length;
         this._filters$.next(value);
     }
     get sortDirection() {
@@ -2298,9 +2550,10 @@ class DataTableComponent extends DataSortBase {
     set pageSize(value) {
         this._pageSize$.next(value);
     }
-    set showAllOption(value) {
-        this._showAllOption$.next(value);
-    }
+    /**
+     * @deprecated
+     */
+    set showAllOption(value) { }
     get totalRecordsOnServer() {
         return this.params['totalRecordsOnServer'] ? Number(this.params['totalRecordsOnServer']) : undefined;
     }
@@ -2383,11 +2636,13 @@ class DataTableComponent extends DataSortBase {
         const dv = this.injector.get('DataViewComponent', null);
         return dv?.selectionChangedObserved || dv?.selectionChanged.observed || this.selectionChanged.observed;
     }
-    constructor(locale, translateService, router, injector, userService) {
+    constructor() {
+        const locale = inject(LOCALE_ID);
+        const translateService = inject(TranslateService);
         super(locale, translateService);
-        this.router = router;
-        this.injector = injector;
-        this.userService = userService;
+        this.router = inject(Router);
+        this.injector = inject(Injector);
+        this.userService = inject(UserService);
         this.FilterType = FilterType;
         this.TemplateType = TemplateType;
         this.checked = true;
@@ -2402,7 +2657,6 @@ class DataTableComponent extends DataSortBase {
         this.sortStates = ["ASCENDING" /* DataSortDirection.ASCENDING */, "DESCENDING" /* DataSortDirection.DESCENDING */];
         this._pageSizes$ = new BehaviorSubject([10, 25, 50]);
         this._pageSize$ = new BehaviorSubject(undefined);
-        this._showAllOption$ = new BehaviorSubject(false);
         this.name = '';
         this.allowSelectAll = true;
         this.paginator = true;
@@ -2504,48 +2758,46 @@ class DataTableComponent extends DataSortBase {
             [TemplateType.FILTERCELL]: this.filterTemplatesData,
         };
         this.name = this.name || this.router.url.replace(/[^A-Za-z0-9]/, '_');
-        this.displayedPageSizes$ = combineLatest([
-            this._pageSizes$,
-            this.translateService.get('OCX_DATA_TABLE.ALL'),
-            this._showAllOption$,
-        ]).pipe(map(([pageSizes, translation, showAllOption]) => showAllOption ? pageSizes.concat({ showAll: translation }) : pageSizes));
         this.displayedPageSize$ = combineLatest([this._pageSize$, this._pageSizes$]).pipe(map(([pageSize, pageSizes]) => pageSize ?? pageSizes.find((val) => typeof val === 'number') ?? 50));
         this.overflowActions$ = this._additionalActions$.pipe(map((actions) => actions.filter((action) => action.showAsOverflow)));
         this.inlineActions$ = this._additionalActions$.pipe(map((actions) => actions.filter((action) => !action.showAsOverflow)));
-        this.overflowMenuItems$ = combineLatest([this.overflowActions$, this.currentMenuRow$]).pipe(mergeMap(([actions, row]) => this.translateService.get([...actions.map((a) => a.labelKey || '')]).pipe(map((translations) => {
-            return actions
-                .filter((a) => this.userService.hasPermission(a.permission))
-                .map((a) => ({
-                label: translations[a.labelKey || ''],
-                icon: a.icon,
-                styleClass: (a.classes || []).join(' '),
-                disabled: a.disabled || (!!a.actionEnabledField && !this.fieldIsTruthy(row, a.actionEnabledField)),
-                visible: !a.actionVisibleField || this.fieldIsTruthy(row, a.actionVisibleField),
-                command: () => a.callback(row),
-            }));
-        }))));
+        this.overflowMenuItems$ = combineLatest([this.overflowActions$, this.currentMenuRow$]).pipe(mergeMap(([actions, row]) => this.translateService.get([...actions.map((a) => a.labelKey || '')]).pipe(switchMap((translations) => from(actions).pipe(mergeMap((a) => from(this.userService.hasPermission(a.permission)).pipe(map((hasPermission) => ({
+            ...a,
+            hasPermission,
+        })))), toArray(), map((actionsWithPermissions) => actionsWithPermissions
+            .filter((a) => a.hasPermission)
+            .map((a) => ({
+            label: translations[a.labelKey || ''],
+            icon: a.icon,
+            styleClass: (a.classes || []).join(' '),
+            disabled: a.disabled || (!!a.actionEnabledField && !this.fieldIsTruthy(row, a.actionEnabledField)),
+            visible: !a.actionVisibleField || this.fieldIsTruthy(row, a.actionVisibleField),
+            command: () => a.callback(row),
+        }))))))));
         this.rowSelectable = this.rowSelectable.bind(this);
+        this.cachedOverflowActions$ = this.overflowActions$.pipe(shareReplay(1) // Cache the last emitted value
+        );
     }
     ngOnInit() {
         this.displayedRows$ = combineLatest([this._rows$, this._filters$, this._sortColumn$, this._sortDirection$]).pipe(mergeMap((params) => this.translateItems(params, this.columns, this.clientSideFiltering, this.clientSideSorting)), map((params) => this.filterItems(params, this.clientSideFiltering)), map((params) => this.sortItems(params, this.columns, this.clientSideSorting)), map(([rows]) => this.flattenItems(rows)));
         this.currentTruthySelectedFilters$ = combineLatest([this._filters$, this.currentFilterColumn$]).pipe(map(([filters, currentFilterColumn]) => {
             return filters
-                .filter((filter) => filter.columnId === currentFilterColumn?.id && currentFilterColumn.filterType === FilterType.TRUTHY)
+                .filter((filter) => filter.columnId === currentFilterColumn?.id && currentFilterColumn.filterType === FilterType.IS_NOT_EMPTY)
                 .map((filter) => filter.value);
         }));
         this.currentEqualSelectedFilters$ = combineLatest([this._filters$, this.currentFilterColumn$]).pipe(map(([filters, currentFilterColumn]) => {
             return filters
                 .filter((filter) => filter.columnId === currentFilterColumn?.id &&
-                (!currentFilterColumn.filterType || currentFilterColumn.filterType === FilterType.EQUAL))
+                (!currentFilterColumn.filterType || currentFilterColumn.filterType === FilterType.EQUALS))
                 .map((filter) => filter.value);
         }));
-        this.currentEqualFilterOptions$ = combineLatest([this._rows$, this.currentFilterColumn$, this._filters$]).pipe(filter(([_, currentFilterColumn, __]) => !currentFilterColumn?.filterType || currentFilterColumn.filterType === FilterType.EQUAL), mergeMap(([rows, currentFilterColumn, filters]) => {
+        this.currentEqualFilterOptions$ = combineLatest([this._rows$, this.currentFilterColumn$, this._filters$]).pipe(filter(([_, currentFilterColumn, __]) => !currentFilterColumn?.filterType || currentFilterColumn.filterType === FilterType.EQUALS), mergeMap(([rows, currentFilterColumn, filters]) => {
             if (!currentFilterColumn?.id) {
                 return of({ options: [], column: undefined });
             }
             const currentFilters = filters
                 .filter((filter) => filter.columnId === currentFilterColumn?.id &&
-                (!currentFilterColumn.filterType || currentFilterColumn.filterType === FilterType.EQUAL))
+                (!currentFilterColumn.filterType || currentFilterColumn.filterType === FilterType.EQUALS))
                 .map((filter) => filter.value);
             const columnValues = rows.map((row) => row[currentFilterColumn?.id]);
             if (currentFilterColumn.columnType === ColumnType.DATE) {
@@ -2568,7 +2820,7 @@ class DataTableComponent extends DataSortBase {
                     .map((filterOption) => ({
                     label: filterOption,
                     value: filterOption,
-                    toFilterBy: filterOption
+                    toFilterBy: filterOption,
                 }));
             }), map((options) => {
                 return {
@@ -2785,9 +3037,18 @@ class DataTableComponent extends DataSortBase {
         this.currentMenuRow$.next(row);
         menu.toggle(event);
     }
-    hasVisibleOverflowMenuItems(row) {
-        return this.overflowActions$.pipe(map((actions) => actions.some((a) => !a.actionVisibleField ||
-            (this.fieldIsTruthy(row, a.actionVisibleField) && this.userService.hasPermission(a.permission)))));
+    // A new Observable is created with each ChangeDetection.
+    // The async pipe subscribes to it, triggering another ChangeDetection when a new value is emitted, which creates a loop.
+    // To prevent this, cache the Observable by using shareReplay to avoid recreating it with every ChangeDetection.
+    hasVisibleOverflowMenuItems(item) {
+        if (this.cachedOverflowMenuItemsVisibility$) {
+            return this.cachedOverflowMenuItemsVisibility$;
+        }
+        const overflowMenuItemsVisibility$ = this.overflowActions$.pipe(mergeMap((actions) => forkJoin(actions.map((a) => !a.actionVisibleField || this.fieldIsTruthy(item, a.actionVisibleField)
+            ? from(this.userService.hasPermission(a.permission))
+            : of(false)))), map((results) => results.some((isVisible) => isVisible)));
+        this.cachedOverflowMenuItemsVisibility$ = overflowMenuItemsVisibility$.pipe(shareReplay(1));
+        return this.cachedOverflowMenuItemsVisibility$;
     }
     isDate(value) {
         if (value instanceof Date) {
@@ -2872,16 +3133,13 @@ class DataTableComponent extends DataSortBase {
             [column.id]: value.label,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataTableComponent, deps: [{ token: LOCALE_ID }, { token: i1$2.TranslateService }, { token: i1$1.Router }, { token: i0.Injector }, { token: i3.UserService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DataTableComponent, selector: "ocx-data-table", inputs: { rows: "rows", selectedRows: "selectedRows", filters: "filters", sortDirection: "sortDirection", sortColumn: "sortColumn", columns: "columns", clientSideFiltering: "clientSideFiltering", clientSideSorting: "clientSideSorting", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", emptyResultsMessage: "emptyResultsMessage", name: "name", deletePermission: "deletePermission", viewPermission: "viewPermission", editPermission: "editPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", selectionEnabledField: "selectionEnabledField", allowSelectAll: "allowSelectAll", paginator: "paginator", page: "page", tableStyle: "tableStyle", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", stringCellTemplate: "stringCellTemplate", numberCellTemplate: "numberCellTemplate", customCellTemplate: "customCellTemplate", dateCellTemplate: "dateCellTemplate", relativeDateCellTemplate: "relativeDateCellTemplate", cellTemplate: "cellTemplate", translationKeyCellTemplate: "translationKeyCellTemplate", stringFilterCellTemplate: "stringFilterCellTemplate", numberFilterCellTemplate: "numberFilterCellTemplate", customFilterCellTemplate: "customFilterCellTemplate", dateFilterCellTemplate: "dateFilterCellTemplate", relativeDateFilterCellTemplate: "relativeDateFilterCellTemplate", filterCellTemplate: "filterCellTemplate", translationKeyFilterCellTemplate: "translationKeyFilterCellTemplate", additionalActions: "additionalActions", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "stringCellChildTemplate", first: true, predicate: ["stringCell"], descendants: true }, { propertyName: "numberCellChildTemplate", first: true, predicate: ["numberCell"], descendants: true }, { propertyName: "customCellChildTemplate", first: true, predicate: ["customCell"], descendants: true }, { propertyName: "dateCellChildTemplate", first: true, predicate: ["dateCell"], descendants: true }, { propertyName: "relativeDateCellChildTemplate", first: true, predicate: ["relativeDateCell"], descendants: true }, { propertyName: "cellChildTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "translationKeyCellChildTemplate", first: true, predicate: ["translationKeyCell"], descendants: true }, { propertyName: "stringFilterCellChildTemplate", first: true, predicate: ["stringFilterCell"], descendants: true }, { propertyName: "numberFilterCellChildTemplate", first: true, predicate: ["numberFilterCell"], descendants: true }, { propertyName: "customFilterCellChildTemplate", first: true, predicate: ["customFilterCell"], descendants: true }, { propertyName: "dateFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateFilterCellChildTemplate", first: true, predicate: ["relativeDateFilterCell"], descendants: true }, { propertyName: "filterCellChildTemplate", first: true, predicate: ["filterCell"], descendants: true }, { propertyName: "translationKeyFilterCellChildTemplate", first: true, predicate: ["translationKeyFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <td\n      class=\"actions\"\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-left' : 'action-column-right'\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n    >\n      <div class=\"icon-button-row-wrapper\">\n        <ng-container\n          *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\"\n        >\n          <button\n            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          ></button>\n        </ng-container>\n      </div>\n    </td>\n  </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0  || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <th\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    >\n      {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n    </th>\n  </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n  <p-table\n    *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\n    [value]=\"(displayedRows$ | async) ?? []\"\n    responsiveLayout=\"scroll\"\n    [paginator]=\"paginator\"\n    [first]=\"page * displayedPageSize\"\n    (onPage)=\"onPageChange($event)\"\n    [rows]=\"displayedPageSize\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n    [rowsPerPageOptions]=\"(displayedPageSizes$ | async) ?? []\"\n    id=\"dataTable_{{name}}\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [selection]=\"(selectedRows$ | async) ?? []\"\n    [scrollable]=\"true\"\n    scrollHeight=\"flex\"\n    [style]=\"tableStyle\"\n    paginatorDropdownAppendTo=\"body\"\n    [rowSelectable]=\"rowSelectable\"\n    tableStyleClass=\"h-full\"\n  >\n    <ng-template pTemplate=\"header\">\n      <tr style=\"vertical-align: top\">\n        <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n          <p-tableHeaderCheckbox\n            *ngIf=\"allowSelectAll\"\n            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                  [title]=\"(sortIconTitle(column.id) | translate)\"\n                  [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n                ></button>\n                <ng-container *ngIf=\"currentEqualFilterOptions$ | async as equalFilterOptions\">\n                  <ng-container *ngIf=\"columnFilterTemplates$ | async as columnFilterTemplates\">\n                    <p-multiSelect\n                      class=\"filterMultiSelect\"\n                      *ngIf=\"column.filterable && (!column.filterType || column.filterType === FilterType.EQUAL)\"\n                      [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n                      [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\n                      [showToggleAll]=\"true\"\n                      emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n                      [displaySelectedLabel]=\"false\"\n                      [resetFilterOnHide]=\"true\"\n                      (onChange)=\"onMultiselectFilterChange(column, $event)\"\n                      placeholder=\"Icon\"\n                      appendTo=\"body\"\n                      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        <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\n          {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</ng-container>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomCell\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$2.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i9$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: i9$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i9$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i9$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i8.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i11.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i4.NgIf, i4.NgTemplateOutlet]] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: DataTableComponent, isStandalone: false, selector: "ocx-data-table", inputs: { rows: "rows", selectedRows: "selectedRows", filters: "filters", sortDirection: "sortDirection", sortColumn: "sortColumn", columns: "columns", clientSideFiltering: "clientSideFiltering", clientSideSorting: "clientSideSorting", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", emptyResultsMessage: "emptyResultsMessage", name: "name", deletePermission: "deletePermission", viewPermission: "viewPermission", editPermission: "editPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", selectionEnabledField: "selectionEnabledField", allowSelectAll: "allowSelectAll", paginator: "paginator", page: "page", tableStyle: "tableStyle", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", stringCellTemplate: "stringCellTemplate", numberCellTemplate: "numberCellTemplate", customCellTemplate: "customCellTemplate", dateCellTemplate: "dateCellTemplate", relativeDateCellTemplate: "relativeDateCellTemplate", cellTemplate: "cellTemplate", translationKeyCellTemplate: "translationKeyCellTemplate", stringFilterCellTemplate: "stringFilterCellTemplate", numberFilterCellTemplate: "numberFilterCellTemplate", customFilterCellTemplate: "customFilterCellTemplate", dateFilterCellTemplate: "dateFilterCellTemplate", relativeDateFilterCellTemplate: "relativeDateFilterCellTemplate", filterCellTemplate: "filterCellTemplate", translationKeyFilterCellTemplate: "translationKeyFilterCellTemplate", additionalActions: "additionalActions", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "stringCellChildTemplate", first: true, predicate: ["stringCell"], descendants: true }, { propertyName: "numberCellChildTemplate", first: true, predicate: ["numberCell"], descendants: true }, { propertyName: "customCellChildTemplate", first: true, predicate: ["customCell"], descendants: true }, { propertyName: "dateCellChildTemplate", first: true, predicate: ["dateCell"], descendants: true }, { propertyName: "relativeDateCellChildTemplate", first: true, predicate: ["relativeDateCell"], descendants: true }, { propertyName: "cellChildTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "translationKeyCellChildTemplate", first: true, predicate: ["translationKeyCell"], descendants: true }, { propertyName: "stringFilterCellChildTemplate", first: true, predicate: ["stringFilterCell"], descendants: true }, { propertyName: "numberFilterCellChildTemplate", first: true, predicate: ["numberFilterCell"], descendants: true }, { propertyName: "customFilterCellChildTemplate", first: true, predicate: ["customFilterCell"], descendants: true }, { propertyName: "dateFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateFilterCellChildTemplate", first: true, predicate: ["relativeDateFilterCell"], descendants: true }, { propertyName: "filterCellChildTemplate", first: true, predicate: ["filterCell"], descendants: true }, { propertyName: "translationKeyFilterCellChildTemplate", first: true, predicate: ["translationKeyFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  @if (anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0) {\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        @if (viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))) {\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        }\n        @if (editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))) {\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        }\n        @if (deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))) {\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        }\n        @for (action of inlineActions$ | async; track action) {\n          @if ((!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          }\n        }\n        @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n          <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            class=\"p-button-rounded p-button-text\"\n            [icon]=\"'pi pi-ellipsis-v'\"\n            (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n            [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n          ></button>\n        }\n      </div>\n    </td>\n  }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  @if (anyRowActionObserved || this.additionalActions.length > 0  || ((this.overflowActions$ | async) ?? []).length > 0) {\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  }\n</ng-template>\n\n@if ((displayedPageSize$ | async); as displayedPageSize) {\n  @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n    <p-table\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]=\"this.pageSizes ?? []\"\n      id=\"dataTable_{{name}}\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      [selection]=\"(selectedRows$ | async) ?? []\"\n      [scrollable]=\"true\"\n      scrollHeight=\"flex\"\n      [style]=\"tableStyle\"\n      paginatorDropdownAppendTo=\"body\"\n      [rowSelectable]=\"rowSelectable\"\n      tableStyleClass=\"h-full\"\n      >\n      <ng-template #header>\n        <tr style=\"vertical-align: top\">\n          @if (selectionChangedObserved) {\n            <th style=\"width: 4rem\" scope=\"col\">\n              @if (allowSelectAll) {\n                <p-tableHeaderCheckbox\n                  pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n                  ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n                ></p-tableHeaderCheckbox>\n              }\n            </th>\n          }\n          @if (actionColumnPosition === 'left';) {\n            <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n          }\n          @for (column of columns; track column) {\n            @if (column.sortable || column.filterable) {\n              <th 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                    @if (column.sortable) {\n                      <button\n                        class=\"pi sortButton pl-0\"\n                        [class.pi-sort-alt]=\"(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn\"\n                        [class.pi-sort-amount-up]=\"column?.id === sortColumn && sortDirection === 'ASCENDING'\"\n                        [class.pi-sort-amount-down]=\"column?.id === sortColumn && sortDirection === 'DESCENDING'\"\n                        (click)=\"onSortColumnClick(column.id)\"\n                        [title]=\"(sortIconTitle(column.id) | translate)\"\n                        [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n                      ></button>\n                    }\n                    @if (currentEqualFilterOptions$ | async; as equalFilterOptions) {\n                      @if (columnFilterTemplates$ | async; as columnFilterTemplates) {\n                        @if (column.filterable && (!column.filterType || column.filterType === FilterType.EQUALS)) {\n                          <p-multiselect\n                            class=\"filterMultiSelect\"\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=\" \"\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 #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 #item let-value>\n                              @if (columnFilterTemplates[column.id]; as template) {\n                                <ng-container\n                                  [ngTemplateOutlet]=\"template\"\n                          [ngTemplateOutletContext]=\"{\n                      rowObject: getRowObjectFromMultiselectItem(value, column),\n                      column: column\n                  }\"\n                                  >\n                                </ng-container>\n                              }\n                            </ng-template>\n                          </p-multiselect>\n                        }\n                      }\n                    }\n                    @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n                      <p-multiselect\n                        class=\"filterMultiSelect\"\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=\" \"\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 #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 #item let-value> {{value.key | translate}} </ng-template>\n                      </p-multiselect>\n                    }\n                  </span>\n                </div>\n              </th>\n            } @else {\n              <th scope=\"col\">{{ column.nameKey | translate }}</th>\n            }\n          }\n          @if (actionColumnPosition === 'right';) {\n            <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n          }\n        </tr>\n      </ng-template>\n      <ng-template #body let-rowObject>\n        @if (columnTemplates) {\n          <tr>\n            @if (selectionChangedObserved) {\n              <td>\n                @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n                  <p-checkbox\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                } @else {\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                }\n              </td>\n            }\n            @if (actionColumnPosition === 'left';) {\n              <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n            }\n            @for (column of columns; track column) {\n              <td>\n                @defer(on viewport){\n                @if (columnTemplates[column.id]) {\n                  <ng-container\n            [ngTemplateOutlet]=\"\n                _cell ? _cell: columnTemplates[column.id]\n              \"\n            [ngTemplateOutletContext]=\"{\n                  rowObject: rowObject,\n                  column: column,\n              }\"\n                    >\n                  </ng-container>\n                }\n                } @placeholder {\n                <p-skeleton width=\"3rem\" />\n              }\n            </td>\n          }\n          @if (actionColumnPosition === 'right';) {\n            <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n          }\n        </tr>\n      }\n    </ng-template>\n    <ng-template #emptymessage>\n      <tr>\n        <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\n          {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n}\n}\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-dropdown{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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i5$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i5$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i5$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i4.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: i7.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet]] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", 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          ></button>\n        </ng-container>\n      </div>\n    </td>\n  </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0  || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <th\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    >\n      {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n    </th>\n  </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n  <p-table\n    *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\n    [value]=\"(displayedRows$ | async) ?? []\"\n    responsiveLayout=\"scroll\"\n    [paginator]=\"paginator\"\n    [first]=\"page * displayedPageSize\"\n    (onPage)=\"onPageChange($event)\"\n    [rows]=\"displayedPageSize\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n    [rowsPerPageOptions]=\"(displayedPageSizes$ | async) ?? []\"\n    id=\"dataTable_{{name}}\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [selection]=\"(selectedRows$ | async) ?? []\"\n    [scrollable]=\"true\"\n    scrollHeight=\"flex\"\n    [style]=\"tableStyle\"\n    paginatorDropdownAppendTo=\"body\"\n    [rowSelectable]=\"rowSelectable\"\n    tableStyleClass=\"h-full\"\n  >\n    <ng-template pTemplate=\"header\">\n      <tr style=\"vertical-align: top\">\n        <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n          <p-tableHeaderCheckbox\n            *ngIf=\"allowSelectAll\"\n            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                  [title]=\"(sortIconTitle(column.id) | translate)\"\n                  [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n                ></button>\n                <ng-container *ngIf=\"currentEqualFilterOptions$ | async as equalFilterOptions\">\n                  <ng-container *ngIf=\"columnFilterTemplates$ | async as columnFilterTemplates\">\n                    <p-multiSelect\n                      class=\"filterMultiSelect\"\n                      *ngIf=\"column.filterable && (!column.filterType || column.filterType === FilterType.EQUAL)\"\n                      [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n                      [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\n                      [showToggleAll]=\"true\"\n                      emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n                      [displaySelectedLabel]=\"false\"\n                      [resetFilterOnHide]=\"true\"\n                      (onChange)=\"onMultiselectFilterChange(column, $event)\"\n                      placeholder=\"Icon\"\n                      appendTo=\"body\"\n                      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        <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\n          {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</ng-container>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomCell\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }, { type: i1$2.TranslateService }, { type: i1$1.Router }, { type: i0.Injector }, { type: i3.UserService }], propDecorators: { rows: [{
+            args: [{ standalone: false, selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  @if (anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0) {\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        @if (viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))) {\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        }\n        @if (editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))) {\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        }\n        @if (deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))) {\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        }\n        @for (action of inlineActions$ | async; track action) {\n          @if ((!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          }\n        }\n        @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n          <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            class=\"p-button-rounded p-button-text\"\n            [icon]=\"'pi pi-ellipsis-v'\"\n            (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n            [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n          ></button>\n        }\n      </div>\n    </td>\n  }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  @if (anyRowActionObserved || this.additionalActions.length > 0  || ((this.overflowActions$ | async) ?? []).length > 0) {\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  }\n</ng-template>\n\n@if ((displayedPageSize$ | async); as displayedPageSize) {\n  @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n    <p-table\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]=\"this.pageSizes ?? []\"\n      id=\"dataTable_{{name}}\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      [selection]=\"(selectedRows$ | async) ?? []\"\n      [scrollable]=\"true\"\n      scrollHeight=\"flex\"\n      [style]=\"tableStyle\"\n      paginatorDropdownAppendTo=\"body\"\n      [rowSelectable]=\"rowSelectable\"\n      tableStyleClass=\"h-full\"\n      >\n      <ng-template #header>\n        <tr style=\"vertical-align: top\">\n          @if (selectionChangedObserved) {\n            <th style=\"width: 4rem\" scope=\"col\">\n              @if (allowSelectAll) {\n                <p-tableHeaderCheckbox\n                  pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n                  ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n                ></p-tableHeaderCheckbox>\n              }\n            </th>\n          }\n          @if (actionColumnPosition === 'left';) {\n            <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n          }\n          @for (column of columns; track column) {\n            @if (column.sortable || column.filterable) {\n              <th 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                    @if (column.sortable) {\n                      <button\n                        class=\"pi sortButton pl-0\"\n                        [class.pi-sort-alt]=\"(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn\"\n                        [class.pi-sort-amount-up]=\"column?.id === sortColumn && sortDirection === 'ASCENDING'\"\n                        [class.pi-sort-amount-down]=\"column?.id === sortColumn && sortDirection === 'DESCENDING'\"\n                        (click)=\"onSortColumnClick(column.id)\"\n                        [title]=\"(sortIconTitle(column.id) | translate)\"\n                        [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n                      ></button>\n                    }\n                    @if (currentEqualFilterOptions$ | async; as equalFilterOptions) {\n                      @if (columnFilterTemplates$ | async; as columnFilterTemplates) {\n                        @if (column.filterable && (!column.filterType || column.filterType === FilterType.EQUALS)) {\n                          <p-multiselect\n                            class=\"filterMultiSelect\"\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=\" \"\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 #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 #item let-value>\n                              @if (columnFilterTemplates[column.id]; as template) {\n                                <ng-container\n                                  [ngTemplateOutlet]=\"template\"\n                          [ngTemplateOutletContext]=\"{\n                      rowObject: getRowObjectFromMultiselectItem(value, column),\n                      column: column\n                  }\"\n                                  >\n                                </ng-container>\n                              }\n                            </ng-template>\n                          </p-multiselect>\n                        }\n                      }\n                    }\n                    @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n                      <p-multiselect\n                        class=\"filterMultiSelect\"\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=\" \"\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 #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 #item let-value> {{value.key | translate}} </ng-template>\n                      </p-multiselect>\n                    }\n                  </span>\n                </div>\n              </th>\n            } @else {\n              <th scope=\"col\">{{ column.nameKey | translate }}</th>\n            }\n          }\n          @if (actionColumnPosition === 'right';) {\n            <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n          }\n        </tr>\n      </ng-template>\n      <ng-template #body let-rowObject>\n        @if (columnTemplates) {\n          <tr>\n            @if (selectionChangedObserved) {\n              <td>\n                @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n                  <p-checkbox\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                } @else {\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                }\n              </td>\n            }\n            @if (actionColumnPosition === 'left';) {\n              <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n            }\n            @for (column of columns; track column) {\n              <td>\n                @defer(on viewport){\n                @if (columnTemplates[column.id]) {\n                  <ng-container\n            [ngTemplateOutlet]=\"\n                _cell ? _cell: columnTemplates[column.id]\n              \"\n            [ngTemplateOutletContext]=\"{\n                  rowObject: rowObject,\n                  column: column,\n              }\"\n                    >\n                  </ng-container>\n                }\n                } @placeholder {\n                <p-skeleton width=\"3rem\" />\n              }\n            </td>\n          }\n          @if (actionColumnPosition === 'right';) {\n            <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n          }\n        </tr>\n      }\n    </ng-template>\n    <ng-template #emptymessage>\n      <tr>\n        <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\n          {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n}\n}\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-dropdown{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: () => [], propDecorators: { rows: [{
                 type: Input
             }], selectedRows: [{
                 type: Input
@@ -3061,6 +3319,57 @@ function orderAndMergeValuesByTimestamp(valuesWithTimestamp) {
 }
 
 class DataViewComponent {
+    constructor() {
+        this.injector = inject(Injector);
+        this.dataTableComponentState$ = new ReplaySubject(1);
+        this.dataListGridComponentState$ = new ReplaySubject(1);
+        this.tableAllowSelectAll = true;
+        this.data = [];
+        this.name = 'Data table';
+        this.subtitleLineIds = [];
+        this.layout = ['grid', 'list', 'table'];
+        this.columns = [];
+        this.clientSideSorting = true;
+        this.clientSideFiltering = true;
+        this.fallbackImage = 'placeholder.png';
+        this.filters = [];
+        this.sortField = '';
+        this.sortDirection = "NONE" /* DataSortDirection.NONE */;
+        this.listGridPaginator = true;
+        this.tablePaginator = true;
+        this.page = 0;
+        this.currentPageShowingKey = 'OCX_DATA_TABLE.SHOWING';
+        this.currentPageShowingWithTotalOnServerKey = 'OCX_DATA_TABLE.SHOWING_WITH_TOTAL_ON_SERVER';
+        this.selectedRows = [];
+        this.frozenActionColumn = false;
+        this.actionColumnPosition = 'right';
+        this.sortStates = ["ASCENDING" /* DataSortDirection.ASCENDING */, "DESCENDING" /* DataSortDirection.DESCENDING */];
+        this.pageSizes = [10, 25, 50];
+        /**
+         * @deprecated
+         */
+        this.showAllOption = false;
+        this.additionalActions = [];
+        this.filtered = new EventEmitter();
+        this.sorted = new EventEmitter();
+        this.deleteItem = new EventEmitter();
+        this.viewItem = new EventEmitter();
+        this.editItem = new EventEmitter();
+        this.selectionChanged = new EventEmitter();
+        this.pageChanged = new EventEmitter();
+        this.pageSizeChanged = new EventEmitter();
+        this.componentStateChanged = new EventEmitter();
+        this.parentTemplates$ = new BehaviorSubject(undefined);
+        this.templates$ = new BehaviorSubject(undefined);
+        this.templatesForChildren$ = combineLatest([
+            this.templates$,
+            this.parentTemplates$,
+        ]).pipe(map(([t, pt]) => {
+            const ql = new QueryList();
+            ql.reset([...(t?.toArray() ?? []), ...(pt?.toArray() ?? [])]);
+            return ql;
+        }));
+    }
     set listGrid(ref) {
         this._dataListGridComponent = ref;
         this.registerEventListenerForListGrid();
@@ -3207,54 +3516,6 @@ class DataViewComponent {
         return (this.injector.get('InteractiveDataViewComponent', null)?.selectionChanged.observed ||
             this.selectionChanged.observed);
     }
-    constructor(injector) {
-        this.injector = injector;
-        this.dataTableComponentState$ = new ReplaySubject(1);
-        this.dataListGridComponentState$ = new ReplaySubject(1);
-        this.tableAllowSelectAll = true;
-        this.data = [];
-        this.name = 'Data table';
-        this.subtitleLineIds = [];
-        this.layout = ['grid', 'list', 'table'];
-        this.columns = [];
-        this.clientSideSorting = true;
-        this.clientSideFiltering = true;
-        this.fallbackImage = 'placeholder.png';
-        this.filters = [];
-        this.sortField = '';
-        this.sortDirection = "NONE" /* DataSortDirection.NONE */;
-        this.listGridPaginator = true;
-        this.tablePaginator = true;
-        this.page = 0;
-        this.currentPageShowingKey = 'OCX_DATA_TABLE.SHOWING';
-        this.currentPageShowingWithTotalOnServerKey = 'OCX_DATA_TABLE.SHOWING_WITH_TOTAL_ON_SERVER';
-        this.selectedRows = [];
-        this.frozenActionColumn = false;
-        this.actionColumnPosition = 'right';
-        this.sortStates = ["ASCENDING" /* DataSortDirection.ASCENDING */, "DESCENDING" /* DataSortDirection.DESCENDING */];
-        this.pageSizes = [10, 25, 50];
-        this.showAllOption = false;
-        this.additionalActions = [];
-        this.filtered = new EventEmitter();
-        this.sorted = new EventEmitter();
-        this.deleteItem = new EventEmitter();
-        this.viewItem = new EventEmitter();
-        this.editItem = new EventEmitter();
-        this.selectionChanged = new EventEmitter();
-        this.pageChanged = new EventEmitter();
-        this.pageSizeChanged = new EventEmitter();
-        this.componentStateChanged = new EventEmitter();
-        this.parentTemplates$ = new BehaviorSubject(undefined);
-        this.templates$ = new BehaviorSubject(undefined);
-        this.templatesForChildren$ = combineLatest([
-            this.templates$,
-            this.parentTemplates$,
-        ]).pipe(map(([t, pt]) => {
-            const ql = new QueryList();
-            ql.reset([...(t?.toArray() ?? []), ...(pt?.toArray() ?? [])]);
-            return ql;
-        }));
-    }
     ngOnInit() {
         this.firstColumnId = this.columns[0]?.id;
         let dataTableComponentState$ = this.dataTableComponentState$;
@@ -3467,13 +3728,13 @@ class DataViewComponent {
         this.pageSize = event;
         this.pageSizeChanged.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataViewComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: DataViewComponent, isStandalone: false, 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: "@if (layout !== 'table') {\n  <div>\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      [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      @if (_listItemSubtitleLines) {\n        <ng-container\n          [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n          [ngTemplateOutletContext]=\"{$implicit:item}\"\n          >\n          </ng-container\n          >\n        }</ng-template>\n        <ng-template #gridItemSubtitleLines let-item>\n          @if (_gridItemSubtitleLines) {\n            <ng-container\n              [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n              [ngTemplateOutletContext]=\"{$implicit:item}\"\n              >\n              </ng-container\n              >\n            }</ng-template>\n            <ng-template #gridItem let-item>\n              @if (_gridItem) {\n                <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n                  </ng-container\n                  >\n                }</ng-template>\n                <ng-template #listItem let-item>\n                  @if (_listItem) {\n                    <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n                      </ng-container\n                      >\n                    }</ng-template>\n                    <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n                      @if (_listValue) {\n                        <ng-container\n                          [ngTemplateOutlet]=\"_listValue\"\n                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                          >\n                          </ng-container\n                          >\n                        }</ng-template>\n                        <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                          @if (_translationKeyListValue) {\n                            <ng-container\n                              [ngTemplateOutlet]=\"_translationKeyListValue\"\n                              [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                              >\n                              </ng-container\n                              >\n                            }</ng-template>\n                            <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                              @if (_numberListValue) {\n                                <ng-container\n                                  [ngTemplateOutlet]=\"_numberListValue\"\n                                  [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                  >\n                                  </ng-container\n                                  >\n                                }</ng-template>\n                                <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                  @if (_relativeDateListValue) {\n                                    <ng-container\n                                      [ngTemplateOutlet]=\"_relativeDateListValue\"\n                                      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                      >\n                                      </ng-container\n                                      >\n                                    }</ng-template>\n                                    <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                      @if (_customListValue) {\n                                        <ng-container\n                                          [ngTemplateOutlet]=\"_customListValue\"\n                                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                          >\n                                          </ng-container\n                                          >\n                                        }</ng-template>\n                                        <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                          @if (_stringListValue) {\n                                            <ng-container\n                                              [ngTemplateOutlet]=\"_stringListValue\"\n                                              [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                              >\n                                              </ng-container\n                                              >\n                                            }</ng-template>\n                                            <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                              @if (_dateListValue) {\n                                                <ng-container\n                                                  [ngTemplateOutlet]=\"_dateListValue\"\n                                                  [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                  >\n                                                  </ng-container\n                                                  >\n                                                }</ng-template>\n                                              </div>\n                                            }\n\n                                            @if (layout === 'table') {\n                                              <div>\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                                                  [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                                                  @if (_stringTableCell) {\n                                                    <ng-container\n                                                      [ngTemplateOutlet]=\"_stringTableCell\"\n                                                      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                      >\n                                                      </ng-container\n                                                      >\n                                                    }</ng-template>\n                                                    <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                      @if (_numberTableCell) {\n                                                        <ng-container\n                                                          [ngTemplateOutlet]=\"_numberTableCell\"\n                                                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                          >\n                                                          </ng-container\n                                                          >\n                                                        }</ng-template>\n                                                        <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                          @if (_customTableCell) {\n                                                            <ng-container\n                                                              [ngTemplateOutlet]=\"_customTableCell\"\n                                                              [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                              >\n                                                              </ng-container\n                                                              >\n                                                            }</ng-template>\n                                                            <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                              @if (_dateTableCell) {\n                                                                <ng-container\n                                                                  [ngTemplateOutlet]=\"_dateTableCell\"\n                                                                  [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                  >\n                                                                  </ng-container\n                                                                  >\n                                                                }</ng-template>\n                                                                <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                  @if (_relativeDateTableCell) {\n                                                                    <ng-container\n                                                                      [ngTemplateOutlet]=\"_relativeDateTableCell\"\n                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                      >\n                                                                      </ng-container\n                                                                      >\n                                                                    }</ng-template>\n                                                                    <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                      @if (_tableCell) {\n                                                                        <ng-container\n                                                                          [ngTemplateOutlet]=\"_tableCell\"\n                                                                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                                          >\n                                                                          </ng-container\n                                                                          >\n                                                                        }</ng-template>\n                                                                        <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                          @if (_translationKeyTableCell) {\n                                                                            <ng-container\n                                                                              [ngTemplateOutlet]=\"_translationKeyTableCell\"\n                                                                              [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                              >\n                                                                              </ng-container\n                                                                              >\n                                                                            }</ng-template>\n                                                                            <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                              @if (_stringTableFilterCell) {\n                                                                                <ng-container\n                                                                                  [ngTemplateOutlet]=\"_stringTableFilterCell\"\n                                                                                  [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                  >\n                                                                                  </ng-container\n                                                                                  >\n                                                                                }</ng-template>\n                                                                                <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_tableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_tableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_dateTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_dateTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #customFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_customTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_customTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_numberTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_numberTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_relativeDateTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_translationKeyTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                              </div>\n                                                                            }\n", styles: [""], dependencies: [{ kind: "directive", type: i1.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: i1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", 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" }]
-        }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { listGrid: [{
+            args: [{ standalone: false, selector: 'ocx-data-view', providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], template: "@if (layout !== 'table') {\n  <div>\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      [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      @if (_listItemSubtitleLines) {\n        <ng-container\n          [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n          [ngTemplateOutletContext]=\"{$implicit:item}\"\n          >\n          </ng-container\n          >\n        }</ng-template>\n        <ng-template #gridItemSubtitleLines let-item>\n          @if (_gridItemSubtitleLines) {\n            <ng-container\n              [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n              [ngTemplateOutletContext]=\"{$implicit:item}\"\n              >\n              </ng-container\n              >\n            }</ng-template>\n            <ng-template #gridItem let-item>\n              @if (_gridItem) {\n                <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n                  </ng-container\n                  >\n                }</ng-template>\n                <ng-template #listItem let-item>\n                  @if (_listItem) {\n                    <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n                      </ng-container\n                      >\n                    }</ng-template>\n                    <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n                      @if (_listValue) {\n                        <ng-container\n                          [ngTemplateOutlet]=\"_listValue\"\n                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                          >\n                          </ng-container\n                          >\n                        }</ng-template>\n                        <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                          @if (_translationKeyListValue) {\n                            <ng-container\n                              [ngTemplateOutlet]=\"_translationKeyListValue\"\n                              [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                              >\n                              </ng-container\n                              >\n                            }</ng-template>\n                            <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                              @if (_numberListValue) {\n                                <ng-container\n                                  [ngTemplateOutlet]=\"_numberListValue\"\n                                  [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                  >\n                                  </ng-container\n                                  >\n                                }</ng-template>\n                                <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                  @if (_relativeDateListValue) {\n                                    <ng-container\n                                      [ngTemplateOutlet]=\"_relativeDateListValue\"\n                                      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                      >\n                                      </ng-container\n                                      >\n                                    }</ng-template>\n                                    <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                      @if (_customListValue) {\n                                        <ng-container\n                                          [ngTemplateOutlet]=\"_customListValue\"\n                                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                          >\n                                          </ng-container\n                                          >\n                                        }</ng-template>\n                                        <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                          @if (_stringListValue) {\n                                            <ng-container\n                                              [ngTemplateOutlet]=\"_stringListValue\"\n                                              [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                              >\n                                              </ng-container\n                                              >\n                                            }</ng-template>\n                                            <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                              @if (_dateListValue) {\n                                                <ng-container\n                                                  [ngTemplateOutlet]=\"_dateListValue\"\n                                                  [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                  >\n                                                  </ng-container\n                                                  >\n                                                }</ng-template>\n                                              </div>\n                                            }\n\n                                            @if (layout === 'table') {\n                                              <div>\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                                                  [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                                                  @if (_stringTableCell) {\n                                                    <ng-container\n                                                      [ngTemplateOutlet]=\"_stringTableCell\"\n                                                      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                      >\n                                                      </ng-container\n                                                      >\n                                                    }</ng-template>\n                                                    <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                      @if (_numberTableCell) {\n                                                        <ng-container\n                                                          [ngTemplateOutlet]=\"_numberTableCell\"\n                                                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                          >\n                                                          </ng-container\n                                                          >\n                                                        }</ng-template>\n                                                        <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                          @if (_customTableCell) {\n                                                            <ng-container\n                                                              [ngTemplateOutlet]=\"_customTableCell\"\n                                                              [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                              >\n                                                              </ng-container\n                                                              >\n                                                            }</ng-template>\n                                                            <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                              @if (_dateTableCell) {\n                                                                <ng-container\n                                                                  [ngTemplateOutlet]=\"_dateTableCell\"\n                                                                  [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                  >\n                                                                  </ng-container\n                                                                  >\n                                                                }</ng-template>\n                                                                <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                  @if (_relativeDateTableCell) {\n                                                                    <ng-container\n                                                                      [ngTemplateOutlet]=\"_relativeDateTableCell\"\n                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                      >\n                                                                      </ng-container\n                                                                      >\n                                                                    }</ng-template>\n                                                                    <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                      @if (_tableCell) {\n                                                                        <ng-container\n                                                                          [ngTemplateOutlet]=\"_tableCell\"\n                                                                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                                          >\n                                                                          </ng-container\n                                                                          >\n                                                                        }</ng-template>\n                                                                        <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                          @if (_translationKeyTableCell) {\n                                                                            <ng-container\n                                                                              [ngTemplateOutlet]=\"_translationKeyTableCell\"\n                                                                              [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                              >\n                                                                              </ng-container\n                                                                              >\n                                                                            }</ng-template>\n                                                                            <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                              @if (_stringTableFilterCell) {\n                                                                                <ng-container\n                                                                                  [ngTemplateOutlet]=\"_stringTableFilterCell\"\n                                                                                  [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                  >\n                                                                                  </ng-container\n                                                                                  >\n                                                                                }</ng-template>\n                                                                                <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_tableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_tableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_dateTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_dateTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #customFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_customTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_customTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_numberTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_numberTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_relativeDateTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_translationKeyTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                              </div>\n                                                                            }\n" }]
+        }], propDecorators: { listGrid: [{
                 type: ViewChild,
                 args: [DataListGridComponent]
             }], dataTable: [{
@@ -3765,23 +4026,8 @@ const allDiagramTypes = [
     },
 ];
 class DiagramComponent {
-    get diagramType() {
-        return this._diagramType;
-    }
-    set diagramType(value) {
-        this._diagramType = value;
-        this.selectedDiagramType = allDiagramTypes.find((v) => v.layout === value);
-        this.chartType = this.diagramTypeToChartType(value);
-    }
-    get supportedDiagramTypes() {
-        return this._supportedDiagramTypes;
-    }
-    set supportedDiagramTypes(value) {
-        this._supportedDiagramTypes = value;
-        this.shownDiagramTypes = allDiagramTypes.filter((vl) => this.supportedDiagramTypes.includes(vl.layout));
-    }
-    constructor(translateService) {
-        this.translateService = translateService;
+    constructor() {
+        this.translateService = inject(TranslateService);
         this.sumKey = 'OCX_DIAGRAM.SUM';
         /**
          * This property determines if diagram should generate the colors for the data that does not have any set.
@@ -3805,6 +4051,21 @@ class DiagramComponent {
         // Changing the colorScale, will change the thematic color appearance of the diagram.
         this.colorScale = d3.interpolateCool;
     }
+    get diagramType() {
+        return this._diagramType;
+    }
+    set diagramType(value) {
+        this._diagramType = value;
+        this.selectedDiagramType = allDiagramTypes.find((v) => v.layout === value);
+        this.chartType = this.diagramTypeToChartType(value);
+    }
+    get supportedDiagramTypes() {
+        return this._supportedDiagramTypes;
+    }
+    set supportedDiagramTypes(value) {
+        this._supportedDiagramTypes = value;
+        this.shownDiagramTypes = allDiagramTypes.filter((vl) => this.supportedDiagramTypes.includes(vl.layout));
+    }
     ngOnChanges() {
         this.generateChart(this.colorScale, this.colorRangeInfo);
     }
@@ -3883,13 +4144,13 @@ class DiagramComponent {
             activeDiagramType: event.value.layout,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DiagramComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DiagramComponent, selector: "ocx-diagram", inputs: { data: "data", sumKey: "sumKey", fillMissingColors: "fillMissingColors", diagramType: "diagramType", supportedDiagramTypes: "supportedDiagramTypes" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged", componentStateChanged: "componentStateChanged" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"this.data\">\n  <div class=\"flex justify-content-center pb-2\" *ngIf=\"shownDiagramTypes.length > 1\">\n    <p-selectButton\n      [options]=\"shownDiagramTypes\"\n      [(ngModel)]=\"selectedDiagramType\"\n      optionLabel=\"id\"\n      (onChange)=\"onDiagramTypeChanged($event)\"\n      name=\"diagram-type-select-button\"\n    >\n      <ng-template let-item pTemplate>\n        <i\n          [class]=\"item.icon\"\n          [pTooltip]=\"item.tooltip || (item.tooltipKey | translate)\"\n          tooltipPosition=\"top\"\n          tooltipEvent=\"hover\"\n        ></i>\n        <label style=\"display: none\" id=\"{{item.id}}\"> {{item.label ? item.label : item.labelKey | translate}} </label>\n      </ng-template>\n    </p-selectButton>\n  </div>\n  <div class=\"w-full flex justify-content-center\">\n    <p-chart\n      id=\"diagram\"\n      [type]=\"chartType\"\n      [data]=\"chartData\"\n      [responsive]=\"false\"\n      [options]=\"chartOptions\"\n      (onDataSelect)=\"dataClicked($event)\"\n      [ariaLabel]=\"(data ? 'OCX_DIAGRAM.ARIA_LABEL' : 'OCX_DIAGRAM.EMPTY_ARIA_LABEL') | translate: {total: generateTotal(data), valueString: generateDiagramValueString(data)}\"\n    ></p-chart>\n  </div>\n  <div class=\"w-full flex justify-content-center mt-2 sumKey\">\n    <p class=\"text-md font-medium text-700\">\n      <span name=\"sumLabel\"> {{ sumKey | translate }}</span> : <span name=\"amountOfData\">{{ amountOfData}}</span>\n    </p>\n  </div>\n</ng-container>\n\n<div *ngIf=\"!this.data\" class=\"w-full flex justify-content-center\">\n  <p-message severity=\"info\" text=\"{{ 'OCX_DIAGRAM.NO_DATA' | translate }}\"></p-message>\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$1.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: i6$1.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "ariaLabel", "ariaLabelledBy", "data", "options"], outputs: ["onDataSelect"] }, { kind: "component", type: i7$3.UIMessage, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: DiagramComponent, isStandalone: false, selector: "ocx-diagram", inputs: { data: "data", sumKey: "sumKey", fillMissingColors: "fillMissingColors", diagramType: "diagramType", supportedDiagramTypes: "supportedDiagramTypes" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged", componentStateChanged: "componentStateChanged" }, usesOnChanges: true, ngImport: i0, template: "@if (this.data) {\n  @if (shownDiagramTypes.length > 1) {\n    <div class=\"flex justify-content-center pb-2\">\n      <p-selectbutton\n        [options]=\"shownDiagramTypes\"\n        [(ngModel)]=\"selectedDiagramType\"\n        optionLabel=\"id\"\n        (onChange)=\"onDiagramTypeChanged($event)\"\n        name=\"diagram-type-select-button\"\n        [allowEmpty]=\"false\"\n        >\n        <ng-template #item let-item>\n          <i\n            [class]=\"item.icon\"\n            [pTooltip]=\"item.tooltip || (item.tooltipKey | translate)\"\n            tooltipPosition=\"top\"\n            tooltipEvent=\"hover\"\n          ></i>\n          <label style=\"display: none\" id=\"{{item.id}}\"> {{item.label ? item.label : item.labelKey | translate}} </label>\n        </ng-template>\n      </p-selectbutton>\n    </div>\n  }\n  <div class=\"w-full flex justify-content-center\">\n    <p-chart\n      id=\"diagram\"\n      [type]=\"chartType\"\n      [data]=\"chartData\"\n      [responsive]=\"false\"\n      [options]=\"chartOptions\"\n      (onDataSelect)=\"dataClicked($event)\"\n      [ariaLabel]=\"(data ? 'OCX_DIAGRAM.ARIA_LABEL' : 'OCX_DIAGRAM.EMPTY_ARIA_LABEL') | translate: {total: generateTotal(data), valueString: generateDiagramValueString(data)}\"\n    ></p-chart>\n  </div>\n  <div class=\"w-full flex justify-content-center mt-2 sumKey\">\n    <p class=\"text-md font-medium text-700\">\n      <span name=\"sumLabel\"> {{ sumKey | translate }}</span> : <span name=\"amountOfData\">{{ amountOfData}}</span>\n    </p>\n  </div>\n}\n\n@if (!this.data) {\n  <div class=\"w-full flex justify-content-center\">\n    <p-message severity=\"info\" text=\"{{ 'OCX_DIAGRAM.NO_DATA' | translate }}\"></p-message>\n  </div>\n}\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"], dependencies: [{ kind: "component", type: i1$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: i2$3.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "ariaLabel", "ariaLabelledBy", "data", "options"], outputs: ["onDataSelect"] }, { kind: "component", type: i3$4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DiagramComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ocx-diagram', template: "<ng-container *ngIf=\"this.data\">\n  <div class=\"flex justify-content-center pb-2\" *ngIf=\"shownDiagramTypes.length > 1\">\n    <p-selectButton\n      [options]=\"shownDiagramTypes\"\n      [(ngModel)]=\"selectedDiagramType\"\n      optionLabel=\"id\"\n      (onChange)=\"onDiagramTypeChanged($event)\"\n      name=\"diagram-type-select-button\"\n    >\n      <ng-template let-item pTemplate>\n        <i\n          [class]=\"item.icon\"\n          [pTooltip]=\"item.tooltip || (item.tooltipKey | translate)\"\n          tooltipPosition=\"top\"\n          tooltipEvent=\"hover\"\n        ></i>\n        <label style=\"display: none\" id=\"{{item.id}}\"> {{item.label ? item.label : item.labelKey | translate}} </label>\n      </ng-template>\n    </p-selectButton>\n  </div>\n  <div class=\"w-full flex justify-content-center\">\n    <p-chart\n      id=\"diagram\"\n      [type]=\"chartType\"\n      [data]=\"chartData\"\n      [responsive]=\"false\"\n      [options]=\"chartOptions\"\n      (onDataSelect)=\"dataClicked($event)\"\n      [ariaLabel]=\"(data ? 'OCX_DIAGRAM.ARIA_LABEL' : 'OCX_DIAGRAM.EMPTY_ARIA_LABEL') | translate: {total: generateTotal(data), valueString: generateDiagramValueString(data)}\"\n    ></p-chart>\n  </div>\n  <div class=\"w-full flex justify-content-center mt-2 sumKey\">\n    <p class=\"text-md font-medium text-700\">\n      <span name=\"sumLabel\"> {{ sumKey | translate }}</span> : <span name=\"amountOfData\">{{ amountOfData}}</span>\n    </p>\n  </div>\n</ng-container>\n\n<div *ngIf=\"!this.data\" class=\"w-full flex justify-content-center\">\n  <p-message severity=\"info\" text=\"{{ 'OCX_DIAGRAM.NO_DATA' | translate }}\"></p-message>\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }], propDecorators: { data: [{
+            args: [{ standalone: false, selector: 'ocx-diagram', template: "@if (this.data) {\n  @if (shownDiagramTypes.length > 1) {\n    <div class=\"flex justify-content-center pb-2\">\n      <p-selectbutton\n        [options]=\"shownDiagramTypes\"\n        [(ngModel)]=\"selectedDiagramType\"\n        optionLabel=\"id\"\n        (onChange)=\"onDiagramTypeChanged($event)\"\n        name=\"diagram-type-select-button\"\n        [allowEmpty]=\"false\"\n        >\n        <ng-template #item let-item>\n          <i\n            [class]=\"item.icon\"\n            [pTooltip]=\"item.tooltip || (item.tooltipKey | translate)\"\n            tooltipPosition=\"top\"\n            tooltipEvent=\"hover\"\n          ></i>\n          <label style=\"display: none\" id=\"{{item.id}}\"> {{item.label ? item.label : item.labelKey | translate}} </label>\n        </ng-template>\n      </p-selectbutton>\n    </div>\n  }\n  <div class=\"w-full flex justify-content-center\">\n    <p-chart\n      id=\"diagram\"\n      [type]=\"chartType\"\n      [data]=\"chartData\"\n      [responsive]=\"false\"\n      [options]=\"chartOptions\"\n      (onDataSelect)=\"dataClicked($event)\"\n      [ariaLabel]=\"(data ? 'OCX_DIAGRAM.ARIA_LABEL' : 'OCX_DIAGRAM.EMPTY_ARIA_LABEL') | translate: {total: generateTotal(data), valueString: generateDiagramValueString(data)}\"\n    ></p-chart>\n  </div>\n  <div class=\"w-full flex justify-content-center mt-2 sumKey\">\n    <p class=\"text-md font-medium text-700\">\n      <span name=\"sumLabel\"> {{ sumKey | translate }}</span> : <span name=\"amountOfData\">{{ amountOfData}}</span>\n    </p>\n  </div>\n}\n\n@if (!this.data) {\n  <div class=\"w-full flex justify-content-center\">\n    <p-message severity=\"info\" text=\"{{ 'OCX_DIAGRAM.NO_DATA' | translate }}\"></p-message>\n  </div>\n}\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"] }]
+        }], propDecorators: { data: [{
                 type: Input
             }], sumKey: [{
                 type: Input
@@ -4093,7 +4354,7 @@ class FilterViewComponent {
             this.trigger?.focus();
         }
         else {
-            this.manageButton.focus();
+            this.manageButton.el.nativeElement.firstChild.focus();
         }
     }
     showPanel(event) {
@@ -4120,12 +4381,12 @@ class FilterViewComponent {
             [row['valueColumnId']]: row['value'],
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7.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$2.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$4.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: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: FilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: FilterViewComponent, isStandalone: false, 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: Popover, descendants: true }, { propertyName: "manageButton", first: true, predicate: ["manageButton"], descendants: true }, { propertyName: "defaultTemplates", predicate: PrimeTemplate, descendants: true }], ngImport: i0, template: "@if (columns$ | async; as columns) { @if (filters$ | async; as filters) {\n<div class=\"flex flex-wrap align-items-center gap-2\">\n  @if (displayMode === 'chips') {\n  <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n    @if (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    @if (filters.length <= 0) { @if (_fitlerViewNoSelection) {\n    <ng-container [ngTemplateOutlet]=\"_fitlerViewNoSelection\"> </ng-container>\n    } @else {\n    <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n    } } @if ((chipTemplates$ | async) ?? {}; as templates) { @for (filter of selectedFilters; track filter) { @if\n    (getColumnForFilter(filter, columns); as column) {\n    <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass\">\n      @if (_filterViewChipContent) {\n      <ng-container\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      } @else { @if (columns$ | async; as columns) {\n      <span style=\"white-space: nowrap\" class=\"p-chip-text flex flex-nowrap\"\n        >{{column?.nameKey ?? '' | translate }}:@if (filter.filterType === FilterType.EQUALS || !filter.filterType) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate\"\n          [ngTemplateOutletContext]=\"{\n                        templates: templates,\n                        filter: filter,\n                        column: column\n                      }\"\n        ></ng-container>\n        } @if (filter.filterType === FilterType.IS_NOT_EMPTY) {\n        <ng-container\n          [ngTemplateOutlet]=\"truthyTemplate\"\n          [ngTemplateOutletContext]=\"{\n                      value: filter.value\n                    }\"\n        ></ng-container>\n        }\n      </span>\n      } }\n    </p-chip>\n    } } @if (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      @if (_filterViewShowMoreChip) {\n      <ng-container\n        [ngTemplateOutlet]=\"_filterViewShowMoreChip\"\n        [ngTemplateOutletContext]=\"{\n            $implicit: filters.length - selectedFilters.length\n          }\"\n      >\n      </ng-container>\n      } @else {\n      <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n      }\n      <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n    </p-chip>\n    } } }\n  </ng-container>\n  } @else {\n  <ng-container [ngTemplateOutlet]=\"noChipsContent\"></ng-container>\n  }\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  <ng-template #filterTablePanel>\n    @if (tableTemplates$ | async; as templates) {\n    <p-popover #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              @if (getColumn(rowObject['valueColumnId'], columns); as valueColumn) { @if (!valueColumn.filterType ||\n              valueColumn.filterType === FilterType.EQUALS) {\n              <ng-container\n                [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n                [ngTemplateOutletContext]=\"{\n              rowObject: getRowForValueColumn(rowObject),\n              column: valueColumn\n            }\"\n              >\n              </ng-container>\n              } @if (valueColumn.filterType === FilterType.IS_NOT_EMPTY) {\n              <ng-container\n                [ngTemplateOutlet]=\"truthyTemplate\"\n                [ngTemplateOutletContext]=\"{\n        value: resolveFieldData(rowObject, column.id)\n      }\"\n              >\n              </ng-container>\n              } }\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-popover>\n    }\n  </ng-template>\n</div>\n} }\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n  @if (templates[column.id]; as template) {\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n            rowObject: getRowObjectFromFiterData(filter),\n            column: column\n          }\"\n  >\n  </ng-container>\n  }\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n  @if (value) { {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} } @if (!value) { {{'OCX_FILTER_VIEW.FILTER_NO' |\n  translate}} }\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);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$5.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i6.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { 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: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: FilterViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ocx-filter-view', 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);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}\n"] }]
+            args: [{ standalone: false, selector: 'ocx-filter-view', template: "@if (columns$ | async; as columns) { @if (filters$ | async; as filters) {\n<div class=\"flex flex-wrap align-items-center gap-2\">\n  @if (displayMode === 'chips') {\n  <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n    @if (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    @if (filters.length <= 0) { @if (_fitlerViewNoSelection) {\n    <ng-container [ngTemplateOutlet]=\"_fitlerViewNoSelection\"> </ng-container>\n    } @else {\n    <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n    } } @if ((chipTemplates$ | async) ?? {}; as templates) { @for (filter of selectedFilters; track filter) { @if\n    (getColumnForFilter(filter, columns); as column) {\n    <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass\">\n      @if (_filterViewChipContent) {\n      <ng-container\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      } @else { @if (columns$ | async; as columns) {\n      <span style=\"white-space: nowrap\" class=\"p-chip-text flex flex-nowrap\"\n        >{{column?.nameKey ?? '' | translate }}:@if (filter.filterType === FilterType.EQUALS || !filter.filterType) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate\"\n          [ngTemplateOutletContext]=\"{\n                        templates: templates,\n                        filter: filter,\n                        column: column\n                      }\"\n        ></ng-container>\n        } @if (filter.filterType === FilterType.IS_NOT_EMPTY) {\n        <ng-container\n          [ngTemplateOutlet]=\"truthyTemplate\"\n          [ngTemplateOutletContext]=\"{\n                      value: filter.value\n                    }\"\n        ></ng-container>\n        }\n      </span>\n      } }\n    </p-chip>\n    } } @if (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      @if (_filterViewShowMoreChip) {\n      <ng-container\n        [ngTemplateOutlet]=\"_filterViewShowMoreChip\"\n        [ngTemplateOutletContext]=\"{\n            $implicit: filters.length - selectedFilters.length\n          }\"\n      >\n      </ng-container>\n      } @else {\n      <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n      }\n      <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n    </p-chip>\n    } } }\n  </ng-container>\n  } @else {\n  <ng-container [ngTemplateOutlet]=\"noChipsContent\"></ng-container>\n  }\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  <ng-template #filterTablePanel>\n    @if (tableTemplates$ | async; as templates) {\n    <p-popover #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              @if (getColumn(rowObject['valueColumnId'], columns); as valueColumn) { @if (!valueColumn.filterType ||\n              valueColumn.filterType === FilterType.EQUALS) {\n              <ng-container\n                [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n                [ngTemplateOutletContext]=\"{\n              rowObject: getRowForValueColumn(rowObject),\n              column: valueColumn\n            }\"\n              >\n              </ng-container>\n              } @if (valueColumn.filterType === FilterType.IS_NOT_EMPTY) {\n              <ng-container\n                [ngTemplateOutlet]=\"truthyTemplate\"\n                [ngTemplateOutletContext]=\"{\n        value: resolveFieldData(rowObject, column.id)\n      }\"\n              >\n              </ng-container>\n              } }\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-popover>\n    }\n  </ng-template>\n</div>\n} }\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n  @if (templates[column.id]; as template) {\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n            rowObject: getRowObjectFromFiterData(filter),\n            column: column\n          }\"\n  >\n  </ng-container>\n  }\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n  @if (value) { {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} } @if (!value) { {{'OCX_FILTER_VIEW.FILTER_NO' |\n  translate}} }\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);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}\n"] }]
         }], propDecorators: { filters: [{
                 type: Input
             }], columns: [{
@@ -4146,7 +4407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }], panel: [{
                 type: ViewChild,
-                args: [OverlayPanel]
+                args: [Popover]
             }], manageButton: [{
                 type: ViewChild,
                 args: ['manageButton']
@@ -4158,6 +4419,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class GroupByCountDiagramComponent {
+    constructor() {
+        this.translateService = inject(TranslateService);
+        this.sumKey = 'SEARCH.SUMMARY_TITLE';
+        this.diagramType = "PIE" /* DiagramType.PIE */;
+        /**
+         * This property determines if diagram should generate the colors for the data that does not have any set.
+         *
+         * Setting this property to false will result in using the provided colors only if every data item has one. In the scenario where at least one item does not have a color set, diagram will generate all colors.
+         */
+        this.fillMissingColors = true;
+        this.supportedDiagramTypes = [];
+        this._data$ = new BehaviorSubject([]);
+        this._columnType$ = new BehaviorSubject(ColumnType.STRING);
+        this._columnField$ = new BehaviorSubject('');
+        this._colors$ = new BehaviorSubject({});
+        this.dataSelected = new EventEmitter();
+        this.diagramTypeChanged = new EventEmitter();
+        this.componentStateChanged = new EventEmitter();
+    }
     /**
      * @deprecated Will be replaced by diagramType
      */
@@ -4198,25 +4478,6 @@ class GroupByCountDiagramComponent {
     set colors(value) {
         this._colors$.next(value);
     }
-    constructor(translateService) {
-        this.translateService = translateService;
-        this.sumKey = 'SEARCH.SUMMARY_TITLE';
-        this.diagramType = "PIE" /* DiagramType.PIE */;
-        /**
-         * This property determines if diagram should generate the colors for the data that does not have any set.
-         *
-         * Setting this property to false will result in using the provided colors only if every data item has one. In the scenario where at least one item does not have a color set, diagram will generate all colors.
-         */
-        this.fillMissingColors = true;
-        this.supportedDiagramTypes = [];
-        this._data$ = new BehaviorSubject([]);
-        this._columnType$ = new BehaviorSubject(ColumnType.STRING);
-        this._columnField$ = new BehaviorSubject('');
-        this._colors$ = new BehaviorSubject({});
-        this.dataSelected = new EventEmitter();
-        this.diagramTypeChanged = new EventEmitter();
-        this.componentStateChanged = new EventEmitter();
-    }
     ngOnInit() {
         this.diagramData$ = combineLatest([this._data$, this._columnField$, this._columnType$, this._colors$]).pipe(mergeMap(([data, columnField, columnType, colors]) => {
             const columnData = data.map((d) => ObjectUtils.resolveFieldData(d, columnField));
@@ -4247,13 +4508,13 @@ class GroupByCountDiagramComponent {
             activeDiagramType: newDiagramType,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GroupByCountDiagramComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GroupByCountDiagramComponent, selector: "ocx-group-by-count-diagram", inputs: { sumKey: "sumKey", diagramType: "diagramType", fillMissingColors: "fillMissingColors", type: "type", supportedDiagramTypes: "supportedDiagramTypes", data: "data", columnType: "columnType", columnField: "columnField", column: "column", colors: "colors" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<ocx-diagram\n  [data]=\"(diagramData$ | async) || []\"\n  [fillMissingColors]=\"fillMissingColors\"\n  [sumKey]=\"sumKey\"\n  [diagramType]=\"diagramType\"\n  (onDataSelect)=\"dataClicked($event)\"\n  [supportedDiagramTypes]=\"supportedDiagramTypes\"\n  (diagramTypeChanged)=\"onDiagramTypeChanged($event)\"\n></ocx-diagram>\n", dependencies: [{ kind: "component", type: DiagramComponent, selector: "ocx-diagram", inputs: ["data", "sumKey", "fillMissingColors", "diagramType", "supportedDiagramTypes"], outputs: ["dataSelected", "diagramTypeChanged", "componentStateChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: GroupByCountDiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: GroupByCountDiagramComponent, isStandalone: false, selector: "ocx-group-by-count-diagram", inputs: { sumKey: "sumKey", diagramType: "diagramType", fillMissingColors: "fillMissingColors", type: "type", supportedDiagramTypes: "supportedDiagramTypes", data: "data", columnType: "columnType", columnField: "columnField", column: "column", colors: "colors" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<ocx-diagram\n  [data]=\"(diagramData$ | async) || []\"\n  [fillMissingColors]=\"fillMissingColors\"\n  [sumKey]=\"sumKey\"\n  [diagramType]=\"diagramType\"\n  (onDataSelect)=\"dataClicked($event)\"\n  [supportedDiagramTypes]=\"supportedDiagramTypes\"\n  (diagramTypeChanged)=\"onDiagramTypeChanged($event)\"\n></ocx-diagram>\n", dependencies: [{ kind: "component", type: DiagramComponent, selector: "ocx-diagram", inputs: ["data", "sumKey", "fillMissingColors", "diagramType", "supportedDiagramTypes"], outputs: ["dataSelected", "diagramTypeChanged", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GroupByCountDiagramComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: GroupByCountDiagramComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ocx-group-by-count-diagram', template: "<ocx-diagram\n  [data]=\"(diagramData$ | async) || []\"\n  [fillMissingColors]=\"fillMissingColors\"\n  [sumKey]=\"sumKey\"\n  [diagramType]=\"diagramType\"\n  (onDataSelect)=\"dataClicked($event)\"\n  [supportedDiagramTypes]=\"supportedDiagramTypes\"\n  (diagramTypeChanged)=\"onDiagramTypeChanged($event)\"\n></ocx-diagram>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }], propDecorators: { sumKey: [{
+            args: [{ standalone: false, selector: 'ocx-group-by-count-diagram', template: "<ocx-diagram\n  [data]=\"(diagramData$ | async) || []\"\n  [fillMissingColors]=\"fillMissingColors\"\n  [sumKey]=\"sumKey\"\n  [diagramType]=\"diagramType\"\n  (onDataSelect)=\"dataClicked($event)\"\n  [supportedDiagramTypes]=\"supportedDiagramTypes\"\n  (diagramTypeChanged)=\"onDiagramTypeChanged($event)\"\n></ocx-diagram>\n" }]
+        }], propDecorators: { sumKey: [{
                 type: Input
             }], diagramType: [{
                 type: Input
@@ -4412,8 +4673,8 @@ class InteractiveDataViewComponent {
     set data(value) {
         this._data = value;
     }
-    constructor(slotService) {
-        this.slotService = slotService;
+    constructor() {
+        this.slotService = inject(SlotService);
         this.columnGroupSelectionComponentState$ = new ReplaySubject(1);
         this.customGroupColumnSelectorComponentState$ = new ReplaySubject(1);
         this.dataLayoutComponentState$ = new ReplaySubject(1);
@@ -4437,6 +4698,9 @@ class InteractiveDataViewComponent {
             "NONE" /* DataSortDirection.NONE */,
         ];
         this.pageSizes = [10, 25, 50];
+        /**
+         * @deprecated
+         */
         this.showAllOption = false;
         this.layout = 'table';
         this.defaultGroupKey = '';
@@ -4758,13 +5022,13 @@ class InteractiveDataViewComponent {
         this.pageSize = event;
         this.pageSizeChanged.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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.13", 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]=\"_stringTableCell ? stringTableCell : undefined\"\n    [numberTableCellTemplate]=\"_numberTableCell ? numberTableCell : undefined\"\n    [customTableCellTemplate]=\"_customTableCell ? customTableCell : undefined\"\n    [dateTableCellTemplate]=\"_dateTableCell ? dateTableCell : _tableDateCell ? tableDateCell : undefined\"\n    [relativeDateTableCellTemplate]=\"_relativeDateTableCell ? relativeDateTableCell : _tableRelativeDateCell ? tableRelativeDateCell : undefined\"\n    [tableCellTemplate]=\"_tableCell ? tableCell : undefined\"\n    [translationKeyTableCellTemplate]=\"_translationKeyTableCell ? translationKeyTableCell : _tableTranslationKeyCell ? tableTranslationKeyCell : undefined\"\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    [tableFilterCellTemplate]=\"_tableFilterCell ? tableFilterCell : undefined\"\n    [dateTableFilterCellTemplate]=\"_dateTableFilterCell ? dateTableFilterCell : undefined\"\n    [customTableFilterCellTemplate]=\"_customTableFilterCell ? customTableFilterCell : undefined\"\n    [numberTableFilterCellTemplate]=\"_numberTableFilterCell ? numberTableFilterCell : undefined\"\n    [stringTableFilterCellTemplate]=\"_stringTableFilterCell ? stringTableFilterCell : undefined\"\n    [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateTableFilterCell : undefined\"\n    [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyTableFilterCell : undefined\"\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>\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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i9.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", "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: i4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InteractiveDataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: InteractiveDataViewComponent, isStandalone: false, 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", headerStyleClass: "headerStyleClass", contentStyleClass: "contentStyleClass", 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\" [ngClass]=\"headerStyleClass\" id=\"interactiveDataViewHeader\">\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      @if (!disableFilterView) {\n      <ocx-filter-view\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      }\n    </div>\n\n    @if (topCenter) {\n    <div>\n      <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n    </div>\n    } @if (layout !== 'table') {\n    <div 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\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      @if (isColumnGroupSelectionComponentDefined$ | async) { @if (displayedColumnKeys$ | async; as displayedColumnKeys)\n      {\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      } } @else {\n        <ng-container [ngTemplateOutlet]=\"defaultColumnGroupSelectionComponent\"></ng-container>\n      } @if (layout === 'table') {\n      <ocx-custom-group-column-selector\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      }\n    </div>\n  </div>\n</div>\n<div class=\"p-3\" [ngClass]=\"contentStyleClass\" id=\"interactiveDataViewContent\">\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    [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]=\"_stringTableCell ? stringTableCell : undefined\"\n    [numberTableCellTemplate]=\"_numberTableCell ? numberTableCell : undefined\"\n    [customTableCellTemplate]=\"_customTableCell ? customTableCell : undefined\"\n    [dateTableCellTemplate]=\"_dateTableCell ? dateTableCell : _tableDateCell ? tableDateCell : undefined\"\n    [relativeDateTableCellTemplate]=\"_relativeDateTableCell ? relativeDateTableCell : _tableRelativeDateCell ? tableRelativeDateCell : undefined\"\n    [tableCellTemplate]=\"_tableCell ? tableCell : undefined\"\n    [translationKeyTableCellTemplate]=\"_translationKeyTableCell ? translationKeyTableCell : _tableTranslationKeyCell ? tableTranslationKeyCell : undefined\"\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    [tableFilterCellTemplate]=\"_tableFilterCell ? tableFilterCell : undefined\"\n    [dateTableFilterCellTemplate]=\"_dateTableFilterCell ? dateTableFilterCell : undefined\"\n    [customTableFilterCellTemplate]=\"_customTableFilterCell ? customTableFilterCell : undefined\"\n    [numberTableFilterCellTemplate]=\"_numberTableFilterCell ? numberTableFilterCell : undefined\"\n    [stringTableFilterCellTemplate]=\"_stringTableFilterCell ? stringTableFilterCell : undefined\"\n    [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateTableFilterCell : undefined\"\n    [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyTableFilterCell : undefined\"\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  @if (layout === 'table') {\n  <ocx-column-group-selection\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  }\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_stringTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableDateCell) {\n  <ng-container [ngTemplateOutlet]=\"_tableDateCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableRelativeDateCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableCell) {\n  <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableTranslationKeyCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItemSubtitleLines let-item>\n  @if (_gridItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  @if (_listItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItem let-item>\n  @if (_gridItem) {\n  <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listItem let-item>\n  @if (_listItem) {\n  <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_listValue) {\n  <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberListValue) {\n  <ng-container [ngTemplateOutlet]=\"_numberListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_customListValue) {\n  <ng-container [ngTemplateOutlet]=\"_customListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringListValue) {\n  <ng-container [ngTemplateOutlet]=\"_stringListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateListValue) {\n  <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_customTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_customTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i5$1.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "slotStyles", "slotClasses", "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", "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: i1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InteractiveDataViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", 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]=\"_stringTableCell ? stringTableCell : undefined\"\n    [numberTableCellTemplate]=\"_numberTableCell ? numberTableCell : undefined\"\n    [customTableCellTemplate]=\"_customTableCell ? customTableCell : undefined\"\n    [dateTableCellTemplate]=\"_dateTableCell ? dateTableCell : _tableDateCell ? tableDateCell : undefined\"\n    [relativeDateTableCellTemplate]=\"_relativeDateTableCell ? relativeDateTableCell : _tableRelativeDateCell ? tableRelativeDateCell : undefined\"\n    [tableCellTemplate]=\"_tableCell ? tableCell : undefined\"\n    [translationKeyTableCellTemplate]=\"_translationKeyTableCell ? translationKeyTableCell : _tableTranslationKeyCell ? tableTranslationKeyCell : undefined\"\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    [tableFilterCellTemplate]=\"_tableFilterCell ? tableFilterCell : undefined\"\n    [dateTableFilterCellTemplate]=\"_dateTableFilterCell ? dateTableFilterCell : undefined\"\n    [customTableFilterCellTemplate]=\"_customTableFilterCell ? customTableFilterCell : undefined\"\n    [numberTableFilterCellTemplate]=\"_numberTableFilterCell ? numberTableFilterCell : undefined\"\n    [stringTableFilterCellTemplate]=\"_stringTableFilterCell ? stringTableFilterCell : undefined\"\n    [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateTableFilterCell : undefined\"\n    [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyTableFilterCell : undefined\"\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>\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: [{
+            args: [{ standalone: false, selector: 'ocx-interactive-data-view', providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], template: "<div class=\"p-3 border-bottom-1 surface-border\" [ngClass]=\"headerStyleClass\" id=\"interactiveDataViewHeader\">\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      @if (!disableFilterView) {\n      <ocx-filter-view\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      }\n    </div>\n\n    @if (topCenter) {\n    <div>\n      <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n    </div>\n    } @if (layout !== 'table') {\n    <div 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\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      @if (isColumnGroupSelectionComponentDefined$ | async) { @if (displayedColumnKeys$ | async; as displayedColumnKeys)\n      {\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      } } @else {\n        <ng-container [ngTemplateOutlet]=\"defaultColumnGroupSelectionComponent\"></ng-container>\n      } @if (layout === 'table') {\n      <ocx-custom-group-column-selector\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      }\n    </div>\n  </div>\n</div>\n<div class=\"p-3\" [ngClass]=\"contentStyleClass\" id=\"interactiveDataViewContent\">\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    [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]=\"_stringTableCell ? stringTableCell : undefined\"\n    [numberTableCellTemplate]=\"_numberTableCell ? numberTableCell : undefined\"\n    [customTableCellTemplate]=\"_customTableCell ? customTableCell : undefined\"\n    [dateTableCellTemplate]=\"_dateTableCell ? dateTableCell : _tableDateCell ? tableDateCell : undefined\"\n    [relativeDateTableCellTemplate]=\"_relativeDateTableCell ? relativeDateTableCell : _tableRelativeDateCell ? tableRelativeDateCell : undefined\"\n    [tableCellTemplate]=\"_tableCell ? tableCell : undefined\"\n    [translationKeyTableCellTemplate]=\"_translationKeyTableCell ? translationKeyTableCell : _tableTranslationKeyCell ? tableTranslationKeyCell : undefined\"\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    [tableFilterCellTemplate]=\"_tableFilterCell ? tableFilterCell : undefined\"\n    [dateTableFilterCellTemplate]=\"_dateTableFilterCell ? dateTableFilterCell : undefined\"\n    [customTableFilterCellTemplate]=\"_customTableFilterCell ? customTableFilterCell : undefined\"\n    [numberTableFilterCellTemplate]=\"_numberTableFilterCell ? numberTableFilterCell : undefined\"\n    [stringTableFilterCellTemplate]=\"_stringTableFilterCell ? stringTableFilterCell : undefined\"\n    [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateTableFilterCell : undefined\"\n    [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyTableFilterCell : undefined\"\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  @if (layout === 'table') {\n  <ocx-column-group-selection\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  }\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_stringTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableDateCell) {\n  <ng-container [ngTemplateOutlet]=\"_tableDateCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableRelativeDateCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableCell) {\n  <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableTranslationKeyCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItemSubtitleLines let-item>\n  @if (_gridItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  @if (_listItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItem let-item>\n  @if (_gridItem) {\n  <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listItem let-item>\n  @if (_listItem) {\n  <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_listValue) {\n  <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberListValue) {\n  <ng-container [ngTemplateOutlet]=\"_numberListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_customListValue) {\n  <ng-container [ngTemplateOutlet]=\"_customListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringListValue) {\n  <ng-container [ngTemplateOutlet]=\"_stringListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateListValue) {\n  <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_customTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_customTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n" }]
+        }], ctorParameters: () => [], propDecorators: { dataView: [{
                 type: ViewChild,
                 args: [DataViewComponent]
             }], searchConfigPermission: [{
@@ -4867,6 +5131,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], actionColumnPosition: [{
                 type: Input
+            }], headerStyleClass: [{
+                type: Input
+            }], contentStyleClass: [{
+                type: Input
             }], tableCell: [{
                 type: ContentChild,
                 args: ['tableCell']
@@ -4987,21 +5255,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+class LifecycleComponent {
+    constructor() {
+        this.steps = [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: LifecycleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: LifecycleComponent, isStandalone: false, selector: "ocx-lifecycle", inputs: { steps: "steps", activeStepId: "activeStepId" }, ngImport: i0, template: "<p-timeline [value]=\"steps\">\n  <ng-template pTemplate=\"marker\" let-step>\n    <span class=\"p-timeline-event-marker\" [ngClass]=\"activeStepId && activeStepId === step.id ? 'bg-primary' : ''\"></span>\n  </ng-template>\n  <ng-template pTemplate=\"content\" let-step>\n    <div class=\"pb-4 h-full\">\n      <div class=\"card h-full\" [ngClass]=\"activeStepId && activeStepId === step.id ? 'bg-primary' : ''\">\n        <p class=\"font-bold text-xl\" [ngClass]=\"step.details ? 'mb-2' : ''\">{{ step.title }}</p>\n        @if (step.details) {\n          <p [ngClass]=\"activeStepId && activeStepId === step.id ? '' : 'text-color-secondary'\">{{ step.details }}</p>\n        }\n      </div>\n    </div>\n  </ng-template>\n</p-timeline>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$6.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: LifecycleComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'ocx-lifecycle', template: "<p-timeline [value]=\"steps\">\n  <ng-template pTemplate=\"marker\" let-step>\n    <span class=\"p-timeline-event-marker\" [ngClass]=\"activeStepId && activeStepId === step.id ? 'bg-primary' : ''\"></span>\n  </ng-template>\n  <ng-template pTemplate=\"content\" let-step>\n    <div class=\"pb-4 h-full\">\n      <div class=\"card h-full\" [ngClass]=\"activeStepId && activeStepId === step.id ? 'bg-primary' : ''\">\n        <p class=\"font-bold text-xl\" [ngClass]=\"step.details ? 'mb-2' : ''\">{{ step.title }}</p>\n        @if (step.details) {\n          <p [ngClass]=\"activeStepId && activeStepId === step.id ? '' : 'text-color-secondary'\">{{ step.details }}</p>\n        }\n      </div>\n    </div>\n  </ng-template>\n</p-timeline>\n" }]
+        }], propDecorators: { steps: [{
+                type: Input
+            }], activeStepId: [{
+                type: Input
+            }] } });
+
 /**
  * Show this data not found page component if the main entity of a page could not be loaded.
  */
 class DataLoadingErrorComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataLoadingErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DataLoadingErrorComponent, selector: "ocx-data-loading-error", ngImport: i0, template: `<div class="p-4">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DataLoadingErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: DataLoadingErrorComponent, isStandalone: false, selector: "ocx-data-loading-error", ngImport: i0, template: `<div class="p-4">
     <h1>{{ 'OCX_DATA_LOADING_ERROR.TITLE' | translate }}</h1>
     <div style="white-space: pre-line">
       {{ 'OCX_DATA_LOADING_ERROR.MESSAGE' | translate }}
     </div>
-  </div> `, isInline: true, dependencies: [{ kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+  </div> `, isInline: true, dependencies: [{ kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataLoadingErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DataLoadingErrorComponent, decorators: [{
             type: Component,
             args: [{
+                    standalone: false,
                     selector: 'ocx-data-loading-error',
                     template: `<div class="p-4">
     <h1>{{ 'OCX_DATA_LOADING_ERROR.TITLE' | translate }}</h1>
@@ -5012,6 +5297,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+class TranslationConnectionService {
+    constructor() {
+        const userService = inject(UserService);
+        const translateService = inject(TranslateService);
+        this.languageSub = userService.lang$.subscribe((lang) => translateService.use(lang));
+    }
+    ngOnDestroy() {
+        this.languageSub.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TranslationConnectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TranslationConnectionService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TranslationConnectionService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 // This topic is defined here and not in integration-interface, because
 // it is not used as framework independent integration but for improving
 // angular specific things
@@ -5044,20 +5345,20 @@ class TranslationCacheService {
             this.translationTopic$.publish(url);
         }), map(() => window['onecxTranslations'][url]), first());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TranslationCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TranslationCacheService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TranslationCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TranslationCacheService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TranslationCacheService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TranslationCacheService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
 class AngularAcceleratorPrimeNgModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularAcceleratorPrimeNgModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AngularAcceleratorPrimeNgModule, imports: [BreadcrumbModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AngularAcceleratorPrimeNgModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: AngularAcceleratorPrimeNgModule, imports: [BreadcrumbModule,
             ChipModule,
             CheckboxModule,
-            DropdownModule,
+            SelectModule,
             ButtonModule,
             DialogModule,
             PickListModule,
@@ -5070,12 +5371,14 @@ class AngularAcceleratorPrimeNgModule {
             SkeletonModule,
             MessageModule,
             FloatLabelModule,
-            OverlayPanelModule,
+            PopoverModule,
             FocusTrapModule,
+            TooltipModule,
+            TimelineModule,
             SharedModule], exports: [BreadcrumbModule,
             ChipModule,
             CheckboxModule,
-            DropdownModule,
+            SelectModule,
             ButtonModule,
             DialogModule,
             PickListModule,
@@ -5088,13 +5391,15 @@ class AngularAcceleratorPrimeNgModule {
             SkeletonModule,
             MessageModule,
             FloatLabelModule,
-            OverlayPanelModule,
+            PopoverModule,
             FocusTrapModule,
+            TooltipModule,
+            TimelineModule,
             SharedModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularAcceleratorPrimeNgModule, imports: [BreadcrumbModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AngularAcceleratorPrimeNgModule, providers: [providePrimeNG()], imports: [BreadcrumbModule,
             ChipModule,
             CheckboxModule,
-            DropdownModule,
+            SelectModule,
             ButtonModule,
             DialogModule,
             PickListModule,
@@ -5107,12 +5412,14 @@ class AngularAcceleratorPrimeNgModule {
             SkeletonModule,
             MessageModule,
             FloatLabelModule,
-            OverlayPanelModule,
+            PopoverModule,
             FocusTrapModule,
+            TooltipModule,
+            TimelineModule,
             SharedModule, BreadcrumbModule,
             ChipModule,
             CheckboxModule,
-            DropdownModule,
+            SelectModule,
             ButtonModule,
             DialogModule,
             PickListModule,
@@ -5125,18 +5432,20 @@ class AngularAcceleratorPrimeNgModule {
             SkeletonModule,
             MessageModule,
             FloatLabelModule,
-            OverlayPanelModule,
+            PopoverModule,
             FocusTrapModule,
+            TooltipModule,
+            TimelineModule,
             SharedModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularAcceleratorPrimeNgModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AngularAcceleratorPrimeNgModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         BreadcrumbModule,
                         ChipModule,
                         CheckboxModule,
-                        DropdownModule,
+                        SelectModule,
                         ButtonModule,
                         DialogModule,
                         PickListModule,
@@ -5149,15 +5458,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SkeletonModule,
                         MessageModule,
                         FloatLabelModule,
-                        OverlayPanelModule,
+                        PopoverModule,
                         FocusTrapModule,
+                        TooltipModule,
+                        TimelineModule,
                         SharedModule,
                     ],
                     exports: [
                         BreadcrumbModule,
                         ChipModule,
                         CheckboxModule,
-                        DropdownModule,
+                        SelectModule,
                         ButtonModule,
                         DialogModule,
                         PickListModule,
@@ -5170,10 +5481,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SkeletonModule,
                         MessageModule,
                         FloatLabelModule,
-                        OverlayPanelModule,
+                        PopoverModule,
                         FocusTrapModule,
+                        TooltipModule,
+                        TimelineModule,
                         SharedModule,
                     ],
+                    providers: [providePrimeNG()],
                 }]
         }] });
 
@@ -5198,6 +5512,19 @@ class DynamicLocaleId {
     }
 }
 
+function provideTranslationConnectionService() {
+    return [
+        {
+            provide: ENVIRONMENT_INITIALIZER,
+            multi: true,
+            useFactory() {
+                return () => inject(TranslationConnectionService);
+            },
+        },
+        TranslationConnectionService,
+    ];
+}
+
 class AngularAcceleratorMissingTranslationHandler {
     handle(params) {
         console.log(`Missing translation for ${params.key}`, params);
@@ -5210,8 +5537,8 @@ function appInitializer(userService) {
     };
 }
 class AngularAcceleratorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularAcceleratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AngularAcceleratorModule, declarations: [ColumnGroupSelectionComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AngularAcceleratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: AngularAcceleratorModule, declarations: [ColumnGroupSelectionComponent,
             CustomGroupColumnSelectorComponent,
             DataLayoutSelectionComponent,
             DataListGridSortingComponent,
@@ -5219,19 +5546,25 @@ class AngularAcceleratorModule {
             DataTableComponent,
             DataViewComponent,
             InteractiveDataViewComponent,
+            LifecycleComponent,
             PageHeaderComponent,
             DynamicPipe,
             SearchHeaderComponent,
             DiagramComponent,
             GroupByCountDiagramComponent,
             DataLoadingErrorComponent,
+            OcxContentComponent,
+            OcxContentContainerComponent,
             IfPermissionDirective,
             IfBreakpointDirective,
             SrcDirective,
             OcxTimeAgoPipe,
             AdvancedDirective,
             TooltipOnOverflowDirective,
-            FilterViewComponent], imports: [CommonModule,
+            FilterViewComponent,
+            TemplateDirective,
+            OcxContentDirective,
+            OcxContentContainerDirective], imports: [CommonModule,
             AngularAcceleratorPrimeNgModule,
             AngularRemoteComponentsModule,
             TranslateModule,
@@ -5245,19 +5578,25 @@ class AngularAcceleratorModule {
             DataTableComponent,
             DataViewComponent,
             InteractiveDataViewComponent,
+            LifecycleComponent,
             PageHeaderComponent,
             SearchHeaderComponent,
             DiagramComponent,
             GroupByCountDiagramComponent,
             DataLoadingErrorComponent,
+            OcxContentComponent,
+            OcxContentContainerComponent,
             IfPermissionDirective,
             IfBreakpointDirective,
             SrcDirective,
             OcxTimeAgoPipe,
             AdvancedDirective,
             TooltipOnOverflowDirective,
-            FilterViewComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularAcceleratorModule, providers: [
+            FilterViewComponent,
+            TemplateDirective,
+            OcxContentDirective,
+            OcxContentContainerDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AngularAcceleratorModule, providers: [
             providePermissionChecker(),
             {
                 provide: LOCALE_ID,
@@ -5273,14 +5612,15 @@ class AngularAcceleratorModule {
             {
                 provide: TRANSLATION_PATH,
                 useValue: './onecx-angular-accelerator/assets/i18n/',
-                multi: true
+                multi: true,
             },
             {
                 provide: TRANSLATION_PATH,
                 useValue: './onecx-angular-accelerator/assets/i18n/primeng/',
-                multi: true
+                multi: true,
             },
             AppConfigService,
+            provideTranslationConnectionService(),
         ], imports: [CommonModule,
             AngularAcceleratorPrimeNgModule,
             AngularRemoteComponentsModule,
@@ -5289,7 +5629,7 @@ class AngularAcceleratorModule {
             RouterModule,
             ReactiveFormsModule, AngularRemoteComponentsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularAcceleratorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AngularAcceleratorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -5310,12 +5650,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         DataTableComponent,
                         DataViewComponent,
                         InteractiveDataViewComponent,
+                        LifecycleComponent,
                         PageHeaderComponent,
                         DynamicPipe,
                         SearchHeaderComponent,
                         DiagramComponent,
                         GroupByCountDiagramComponent,
                         DataLoadingErrorComponent,
+                        OcxContentComponent,
+                        OcxContentContainerComponent,
                         IfPermissionDirective,
                         IfBreakpointDirective,
                         SrcDirective,
@@ -5323,6 +5666,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         AdvancedDirective,
                         TooltipOnOverflowDirective,
                         FilterViewComponent,
+                        TemplateDirective,
+                        OcxContentDirective,
+                        OcxContentContainerDirective,
                     ],
                     providers: [
                         providePermissionChecker(),
@@ -5340,14 +5686,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         {
                             provide: TRANSLATION_PATH,
                             useValue: './onecx-angular-accelerator/assets/i18n/',
-                            multi: true
+                            multi: true,
                         },
                         {
                             provide: TRANSLATION_PATH,
                             useValue: './onecx-angular-accelerator/assets/i18n/primeng/',
-                            multi: true
+                            multi: true,
                         },
                         AppConfigService,
+                        provideTranslationConnectionService(),
                     ],
                     exports: [
                         AngularRemoteComponentsModule,
@@ -5358,11 +5705,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         DataTableComponent,
                         DataViewComponent,
                         InteractiveDataViewComponent,
+                        LifecycleComponent,
                         PageHeaderComponent,
                         SearchHeaderComponent,
                         DiagramComponent,
                         GroupByCountDiagramComponent,
                         DataLoadingErrorComponent,
+                        OcxContentComponent,
+                        OcxContentContainerComponent,
                         IfPermissionDirective,
                         IfBreakpointDirective,
                         SrcDirective,
@@ -5370,6 +5720,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         AdvancedDirective,
                         TooltipOnOverflowDirective,
                         FilterViewComponent,
+                        TemplateDirective,
+                        OcxContentDirective,
+                        OcxContentContainerDirective,
                     ],
                 }]
         }] });
@@ -5412,6 +5765,87 @@ class CachingTranslateLoader {
     }
 }
 
+/* eslint-disable @typescript-eslint/no-unused-vars */
+class DataOperationStrategy {
+    endsWith(column, value, target) {
+        console.error('endsWith method not implemented');
+        return true;
+    }
+    startsWith(column, value, target) {
+        console.error('startsWith method not implemented');
+        return true;
+    }
+    contains(column, value, target) {
+        console.error('contains method not implemented');
+        return true;
+    }
+    notContains(column, value, target) {
+        console.error('notContains method not implemented');
+        return true;
+    }
+    equals(column, value, target) {
+        console.error('equals method not implemented');
+        return true;
+    }
+    notEquals(column, value, target) {
+        console.error('notEquals method not implemented');
+        return true;
+    }
+    lessThan(column, value, target) {
+        console.error('lessThan method not implemented');
+        return true;
+    }
+    greaterThan(column, value, target) {
+        console.error('greaterThan method not implemented');
+        return true;
+    }
+    lessThanOrEqual(column, value, target) {
+        console.error('lessThanOrEqual method not implemented');
+        return true;
+    }
+    greaterThanOrEqual(column, value, target) {
+        console.error('greaterThanOrEqual method not implemented');
+        return true;
+    }
+    isEmpty(column, value) {
+        console.error('isEmpty method not implemented');
+        return true;
+    }
+    isNotEmpty(column, value) {
+        console.error('isNotEmpty method not implemented');
+        return true;
+    }
+    compare(a, b, column) {
+        console.error('compare method not implemented');
+        return 0;
+    }
+    filterOptions(hayStack, filterObject, columns) {
+        const hayStackOptions = hayStack.map((item) => this.mapHaystackItemToValue(item, filterObject));
+        const column = columns.find((c) => c.id === filterObject.columnId);
+        if (!column) {
+            console.warn('Filter does not have a column id set. All items will be considered a valid option');
+            return hayStackOptions;
+        }
+        return hayStackOptions.filter((item, index, self) => index === self.findIndex((t) => this.compare(t, item, column) === 0));
+    }
+    filter(hayStack, filter, columns) {
+        const { filterType, value } = filter;
+        if (!filterType) {
+            console.warn('Filter does not have a type set. All items will resolve as true');
+            return hayStack;
+        }
+        const column = columns.find((c) => c.id === filter.columnId);
+        if (!column) {
+            console.warn('Filter does not have a column id set. All items will be considered a valid option');
+            return hayStack;
+        }
+        return hayStack.filter((item) => this[filterType](column, this.mapHaystackItemToValue(item, filter), value));
+    }
+    mapHaystackItemToValue(item, filter) {
+        return ObjectUtils.resolveFieldData(item, filter.columnId);
+    }
+}
+
 /**
  * @deprecated Please import from `@onecx/angular-utils` instead.
  */
@@ -5477,8 +5911,8 @@ function createTranslateLoader(http, appStateService, translationCacheService) {
 }
 
 class DateUtils {
-    constructor(locale) {
-        this.locale = locale;
+    constructor() {
+        this.locale = inject(LOCALE_ID);
         this.options = {
             month: 'short',
             day: '2-digit',
@@ -5493,18 +5927,15 @@ class DateUtils {
             ? new Intl.DateTimeFormat(this.locale, this.options).format(date instanceof Date ? date : new Date(date))
             : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateUtils, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateUtils, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateUtils, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateUtils, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DateUtils, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }] });
+        }] });
 /**
  * @deprecated Will be removed. Please use isValidDate() from @onecx/accelerator
  */
@@ -5543,24 +5974,24 @@ function enumToDropdownOptions(translateService, enumType, translationKeyPrefix)
     }))));
 }
 
-function _hasShowTime(calendars, formKey) {
-    return (calendars.find((c) => {
-        return c.name === formKey;
+function _hasShowTime(datePickers, formKey) {
+    return (datePickers.find((d) => {
+        return d.name === formKey;
     })?.showTime === true);
 }
 /**
  * Safely builds the search criteria based on form values
  * @param formRawValue the raw value of the form to use
- * @param calendars a list of primeng calendars of the form (use `@ViewChildren(Calendar) calendars!: QueryList<Calendar>;`)
+ * @param datePickers a list of primeng datePickers of the form (use `@ViewChildren(DatePicker) datePickers!: QueryList<DatePicker>;`)
  * @param parameters {@link BuildSearchCriteriaParameters}  to use when building the search criteria
  * @returns the search criteria as a partial of T (T = type of the search criteria)
  */
-function buildSearchCriteria(formRawValue, calendars, { removeNullValues = false }) {
+function buildSearchCriteria(formRawValue, datePickers, { removeNullValues = false }) {
     return Object.entries(formRawValue).reduce((acc, [key, value]) => {
         if (value == null && removeNullValues) {
             return acc;
         }
-        if (isValidDate$1(value) && !_hasShowTime(calendars, key)) {
+        if (isValidDate$1(value) && !_hasShowTime(datePickers, key)) {
             value = getUTCDateWithoutTimezoneIssues(value);
         }
         return {
@@ -5598,5 +6029,5 @@ function searchPrefixWithSpecialChars(strings, prefix) {
  * Generated bundle index. Do not edit.
  */
 
-export { AdvancedDirective, AngularAcceleratorMissingTranslationHandler, AngularAcceleratorModule, AngularAcceleratorPrimeNgModule, AsyncTranslateLoader, BreadcrumbService, CachingTranslateLoader, ColorUtils, ColumnGroupSelectionComponent, ColumnType, CustomGroupColumnSelectorComponent, DataLayoutSelectionComponent, DataListGridComponent, DataListGridSortingComponent, DataLoadingErrorComponent, DataTableComponent, DataViewComponent, DateUtils, DiagramComponent, DynamicPipe, FilterType, FilterViewComponent, GroupByCountDiagramComponent, IfBreakpointDirective, IfPermissionDirective, InteractiveDataViewComponent, ObjectUtils, OcxTimeAgoPipe, PageHeaderComponent, SearchHeaderComponent, SrcDirective, TemplateType, TooltipOnOverflowDirective, TranslateCombinedLoader, TranslationCacheService, atLeastOneFieldFilledValidator, buildSearchCriteria, createRemoteComponentAndMfeTranslateLoader, createRemoteComponentTranslateLoader, createTranslateLoader, enumToDropdownOptions, findEntryWithKeyword, findTemplate, flattenObject, isValidDate, limit, removeKeyword, searchPrefixWithSpecialChars };
+export { AdvancedDirective, AngularAcceleratorMissingTranslationHandler, AngularAcceleratorModule, AngularAcceleratorPrimeNgModule, AsyncTranslateLoader, BreadcrumbService, CachingTranslateLoader, ColorUtils, ColumnGroupSelectionComponent, ColumnType, CustomGroupColumnSelectorComponent, DataLayoutSelectionComponent, DataListGridComponent, DataListGridSortingComponent, DataLoadingErrorComponent, DataOperationStrategy, DataTableComponent, DataViewComponent, DateUtils, DiagramComponent, DynamicPipe, FilterType, FilterViewComponent, GroupByCountDiagramComponent, IfBreakpointDirective, IfPermissionDirective, InteractiveDataViewComponent, LifecycleComponent, ObjectUtils, OcxContentComponent, OcxContentContainerComponent, OcxContentContainerDirective, OcxContentDirective, OcxTimeAgoPipe, PageHeaderComponent, SearchHeaderComponent, SrcDirective, TemplateDirective, TemplateType, TooltipOnOverflowDirective, TranslateCombinedLoader, TranslationCacheService, TranslationConnectionService, atLeastOneFieldFilledValidator, buildSearchCriteria, createRemoteComponentAndMfeTranslateLoader, createRemoteComponentTranslateLoader, createTranslateLoader, enumToDropdownOptions, findEntryWithKeyword, findTemplate, flattenObject, isValidDate, limit, removeKeyword, searchPrefixWithSpecialChars };
 //# sourceMappingURL=onecx-angular-accelerator.mjs.map