@onecx/angular-accelerator 5.48.0 → 5.48.2

package/fesm2022/onecx-angular-accelerator.mjs

@@ -4,10 +4,11 @@ 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 { BehaviorSubject, of, map, filter, concat, switchMap as switchMap$1, combineLatest, startWith, debounceTime, mergeMap, first, withLatestFrom, ReplaySubject, timestamp, distinctUntilChanged, tap, firstValueFrom, skip, defaultIfEmpty, forkJoin, catchError } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
 import * as i5$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 { 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';
@@ -68,51 +69,55 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
  */
 
 class IfPermissionDirective {
+    set permission(value) {
+        this.permissionSubject$.next(value);
+    }
     set notPermission(value) {
-        this.permission = value;
+        this.permissionSubject$.next(value);
         this.negate = true;
     }
+    set ocxIfNotPermissionOnMissingPermission(value) {
+        this.ocxIfPermissionOnMissingPermission = value;
+    }
     set ocxIfNotPermissionPermissions(value) {
         this.ocxIfPermissionPermissions = value;
     }
     set ocxIfNotPermissionElseTemplate(value) {
         this.ocxIfPermissionElseTemplate = value;
     }
-    constructor(renderer, el, viewContainer, hasPermissionChecker, templateRef, userService) {
+    constructor(renderer, viewContainer, hasPermissionChecker, templateRef, userService) {
         this.renderer = renderer;
-        this.el = el;
         this.viewContainer = viewContainer;
         this.hasPermissionChecker = hasPermissionChecker;
         this.templateRef = templateRef;
         this.userService = userService;
+        this.ocxIfPermissionOnMissingPermission = 'hide';
         this.onMissingPermission = 'hide';
+        this.permissionSubject$ = new BehaviorSubject(undefined);
+        this.isDisabled = false;
         this.negate = false;
-        if (!(hasPermissionChecker || userService)) {
+        const validChecker = hasPermissionChecker || userService;
+        if (!validChecker) {
             throw 'IfPermission requires UserService or HasPermissionChecker to be provided!';
         }
-        this.permissionChecker = hasPermissionChecker ?? userService;
+        this.permissionChecker = validChecker;
     }
     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');
-                }
-                else {
-                    this.viewContainer.clear();
-                }
+        this.permissionSubject$
+            .pipe(switchMap((permission) => {
+            if (!permission) {
+                return of(false);
             }
-        }
-        else {
-            if (this.templateRef) {
-                this.viewContainer.createEmbeddedView(this.templateRef);
+            const permissionsArray = Array.isArray(permission) ? permission : [permission];
+            return this.hasPermission(permissionsArray);
+        }))
+            .subscribe((hasPermission) => {
+            const shouldShowTemplate = this.negate ? !hasPermission : hasPermission;
+            if (shouldShowTemplate) {
+                return this.showTemplateOrClear();
             }
-        }
+            return this.showElseTemplateOrDefaultView();
+        });
     }
     hasPermission(permission) {
         if (this.ocxIfPermissionPermissions) {
@@ -120,17 +125,56 @@ class IfPermissionDirective {
             if (!result) {
                 console.log('👮‍♀️ No permission in overwrites for: `', permission);
             }
-            return result;
+            return of(result);
+        }
+        if (this.permissionChecker.getPermissions) {
+            return this.permissionChecker.getPermissions().pipe(switchMap((permissions) => {
+                const result = permission.every((p) => permissions.includes(p));
+                if (!result) {
+                    console.log('👮‍♀️ No permission from permission checker for: `', permission);
+                }
+                return of(result);
+            }));
+        }
+        return of(this.permissionChecker.hasPermission(permission));
+    }
+    showTemplateOrClear() {
+        this.resetView();
+        if (this.templateRef) {
+            this.directiveContentRef = this.viewContainer.createEmbeddedView(this.templateRef);
+        }
+    }
+    showElseTemplateOrDefaultView() {
+        this.resetView();
+        if (this.ocxIfPermissionElseTemplate) {
+            this.viewContainer.createEmbeddedView(this.ocxIfPermissionElseTemplate);
+            return;
+        }
+        if (this.ocxIfPermissionOnMissingPermission === 'disable' && this.templateRef) {
+            this.directiveContentRef = this.viewContainer.createEmbeddedView(this.templateRef);
+            const el = this.getElement();
+            el && this.renderer.setAttribute(el, 'disabled', 'disabled');
+            this.isDisabled = true;
         }
-        return permission.every((p) => this.permissionChecker?.hasPermission(p));
     }
-    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 }); }
+    resetView() {
+        this.viewContainer.clear();
+        if (this.isDisabled) {
+            this.isDisabled = false;
+            const el = this.getElement();
+            el && this.renderer.removeAttribute(el, 'disabled');
+        }
+    }
+    getElement() {
+        return this.directiveContentRef?.rootNodes[0];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IfPermissionDirective, deps: [{ token: i0.Renderer2 }, { 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"], ocxIfPermissionOnMissingPermission: "ocxIfPermissionOnMissingPermission", ocxIfNotPermissionOnMissingPermission: "ocxIfNotPermissionOnMissingPermission", 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: [{
             type: Directive,
             args: [{ selector: '[ocxIfPermission], [ocxIfNotPermission]' }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -145,6 +189,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], notPermission: [{
                 type: Input,
                 args: ['ocxIfNotPermission']
+            }], ocxIfPermissionOnMissingPermission: [{
+                type: Input
+            }], ocxIfNotPermissionOnMissingPermission: [{
+                type: Input
             }], onMissingPermission: [{
                 type: Input
             }], ocxIfPermissionPermissions: [{
@@ -437,25 +485,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class PageHeaderComponent {
     get actions() {
-        return this._actions;
+        return this._actions.getValue();
     }
     set actions(value) {
-        this._actions = value;
-        this.generateInlineActions();
-        this.generateOverflowActions();
+        this._actions.next(value);
     }
-    constructor(breadcrumbs, translateService, appStateService, userService) {
+    constructor(breadcrumbs, translateService, appStateService, userService, hasPermissionChecker) {
         this.translateService = translateService;
         this.appStateService = appStateService;
         this.userService = userService;
+        this.hasPermissionChecker = hasPermissionChecker;
         this.loading = false;
         this.figureBackground = true;
         this.showFigure = true;
         this.disableDefaultActions = false;
+        this._actions = new BehaviorSubject([]);
         this.showBreadcrumbs = true;
         this.manualBreadcrumbs = false;
         this.save = new EventEmitter();
-        this.overflowActions = [];
+        this.overflowActions$ = new BehaviorSubject([]);
+        this.inlineActions$ = new BehaviorSubject([]);
         this.dd = new Date();
         this.figureImageLoadError = false;
         this.objectPanelGridLayoutClasses = 'grid row-gap-2 m-0';
@@ -472,12 +521,16 @@ class PageHeaderComponent {
             },
             page: portal.portalName,
         }))));
-    }
-    ngOnChanges(changes) {
-        if (changes['actions']) {
-            this.generateInlineActions();
-            this.generateOverflowActions();
-        }
+        this._actions
+            .pipe(map(this.filterInlineActions), switchMap$1((actions) => this.filterActionsBasedOnPermissions(actions)))
+            .subscribe(this.inlineActions$);
+        this._actions
+            .pipe(map(this.filterOverflowActions), switchMap$1((actions) => {
+            return this.getActionTranslationKeys(actions).pipe(map((translations) => ({ actions, translations })));
+        }), switchMap$1(({ actions, translations }) => {
+            return this.filterActionsBasedOnPermissions(actions).pipe(map((filteredActions) => ({ filteredActions, translations })));
+        }), map(({ filteredActions, translations }) => this.mapOverflowActionsToMenuItems(filteredActions, translations)))
+            .subscribe(this.overflowActions$);
     }
     ngOnInit() {
         if (!this.manualBreadcrumbs) {
@@ -486,8 +539,6 @@ class PageHeaderComponent {
         else {
             this.breadcrumbs$ = this.breadcrumbs.itemsHandler;
         }
-        this.generateInlineActions();
-        this.generateOverflowActions();
     }
     onAction(action) {
         switch (action) {
@@ -527,98 +578,69 @@ class PageHeaderComponent {
         }
         return this.objectInfoDefaultLayoutClasses;
     }
-    /**
-     * Generates a list of actions that should be rendered in an overflow menu
-     */
-    generateOverflowActions() {
-        if (this.actions) {
-            const translationKeys = [
-                ...this.actions.map((a) => a.labelKey || '').filter((a) => !!a),
-                ...this.actions.map((a) => a.titleKey || '').filter((a) => !!a),
-            ];
-            const translations$ = translationKeys.length ? this.translateService.get(translationKeys) : of([]);
-            translations$.subscribe((translations) => {
-                const allowedActions = [];
-                if (this.actions) {
-                    this.actions
-                        .filter((a) => a.show === 'asOverflow')
-                        .filter((a) => {
-                        if (a.conditional) {
-                            if (a.showCondition)
-                                return a;
-                            return null;
-                        }
-                        else
-                            return a;
-                    })
-                        .forEach((action) => {
-                        this.checkActionPermission(allowedActions, action);
-                    });
-                    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,
-                        })),
-                    ];
-                }
-            });
-        }
+    filterInlineActions(actions) {
+        return actions
+            .filter((a) => a.show === 'always')
+            .filter((a) => {
+            if (a.conditional) {
+                return a.showCondition;
+            }
+            return true;
+        });
     }
-    /**
-     * Generates a list of actions that should be rendered as inline buttons
-     */
-    generateInlineActions() {
-        if (this.actions) {
-            // Temp array to hold all inline actions that should be visible to the current user
-            const allowedActions = [];
-            // Check permissions for all actions that should be rendered 'always'
-            this.actions
-                .filter((a) => a.show === 'always')
-                .filter((a) => {
-                if (a.conditional) {
-                    return a.showCondition ? a : null;
+    filterOverflowActions(actions) {
+        return actions
+            .filter((a) => a.show === 'asOverflow')
+            .filter((a) => {
+            if (a.conditional) {
+                return a.showCondition;
+            }
+            return true;
+        });
+    }
+    filterActionsBasedOnPermissions(actions) {
+        const getPermissions = this.hasPermissionChecker?.getPermissions?.bind(this.hasPermissionChecker) ||
+            this.userService.getPermissions.bind(this.userService);
+        return getPermissions().pipe(map((permissions) => {
+            return actions.filter((action) => {
+                if (action.permission) {
+                    return permissions.includes(action.permission);
                 }
-                else
-                    return a;
-            })
-                .forEach((action) => {
-                this.checkActionPermission(allowedActions, action);
+                return true;
             });
-            this.inlineActions = [...allowedActions];
-        }
+        }));
     }
-    /**
-     * Adds a given action to a given array if the current user is allowed to see it
-     * @param allowedActions Array that the action should be added to if the current user is allowed to see it
-     * @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
-                allowedActions.push(action);
-            }
-        }
-        else {
-            // Push action to allowed array if no permission was specified
-            allowedActions.push(action);
-        }
+    getActionTranslationKeys(actions) {
+        const translationKeys = [
+            ...actions.map((a) => a.labelKey || '').filter((a) => !!a),
+            ...actions.map((a) => a.titleKey || '').filter((a) => !!a),
+        ];
+        return translationKeys.length ? this.translateService.get(translationKeys) : of({});
+    }
+    mapOverflowActionsToMenuItems(actions, translations) {
+        return actions.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,
+        }));
     }
-    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    >\n      <ng-template pTemplate=\"separator\"> <span class=\"pi pi-chevron-right\" aria-hidden=\"true\"></span> </ng-template\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]=\"'OCX_PAGE_HEADER.IMAGE' | translate\"\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      <section class=\"header\" *ngIf=\"!loading; else skeletonBar\" [attr.aria-label]=\"'Page Header'\">\n        <h1 id=\"page-header\" *ngIf=\"!!header\">{{ header }}</h1>\n        <div id=\"page-subheader\" *ngIf=\"!!subheader\" role=\"note\">{{ subheader }}</div>\n      </section>\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              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              [pTooltip]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n              tooltipEvent=\"hover\"\n              tooltipPosition=\"top\"\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: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i4$1.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.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i10.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: "18.2.13", ngImport: i0, type: PageHeaderComponent, deps: [{ token: BreadcrumbService }, { token: i1$2.TranslateService }, { token: i3.AppStateService }, { token: i3.UserService }, { token: HAS_PERMISSION_CHECKER }], 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 }], 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    >\n      <ng-template pTemplate=\"separator\"> <span class=\"pi pi-chevron-right\" aria-hidden=\"true\"></span> </ng-template\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]=\"'OCX_PAGE_HEADER.IMAGE' | translate\"\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      <section class=\"header\" *ngIf=\"!loading; else skeletonBar\" [attr.aria-label]=\"'Page Header'\">\n        <h1 id=\"page-header\" *ngIf=\"!!header\">{{ header }}</h1>\n        <div id=\"page-subheader\" *ngIf=\"!!subheader\" role=\"note\">{{ subheader }}</div>\n      </section>\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        <ng-container *ngIf=\"inlineActions$ | async as inlineActions\">\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-container>\n        <ng-content select=\"[toolbarItems]\"></ng-content>\n        <ng-container>\n          <ng-container *ngIf=\"overflowActions$ | async as overflowActions\">\n            <div *ngIf=\"overflowActions.length !== 0\">\n              <button\n                id=\"pageHeaderMenuButton\"\n                type=\"button\"\n                pButton\n                icon=\"pi pi-ellipsis-v\"\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                [pTooltip]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n                tooltipEvent=\"hover\"\n                tooltipPosition=\"top\"\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>\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, var(--primary-color-default));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: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i4$1.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.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i10.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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    >\n      <ng-template pTemplate=\"separator\"> <span class=\"pi pi-chevron-right\" aria-hidden=\"true\"></span> </ng-template\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]=\"'OCX_PAGE_HEADER.IMAGE' | translate\"\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      <section class=\"header\" *ngIf=\"!loading; else skeletonBar\" [attr.aria-label]=\"'Page Header'\">\n        <h1 id=\"page-header\" *ngIf=\"!!header\">{{ header }}</h1>\n        <div id=\"page-subheader\" *ngIf=\"!!subheader\" role=\"note\">{{ subheader }}</div>\n      </section>\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              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              [pTooltip]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n              tooltipEvent=\"hover\"\n              tooltipPosition=\"top\"\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: [{ 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    >\n      <ng-template pTemplate=\"separator\"> <span class=\"pi pi-chevron-right\" aria-hidden=\"true\"></span> </ng-template\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]=\"'OCX_PAGE_HEADER.IMAGE' | translate\"\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      <section class=\"header\" *ngIf=\"!loading; else skeletonBar\" [attr.aria-label]=\"'Page Header'\">\n        <h1 id=\"page-header\" *ngIf=\"!!header\">{{ header }}</h1>\n        <div id=\"page-subheader\" *ngIf=\"!!subheader\" role=\"note\">{{ subheader }}</div>\n      </section>\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        <ng-container *ngIf=\"inlineActions$ | async as inlineActions\">\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-container>\n        <ng-content select=\"[toolbarItems]\"></ng-content>\n        <ng-container>\n          <ng-container *ngIf=\"overflowActions$ | async as overflowActions\">\n            <div *ngIf=\"overflowActions.length !== 0\">\n              <button\n                id=\"pageHeaderMenuButton\"\n                type=\"button\"\n                pButton\n                icon=\"pi pi-ellipsis-v\"\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                [pTooltip]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n                tooltipEvent=\"hover\"\n                tooltipPosition=\"top\"\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>\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, var(--primary-color-default));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 }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [HAS_PERMISSION_CHECKER]
+                }] }], propDecorators: { header: [{
                 type: Input
             }], loading: [{
                 type: Input
@@ -786,7 +808,7 @@ class SearchHeaderComponent {
         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\n  <div class=\"flex row-gap-3 column-gap-6 flex-wrap align-items-center\">\n    <section #searchParameterFields [attr.aria-label]=\"'Search Criteria'\">\n      <ng-content></ng-content>\n    </section>\n    <section\n      class=\"flex flex-wrap gap-2\"\n      [ngClass]=\"searchButtonsReversed ? 'flex-row-reverse' : 'flex-row'\"\n      [attr.aria-label]=\"'Search Controls'\"\n    >\n      <p-button\n        id=\"resetButton\"\n        icon=\"pi pi-eraser\"\n        (onClick)=\"onResetClicked()\"\n        [disabled]=\"resetButtonDisabled\"\n        [label]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate\"\n        [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.ARIA_LABEL' | translate\"\n        [pTooltip]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate\"\n        tooltipPosition=\"top\"\n        tooltipEvent=\"hover\"\n      >\n      </p-button>\n      <p-button\n        id=\"searchButton\"\n        icon=\"pi pi-search\"\n        (onClick)=\"onSearchClicked()\"\n        [disabled]=\"searchButtonDisabled || formGroup?.invalid\"\n        [label]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate\"\n        [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.ARIA_LABEL' | translate\"\n        [pTooltip]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate\"\n        tooltipPosition=\"top\"\n        tooltipEvent=\"hover\"\n      >\n      </p-button>\n    </section>\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: i4$1.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: i10.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i1$3.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "inputs", "outputs"] }, { kind: "component", type: 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.ɵ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\n  <div class=\"flex row-gap-3 column-gap-6 flex-wrap align-items-center\">\n    <section #searchParameterFields [attr.aria-label]=\"'Search Criteria'\">\n      <ng-content></ng-content>\n    </section>\n    <section\n      class=\"flex flex-wrap gap-2\"\n      [ngClass]=\"searchButtonsReversed ? 'flex-row-reverse' : 'flex-row'\"\n      [attr.aria-label]=\"'Search Controls'\"\n    >\n      <p-button\n        id=\"resetButton\"\n        icon=\"pi pi-eraser\"\n        (onClick)=\"onResetClicked()\"\n        [disabled]=\"resetButtonDisabled\"\n        [label]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate\"\n        [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.ARIA_LABEL' | translate\"\n        [pTooltip]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate\"\n        tooltipPosition=\"top\"\n        tooltipEvent=\"hover\"\n      >\n      </p-button>\n      <p-button\n        id=\"searchButton\"\n        icon=\"pi pi-search\"\n        (onClick)=\"onSearchClicked()\"\n        [disabled]=\"searchButtonDisabled || formGroup?.invalid\"\n        [label]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate\"\n        [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.ARIA_LABEL' | translate\"\n        [pTooltip]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate\"\n        tooltipPosition=\"top\"\n        tooltipEvent=\"hover\"\n      >\n      </p-button>\n    </section>\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: i4$1.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: i10.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i1$3.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "inputs", "outputs"] }, { kind: "component", type: 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", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchHeaderComponent, decorators: [{
             type: Component,
@@ -1551,6 +1573,12 @@ class DataListGridComponent extends DataSortBase {
     set showAllOption(value) {
         this._showAllOption$.next(value);
     }
+    get viewPermission() {
+        return this._viewPermission$.getValue();
+    }
+    set viewPermission(value) {
+        this._viewPermission$.next(value);
+    }
     get columns() {
         return this._columns$.getValue();
     }
@@ -1633,7 +1661,6 @@ class DataListGridComponent extends DataSortBase {
     }
     set additionalActions(value) {
         this._additionalActions$.next(value);
-        this.updateGridMenuItems();
     }
     get viewItemObserved() {
         const dv = this.injector.get('DataViewComponent', null);
@@ -1663,12 +1690,13 @@ class DataListGridComponent extends DataSortBase {
     set parentTemplates(value) {
         this.parentTemplates$.next(value);
     }
-    constructor(locale, translateService, userService, router, injector, appStateService) {
+    constructor(locale, translateService, userService, router, injector, appStateService, hasPermissionChecker) {
         super(locale, translateService);
         this.userService = userService;
         this.router = router;
         this.injector = injector;
         this.appStateService = appStateService;
+        this.hasPermissionChecker = hasPermissionChecker;
         this.subtitleLineIds = [];
         this.clientSideSorting = true;
         this.clientSideFiltering = true;
@@ -1678,6 +1706,7 @@ class DataListGridComponent extends DataSortBase {
         this._showAllOption$ = new BehaviorSubject(false);
         this.fallbackImage = 'placeholder.png';
         this.layout = 'grid';
+        this._viewPermission$ = new BehaviorSubject(undefined);
         this.paginator = true;
         this.page = 0;
         this._columns$ = new BehaviorSubject([]);
@@ -1705,9 +1734,8 @@ 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._selectedItem$ = new BehaviorSubject(undefined);
+        this.observedOutputs$ = new BehaviorSubject(0);
         this.templates$ = new BehaviorSubject(undefined);
         this.viewTemplates$ = new BehaviorSubject(undefined);
         this.parentTemplates$ = new BehaviorSubject(undefined);
@@ -1723,32 +1751,48 @@ class DataListGridComponent extends DataSortBase {
         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) => ({
-                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.overflowListMenuItems$ = combineLatest([this.overflowListActions$, this.currentMenuRow$]).pipe(switchMap$1(([actions, row]) => this.filterActionsBasedOnPermissions(actions).pipe(map((permittedActions) => ({ actions: permittedActions, row: row })))), mergeMap(({ actions, row }) => {
+            if (actions.length === 0) {
+                return of([]);
+            }
+            return this.translateService.get([...actions.map((a) => a.labelKey || '')]).pipe(map((translations) => {
+                return actions.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.hasViewPermission$ = this._viewPermission$.pipe(map((permission) => {
+            if (!permission)
+                return [];
+            return Array.isArray(permission) ? permission : [permission];
+        }), switchMap$1((permissionArray) => {
+            if (permissionArray.length === 0) {
+                return of(true);
+            }
+            return this.getPermissions().pipe(map((permissions) => permissionArray.every((p) => permissions.includes(p))));
+        }));
+        this.gridMenuItems$ = combineLatest([
+            this.getPermissions(),
+            this._additionalActions$.asObservable(),
+            this._selectedItem$.asObservable(),
+            this.observedOutputs$.asObservable(),
+        ]).pipe(switchMap$1(([permissions, additionalActions, selectedItem, _observedOutputs]) => this.filterActionsBasedOnPermissions(additionalActions, permissions).pipe(map((permittedActions) => ({ permissions, additionalActions: permittedActions, selectedItem })))), switchMap$1(({ permissions, additionalActions, selectedItem }) => {
+            return this.getGridActionsTranslations(additionalActions, permissions).pipe(map((translations) => ({ permissions, additionalActions, selectedItem, translations })));
+        }), map(({ permissions, additionalActions, selectedItem, translations }) => this.mapGridMenuItems(permissions, additionalActions, selectedItem, translations)));
     }
     ngDoCheck() {
         const observedOutputs = this.viewItem.observed + this.deleteItem.observed + this.editItem.observed;
-        if (this.observedOutputs !== observedOutputs) {
-            this.updateGridMenuItems();
-            this.observedOutputs = observedOutputs;
+        if (this.observedOutputs$.getValue() !== observedOutputs) {
+            this.observedOutputs$.next(observedOutputs);
         }
     }
     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,9 +1826,7 @@ class DataListGridComponent extends DataSortBase {
         this.deleteItem.emit(element);
     }
     onViewRow(element) {
-        if (!!this.viewPermission && this.userService.hasPermission(this.viewPermission)) {
-            this.viewItem.emit(element);
-        }
+        this.viewItem.emit(element);
     }
     onEditRow(element) {
         this.editItem.emit(element);
@@ -1797,81 +1839,8 @@ class DataListGridComponent extends DataSortBase {
             ? `${mfeInfo.remoteBaseUrl}/onecx-portal-lib/assets/images/${this.fallbackImage}`
             : `./onecx-portal-lib/assets/images/${this.fallbackImage}`;
     }
-    updateGridMenuItems(useSelectedItem = false) {
-        let deleteDisabled = false;
-        let editDisabled = false;
-        let viewDisabled = false;
-        let deleteVisible = true;
-        let editVisible = true;
-        let viewVisible = true;
-        if (useSelectedItem && this.selectedItem) {
-            viewDisabled =
-                !!this.viewActionEnabledField && !this.fieldIsTruthy(this.selectedItem, this.viewActionEnabledField);
-            editDisabled =
-                !!this.editActionEnabledField && !this.fieldIsTruthy(this.selectedItem, this.editActionEnabledField);
-            deleteDisabled =
-                !!this.deleteActionEnabledField && !this.fieldIsTruthy(this.selectedItem, this.deleteActionEnabledField);
-            viewVisible = !this.viewActionVisibleField || this.fieldIsTruthy(this.selectedItem, this.viewActionVisibleField);
-            editVisible = !this.editActionVisibleField || this.fieldIsTruthy(this.selectedItem, this.editActionVisibleField);
-            deleteVisible =
-                !this.deleteActionVisibleField || this.fieldIsTruthy(this.selectedItem, this.deleteActionVisibleField);
-        }
-        this.translateService
-            .get([
-            this.viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW',
-            this.editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT',
-            this.deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE',
-            ...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,
-                });
-            }
-            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) {
-        this.selectedItem = item;
+        this._selectedItem$.next(item);
     }
     resolveFieldData(object, key) {
         return ObjectUtils.resolveFieldData(object, key);
@@ -1904,9 +1873,8 @@ class DataListGridComponent extends DataSortBase {
     fieldIsTruthy(object, key) {
         return !!this.resolveFieldData(object, key);
     }
-    hasVisibleOverflowMenuItems(item) {
-        return this.overflowListActions$.pipe(map((actions) => actions.some((a) => (!a.actionVisibleField || this.fieldIsTruthy(item, a.actionVisibleField)) &&
-            this.userService.hasPermission(a.permission))));
+    hasVisibleOverflowMenuItems(row) {
+        return this.overflowListActions$.pipe(switchMap$1((actions) => this.filterActionsBasedOnPermissions(actions)), map((actions) => actions.some((a) => !a.actionVisibleField || this.fieldIsTruthy(row, a.actionVisibleField))));
     }
     toggleOverflowMenu(event, menu, row) {
         this.currentMenuRow$.next(row);
@@ -1971,16 +1939,116 @@ 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              $implicit:item,\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: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i8.DataView, selector: "p-dataView", inputs: ["paginator", "rows", "totalRecords", "pageLinks", "rowsPerPageOptions", "paginatorPosition", "paginatorStyleClass", "alwaysShowPaginator", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "lazy", "lazyLoadOnInit", "emptyMessage", "style", "styleClass", "gridStyleClass", "trackBy", "filterBy", "filterLocale", "loading", "loadingIcon", "first", "sortField", "sortOrder", "value", "layout"], outputs: ["onLazyLoad", "onPage", "onSort", "onChangeLayout"] }, { kind: "component", type: i9.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i10.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]] }); }
+    mapGridMenuItems(permissions, additionalActions, selectedItem, translations) {
+        let deleteDisabled = false;
+        let editDisabled = false;
+        let viewDisabled = false;
+        let deleteVisible = true;
+        let editVisible = true;
+        let viewVisible = true;
+        if (selectedItem) {
+            viewDisabled = !!this.viewActionEnabledField && !this.fieldIsTruthy(selectedItem, this.viewActionEnabledField);
+            editDisabled = !!this.editActionEnabledField && !this.fieldIsTruthy(selectedItem, this.editActionEnabledField);
+            deleteDisabled =
+                !!this.deleteActionEnabledField && !this.fieldIsTruthy(selectedItem, this.deleteActionEnabledField);
+            viewVisible = !this.viewActionVisibleField || this.fieldIsTruthy(selectedItem, this.viewActionVisibleField);
+            editVisible = !this.editActionVisibleField || this.fieldIsTruthy(selectedItem, this.editActionVisibleField);
+            deleteVisible = !this.deleteActionVisibleField || this.fieldIsTruthy(selectedItem, this.deleteActionVisibleField);
+        }
+        const menuItems = [];
+        const automationId = 'data-grid-action-button';
+        const automationIdHidden = 'data-grid-action-button-hidden';
+        if (this.shouldDisplayAction(this.viewPermission, this.viewItem, permissions)) {
+            menuItems.push({
+                label: translations[this.viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW'],
+                icon: PrimeIcons.EYE,
+                command: () => this.viewItem.emit(selectedItem),
+                disabled: viewDisabled,
+                visible: viewVisible,
+                automationId: viewVisible ? automationId : automationIdHidden,
+            });
+        }
+        if (this.shouldDisplayAction(this.editPermission, this.editItem, permissions)) {
+            menuItems.push({
+                label: translations[this.editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT'],
+                icon: PrimeIcons.PENCIL,
+                command: () => this.editItem.emit(selectedItem),
+                disabled: editDisabled,
+                visible: editVisible,
+                automationId: editVisible ? automationId : automationIdHidden,
+            });
+        }
+        if (this.shouldDisplayAction(this.deletePermission, this.deleteItem, permissions)) {
+            menuItems.push({
+                label: translations[this.deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE'],
+                icon: PrimeIcons.TRASH,
+                command: () => this.deleteItem.emit(selectedItem),
+                disabled: deleteDisabled,
+                visible: deleteVisible,
+                automationId: deleteVisible ? automationId : automationIdHidden,
+            });
+        }
+        const val = menuItems.concat(additionalActions.map((a) => {
+            const isVisible = !a.actionVisibleField || this.fieldIsTruthy(selectedItem, a.actionVisibleField);
+            return {
+                label: translations[a.labelKey || ''],
+                icon: a.icon,
+                styleClass: (a.classes || []).join(' '),
+                disabled: a.disabled || (!!a.actionEnabledField && !this.fieldIsTruthy(selectedItem, a.actionEnabledField)),
+                visible: isVisible,
+                command: () => a.callback(selectedItem),
+                automationId: isVisible ? automationId : automationIdHidden,
+            };
+        }));
+        return val;
+    }
+    getGridActionsTranslations(additionalActions, permissions) {
+        return this.translateService.get([
+            this.viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW',
+            this.editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT',
+            this.deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE',
+            ...additionalActions
+                .filter((action) => {
+                const permissionsArray = Array.isArray(action.permission) ? action.permission : [action.permission];
+                return permissionsArray.every((p) => permissions.includes(p));
+            })
+                .map((a) => a.labelKey || ''),
+        ]);
+    }
+    shouldDisplayAction(permission, emitter, userPermissions) {
+        const permissions = Array.isArray(permission) ? permission : permission ? [permission] : [];
+        return emitter.observed && permissions.every((p) => userPermissions.includes(p));
+    }
+    filterActionsBasedOnPermissions(actions, permissions) {
+        const permissions$ = permissions ? of(permissions) : this.getPermissions();
+        return permissions$.pipe(map((permissions) => {
+            return actions.filter((action) => {
+                const actionPermissions = Array.isArray(action.permission) ? action.permission : [action.permission];
+                return actionPermissions.every((p) => permissions.includes(p));
+            });
+        }));
+    }
+    getPermissions() {
+        if (this.hasPermissionChecker?.getPermissions) {
+            return this.hasPermissionChecker.getPermissions();
+        }
+        return this.userService.getPermissions();
+    }
+    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 }, { token: HAS_PERMISSION_CHECKER, optional: true }], 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              $implicit:item,\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            <ng-container *ngIf=\"hasViewPermission$ | async as hasViewPermission; else noViewPermission\">\n              <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n            </ng-container>\n            <ng-template #noViewPermission>\n              <a [routerLink]=\"\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n            </ng-template>\n          </div>\n          <ng-container\n            [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n            [ngTemplateOutletContext]=\"{$implicit:item}\"\n          ></ng-container>\n        </div>\n        <div *ngIf=\"(gridMenuItems$ | async) as gridMenuItems\">\n          <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            (click)=\"setSelectedItem(item); 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]=\"(overflowListMenuItems$ | 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              [attr.name]=\"'data-list-overflow-item-menu-button'\"\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, var(--primary-color-default));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: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i8.DataView, selector: "p-dataView", inputs: ["paginator", "rows", "totalRecords", "pageLinks", "rowsPerPageOptions", "paginatorPosition", "paginatorStyleClass", "alwaysShowPaginator", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "lazy", "lazyLoadOnInit", "emptyMessage", "style", "styleClass", "gridStyleClass", "trackBy", "filterBy", "filterLocale", "loading", "loadingIcon", "first", "sortField", "sortOrder", "value", "layout"], outputs: ["onLazyLoad", "onPage", "onSort", "onChangeLayout"] }, { kind: "component", type: i9.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i10.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "directive", type: TooltipOnOverflowDirective, selector: "[ocxTooltipOnOverflow]", inputs: ["ocxTooltipOnOverflow"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i4.NgTemplateOutlet], () => [i4.NgTemplateOutlet]] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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              $implicit:item,\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"] }]
+            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              $implicit:item,\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            <ng-container *ngIf=\"hasViewPermission$ | async as hasViewPermission; else noViewPermission\">\n              <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n            </ng-container>\n            <ng-template #noViewPermission>\n              <a [routerLink]=\"\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n            </ng-template>\n          </div>\n          <ng-container\n            [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n            [ngTemplateOutletContext]=\"{$implicit:item}\"\n          ></ng-container>\n        </div>\n        <div *ngIf=\"(gridMenuItems$ | async) as gridMenuItems\">\n          <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            (click)=\"setSelectedItem(item); 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]=\"(overflowListMenuItems$ | 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              [attr.name]=\"'data-list-overflow-item-menu-button'\"\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, var(--primary-color-default));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: [{
+                }] }, { type: i1$2.TranslateService }, { type: i3.UserService }, { type: i1$1.Router }, { type: i0.Injector }, { type: i3.AppStateService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [HAS_PERMISSION_CHECKER]
+                }, {
+                    type: Optional
+                }] }], propDecorators: { titleLineId: [{
                 type: Input
             }], subtitleLineIds: [{
                 type: Input
@@ -2383,11 +2451,12 @@ 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(locale, translateService, router, injector, userService, hasPermissionChecker) {
         super(locale, translateService);
         this.router = router;
         this.injector = injector;
         this.userService = userService;
+        this.hasPermissionChecker = hasPermissionChecker;
         this.FilterType = FilterType;
         this.TemplateType = TemplateType;
         this.checked = true;
@@ -2515,18 +2584,21 @@ class DataTableComponent extends DataSortBase {
         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(switchMap$1(([actions, row]) => this.filterActionsBasedOnPermissions(actions).pipe(map((permittedActions) => ({ actions: permittedActions, row: row })))), mergeMap(({ actions, row }) => {
+            if (actions.length === 0) {
+                return of([]);
+            }
+            return this.translateService.get([...actions.map((a) => a.labelKey || '')]).pipe(map((translations) => {
+                return actions.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);
     }
     ngOnInit() {
@@ -2791,8 +2863,7 @@ class DataTableComponent extends DataSortBase {
         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)))));
+        return this.overflowActions$.pipe(switchMap$1((actions) => this.filterActionsBasedOnPermissions(actions)), map((actions) => actions.some((a) => !a.actionVisibleField || this.fieldIsTruthy(row, a.actionVisibleField))));
     }
     isDate(value) {
         if (value instanceof Date) {
@@ -2877,16 +2948,31 @@ 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    dataKey=\"id\"\n    [rowTrackBy]=\"rowTrackByFunction\"\n    [scrollable]=\"true\"\n    scrollHeight=\"flex\"\n    [style]=\"tableStyle\"\n    paginatorDropdownAppendTo=\"body\"\n    [rowSelectable]=\"rowSelectable\"\n    tableStyleClass=\"h-full\"\n  >\n    <ng-template pTemplate=\"header\">\n      <tr style=\"vertical-align: top\">\n        <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n          <p-tableHeaderCheckbox\n            *ngIf=\"allowSelectAll\"\n            pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n            ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n          ></p-tableHeaderCheckbox>\n        </th>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n        <ng-container *ngFor=\"let column of columns\">\n          <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n            <div\n              class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n              style=\"height: 100%\"\n            >\n              <span class=\"flex\" id=\"{{column.id}}-header-name\">{{ column.nameKey | translate }}</span>\n              <span class=\"flex icon-button-header-wrapper\">\n                <button\n                  *ngIf=\"column.sortable\"\n                  class=\"pi sortButton pl-0\"\n                  [class.pi-sort-alt]=\"(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn\"\n                  [class.pi-sort-amount-up]=\"column?.id === sortColumn && sortDirection === 'ASCENDING'\"\n                  [class.pi-sort-amount-down]=\"column?.id === sortColumn && sortDirection === 'DESCENDING'\"\n                  (click)=\"onSortColumnClick(column.id)\"\n                  [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$1.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i4$1.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: i9.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: 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: i10.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]] }); }
+    filterActionsBasedOnPermissions(actions) {
+        const getPermissions = this.hasPermissionChecker?.getPermissions?.bind(this.hasPermissionChecker) ||
+            this.userService.getPermissions.bind(this.userService);
+        return getPermissions().pipe(map((permissions) => {
+            return actions.filter((action) => {
+                const actionPermissions = Array.isArray(action.permission) ? action.permission : [action.permission];
+                return actionPermissions.every((p) => permissions.includes(p));
+            });
+        }));
+    }
+    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 }, { token: HAS_PERMISSION_CHECKER, optional: true }], 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            [name]=\"'data-table-overflow-action-button'\"\n          ></button>\n        </ng-container>\n      </div>\n    </td>\n  </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0  || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <th\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    >\n      {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n    </th>\n  </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n  <p-table\n    *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\n    [value]=\"(displayedRows$ | async) ?? []\"\n    responsiveLayout=\"scroll\"\n    [paginator]=\"paginator\"\n    [first]=\"page * displayedPageSize\"\n    (onPage)=\"onPageChange($event)\"\n    [rows]=\"displayedPageSize\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n    [rowsPerPageOptions]=\"(displayedPageSizes$ | async) ?? []\"\n    id=\"dataTable_{{name}}\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [selection]=\"(selectedRows$ | async) ?? []\"\n    dataKey=\"id\"\n    [rowTrackBy]=\"rowTrackByFunction\"\n    [scrollable]=\"true\"\n    scrollHeight=\"flex\"\n    [style]=\"tableStyle\"\n    paginatorDropdownAppendTo=\"body\"\n    [rowSelectable]=\"rowSelectable\"\n    tableStyleClass=\"h-full\"\n  >\n    <ng-template pTemplate=\"header\">\n      <tr style=\"vertical-align: top\">\n        <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n          <p-tableHeaderCheckbox\n            *ngIf=\"allowSelectAll\"\n            pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n            ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n          ></p-tableHeaderCheckbox>\n        </th>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n        <ng-container *ngFor=\"let column of columns\">\n          <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n            <div\n              class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n              style=\"height: 100%\"\n            >\n              <span class=\"flex\" id=\"{{column.id}}-header-name\">{{ column.nameKey | translate }}</span>\n              <span class=\"flex icon-button-header-wrapper\">\n                <button\n                  *ngIf=\"column.sortable\"\n                  class=\"pi sortButton pl-0\"\n                  [class.pi-sort-alt]=\"(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn\"\n                  [class.pi-sort-amount-up]=\"column?.id === sortColumn && sortDirection === 'ASCENDING'\"\n                  [class.pi-sort-amount-down]=\"column?.id === sortColumn && sortDirection === 'DESCENDING'\"\n                  (click)=\"onSortColumnClick(column.id)\"\n                  [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        <!-- If allowSelectAll is set to true, an additional column for checkbox selection is added and\n       the colSpan needs to be increased by one so that the row is rendered the whole width of the table. -->\n        <td\n          [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0) +\n  (allowSelectAll ? 1 : 0)\"\n        >\n          {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</ng-container>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomCell\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: 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$1.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i4$1.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: i9.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: 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: i10.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", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i4.NgIf, i4.NgTemplateOutlet]] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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    dataKey=\"id\"\n    [rowTrackBy]=\"rowTrackByFunction\"\n    [scrollable]=\"true\"\n    scrollHeight=\"flex\"\n    [style]=\"tableStyle\"\n    paginatorDropdownAppendTo=\"body\"\n    [rowSelectable]=\"rowSelectable\"\n    tableStyleClass=\"h-full\"\n  >\n    <ng-template pTemplate=\"header\">\n      <tr style=\"vertical-align: top\">\n        <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n          <p-tableHeaderCheckbox\n            *ngIf=\"allowSelectAll\"\n            pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n            ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n          ></p-tableHeaderCheckbox>\n        </th>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n        <ng-container *ngFor=\"let column of columns\">\n          <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n            <div\n              class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n              style=\"height: 100%\"\n            >\n              <span class=\"flex\" id=\"{{column.id}}-header-name\">{{ column.nameKey | translate }}</span>\n              <span class=\"flex icon-button-header-wrapper\">\n                <button\n                  *ngIf=\"column.sortable\"\n                  class=\"pi sortButton pl-0\"\n                  [class.pi-sort-alt]=\"(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn\"\n                  [class.pi-sort-amount-up]=\"column?.id === sortColumn && sortDirection === 'ASCENDING'\"\n                  [class.pi-sort-amount-down]=\"column?.id === sortColumn && sortDirection === 'DESCENDING'\"\n                  (click)=\"onSortColumnClick(column.id)\"\n                  [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"] }]
+            args: [{ selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <td\n      class=\"actions\"\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-left' : 'action-column-right'\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n    >\n      <div class=\"icon-button-row-wrapper\">\n        <ng-container\n          *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\"\n        >\n          <button\n            id=\"{{resolveFieldData(rowObject, 'id')}}-viewButton\"\n            *ocxIfPermission=\"viewPermission\"\n            [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(rowObject, viewActionEnabledField)\"\n            pButton\n            class=\"p-button-rounded p-button-text viewTableRowButton\"\n            title=\"{{ 'OCX_DATA_TABLE.ACTIONS.VIEW' | translate }}\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n            icon=\"pi pi-eye\"\n            (click)=\"onViewRow(rowObject)\"\n            [attr.name]=\"'data-table-action-button'\"\n          ></button>\n        </ng-container>\n        <ng-container\n          *ngIf=\"editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))\"\n        >\n          <button\n            id=\"{{resolveFieldData(rowObject, 'id')}}-editButton\"\n            *ocxIfPermission=\"editPermission\"\n            [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(rowObject, editActionEnabledField)\"\n            pButton\n            class=\"p-button-rounded p-button-text editTableRowButton\"\n            title=\"{{ 'OCX_DATA_TABLE.ACTIONS.EDIT' | translate }}\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n            icon=\"pi pi-pencil\"\n            (click)=\"onEditRow(rowObject)\"\n            [attr.name]=\"'data-table-action-button'\"\n          ></button>\n        </ng-container>\n        <ng-container\n          *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\"\n        >\n          <button\n            id=\"{{resolveFieldData(rowObject, 'id')}}-deleteButton\"\n            *ocxIfPermission=\"deletePermission\"\n            [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(rowObject, deleteActionEnabledField)\"\n            pButton\n            class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n            title=\"{{ 'OCX_DATA_TABLE.ACTIONS.DELETE' | translate }}\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n            icon=\"pi pi-trash\"\n            (click)=\"onDeleteRow(rowObject)\"\n            [attr.name]=\"'data-table-action-button'\"\n          ></button>\n        </ng-container>\n        <ng-container *ngFor=\"let action of inlineActions$ | async\">\n          <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\">\n            <button\n              id=\"{{resolveFieldData(rowObject, 'id')}}-{{action.id ? action.id.concat('ActionButton') : 'inlineActionButton'}}\"\n              *ocxIfPermission=\"action.permission\"\n              pButton\n              class=\"p-button-rounded p-button-text\"\n              [ngClass]=\"action.classes\"\n              [icon]=\"action.icon || ''\"\n              (click)=\"action.callback(rowObject)\"\n              [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n              [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n              [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\"\n              [attr.name]=\"'data-table-action-button'\"\n            ></button>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"hasVisibleOverflowMenuItems(rowObject) | async\">\n          <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            class=\"p-button-rounded p-button-text\"\n            [icon]=\"'pi pi-ellipsis-v'\"\n            (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n            [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n            [name]=\"'data-table-overflow-action-button'\"\n          ></button>\n        </ng-container>\n      </div>\n    </td>\n  </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0  || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <th\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    >\n      {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n    </th>\n  </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n  <p-table\n    *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\n    [value]=\"(displayedRows$ | async) ?? []\"\n    responsiveLayout=\"scroll\"\n    [paginator]=\"paginator\"\n    [first]=\"page * displayedPageSize\"\n    (onPage)=\"onPageChange($event)\"\n    [rows]=\"displayedPageSize\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n    [rowsPerPageOptions]=\"(displayedPageSizes$ | async) ?? []\"\n    id=\"dataTable_{{name}}\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [selection]=\"(selectedRows$ | async) ?? []\"\n    dataKey=\"id\"\n    [rowTrackBy]=\"rowTrackByFunction\"\n    [scrollable]=\"true\"\n    scrollHeight=\"flex\"\n    [style]=\"tableStyle\"\n    paginatorDropdownAppendTo=\"body\"\n    [rowSelectable]=\"rowSelectable\"\n    tableStyleClass=\"h-full\"\n  >\n    <ng-template pTemplate=\"header\">\n      <tr style=\"vertical-align: top\">\n        <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n          <p-tableHeaderCheckbox\n            *ngIf=\"allowSelectAll\"\n            pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n            ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n          ></p-tableHeaderCheckbox>\n        </th>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n        <ng-container *ngFor=\"let column of columns\">\n          <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n            <div\n              class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n              style=\"height: 100%\"\n            >\n              <span class=\"flex\" id=\"{{column.id}}-header-name\">{{ column.nameKey | translate }}</span>\n              <span class=\"flex icon-button-header-wrapper\">\n                <button\n                  *ngIf=\"column.sortable\"\n                  class=\"pi sortButton pl-0\"\n                  [class.pi-sort-alt]=\"(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn\"\n                  [class.pi-sort-amount-up]=\"column?.id === sortColumn && sortDirection === 'ASCENDING'\"\n                  [class.pi-sort-amount-down]=\"column?.id === sortColumn && sortDirection === 'DESCENDING'\"\n                  (click)=\"onSortColumnClick(column.id)\"\n                  [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        <!-- If allowSelectAll is set to true, an additional column for checkbox selection is added and\n       the colSpan needs to be increased by one so that the row is rendered the whole width of the table. -->\n        <td\n          [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0) +\n  (allowSelectAll ? 1 : 0)\"\n        >\n          {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</ng-container>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomCell\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}\n"] }]
         }], 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: [{
+                }] }, { type: i1$2.TranslateService }, { type: i1$1.Router }, { type: i0.Injector }, { type: i3.UserService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [HAS_PERMISSION_CHECKER]
+                }, {
+                    type: Optional
+                }] }], propDecorators: { rows: [{
                 type: Input
             }], selectedRows: [{
                 type: Input
@@ -4126,11 +4212,11 @@ class FilterViewComponent {
         };
     }
     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$3.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i4$1.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$3.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "showAllOption", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "customCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "customFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "directive", type: IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: ["ocxIfBreakpoint", "ocxIfBreakpointElseTemplate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "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, var(--primary-color-default));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$3.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i4$1.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$3.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "showAllOption", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "customCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "customFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "directive", type: IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: ["ocxIfBreakpoint", "ocxIfBreakpointElseTemplate"] }, { kind: "pipe", type: 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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: [{ 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, var(--primary-color-default));outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}\n"] }]
         }], propDecorators: { filters: [{
                 type: Input
             }], columns: [{
@@ -4764,7 +4850,7 @@ class InteractiveDataViewComponent {
         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]=\"primeNgStringTableCell ?? _stringTableCell\"\n    [numberTableCellTemplate]=\"primeNgNumberTableCell ?? _numberTableCell\"\n    [customTableCellTemplate]=\"primeNgCustomTableCell ?? _customTableCell\"\n    [dateTableCellTemplate]=\"primeNgDateTableCell ?? _dateTableCell ?? primeNgTableDateCell ?? _tableDateCell\"\n    [relativeDateTableCellTemplate]=\"primeNgRelativeDateTableCell ?? _relativeDateTableCell ?? primeNgTableRelativeDateCell ?? _tableRelativeDateCell\"\n    [tableCellTemplate]=\"primeNgTableCell ?? _tableCell\"\n    [translationKeyTableCellTemplate]=\"primeNgTranslationKeyTableCell ?? _translationKeyTableCell ?? primeNgTableTranslationKeyCell ?? _tableTranslationKeyCell\"\n    [gridItemSubtitleLinesTemplate]=\"primeNgGridItemSubtitleLines ?? _gridItemSubtitleLines\"\n    [listItemSubtitleLinesTemplate]=\"primeNgListItemSubtitleLines ?? _listItemSubtitleLines\"\n    [listItemTemplate]=\"primeNgListItem ?? _listItem\"\n    [listValueTemplate]=\"primeNgListValue ?? _listValue\"\n    [translationKeyListValueTemplate]=\"primeNgTranslationKeyListValue ?? _translationKeyListValue\"\n    [numberListValueTemplate]=\"primeNgNumberListValue ?? _numberListValue\"\n    [relativeDateListValueTemplate]=\"primeNgRelativeDateListValue ?? _relativeDateListValue\"\n    [customListValueTemplate]=\"primeNgCustomListValue ?? _customListValue\"\n    [stringListValueTemplate]=\"primeNgStringListValue ?? _stringListValue\"\n    [dateListValueTemplate]=\"primeNgDateListValue ?? _dateListValue\"\n    [gridItemTemplate]=\"primeNgGridItem ?? _gridItem\"\n    [tableFilterCellTemplate]=\"primeNgTableFilterCell ?? _tableFilterCell\"\n    [dateTableFilterCellTemplate]=\"primeNgDateTableFilterCell ?? _dateTableFilterCell\"\n    [customTableFilterCellTemplate]=\"primeNgCustomTableFilterCell ?? _customTableFilterCell\"\n    [numberTableFilterCellTemplate]=\"primeNgNumberTableFilterCell ?? _numberTableFilterCell\"\n    [stringTableFilterCellTemplate]=\"primeNgStringTableFilterCell ?? _stringTableFilterCell\"\n    [relativeDateTableFilterCellTemplate]=\"primeNgRelativeDateTableFilterCell ?? _relativeDateTableFilterCell\"\n    [translationKeyTableFilterCellTemplate]=\"primeNgTranslationKeyTableFilterCell ?? _translationKeyTableFilterCell\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates$ | async\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  <ocx-column-group-selection\n    *ngIf=\"layout === 'table'\"\n    [selectedGroupKey]=\"selectedGroupKey ?? defaultGroupKey\"\n    [columns]=\"columns\"\n    [defaultGroupKey]=\"defaultGroupKey !== customGroupKey ? defaultGroupKey : ''\"\n    [customGroupKey]=\"customGroupKey\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableCell\"\n    [ngTemplateOutlet]=\"_stringTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  <ng-template #numberTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_numberTableCell\"\n      [ngTemplateOutlet]=\"_numberTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n</ng-template>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableDateCell\"\n    [ngTemplateOutlet]=\"_tableDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableCell\"\n    [ngTemplateOutlet]=\"_dateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableRelativeDateCell\"\n    [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableCell\"\n    [ngTemplateOutlet]=\"_tableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableTranslationKeyCell\"\n    [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_gridItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container>\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_listItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItem let-item>\n  <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listItem let-item>\n  <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_listValue\"\n    [ngTemplateOutlet]=\"_listValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyListValue\"\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberListValue\"\n    [ngTemplateOutlet]=\"_numberListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateListValue\"\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customListValue\"\n    [ngTemplateOutlet]=\"_customListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringListValue\"\n    [ngTemplateOutlet]=\"_stringListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateListValue\"\n    [ngTemplateOutlet]=\"_dateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableFilterCell\"\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberTableFilterCell\"\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customTableFilterCell\"\n    [ngTemplateOutlet]=\"_customTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableFilterCell\"\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: 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: i10.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i1$3.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "inputs", "outputs"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["groupSelectionChanged", "componentStateChanged"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "customGroupKey", "dialogTitle", "dialogTitleKey", "openButtonTitle", "openButtonTitleKey", "openButtonAriaLabel", "openButtonAriaLabelKey", "saveButtonLabel", "saveButtonLabelKey", "saveButtonAriaLabel", "saveButtonAriaLabelKey", "cancelButtonLabel", "cancelButtonLabelKey", "cancelButtonAriaLabel", "cancelButtonAriaLabelKey", "activeColumnsLabel", "activeColumnsLabelKey", "inactiveColumnsLabel", "inactiveColumnsLabelKey", "frozenActionColumn", "actionColumnPosition"], outputs: ["columnSelectionChanged", "actionColumnConfigChanged", "componentStateChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["dataViewLayoutChange", "componentStateChanged"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortChange", "sortDirectionChange", "componentStateChanged", "columnsChange"] }, { kind: "component", type: DataViewComponent, selector: "ocx-data-view", inputs: ["deletePermission", "editPermission", "viewPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "tableSelectionEnabledField", "tableAllowSelectAll", "data", "name", "titleLineId", "subtitleLineIds", "layout", "columns", "emptyResultsMessage", "clientSideSorting", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "listGridPaginator", "tablePaginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "paginator", "sortStates", "pageSizes", "pageSize", "showAllOption", "stringTableCellTemplate", "numberTableCellTemplate", "customTableCellTemplate", "dateTableCellTemplate", "tableDateCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "tableTranslationKeyCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "tableRelativeDateCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "customListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "tableFilterCellTemplate", "dateTableFilterCellTemplate", "relativeDateTableFilterCellTemplate", "translationKeyTableFilterCellTemplate", "stringTableFilterCellTemplate", "numberTableFilterCellTemplate", "customTableFilterCellTemplate", "additionalActions", "parentTemplates"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "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.ɵ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]=\"primeNgStringTableCell ?? _stringTableCell\"\n    [numberTableCellTemplate]=\"primeNgNumberTableCell ?? _numberTableCell\"\n    [customTableCellTemplate]=\"primeNgCustomTableCell ?? _customTableCell\"\n    [dateTableCellTemplate]=\"primeNgDateTableCell ?? _dateTableCell ?? primeNgTableDateCell ?? _tableDateCell\"\n    [relativeDateTableCellTemplate]=\"primeNgRelativeDateTableCell ?? _relativeDateTableCell ?? primeNgTableRelativeDateCell ?? _tableRelativeDateCell\"\n    [tableCellTemplate]=\"primeNgTableCell ?? _tableCell\"\n    [translationKeyTableCellTemplate]=\"primeNgTranslationKeyTableCell ?? _translationKeyTableCell ?? primeNgTableTranslationKeyCell ?? _tableTranslationKeyCell\"\n    [gridItemSubtitleLinesTemplate]=\"primeNgGridItemSubtitleLines ?? _gridItemSubtitleLines\"\n    [listItemSubtitleLinesTemplate]=\"primeNgListItemSubtitleLines ?? _listItemSubtitleLines\"\n    [listItemTemplate]=\"primeNgListItem ?? _listItem\"\n    [listValueTemplate]=\"primeNgListValue ?? _listValue\"\n    [translationKeyListValueTemplate]=\"primeNgTranslationKeyListValue ?? _translationKeyListValue\"\n    [numberListValueTemplate]=\"primeNgNumberListValue ?? _numberListValue\"\n    [relativeDateListValueTemplate]=\"primeNgRelativeDateListValue ?? _relativeDateListValue\"\n    [customListValueTemplate]=\"primeNgCustomListValue ?? _customListValue\"\n    [stringListValueTemplate]=\"primeNgStringListValue ?? _stringListValue\"\n    [dateListValueTemplate]=\"primeNgDateListValue ?? _dateListValue\"\n    [gridItemTemplate]=\"primeNgGridItem ?? _gridItem\"\n    [tableFilterCellTemplate]=\"primeNgTableFilterCell ?? _tableFilterCell\"\n    [dateTableFilterCellTemplate]=\"primeNgDateTableFilterCell ?? _dateTableFilterCell\"\n    [customTableFilterCellTemplate]=\"primeNgCustomTableFilterCell ?? _customTableFilterCell\"\n    [numberTableFilterCellTemplate]=\"primeNgNumberTableFilterCell ?? _numberTableFilterCell\"\n    [stringTableFilterCellTemplate]=\"primeNgStringTableFilterCell ?? _stringTableFilterCell\"\n    [relativeDateTableFilterCellTemplate]=\"primeNgRelativeDateTableFilterCell ?? _relativeDateTableFilterCell\"\n    [translationKeyTableFilterCellTemplate]=\"primeNgTranslationKeyTableFilterCell ?? _translationKeyTableFilterCell\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates$ | async\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  <ocx-column-group-selection\n    *ngIf=\"layout === 'table'\"\n    [selectedGroupKey]=\"selectedGroupKey ?? defaultGroupKey\"\n    [columns]=\"columns\"\n    [defaultGroupKey]=\"defaultGroupKey !== customGroupKey ? defaultGroupKey : ''\"\n    [customGroupKey]=\"customGroupKey\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableCell\"\n    [ngTemplateOutlet]=\"_stringTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  <ng-template #numberTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n    <ng-container\n      *ngIf=\"_numberTableCell\"\n      [ngTemplateOutlet]=\"_numberTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n  </ng-template>\n</ng-template>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableDateCell\"\n    [ngTemplateOutlet]=\"_tableDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableCell\"\n    [ngTemplateOutlet]=\"_dateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableRelativeDateCell\"\n    [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableCell\"\n    [ngTemplateOutlet]=\"_tableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_tableTranslationKeyCell\"\n    [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_gridItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container>\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  <ng-container\n    *ngIf=\"_listItemSubtitleLines\"\n    [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n    [ngTemplateOutletContext]=\"{$implicit:item}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #gridItem let-item>\n  <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listItem let-item>\n  <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container\n></ng-template>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_listValue\"\n    [ngTemplateOutlet]=\"_listValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyListValue\"\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberListValue\"\n    [ngTemplateOutlet]=\"_numberListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateListValue\"\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customListValue\"\n    [ngTemplateOutlet]=\"_customListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringListValue\"\n    [ngTemplateOutlet]=\"_stringListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateListValue\"\n    [ngTemplateOutlet]=\"_dateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_stringTableFilterCell\"\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_numberTableFilterCell\"\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_customTableFilterCell\"\n    [ngTemplateOutlet]=\"_customTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_dateTableFilterCell\"\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container\n    *ngIf=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container\n></ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: 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: i10.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i1$3.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "inputs", "outputs"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["groupSelectionChanged", "componentStateChanged"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "customGroupKey", "dialogTitle", "dialogTitleKey", "openButtonTitle", "openButtonTitleKey", "openButtonAriaLabel", "openButtonAriaLabelKey", "saveButtonLabel", "saveButtonLabelKey", "saveButtonAriaLabel", "saveButtonAriaLabelKey", "cancelButtonLabel", "cancelButtonLabelKey", "cancelButtonAriaLabel", "cancelButtonAriaLabelKey", "activeColumnsLabel", "activeColumnsLabelKey", "inactiveColumnsLabel", "inactiveColumnsLabelKey", "frozenActionColumn", "actionColumnPosition"], outputs: ["columnSelectionChanged", "actionColumnConfigChanged", "componentStateChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["dataViewLayoutChange", "componentStateChanged"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortChange", "sortDirectionChange", "componentStateChanged", "columnsChange"] }, { kind: "component", type: DataViewComponent, selector: "ocx-data-view", inputs: ["deletePermission", "editPermission", "viewPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "tableSelectionEnabledField", "tableAllowSelectAll", "data", "name", "titleLineId", "subtitleLineIds", "layout", "columns", "emptyResultsMessage", "clientSideSorting", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "listGridPaginator", "tablePaginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "paginator", "sortStates", "pageSizes", "pageSize", "showAllOption", "stringTableCellTemplate", "numberTableCellTemplate", "customTableCellTemplate", "dateTableCellTemplate", "tableDateCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "tableTranslationKeyCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "tableRelativeDateCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "customListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "tableFilterCellTemplate", "dateTableFilterCellTemplate", "relativeDateTableFilterCellTemplate", "translationKeyTableFilterCellTemplate", "stringTableFilterCellTemplate", "numberTableFilterCellTemplate", "customTableFilterCellTemplate", "additionalActions", "parentTemplates"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "component", type: FilterViewComponent, selector: "ocx-filter-view", inputs: ["filters", "columns", "displayMode", "selectDisplayedChips", "chipStyleClass", "tableStyle", "panelStyle", "templates"], outputs: ["filtered", "componentStateChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InteractiveDataViewComponent, decorators: [{
             type: Component,