@onecx/angular-accelerator 7.9.2 → 7.11.0

package/fesm2022/onecx-angular-accelerator.mjs

@@ -2,23 +2,23 @@ import * as i0 from '@angular/core';
 import { inject, ElementRef, Input, Directive, Renderer2, ViewContainerRef, TemplateRef, HostListener, EventEmitter, Output, NgZone, Injectable, Injector, LOCALE_ID, Pipe, ContentChild, ViewEncapsulation, Component, ViewChild, ContentChildren, ChangeDetectorRef, input, computed, ViewChildren, QueryList, Type, NgModule, APP_INITIALIZER } from '@angular/core';
 import { UserService, AppStateService, ConfigurationService, CONFIG_KEY, ShellCapabilityService, Capability, AppConfigService } from '@onecx/angular-integration-interface';
 import { HAS_PERMISSION_CHECKER, SKIP_STYLE_SCOPING, getScopeIdentifier, dataStyleIdKey, dataNoPortalLayoutStylesKey, MultiLanguageMissingTranslationHandler, localeLoaders, providePermissionChecker, DynamicLocaleId, provideTranslationPathFromMeta, provideTranslationConnectionService } from '@onecx/angular-utils';
-import { BehaviorSubject, switchMap, of, from, map, filter, concat, combineLatest, startWith, debounceTime, firstValueFrom, mergeMap, first, shareReplay, withLatestFrom, ReplaySubject, timestamp, distinctUntilChanged, isObservable, skip } from 'rxjs';
+import { BehaviorSubject, switchMap, of, from, map, filter, concat, combineLatest, startWith, debounceTime, firstValueFrom, mergeMap, first, shareReplay, withLatestFrom, ReplaySubject, timestamp, distinctUntilChanged, isObservable, tap, skip } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import * as i3 from '@angular/forms';
 import { FormGroupDirective, FormControlName, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Topic, getLocation, isValidDate, getUTCDateWithoutTimezoneIssues } from '@onecx/accelerator';
 import * as i1 from '@angular/common';
 import { DatePipe, DecimalPipe, CurrencyPipe, formatDate, registerLocaleData, CommonModule } from '@angular/common';
-import * as i2$1 from 'primeng/button';
+import * as i4 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i5 from 'primeng/skeleton';
+import * as i6 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import * as i4$1 from '@onecx/angular-remote-components';
 import { SlotService, REMOTE_COMPONENT_CONFIG, AngularRemoteComponentsModule } from '@onecx/angular-remote-components';
 import { Tooltip, TooltipStyle, TooltipModule } from 'primeng/tooltip';
 import * as i8 from '@ngx-translate/core';
 import { TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
-import * as i2$3 from 'primeng/api';
+import * as i2$1 from 'primeng/api';
 import { PrimeIcons, PrimeTemplate, SharedModule, MessageService } from 'primeng/api';
 import { __decorate, __metadata } from 'tslib';
 import * as i7 from '@angular/router';
@@ -26,7 +26,7 @@ import { Router, ActivatedRoute, NavigationEnd, NavigationStart, RouterModule }
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import * as i2 from 'primeng/breadcrumb';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
-import * as i4 from 'primeng/menu';
+import * as i5 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
 import * as i1$1 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
@@ -57,7 +57,7 @@ import * as i5$3 from 'primeng/popover';
 import { Popover, PopoverModule } from 'primeng/popover';
 import * as i3$4 from 'primeng/chip';
 import { ChipModule } from 'primeng/chip';
-import * as i6 from 'primeng/focustrap';
+import * as i6$1 from 'primeng/focustrap';
 import { FocusTrapModule } from 'primeng/focustrap';
 import * as i3$5 from 'primeng/timeline';
 import { TimelineModule } from 'primeng/timeline';
@@ -870,23 +870,24 @@ class PageHeaderComponent {
     mapOverflowActionsToMenuItems(actions, translations) {
         return actions.map((a) => ({
             id: a.id,
-            label: a.labelKey ? translations[a.labelKey] : a.label,
+            label: (a.labelKey ? translations[a.labelKey] : undefined) || a.label || a.title || a.id || 'Action',
             icon: a.icon,
+            routerLink: a.routerLink,
             tooltipOptions: {
                 tooltipLabel: a.titleKey ? translations[a.titleKey] : a.title,
                 tooltipEvent: 'hover',
                 tooltipPosition: 'top',
             },
-            command: a.actionCallback,
+            command: a.routerLink ? undefined : a.actionCallback,
             disabled: a.disabled,
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PageHeaderComponent, isStandalone: false, selector: "ocx-page-header", inputs: { header: "header", loading: "loading", figureBackground: "figureBackground", showFigure: "showFigure", figureImage: "figureImage", disableDefaultActions: "disableDefaultActions", subheader: "subheader", actions: "actions", objectDetails: "objectDetails", showBreadcrumbs: "showBreadcrumbs", manualBreadcrumbs: "manualBreadcrumbs", enableGridView: "enableGridView", gridLayoutDesktopColumns: "gridLayoutDesktopColumns" }, outputs: { save: "save" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }], ngImport: i0, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n  @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n  <p-breadcrumb\n    [model]=\"items\"\n    [home]=\"(home$ | async)?.menuItem ?? {}\"\n    [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n    [attr.manual]=\"manualBreadcrumbs\"\n  ></p-breadcrumb>\n  } }\n  <div class=\"title-bar flex flex-row md:justify-content-between align-items-center p-3\">\n    <div class=\"title-wrap\">\n      @if (showFigure) {\n      <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n        <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n          <ng-content select=\"[figureImage]\"></ng-content>\n          @if (figureImage && !figureImageLoadError) {\n          <img [ocxSrc]=\"figureImage\" alt=\"Figure\" class=\"w-full border-round-sm\" (error)=\"handleImageError()\" />\n          }\n        </div>\n        @if (previewImage.children.length === 0 || figureImageLoadError) {\n        <div class=\"colorblob flex-1 border-round\"></div>\n        }\n      </div>\n      } @if (!loading) {\n      <div class=\"header\">\n        @if (!!header) {\n        <h1 id=\"page-header\">{{ header }}</h1>\n        } @if (!!subheader) {\n        <div id=\"page-subheader\" role=\"note\" [attr.aria-label]=\"'OCX_PAGE_HEADER.SUBHEADER' | translate\">\n          {{ subheader }}\n        </div>\n        }\n      </div>\n      } @else {\n      <div class=\"header justify-content-evenly\">\n        <p-skeleton width=\"10rem\"></p-skeleton>\n        <p-skeleton width=\"10rem\"></p-skeleton>\n      </div>\n      }\n    </div>\n\n    <div class=\"action-items-wrap mt-2 md:mt-0\">\n      @if (additionalToolbarContentLeft) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n      } @if (!loading) { @if( inlineActions$ | async; as inlineActions) { @if (inlineActions && inlineActions.length >\n      0) {\n      <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n        @for (action of inlineActions; track action) {\n        <span\n          [ocxTooltip]=\"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            (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            [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n            [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n          ></p-button>\n        </span>\n        }\n      </div>\n      } }\n      <ng-content select=\"[toolbarItems]\"></ng-content>\n      <ng-container>\n        @if(overflowActions$ | async; as overflowActions) {@if (overflowActions.length !== 0) {\n        <div>\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            [ocxTooltip]=\"'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        } }\n      </ng-container>\n      } @else {\n      <div class=\"flex\">\n        <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n        <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n      </div>\n      } @if (additionalToolbarContent) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n      }\n    </div>\n  </div>\n\n  <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n    @if (objectDetails) { @for (item of objectDetails; track item) {\n    <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n      <span\n        class=\"flex font-medium text-600 object-info-grid-label\"\n        name=\"object-detail-label\"\n        [ocxTooltip]=\"item.labelTooltipKey ? ((typeof item.labelTooltipKey === 'string' ? item.labelTooltipKey : item.labelTooltipKey.key) | translate : (typeof item.labelTooltipKey === 'object' ? item.labelTooltipKey.parameters : undefined)) : ''\"\n        tooltipEvent=\"hover\"\n        tooltipPosition=\"top\"\n      >\n        {{ item.label | dynamicPipe:item.labelPipe }}\n      </span>\n      @if (item.icon || item.value) {\n      <span class=\"object-info-grid-value\">\n        <span\n          class=\"flex text-900 align-items-center gap-2 w-max\"\n          [ngClass]=\"generateItemStyle(item)\"\n          name=\"object-detail-value\"\n        >\n          <span\n            class=\"flex align-items-center gap-2\"\n            [ocxTooltip]=\"item.valueTooltipKey ? ((typeof item.valueTooltipKey === 'string' ? item.valueTooltipKey : item.valueTooltipKey.key) | translate : (typeof item.valueTooltipKey === 'object' ? item.valueTooltipKey.parameters : undefined)) : ''\"\n            tooltipEvent=\"hover\"\n            tooltipPosition=\"top\"\n          >\n            @if (item.icon) {\n            <i [class]=\"item.icon + ' ' + (item.iconStyleClass ?? '')\" name=\"object-detail-icon\" aria-hidden=\"true\"></i>\n            } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n          </span>\n          @if (item.actionItemIcon && item.actionItemCallback) {\n          <p-button\n            [icon]=\"item.actionItemIcon\"\n            styleClass=\"p-button-text p-0 w-full\"\n            [ariaLabel]=\"item.actionItemAriaLabelKey ? ((typeof item.actionItemAriaLabelKey === 'string' ? item.actionItemAriaLabelKey : item.actionItemAriaLabelKey.key) | translate : (typeof item.actionItemAriaLabelKey === 'object' ? item.actionItemAriaLabelKey.parameters : undefined)) : 'button for ' + item.actionItemIcon\"\n            [ocxTooltip]=\"item.actionItemTooltipKey ? ((typeof item.actionItemTooltipKey === 'string' ? item.actionItemTooltipKey : item.actionItemTooltipKey.key) | translate : (typeof item.actionItemTooltipKey === 'object' ? item.actionItemTooltipKey.parameters : undefined)) : ''\"\n            tooltipPosition=\"top\"\n            tooltipEvent=\"hover\"\n            (onClick)=\"item.actionItemCallback()\"\n          ></p-button>\n          }\n        </span>\n      </span>\n      }\n    </div>\n    } }\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "directive", type: SrcDirective, selector: "[ocxSrc]", inputs: ["ocxSrc"], outputs: ["error"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PageHeaderComponent, isStandalone: false, selector: "ocx-page-header", inputs: { header: "header", loading: "loading", figureBackground: "figureBackground", showFigure: "showFigure", figureImage: "figureImage", disableDefaultActions: "disableDefaultActions", subheader: "subheader", actions: "actions", objectDetails: "objectDetails", showBreadcrumbs: "showBreadcrumbs", manualBreadcrumbs: "manualBreadcrumbs", enableGridView: "enableGridView", gridLayoutDesktopColumns: "gridLayoutDesktopColumns" }, outputs: { save: "save" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }], ngImport: i0, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n  @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n  <p-breadcrumb\n    [model]=\"items\"\n    [home]=\"(home$ | async)?.menuItem ?? {}\"\n    [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n    [attr.manual]=\"manualBreadcrumbs\"\n  ></p-breadcrumb>\n  } }\n  <div class=\"title-bar flex flex-row md:justify-content-between align-items-center p-3\">\n    <div class=\"title-wrap\">\n      @if (showFigure) {\n      <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n        <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n          <ng-content select=\"[figureImage]\"></ng-content>\n          @if (figureImage && !figureImageLoadError) {\n          <img [ocxSrc]=\"figureImage\" alt=\"Figure\" class=\"w-full border-round-sm\" (error)=\"handleImageError()\" />\n          }\n        </div>\n        @if (previewImage.children.length === 0 || figureImageLoadError) {\n        <div class=\"colorblob flex-1 border-round\"></div>\n        }\n      </div>\n      } @if (!loading) {\n      <div class=\"header\">\n        @if (!!header) {\n        <h1 id=\"page-header\">{{ header }}</h1>\n        } @if (!!subheader) {\n        <div id=\"page-subheader\" role=\"note\" [attr.aria-label]=\"'OCX_PAGE_HEADER.SUBHEADER' | translate\">\n          {{ subheader }}\n        </div>\n        }\n      </div>\n      } @else {\n      <div class=\"header justify-content-evenly\">\n        <p-skeleton width=\"10rem\"></p-skeleton>\n        <p-skeleton width=\"10rem\"></p-skeleton>\n      </div>\n      }\n    </div>\n\n    <div class=\"action-items-wrap mt-2 md:mt-0\">\n      @if (additionalToolbarContentLeft) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n      } @if (!loading) { @if( inlineActions$ | async; as inlineActions) { @if (inlineActions && inlineActions.length >\n      0) {\n      <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n        @for (action of inlineActions; track action) {\n        <span\n          [ocxTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n          tooltipPosition=\"top\"\n          tooltipEvent=\"hover\"\n        >\n          @if (action.routerLink && !action.disabled) {\n          <a\n            [id]=\"action.id\"\n            pButton\n            [routerLink]=\"action.routerLink\"\n            [attr.href]=\"action.routerLink\"\n            class=\"action-button p-button no-underline\"\n            [ngClass]=\"action.btnClass\"\n            [attr.data-testid]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n            [attr.aria-label]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n          >\n            @if (action.icon) {\n            <i class=\"p-button-icon\" [ngClass]=\"action.icon\"></i>\n            }\n            @if (action.label || action.labelKey) {\n            <span class=\"p-button-label\">{{ action.labelKey ? (action.labelKey | translate) : action.label }}</span>\n            }\n          </a>\n          } @else {\n          <p-button\n            [id]=\"action.id\"\n            [icon]=\"action.icon ?? ''\"\n            [iconPos]=\"action.iconPos ?? 'left'\"\n            type=\"button\"\n            class=\"action-button\"\n            (onClick)=\"action.actionCallback?.()\"\n            [disabled]=\"action.disabled ? action.disabled : false\"\n            [attr.data-testid]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n            [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\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          }\n        </span>\n        }\n      </div>\n      } }\n      <ng-content select=\"[toolbarItems]\"></ng-content>\n      <ng-container>\n        @if(overflowActions$ | async; as overflowActions) {@if (overflowActions.length !== 0) {\n        <div>\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            [ocxTooltip]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n            tooltipEvent=\"hover\"\n            tooltipPosition=\"top\"\n          ></button>\n          <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\">\n            <ng-template pTemplate=\"item\" let-item>\n              <a\n                class=\"p-menuitem-link\"\n                [routerLink]=\"item.routerLink || null\"\n                [attr.href]=\"item.routerLink || null\"\n                (click)=\"!item.disabled && !item.routerLink && item.command?.($event)\"\n              >\n                @if (item.icon) {\n                <span class=\"p-menuitem-icon\" [ngClass]=\"item.icon\"></span>\n                }\n                <span class=\"p-menuitem-text\">{{ item.label }}</span>\n              </a>\n            </ng-template>\n          </p-menu>\n        </div>\n        } }\n      </ng-container>\n      } @else {\n      <div class=\"flex\">\n        <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n        <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n      </div>\n      } @if (additionalToolbarContent) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n      }\n    </div>\n  </div>\n\n  <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n    @if (objectDetails) { @for (item of objectDetails; track item) {\n    <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n      <span\n        class=\"flex font-medium text-600 object-info-grid-label\"\n        name=\"object-detail-label\"\n        [ocxTooltip]=\"item.labelTooltipKey ? ((typeof item.labelTooltipKey === 'string' ? item.labelTooltipKey : item.labelTooltipKey.key) | translate : (typeof item.labelTooltipKey === 'object' ? item.labelTooltipKey.parameters : undefined)) : ''\"\n        tooltipEvent=\"hover\"\n        tooltipPosition=\"top\"\n      >\n        {{ item.label | dynamicPipe:item.labelPipe }}\n      </span>\n      @if (item.icon || item.value) {\n      <span class=\"object-info-grid-value\">\n        <span\n          class=\"flex text-900 align-items-center gap-2 w-max\"\n          [ngClass]=\"generateItemStyle(item)\"\n          name=\"object-detail-value\"\n        >\n          <span\n            class=\"flex align-items-center gap-2\"\n            [ocxTooltip]=\"item.valueTooltipKey ? ((typeof item.valueTooltipKey === 'string' ? item.valueTooltipKey : item.valueTooltipKey.key) | translate : (typeof item.valueTooltipKey === 'object' ? item.valueTooltipKey.parameters : undefined)) : ''\"\n            tooltipEvent=\"hover\"\n            tooltipPosition=\"top\"\n          >\n            @if (item.icon) {\n            <i [class]=\"item.icon + ' ' + (item.iconStyleClass ?? '')\" name=\"object-detail-icon\" aria-hidden=\"true\"></i>\n            } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n          </span>\n          @if (item.actionItemIcon && item.actionItemCallback) {\n          <p-button\n            [icon]=\"item.actionItemIcon\"\n            styleClass=\"p-button-text p-0 w-full\"\n            [ariaLabel]=\"item.actionItemAriaLabelKey ? ((typeof item.actionItemAriaLabelKey === 'string' ? item.actionItemAriaLabelKey : item.actionItemAriaLabelKey.key) | translate : (typeof item.actionItemAriaLabelKey === 'object' ? item.actionItemAriaLabelKey.parameters : undefined)) : 'button for ' + item.actionItemIcon\"\n            [ocxTooltip]=\"item.actionItemTooltipKey ? ((typeof item.actionItemTooltipKey === 'string' ? item.actionItemTooltipKey : item.actionItemTooltipKey.key) | translate : (typeof item.actionItemTooltipKey === 'object' ? item.actionItemTooltipKey.parameters : undefined)) : ''\"\n            tooltipPosition=\"top\"\n            tooltipEvent=\"hover\"\n            (onClick)=\"item.actionItemCallback()\"\n          ></p-button>\n          }\n        </span>\n      </span>\n      }\n    </div>\n    } }\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i6.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "directive", type: SrcDirective, selector: "[ocxSrc]", inputs: ["ocxSrc"], outputs: ["error"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ocx-page-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n  @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n  <p-breadcrumb\n    [model]=\"items\"\n    [home]=\"(home$ | async)?.menuItem ?? {}\"\n    [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n    [attr.manual]=\"manualBreadcrumbs\"\n  ></p-breadcrumb>\n  } }\n  <div class=\"title-bar flex flex-row md:justify-content-between align-items-center p-3\">\n    <div class=\"title-wrap\">\n      @if (showFigure) {\n      <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n        <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n          <ng-content select=\"[figureImage]\"></ng-content>\n          @if (figureImage && !figureImageLoadError) {\n          <img [ocxSrc]=\"figureImage\" alt=\"Figure\" class=\"w-full border-round-sm\" (error)=\"handleImageError()\" />\n          }\n        </div>\n        @if (previewImage.children.length === 0 || figureImageLoadError) {\n        <div class=\"colorblob flex-1 border-round\"></div>\n        }\n      </div>\n      } @if (!loading) {\n      <div class=\"header\">\n        @if (!!header) {\n        <h1 id=\"page-header\">{{ header }}</h1>\n        } @if (!!subheader) {\n        <div id=\"page-subheader\" role=\"note\" [attr.aria-label]=\"'OCX_PAGE_HEADER.SUBHEADER' | translate\">\n          {{ subheader }}\n        </div>\n        }\n      </div>\n      } @else {\n      <div class=\"header justify-content-evenly\">\n        <p-skeleton width=\"10rem\"></p-skeleton>\n        <p-skeleton width=\"10rem\"></p-skeleton>\n      </div>\n      }\n    </div>\n\n    <div class=\"action-items-wrap mt-2 md:mt-0\">\n      @if (additionalToolbarContentLeft) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n      } @if (!loading) { @if( inlineActions$ | async; as inlineActions) { @if (inlineActions && inlineActions.length >\n      0) {\n      <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n        @for (action of inlineActions; track action) {\n        <span\n          [ocxTooltip]=\"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            (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            [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n            [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n          ></p-button>\n        </span>\n        }\n      </div>\n      } }\n      <ng-content select=\"[toolbarItems]\"></ng-content>\n      <ng-container>\n        @if(overflowActions$ | async; as overflowActions) {@if (overflowActions.length !== 0) {\n        <div>\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            [ocxTooltip]=\"'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        } }\n      </ng-container>\n      } @else {\n      <div class=\"flex\">\n        <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n        <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n      </div>\n      } @if (additionalToolbarContent) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n      }\n    </div>\n  </div>\n\n  <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n    @if (objectDetails) { @for (item of objectDetails; track item) {\n    <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n      <span\n        class=\"flex font-medium text-600 object-info-grid-label\"\n        name=\"object-detail-label\"\n        [ocxTooltip]=\"item.labelTooltipKey ? ((typeof item.labelTooltipKey === 'string' ? item.labelTooltipKey : item.labelTooltipKey.key) | translate : (typeof item.labelTooltipKey === 'object' ? item.labelTooltipKey.parameters : undefined)) : ''\"\n        tooltipEvent=\"hover\"\n        tooltipPosition=\"top\"\n      >\n        {{ item.label | dynamicPipe:item.labelPipe }}\n      </span>\n      @if (item.icon || item.value) {\n      <span class=\"object-info-grid-value\">\n        <span\n          class=\"flex text-900 align-items-center gap-2 w-max\"\n          [ngClass]=\"generateItemStyle(item)\"\n          name=\"object-detail-value\"\n        >\n          <span\n            class=\"flex align-items-center gap-2\"\n            [ocxTooltip]=\"item.valueTooltipKey ? ((typeof item.valueTooltipKey === 'string' ? item.valueTooltipKey : item.valueTooltipKey.key) | translate : (typeof item.valueTooltipKey === 'object' ? item.valueTooltipKey.parameters : undefined)) : ''\"\n            tooltipEvent=\"hover\"\n            tooltipPosition=\"top\"\n          >\n            @if (item.icon) {\n            <i [class]=\"item.icon + ' ' + (item.iconStyleClass ?? '')\" name=\"object-detail-icon\" aria-hidden=\"true\"></i>\n            } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n          </span>\n          @if (item.actionItemIcon && item.actionItemCallback) {\n          <p-button\n            [icon]=\"item.actionItemIcon\"\n            styleClass=\"p-button-text p-0 w-full\"\n            [ariaLabel]=\"item.actionItemAriaLabelKey ? ((typeof item.actionItemAriaLabelKey === 'string' ? item.actionItemAriaLabelKey : item.actionItemAriaLabelKey.key) | translate : (typeof item.actionItemAriaLabelKey === 'object' ? item.actionItemAriaLabelKey.parameters : undefined)) : 'button for ' + item.actionItemIcon\"\n            [ocxTooltip]=\"item.actionItemTooltipKey ? ((typeof item.actionItemTooltipKey === 'string' ? item.actionItemTooltipKey : item.actionItemTooltipKey.key) | translate : (typeof item.actionItemTooltipKey === 'object' ? item.actionItemTooltipKey.parameters : undefined)) : ''\"\n            tooltipPosition=\"top\"\n            tooltipEvent=\"hover\"\n            (onClick)=\"item.actionItemCallback()\"\n          ></p-button>\n          }\n        </span>\n      </span>\n      }\n    </div>\n    } }\n    <ng-content></ng-content>\n  </div>\n</div>", 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"] }]
+            args: [{ standalone: false, selector: 'ocx-page-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n  @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n  <p-breadcrumb\n    [model]=\"items\"\n    [home]=\"(home$ | async)?.menuItem ?? {}\"\n    [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n    [attr.manual]=\"manualBreadcrumbs\"\n  ></p-breadcrumb>\n  } }\n  <div class=\"title-bar flex flex-row md:justify-content-between align-items-center p-3\">\n    <div class=\"title-wrap\">\n      @if (showFigure) {\n      <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n        <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n          <ng-content select=\"[figureImage]\"></ng-content>\n          @if (figureImage && !figureImageLoadError) {\n          <img [ocxSrc]=\"figureImage\" alt=\"Figure\" class=\"w-full border-round-sm\" (error)=\"handleImageError()\" />\n          }\n        </div>\n        @if (previewImage.children.length === 0 || figureImageLoadError) {\n        <div class=\"colorblob flex-1 border-round\"></div>\n        }\n      </div>\n      } @if (!loading) {\n      <div class=\"header\">\n        @if (!!header) {\n        <h1 id=\"page-header\">{{ header }}</h1>\n        } @if (!!subheader) {\n        <div id=\"page-subheader\" role=\"note\" [attr.aria-label]=\"'OCX_PAGE_HEADER.SUBHEADER' | translate\">\n          {{ subheader }}\n        </div>\n        }\n      </div>\n      } @else {\n      <div class=\"header justify-content-evenly\">\n        <p-skeleton width=\"10rem\"></p-skeleton>\n        <p-skeleton width=\"10rem\"></p-skeleton>\n      </div>\n      }\n    </div>\n\n    <div class=\"action-items-wrap mt-2 md:mt-0\">\n      @if (additionalToolbarContentLeft) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n      } @if (!loading) { @if( inlineActions$ | async; as inlineActions) { @if (inlineActions && inlineActions.length >\n      0) {\n      <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n        @for (action of inlineActions; track action) {\n        <span\n          [ocxTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n          tooltipPosition=\"top\"\n          tooltipEvent=\"hover\"\n        >\n          @if (action.routerLink && !action.disabled) {\n          <a\n            [id]=\"action.id\"\n            pButton\n            [routerLink]=\"action.routerLink\"\n            [attr.href]=\"action.routerLink\"\n            class=\"action-button p-button no-underline\"\n            [ngClass]=\"action.btnClass\"\n            [attr.data-testid]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n            [attr.aria-label]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n          >\n            @if (action.icon) {\n            <i class=\"p-button-icon\" [ngClass]=\"action.icon\"></i>\n            }\n            @if (action.label || action.labelKey) {\n            <span class=\"p-button-label\">{{ action.labelKey ? (action.labelKey | translate) : action.label }}</span>\n            }\n          </a>\n          } @else {\n          <p-button\n            [id]=\"action.id\"\n            [icon]=\"action.icon ?? ''\"\n            [iconPos]=\"action.iconPos ?? 'left'\"\n            type=\"button\"\n            class=\"action-button\"\n            (onClick)=\"action.actionCallback?.()\"\n            [disabled]=\"action.disabled ? action.disabled : false\"\n            [attr.data-testid]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n            [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\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          }\n        </span>\n        }\n      </div>\n      } }\n      <ng-content select=\"[toolbarItems]\"></ng-content>\n      <ng-container>\n        @if(overflowActions$ | async; as overflowActions) {@if (overflowActions.length !== 0) {\n        <div>\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            [ocxTooltip]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n            tooltipEvent=\"hover\"\n            tooltipPosition=\"top\"\n          ></button>\n          <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\">\n            <ng-template pTemplate=\"item\" let-item>\n              <a\n                class=\"p-menuitem-link\"\n                [routerLink]=\"item.routerLink || null\"\n                [attr.href]=\"item.routerLink || null\"\n                (click)=\"!item.disabled && !item.routerLink && item.command?.($event)\"\n              >\n                @if (item.icon) {\n                <span class=\"p-menuitem-icon\" [ngClass]=\"item.icon\"></span>\n                }\n                <span class=\"p-menuitem-text\">{{ item.label }}</span>\n              </a>\n            </ng-template>\n          </p-menu>\n        </div>\n        } }\n      </ng-container>\n      } @else {\n      <div class=\"flex\">\n        <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n        <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n      </div>\n      } @if (additionalToolbarContent) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n      }\n    </div>\n  </div>\n\n  <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n    @if (objectDetails) { @for (item of objectDetails; track item) {\n    <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n      <span\n        class=\"flex font-medium text-600 object-info-grid-label\"\n        name=\"object-detail-label\"\n        [ocxTooltip]=\"item.labelTooltipKey ? ((typeof item.labelTooltipKey === 'string' ? item.labelTooltipKey : item.labelTooltipKey.key) | translate : (typeof item.labelTooltipKey === 'object' ? item.labelTooltipKey.parameters : undefined)) : ''\"\n        tooltipEvent=\"hover\"\n        tooltipPosition=\"top\"\n      >\n        {{ item.label | dynamicPipe:item.labelPipe }}\n      </span>\n      @if (item.icon || item.value) {\n      <span class=\"object-info-grid-value\">\n        <span\n          class=\"flex text-900 align-items-center gap-2 w-max\"\n          [ngClass]=\"generateItemStyle(item)\"\n          name=\"object-detail-value\"\n        >\n          <span\n            class=\"flex align-items-center gap-2\"\n            [ocxTooltip]=\"item.valueTooltipKey ? ((typeof item.valueTooltipKey === 'string' ? item.valueTooltipKey : item.valueTooltipKey.key) | translate : (typeof item.valueTooltipKey === 'object' ? item.valueTooltipKey.parameters : undefined)) : ''\"\n            tooltipEvent=\"hover\"\n            tooltipPosition=\"top\"\n          >\n            @if (item.icon) {\n            <i [class]=\"item.icon + ' ' + (item.iconStyleClass ?? '')\" name=\"object-detail-icon\" aria-hidden=\"true\"></i>\n            } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n          </span>\n          @if (item.actionItemIcon && item.actionItemCallback) {\n          <p-button\n            [icon]=\"item.actionItemIcon\"\n            styleClass=\"p-button-text p-0 w-full\"\n            [ariaLabel]=\"item.actionItemAriaLabelKey ? ((typeof item.actionItemAriaLabelKey === 'string' ? item.actionItemAriaLabelKey : item.actionItemAriaLabelKey.key) | translate : (typeof item.actionItemAriaLabelKey === 'object' ? item.actionItemAriaLabelKey.parameters : undefined)) : 'button for ' + item.actionItemIcon\"\n            [ocxTooltip]=\"item.actionItemTooltipKey ? ((typeof item.actionItemTooltipKey === 'string' ? item.actionItemTooltipKey : item.actionItemTooltipKey.key) | translate : (typeof item.actionItemTooltipKey === 'object' ? item.actionItemTooltipKey.parameters : undefined)) : ''\"\n            tooltipPosition=\"top\"\n            tooltipEvent=\"hover\"\n            (onClick)=\"item.actionItemCallback()\"\n          ></p-button>\n          }\n        </span>\n      </span>\n      }\n    </div>\n    } }\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { header: [{
                 type: Input
             }], loading: [{
@@ -1048,7 +1049,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: "20.3.16", ngImport: i0, type: SearchHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SearchHeaderComponent, isStandalone: false, selector: "ocx-search-header", inputs: { header: "header", 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: "<ng-template #searchBtn>\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    [ocxTooltip]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate\"\n    tooltipPosition=\"top\"\n    tooltipEvent=\"hover\"\n  ></p-button>\n</ng-template>\n<ng-template #resetBtn>\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    [ocxTooltip]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate\"\n    tooltipPosition=\"top\"\n    tooltipEvent=\"hover\"\n  ></p-button>\n</ng-template>\n\n<ocx-page-header\n  [header]=\"header || ('OCX_SEARCH_HEADER.HEADER' | translate)\"\n  [subheader]=\"subheader\"\n  [manualBreadcrumbs]=\"manualBreadcrumbs\"\n  [actions]=\"headerActions\"\n>\n  <ng-template #additionalToolbarContentLeft>\n    @if (searchConfigChangeObserved && pageName) {\n    <ocx-slot\n      *ocxIfPermission=\"searchConfigPermission\"\n      name=\"onecx-search-config\"\n      [inputs]=\"{ pageName: pageName, currentFieldValues: fieldValues$ | async, viewMode: viewMode }\"\n      [outputs]=\"{ searchConfigSelected: searchConfigChangedSlotEmitter }\"\n    >\n      <ng-template #skeleton>\n        <div class=\"flex\">\n          <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n        </div>\n      </ng-template>\n    </ocx-slot>\n    } @if (_additionalToolbarContentLeft) {\n    <ng-container [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"></ng-container>\n    }\n  </ng-template>\n  <ng-template #additionalToolbarContent>\n    @if (_additionalToolbarContent) {\n    <ng-container [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\n    }\n  </ng-template>\n  <div class=\"flex row-gap-3 column-gap-6 flex-wrap align-items-center\">\n    <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]=\"'flex-row'\"\n      [attr.aria-label]=\"'Search Controls'\"\n    >\n    @let searchButtonsReversed = (searchButtonsReversed$ | async);\n    @if(searchButtonsReversed !== null){\n      <ng-container *ngIf=\"searchButtonsReversed; else normalOrder\">\n        <ng-container [ngTemplateOutlet]=\"searchBtn\"></ng-container>\n        <ng-container *ngIf=\"resetted.observed\" [ngTemplateOutlet]=\"resetBtn\"></ng-container>\n      </ng-container>\n\n      <ng-template #normalOrder>\n        <ng-container *ngIf=\"resetted.observed\" [ngTemplateOutlet]=\"resetBtn\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"searchBtn\"></ng-container>\n      </ng-template>\n    }\n    </section>\n  </div>\n</ocx-page-header>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i4$1.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "inputs", "outputs"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { 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: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SearchHeaderComponent, isStandalone: false, selector: "ocx-search-header", inputs: { header: "header", 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: "<ng-template #searchBtn>\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    [ocxTooltip]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate\"\n    tooltipPosition=\"top\"\n    tooltipEvent=\"hover\"\n  ></p-button>\n</ng-template>\n<ng-template #resetBtn>\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    [ocxTooltip]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate\"\n    tooltipPosition=\"top\"\n    tooltipEvent=\"hover\"\n  ></p-button>\n</ng-template>\n\n<ocx-page-header\n  [header]=\"header || ('OCX_SEARCH_HEADER.HEADER' | translate)\"\n  [subheader]=\"subheader\"\n  [manualBreadcrumbs]=\"manualBreadcrumbs\"\n  [actions]=\"headerActions\"\n>\n  <ng-template #additionalToolbarContentLeft>\n    @if (searchConfigChangeObserved && pageName) {\n    <ocx-slot\n      *ocxIfPermission=\"searchConfigPermission\"\n      name=\"onecx-search-config\"\n      [inputs]=\"{ pageName: pageName, currentFieldValues: fieldValues$ | async, viewMode: viewMode }\"\n      [outputs]=\"{ searchConfigSelected: searchConfigChangedSlotEmitter }\"\n    >\n      <ng-template #skeleton>\n        <div class=\"flex\">\n          <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n        </div>\n      </ng-template>\n    </ocx-slot>\n    } @if (_additionalToolbarContentLeft) {\n    <ng-container [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"></ng-container>\n    }\n  </ng-template>\n  <ng-template #additionalToolbarContent>\n    @if (_additionalToolbarContent) {\n    <ng-container [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\n    }\n  </ng-template>\n  <div class=\"flex row-gap-3 column-gap-6 flex-wrap align-items-center\">\n    <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]=\"'flex-row'\"\n      [attr.aria-label]=\"'Search Controls'\"\n    >\n    @let searchButtonsReversed = (searchButtonsReversed$ | async);\n    @if(searchButtonsReversed !== null){\n      <ng-container *ngIf=\"searchButtonsReversed; else normalOrder\">\n        <ng-container [ngTemplateOutlet]=\"searchBtn\"></ng-container>\n        <ng-container *ngIf=\"resetted.observed\" [ngTemplateOutlet]=\"resetBtn\"></ng-container>\n      </ng-container>\n\n      <ng-template #normalOrder>\n        <ng-container *ngIf=\"resetted.observed\" [ngTemplateOutlet]=\"resetBtn\"></ng-container>\n        <ng-container [ngTemplateOutlet]=\"searchBtn\"></ng-container>\n      </ng-template>\n    }\n    </section>\n  </div>\n</ocx-page-header>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i6.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i4$1.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "inputs", "outputs"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { 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: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SearchHeaderComponent, decorators: [{
             type: Component,
@@ -1540,11 +1541,11 @@ class CustomGroupColumnSelectorComponent {
         this.visible = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomGroupColumnSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CustomGroupColumnSelectorComponent, isStandalone: false, selector: "ocx-custom-group-column-selector", inputs: { columns: "columns", displayedColumns: "displayedColumns", customGroupKey: "customGroupKey", dialogTitle: "dialogTitle", dialogTitleKey: "dialogTitleKey", openButtonTitle: "openButtonTitle", openButtonTitleKey: "openButtonTitleKey", openButtonAriaLabel: "openButtonAriaLabel", openButtonAriaLabelKey: "openButtonAriaLabelKey", saveButtonLabel: "saveButtonLabel", saveButtonLabelKey: "saveButtonLabelKey", saveButtonAriaLabel: "saveButtonAriaLabel", saveButtonAriaLabelKey: "saveButtonAriaLabelKey", cancelButtonLabel: "cancelButtonLabel", cancelButtonLabelKey: "cancelButtonLabelKey", cancelButtonAriaLabel: "cancelButtonAriaLabel", cancelButtonAriaLabelKey: "cancelButtonAriaLabelKey", activeColumnsLabel: "activeColumnsLabel", activeColumnsLabelKey: "activeColumnsLabelKey", inactiveColumnsLabel: "inactiveColumnsLabel", inactiveColumnsLabelKey: "inactiveColumnsLabelKey", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition" }, outputs: { columnSelectionChanged: "columnSelectionChanged", actionColumnConfigChanged: "actionColumnConfigChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-button\n  id=\"customGroupColumnSelectorButton\"\n  type=\"button\"\n  (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n  [ocxTooltip]=\"openButtonTitle || (openButtonTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  tooltipPosition=\"top\"\n  icon=\"pi pi-cog\"\n  styleClass=\"p-button\"\n  [ariaLabel]=\"(openButtonAriaLabelKey ? (openButtonAriaLabelKey | translate) : openButtonAriaLabel) || openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  [attr.aria-controls]=\"visible ? 'customGroupColumnSelectorDialog' : null\"\n  [attr.aria-expanded]=\"visible ? true : false\"\n></p-button>\n\n<p-dialog\n  #dialog\n  id=\"customGroupColumnSelectorDialog\"\n  [(visible)]=\"visible\"\n  [style]=\"{ width: '70%' }\"\n  [modal]=\"true\"\n  [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n  <ng-template pTemplate=\"header\">\n    <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n      >{{ dialogTitle || (dialogTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' | translate)\n      }}</span\n    >\n  </ng-template>\n\n  <p-pickList\n    [source]=\"displayedColumnsModel\"\n    [target]=\"hiddenColumnsModel\"\n    [sourceHeader]=\"activeColumnsLabel || (activeColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n    [targetHeader]=\"inactiveColumnsLabel || (inactiveColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)\"\n    [dragdrop]=\"true\"\n    [responsive]=\"false\"\n    [sourceStyle]=\"{ height: '300px' }\"\n    [targetStyle]=\"{ height: '300px' }\"\n    [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n    [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n    [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n    [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n    [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n    [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n    [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n    [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\"\n  >\n    <ng-template let-item #item>\n      <div>{{ item.nameKey | translate }}</div>\n    </ng-template>\n  </p-pickList>\n\n  <div class=\"pt-4\">\n    <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n    <div class=\"flex gap-6 px-3\">\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</p>\n        <p-selectbutton\n          [options]=\"frozenOptions\"\n          [(ngModel)]=\"frozenActionColumnModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"frozenActionColumn\"\n          name=\"frozen-action-column-select-button\"\n          [allowEmpty]=\"false\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</p>\n        <p-selectbutton\n          [options]=\"alignmentOptions\"\n          [(ngModel)]=\"actionColumnPositionModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"actionColumnPosition\"\n          name=\"action-column-position-select-button\"\n          [allowEmpty]=\"false\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button\n      id=\"cancelButton\"\n      (onClick)=\"onCancelClick()\"\n      [label]=\"cancelButtonLabel || (cancelButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n      styleClass=\"p-button\"\n      [ariaLabel]=\"cancelButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n    <p-button\n      id=\"saveButton\"\n      (onClick)=\"onSaveClick()\"\n      [label]=\"saveButtonLabel || (saveButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n      [ariaLabel]=\"saveButtonAriaLabelKey || (saveButtonAriaLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n  </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary{background-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary:not(:disabled):hover{background-color:var(--p-primary-hover-color)}.p-button{height:100%}\n"], dependencies: [{ kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i4$2.PickList, selector: "p-pickList, p-picklist, p-pick-list", inputs: ["hostName", "source", "target", "dataKey", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "sourceAriaLabel", "targetAriaLabel", "targetHeader", "responsive", "filterBy", "filterLocale", "trackBy", "sourceTrackBy", "targetTrackBy", "showSourceFilter", "showTargetFilter", "metaKeySelection", "dragdrop", "style", "styleClass", "sourceStyle", "targetStyle", "showSourceControls", "showTargetControls", "sourceFilterPlaceholder", "targetFilterPlaceholder", "disabled", "sourceOptionDisabled", "targetOptionDisabled", "ariaSourceFilterLabel", "ariaTargetFilterLabel", "filterMatchMode", "stripedRows", "keepSelection", "scrollHeight", "autoOptionFocus", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps", "moveToTargetProps", "moveAllToTargetProps", "moveToSourceProps", "moveAllToSourceProps", "breakpoint"], outputs: ["sourceChange", "targetChange", "onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "component", type: i5$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CustomGroupColumnSelectorComponent, isStandalone: false, selector: "ocx-custom-group-column-selector", inputs: { columns: "columns", displayedColumns: "displayedColumns", customGroupKey: "customGroupKey", dialogTitle: "dialogTitle", dialogTitleKey: "dialogTitleKey", openButtonTitle: "openButtonTitle", openButtonTitleKey: "openButtonTitleKey", openButtonAriaLabel: "openButtonAriaLabel", openButtonAriaLabelKey: "openButtonAriaLabelKey", saveButtonLabel: "saveButtonLabel", saveButtonLabelKey: "saveButtonLabelKey", saveButtonAriaLabel: "saveButtonAriaLabel", saveButtonAriaLabelKey: "saveButtonAriaLabelKey", cancelButtonLabel: "cancelButtonLabel", cancelButtonLabelKey: "cancelButtonLabelKey", cancelButtonAriaLabel: "cancelButtonAriaLabel", cancelButtonAriaLabelKey: "cancelButtonAriaLabelKey", activeColumnsLabel: "activeColumnsLabel", activeColumnsLabelKey: "activeColumnsLabelKey", inactiveColumnsLabel: "inactiveColumnsLabel", inactiveColumnsLabelKey: "inactiveColumnsLabelKey", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition" }, outputs: { columnSelectionChanged: "columnSelectionChanged", actionColumnConfigChanged: "actionColumnConfigChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-button\n  id=\"customGroupColumnSelectorButton\"\n  type=\"button\"\n  (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n  [ocxTooltip]=\"openButtonTitle || (openButtonTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  tooltipPosition=\"top\"\n  icon=\"pi pi-cog\"\n  styleClass=\"p-button\"\n  [ariaLabel]=\"(openButtonAriaLabelKey ? (openButtonAriaLabelKey | translate) : openButtonAriaLabel) || openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  [attr.aria-controls]=\"visible ? 'customGroupColumnSelectorDialog' : null\"\n  [attr.aria-expanded]=\"visible ? true : false\"\n></p-button>\n\n<p-dialog\n  #dialog\n  id=\"customGroupColumnSelectorDialog\"\n  [(visible)]=\"visible\"\n  [style]=\"{ width: '70%' }\"\n  [modal]=\"true\"\n  [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n  <ng-template pTemplate=\"header\">\n    <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n      >{{ dialogTitle || (dialogTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' | translate)\n      }}</span\n    >\n  </ng-template>\n\n  @let resolvedActiveColumnsLabel = activeColumnsLabel || (activeColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate);\n  @let resolvedInactiveColumnsLabel = inactiveColumnsLabel || (inactiveColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate);\n  <p-pickList\n    [source]=\"displayedColumnsModel\"\n    [target]=\"hiddenColumnsModel\"\n    [sourceHeader]=\"resolvedActiveColumnsLabel\"\n    [targetHeader]=\"resolvedInactiveColumnsLabel\"\n    [sourceAriaLabel]=\"resolvedActiveColumnsLabel\"\n    [targetAriaLabel]=\"resolvedInactiveColumnsLabel\"\n    [dragdrop]=\"true\"\n    [responsive]=\"false\"\n    [sourceStyle]=\"{ height: '300px' }\"\n    [targetStyle]=\"{ height: '300px' }\"\n    [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n    [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n    [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n    [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n    [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n    [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n    [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n    [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\"\n  >\n    <ng-template let-item #item>\n      <div>{{ item.nameKey | translate }}</div>\n    </ng-template>\n  </p-pickList>\n\n  <div class=\"pt-4\">\n    <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n    <div class=\"flex gap-6 px-3\">\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</p>\n        <p-selectbutton\n          [options]=\"frozenOptions\"\n          [(ngModel)]=\"frozenActionColumnModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"frozenActionColumn\"\n          name=\"frozen-action-column-select-button\"\n          [allowEmpty]=\"false\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</p>\n        <p-selectbutton\n          [options]=\"alignmentOptions\"\n          [(ngModel)]=\"actionColumnPositionModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"actionColumnPosition\"\n          name=\"action-column-position-select-button\"\n          [allowEmpty]=\"false\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button\n      id=\"cancelButton\"\n      (onClick)=\"onCancelClick()\"\n      [label]=\"cancelButtonLabel || (cancelButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n      styleClass=\"p-button\"\n      [ariaLabel]=\"cancelButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n    <p-button\n      id=\"saveButton\"\n      (onClick)=\"onSaveClick()\"\n      [label]=\"saveButtonLabel || (saveButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n      [ariaLabel]=\"saveButtonAriaLabelKey || (saveButtonAriaLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n  </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary{background-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary:not(:disabled):hover{background-color:var(--p-primary-hover-color)}.p-button{height:100%}\n"], dependencies: [{ kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i4$2.PickList, selector: "p-pickList, p-picklist, p-pick-list", inputs: ["hostName", "source", "target", "dataKey", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "sourceAriaLabel", "targetAriaLabel", "targetHeader", "responsive", "filterBy", "filterLocale", "trackBy", "sourceTrackBy", "targetTrackBy", "showSourceFilter", "showTargetFilter", "metaKeySelection", "dragdrop", "style", "styleClass", "sourceStyle", "targetStyle", "showSourceControls", "showTargetControls", "sourceFilterPlaceholder", "targetFilterPlaceholder", "disabled", "sourceOptionDisabled", "targetOptionDisabled", "ariaSourceFilterLabel", "ariaTargetFilterLabel", "filterMatchMode", "stripedRows", "keepSelection", "scrollHeight", "autoOptionFocus", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps", "moveToTargetProps", "moveAllToTargetProps", "moveToSourceProps", "moveAllToSourceProps", "breakpoint"], outputs: ["sourceChange", "targetChange", "onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "component", type: i5$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomGroupColumnSelectorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ocx-custom-group-column-selector', template: "<p-button\n  id=\"customGroupColumnSelectorButton\"\n  type=\"button\"\n  (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n  [ocxTooltip]=\"openButtonTitle || (openButtonTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  tooltipPosition=\"top\"\n  icon=\"pi pi-cog\"\n  styleClass=\"p-button\"\n  [ariaLabel]=\"(openButtonAriaLabelKey ? (openButtonAriaLabelKey | translate) : openButtonAriaLabel) || openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  [attr.aria-controls]=\"visible ? 'customGroupColumnSelectorDialog' : null\"\n  [attr.aria-expanded]=\"visible ? true : false\"\n></p-button>\n\n<p-dialog\n  #dialog\n  id=\"customGroupColumnSelectorDialog\"\n  [(visible)]=\"visible\"\n  [style]=\"{ width: '70%' }\"\n  [modal]=\"true\"\n  [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n  <ng-template pTemplate=\"header\">\n    <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n      >{{ dialogTitle || (dialogTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' | translate)\n      }}</span\n    >\n  </ng-template>\n\n  <p-pickList\n    [source]=\"displayedColumnsModel\"\n    [target]=\"hiddenColumnsModel\"\n    [sourceHeader]=\"activeColumnsLabel || (activeColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n    [targetHeader]=\"inactiveColumnsLabel || (inactiveColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)\"\n    [dragdrop]=\"true\"\n    [responsive]=\"false\"\n    [sourceStyle]=\"{ height: '300px' }\"\n    [targetStyle]=\"{ height: '300px' }\"\n    [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n    [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n    [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n    [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n    [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n    [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n    [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n    [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\"\n  >\n    <ng-template let-item #item>\n      <div>{{ item.nameKey | translate }}</div>\n    </ng-template>\n  </p-pickList>\n\n  <div class=\"pt-4\">\n    <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n    <div class=\"flex gap-6 px-3\">\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</p>\n        <p-selectbutton\n          [options]=\"frozenOptions\"\n          [(ngModel)]=\"frozenActionColumnModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"frozenActionColumn\"\n          name=\"frozen-action-column-select-button\"\n          [allowEmpty]=\"false\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</p>\n        <p-selectbutton\n          [options]=\"alignmentOptions\"\n          [(ngModel)]=\"actionColumnPositionModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"actionColumnPosition\"\n          name=\"action-column-position-select-button\"\n          [allowEmpty]=\"false\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button\n      id=\"cancelButton\"\n      (onClick)=\"onCancelClick()\"\n      [label]=\"cancelButtonLabel || (cancelButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n      styleClass=\"p-button\"\n      [ariaLabel]=\"cancelButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n    <p-button\n      id=\"saveButton\"\n      (onClick)=\"onSaveClick()\"\n      [label]=\"saveButtonLabel || (saveButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n      [ariaLabel]=\"saveButtonAriaLabelKey || (saveButtonAriaLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n  </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary{background-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary:not(:disabled):hover{background-color:var(--p-primary-hover-color)}.p-button{height:100%}\n"] }]
+            args: [{ standalone: false, selector: 'ocx-custom-group-column-selector', template: "<p-button\n  id=\"customGroupColumnSelectorButton\"\n  type=\"button\"\n  (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n  [ocxTooltip]=\"openButtonTitle || (openButtonTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  tooltipPosition=\"top\"\n  icon=\"pi pi-cog\"\n  styleClass=\"p-button\"\n  [ariaLabel]=\"(openButtonAriaLabelKey ? (openButtonAriaLabelKey | translate) : openButtonAriaLabel) || openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  [attr.aria-controls]=\"visible ? 'customGroupColumnSelectorDialog' : null\"\n  [attr.aria-expanded]=\"visible ? true : false\"\n></p-button>\n\n<p-dialog\n  #dialog\n  id=\"customGroupColumnSelectorDialog\"\n  [(visible)]=\"visible\"\n  [style]=\"{ width: '70%' }\"\n  [modal]=\"true\"\n  [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n  <ng-template pTemplate=\"header\">\n    <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n      >{{ dialogTitle || (dialogTitleKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' | translate)\n      }}</span\n    >\n  </ng-template>\n\n  @let resolvedActiveColumnsLabel = activeColumnsLabel || (activeColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate);\n  @let resolvedInactiveColumnsLabel = inactiveColumnsLabel || (inactiveColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate);\n  <p-pickList\n    [source]=\"displayedColumnsModel\"\n    [target]=\"hiddenColumnsModel\"\n    [sourceHeader]=\"resolvedActiveColumnsLabel\"\n    [targetHeader]=\"resolvedInactiveColumnsLabel\"\n    [sourceAriaLabel]=\"resolvedActiveColumnsLabel\"\n    [targetAriaLabel]=\"resolvedInactiveColumnsLabel\"\n    [dragdrop]=\"true\"\n    [responsive]=\"false\"\n    [sourceStyle]=\"{ height: '300px' }\"\n    [targetStyle]=\"{ height: '300px' }\"\n    [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n    [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n    [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n    [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n    [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n    [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n    [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n    [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\"\n  >\n    <ng-template let-item #item>\n      <div>{{ item.nameKey | translate }}</div>\n    </ng-template>\n  </p-pickList>\n\n  <div class=\"pt-4\">\n    <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n    <div class=\"flex gap-6 px-3\">\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</p>\n        <p-selectbutton\n          [options]=\"frozenOptions\"\n          [(ngModel)]=\"frozenActionColumnModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"frozenActionColumn\"\n          name=\"frozen-action-column-select-button\"\n          [allowEmpty]=\"false\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n      <div>\n        <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</p>\n        <p-selectbutton\n          [options]=\"alignmentOptions\"\n          [(ngModel)]=\"actionColumnPositionModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"actionColumnPosition\"\n          name=\"action-column-position-select-button\"\n          [allowEmpty]=\"false\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button\n      id=\"cancelButton\"\n      (onClick)=\"onCancelClick()\"\n      [label]=\"cancelButtonLabel || (cancelButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n      styleClass=\"p-button\"\n      [ariaLabel]=\"cancelButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n    <p-button\n      id=\"saveButton\"\n      (onClick)=\"onSaveClick()\"\n      [label]=\"saveButtonLabel || (saveButtonLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n      [ariaLabel]=\"saveButtonAriaLabelKey || (saveButtonAriaLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n  </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary{background-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary:not(:disabled):hover{background-color:var(--p-primary-hover-color)}.p-button{height:100%}\n"] }]
         }], propDecorators: { columns: [{
                 type: Input
             }], displayedColumns: [{
@@ -2167,21 +2168,7 @@ 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.overflowListMenuItems$ = combineLatest([this.overflowListActions$, this.currentMenuRow$]).pipe(switchMap(([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.overflowListMenuItems$ = combineLatest([this.overflowListActions$, this.currentMenuRow$]).pipe(switchMap(([actions, row]) => this.filterActionsBasedOnPermissions(actions).pipe(map((permittedActions) => ({ actions: permittedActions, row: row })))), mergeMap(({ actions, row }) => this.createOverflowListMenuItems(actions, row)));
         this.hasViewPermission$ = this._viewPermission$.pipe(map((permission) => {
             if (!permission)
                 return [];
@@ -2406,7 +2393,8 @@ class DataListGridComponent extends DataSortBase {
                 styleClass: (a.classes || []).join(' '),
                 disabled: a.disabled || (!!a.actionEnabledField && !this.fieldIsTruthy(selectedItem, a.actionEnabledField)),
                 visible: isVisible,
-                command: () => a.callback(selectedItem),
+                routerLink: typeof a.routerLink === 'string' ? a.routerLink : undefined,
+                command: typeof a.routerLink === 'string' ? undefined : () => this.handleActionSync(a, selectedItem),
                 automationId: isVisible ? automationId : automationIdHidden,
             };
         }));
@@ -2425,6 +2413,26 @@ class DataListGridComponent extends DataSortBase {
                 .map((a) => a.labelKey || ''),
         ]);
     }
+    createOverflowListMenuItems(actions, row) {
+        if (actions.length === 0) {
+            return of([]);
+        }
+        const translationKeys = actions.map((a) => a.labelKey || '');
+        return this.translateService
+            .get(translationKeys)
+            .pipe(map((translations) => actions.map((action) => this.toOverflowListMenuItem(action, row, translations))));
+    }
+    toOverflowListMenuItem(action, row, translations) {
+        return {
+            label: translations[action.labelKey || ''],
+            icon: action.icon,
+            styleClass: (action.classes || []).join(' '),
+            disabled: action.disabled || (!!action.actionEnabledField && !this.fieldIsTruthy(row, action.actionEnabledField)),
+            visible: !action.actionVisibleField || this.fieldIsTruthy(row, action.actionVisibleField),
+            routerLink: typeof action.routerLink === 'string' ? action.routerLink : undefined,
+            command: typeof action.routerLink === 'string' ? undefined : () => this.handleActionSync(action, row),
+        };
+    }
     shouldDisplayAction(permission, emitter, userPermissions) {
         const permissions = Array.isArray(permission) ? permission : permission ? [permission] : [];
         return emitter.observed && permissions.every((p) => userPermissions.includes(p));
@@ -2438,6 +2446,32 @@ class DataListGridComponent extends DataSortBase {
             });
         }));
     }
+    async onAdditionalActionClick(action, item) {
+        await this.handleAction(action, item);
+    }
+    async handleAction(action, data) {
+        if (action.routerLink != null) {
+            const resolvedLink = await this.resolveRouterLink(action.routerLink);
+            await this.router.navigate([resolvedLink]);
+            return;
+        }
+        if (typeof action.callback === 'function') {
+            action.callback(data);
+        }
+    }
+    handleActionSync(action, data) {
+        void this.handleAction(action, data);
+    }
+    async resolveRouterLink(routerLink) {
+        if (typeof routerLink === 'string') {
+            return routerLink;
+        }
+        if (typeof routerLink === 'function') {
+            const result = routerLink();
+            return typeof result === 'string' ? result : await result;
+        }
+        return await routerLink;
+    }
     getPermissions() {
         if (this.hasPermissionChecker?.getPermissions) {
             return this.hasPermissionChecker.getPermissions();
@@ -2445,11 +2479,11 @@ class DataListGridComponent extends DataSortBase {
         return this.userService.getPermissions();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataListGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DataListGridComponent, isStandalone: false, selector: "ocx-data-list-grid", inputs: { titleLineId: { classPropertyName: "titleLineId", publicName: "titleLineId", isSignal: false, isRequired: false, transformFunction: null }, subtitleLineIds: { classPropertyName: "subtitleLineIds", publicName: "subtitleLineIds", isSignal: false, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: false, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: false, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: false, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: false, isRequired: false, transformFunction: null }, fallbackImage: { classPropertyName: "fallbackImage", publicName: "fallbackImage", isSignal: false, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: false, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: false, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: false, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: false, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: false, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: false, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: false, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, viewMenuItemKey: { classPropertyName: "viewMenuItemKey", publicName: "viewMenuItemKey", isSignal: false, isRequired: false, transformFunction: null }, editMenuItemKey: { classPropertyName: "editMenuItemKey", publicName: "editMenuItemKey", isSignal: false, isRequired: false, transformFunction: null }, deleteMenuItemKey: { classPropertyName: "deleteMenuItemKey", publicName: "deleteMenuItemKey", isSignal: false, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: false, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: false, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, gridItemSubtitleLinesTemplate: { classPropertyName: "gridItemSubtitleLinesTemplate", publicName: "gridItemSubtitleLinesTemplate", isSignal: false, isRequired: false, transformFunction: null }, listItemSubtitleLinesTemplate: { classPropertyName: "listItemSubtitleLinesTemplate", publicName: "listItemSubtitleLinesTemplate", isSignal: false, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: false, isRequired: false, transformFunction: null }, gridItemTemplate: { classPropertyName: "gridItemTemplate", publicName: "gridItemTemplate", isSignal: false, isRequired: false, transformFunction: null }, listValueTemplate: { classPropertyName: "listValueTemplate", publicName: "listValueTemplate", isSignal: false, isRequired: false, transformFunction: null }, translationKeyListValueTemplate: { classPropertyName: "translationKeyListValueTemplate", publicName: "translationKeyListValueTemplate", isSignal: false, isRequired: false, transformFunction: null }, numberListValueTemplate: { classPropertyName: "numberListValueTemplate", publicName: "numberListValueTemplate", isSignal: false, isRequired: false, transformFunction: null }, relativeDateListValueTemplate: { classPropertyName: "relativeDateListValueTemplate", publicName: "relativeDateListValueTemplate", isSignal: false, isRequired: false, transformFunction: null }, stringListValueTemplate: { classPropertyName: "stringListValueTemplate", publicName: "stringListValueTemplate", isSignal: false, isRequired: false, transformFunction: null }, dateListValueTemplate: { classPropertyName: "dateListValueTemplate", publicName: "dateListValueTemplate", isSignal: false, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: false, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: false, isRequired: false, transformFunction: null } }, 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: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if ((displayedPageSize$ | async); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-dataView\n  [value]=\"(displayedItems$ | async) ?? []\"\n  [paginator]=\"paginator\"\n  [first]=\"page * displayedPageSize\"\n  (onPage)=\"onPageChange($event)\"\n  [rows]=\"displayedPageSize\"\n  [layout]=\"layout\"\n  [showCurrentPageReport]=\"true\"\n  currentPageReportTemplate=\"{{ (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params() }}\"\n  [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n  id=\"dataListGrid_{{name}}\"\n  paginatorDropdownAppendTo=\"body\"\n>\n  <ng-template #grid let-rows>\n    <div class=\"grid grid-cols-12 gap-4\">\n      @for (item of rows; track item) {\n      <ng-container\n        [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n        [ngTemplateOutletContext]=\"{$implicit:item}\"\n      ></ng-container>\n      }\n    </div>\n  </ng-template>\n  <ng-template #list let-rows>\n    <div class=\"p-grid p-nogutter grid grid-nogutter\">\n      @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n      <ng-container\n        [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n        [ngTemplateOutletContext]=\"{\n              $implicit: item,\n              item:item,\n              first:first,\n              columnTemplates: columnTemplates\n              }\"\n      ></ng-container>\n      } @placeholder {\n      <div style=\"width: 100%; height: 80px\"></div>\n      } }\n    </div>\n  </ng-template>\n  <ng-template pTemplate=\"empty\">\n    <span>{{ emptyResultsMessage || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n  </ng-template>\n</p-dataView>\n} }\n\n<ng-template #defaultGridItem let-item>\n  <div class=\"col-12 lg:col-6 xl:col-4 p-1 flex justify-content-center grid-border-divider\">\n    <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n      <div class=\"flex justify-content-center mb-3\">\n        <img\n          class=\"image\"\n          src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n          (error)=\"imgError(item)\"\n          alt=\"{{resolveFieldData(item, titleLineId)|| ''}}\"\n        />\n      </div>\n      <div class=\"flex flex-row justify-content-between align-items-center\">\n        <div class=\"data-grid-items flex-row\">\n          <div class=\"item-name font-medium mr-3 text-2xl\">\n            <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            [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n            tooltipPosition=\"top\"\n          ></button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n  @for (subtitleLineId of subtitleLineIds; track subtitleLineId) {\n  <div class=\"subtitleLine edit-time text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n  }\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-first=\"first\" let-columnTemplates=\"columnTemplates\">\n  @if (columnTemplates) {\n  <div class=\"col-12\">\n    <div class=\"data-list-items p-1\" [ngClass]=\"{ 'list-border-divider': !first }\">\n      <div class=\"item-name-row flex flex-row justify-content-between\">\n        <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n          @if (titleLineId) {\n          <span>{{ resolveFieldData(item, titleLineId) || '' }}</span>\n          }\n        </div>\n        <div class=\"flex flex-row\">\n          @if (viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-viewButton\"\n            type=\"button\"\n            icon=\"pi pi-eye\"\n            pButton\n            class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n            [ocxTooltip]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: !!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)\n            }\"\n            [attr.aria-label]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n            (click)=\"onViewRow(item)\"\n            *ocxIfPermission=\"viewPermission\"\n            [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } @if (editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-editButton\"\n            type=\"button\"\n            class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n            icon=\"pi pi-pencil\"\n            pButton\n            [ocxTooltip]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: !!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)\n            }\"\n            [attr.aria-label]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n            (click)=\"onEditRow(item)\"\n            *ocxIfPermission=\"editPermission\"\n            [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } @if (deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-deleteButton\"\n            type=\"button\"\n            icon=\"pi pi-trash\"\n            class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n            pButton\n            [ocxTooltip]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: !!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)\n            }\"\n            [attr.aria-label]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n            (click)=\"onDeleteRow(item)\"\n            *ocxIfPermission=\"deletePermission\"\n            [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } @for (action of inlineListActions$ | async; track action) { @if ((!action.actionVisibleField ||\n          fieldIsTruthy(item, action.actionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-{{action.id ? action.id.concat('ActionButton') : 'inlineActionButton'}}\"\n            *ocxIfPermission=\"action.permission\"\n            pButton\n            class=\"p-button-rounded p-button-text\"\n            [ngClass]=\"action.classes\"\n            [icon]=\"action.icon || ''\"\n            (click)=\"action.callback(item)\"\n            [ocxTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\n            }\"\n            [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n            [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } } @if (hasVisibleOverflowMenuItems(item) | async) {\n          <p-menu #menu [model]=\"(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            [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n            tooltipPosition=\"top\"\n            [attr.name]=\"'data-list-overflow-item-menu-button'\"\n          ></button>\n          }\n        </div>\n      </div>\n      <div class=\"text-base font-light my-1\">\n        <ng-container\n          [ngTemplateOutlet]=\"_listItemSubtitleLines ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n          [ngTemplateOutletContext]=\"{$implicit:item}\"\n        ></ng-container>\n      </div>\n      <div class=\"flex flex-wrap\">\n        @for (col of getFilteredColumns(); track col) {\n        <div class=\"w-12rem my-2 mr-2\">\n          <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n            {{ col.nameKey | translate }}\n          </div>\n          <div\n            [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n            tooltipPosition=\"top\"\n          >\n            @defer(on viewport;){\n            <ng-container\n              [ngTemplateOutlet]=\"_listValue ? _listValue: defaultListValue\"\n              [ngTemplateOutletContext]=\"{\n                rowObject: item,\n                column: col,\n                columnTemplates: columnTemplates\n                }\"\n            >\n            </ng-container>\n            } @placeholder {\n            <p-skeleton width=\"5rem\" />\n            }\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n  @for (subtitleLineId of subtitleLineIds; track subtitleLineId) {\n  <div class=\"subtitleLine text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n  }\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n  @if (columnTemplates[column.id]) {\n  <ng-container\n    [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n    [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n  >\n  </ng-container>\n  }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{cursor:pointer;min-width:4rem}.list-border-divider{border-top:.0625rem;border-top-style:solid;border-color:var(--p-surface-200)}.grid-border-divider{border:.0625rem;border-style:solid;border-color:var(--p-surface-200)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i4$3.DataView, selector: "p-dataView, p-dataview, p-data-view", inputs: ["paginator", "rows", "totalRecords", "pageLinks", "rowsPerPageOptions", "paginatorPosition", "paginatorStyleClass", "alwaysShowPaginator", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "lazy", "lazyLoadOnInit", "emptyMessage", "styleClass", "gridStyleClass", "trackBy", "filterBy", "filterLocale", "loading", "loadingIcon", "first", "sortField", "sortOrder", "value", "layout"], outputs: ["onLazyLoad", "onPage", "onSort", "onChangeLayout"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { 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: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet], () => [i1.NgTemplateOutlet]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DataListGridComponent, isStandalone: false, selector: "ocx-data-list-grid", inputs: { titleLineId: { classPropertyName: "titleLineId", publicName: "titleLineId", isSignal: false, isRequired: false, transformFunction: null }, subtitleLineIds: { classPropertyName: "subtitleLineIds", publicName: "subtitleLineIds", isSignal: false, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: false, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: false, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: false, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: false, isRequired: false, transformFunction: null }, fallbackImage: { classPropertyName: "fallbackImage", publicName: "fallbackImage", isSignal: false, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: false, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: false, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: false, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: false, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: false, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: false, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: false, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, viewMenuItemKey: { classPropertyName: "viewMenuItemKey", publicName: "viewMenuItemKey", isSignal: false, isRequired: false, transformFunction: null }, editMenuItemKey: { classPropertyName: "editMenuItemKey", publicName: "editMenuItemKey", isSignal: false, isRequired: false, transformFunction: null }, deleteMenuItemKey: { classPropertyName: "deleteMenuItemKey", publicName: "deleteMenuItemKey", isSignal: false, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: false, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: false, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, gridItemSubtitleLinesTemplate: { classPropertyName: "gridItemSubtitleLinesTemplate", publicName: "gridItemSubtitleLinesTemplate", isSignal: false, isRequired: false, transformFunction: null }, listItemSubtitleLinesTemplate: { classPropertyName: "listItemSubtitleLinesTemplate", publicName: "listItemSubtitleLinesTemplate", isSignal: false, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: false, isRequired: false, transformFunction: null }, gridItemTemplate: { classPropertyName: "gridItemTemplate", publicName: "gridItemTemplate", isSignal: false, isRequired: false, transformFunction: null }, listValueTemplate: { classPropertyName: "listValueTemplate", publicName: "listValueTemplate", isSignal: false, isRequired: false, transformFunction: null }, translationKeyListValueTemplate: { classPropertyName: "translationKeyListValueTemplate", publicName: "translationKeyListValueTemplate", isSignal: false, isRequired: false, transformFunction: null }, numberListValueTemplate: { classPropertyName: "numberListValueTemplate", publicName: "numberListValueTemplate", isSignal: false, isRequired: false, transformFunction: null }, relativeDateListValueTemplate: { classPropertyName: "relativeDateListValueTemplate", publicName: "relativeDateListValueTemplate", isSignal: false, isRequired: false, transformFunction: null }, stringListValueTemplate: { classPropertyName: "stringListValueTemplate", publicName: "stringListValueTemplate", isSignal: false, isRequired: false, transformFunction: null }, dateListValueTemplate: { classPropertyName: "dateListValueTemplate", publicName: "dateListValueTemplate", isSignal: false, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: false, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: false, isRequired: false, transformFunction: null } }, 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: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if ((displayedPageSize$ | async); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-dataView\n  [value]=\"(displayedItems$ | async) ?? []\"\n  [paginator]=\"paginator\"\n  [first]=\"page * displayedPageSize\"\n  (onPage)=\"onPageChange($event)\"\n  [rows]=\"displayedPageSize\"\n  [layout]=\"layout\"\n  [showCurrentPageReport]=\"true\"\n  currentPageReportTemplate=\"{{ (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params() }}\"\n  [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n  id=\"dataListGrid_{{name}}\"\n  paginatorDropdownAppendTo=\"body\"\n>\n  <ng-template #grid let-rows>\n    <div class=\"grid grid-cols-12 gap-4\">\n      @for (item of rows; track item) {\n      <ng-container\n        [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n        [ngTemplateOutletContext]=\"{$implicit:item}\"\n      ></ng-container>\n      }\n    </div>\n  </ng-template>\n  <ng-template #list let-rows>\n    <div class=\"p-grid p-nogutter grid grid-nogutter\">\n      @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n      <ng-container\n        [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n        [ngTemplateOutletContext]=\"{\n              $implicit: item,\n              item:item,\n              first:first,\n              columnTemplates: columnTemplates\n              }\"\n      ></ng-container>\n      } @placeholder {\n      <div style=\"width: 100%; height: 80px\"></div>\n      } }\n    </div>\n  </ng-template>\n  <ng-template pTemplate=\"empty\">\n    <span>{{ emptyResultsMessage || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n  </ng-template>\n</p-dataView>\n} }\n\n<ng-template #defaultGridItem let-item>\n  <div class=\"col-12 lg:col-6 xl:col-4 p-1 flex justify-content-center grid-border-divider\">\n    <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n      <div class=\"flex justify-content-center mb-3\">\n        <img\n          class=\"image\"\n          src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n          (error)=\"imgError(item)\"\n          alt=\"{{resolveFieldData(item, titleLineId)|| ''}}\"\n        />\n      </div>\n      <div class=\"flex flex-row justify-content-between align-items-center\">\n        <div class=\"data-grid-items flex-row\">\n          <div class=\"item-name font-medium mr-3 text-2xl\">\n            <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            [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n            tooltipPosition=\"top\"\n          ></button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n  @for (subtitleLineId of subtitleLineIds; track subtitleLineId) {\n  <div class=\"subtitleLine edit-time text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n  }\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-first=\"first\" let-columnTemplates=\"columnTemplates\">\n  @if (columnTemplates) {\n  <div class=\"col-12\">\n    <div class=\"data-list-items p-1\" [ngClass]=\"{ 'list-border-divider': !first }\">\n      <div class=\"item-name-row flex flex-row justify-content-between\">\n        <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n          @if (titleLineId) {\n          <span>{{ resolveFieldData(item, titleLineId) || '' }}</span>\n          }\n        </div>\n        <div class=\"flex flex-row\">\n          @if (viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-viewButton\"\n            type=\"button\"\n            icon=\"pi pi-eye\"\n            pButton\n            class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n            [ocxTooltip]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: !!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)\n            }\"\n            [attr.aria-label]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n            (click)=\"onViewRow(item)\"\n            *ocxIfPermission=\"viewPermission\"\n            [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } @if (editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-editButton\"\n            type=\"button\"\n            class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n            icon=\"pi pi-pencil\"\n            pButton\n            [ocxTooltip]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: !!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)\n            }\"\n            [attr.aria-label]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n            (click)=\"onEditRow(item)\"\n            *ocxIfPermission=\"editPermission\"\n            [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } @if (deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-deleteButton\"\n            type=\"button\"\n            icon=\"pi pi-trash\"\n            class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n            pButton\n            [ocxTooltip]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: !!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)\n            }\"\n            [attr.aria-label]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n            (click)=\"onDeleteRow(item)\"\n            *ocxIfPermission=\"deletePermission\"\n            [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } @for (action of inlineListActions$ | async; track action) { @if ((!action.actionVisibleField ||\n          fieldIsTruthy(item, action.actionVisibleField))) {\n          @if (typeof action.routerLink === 'string' && !(action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField)))) {\n          <a\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 no-underline\"\n            [ngClass]=\"action.classes\"\n            [icon]=\"action.icon || ''\"\n            [routerLink]=\"action.routerLink\"\n            [ocxTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n            tooltipPosition=\"top\"\n            [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n            [attr.data-testid]=\"'data-list-action-button'\"\n          ></a>\n          } @else {\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)=\"onAdditionalActionClick(action, item)\"\n            [ocxTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\n            }\"\n            [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n            [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          }\n          } } @if (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            [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n            tooltipPosition=\"top\"\n            [attr.name]=\"'data-list-overflow-item-menu-button'\"\n          ></button>\n          }\n        </div>\n      </div>\n      <div class=\"text-base font-light my-1\">\n        <ng-container\n          [ngTemplateOutlet]=\"_listItemSubtitleLines ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n          [ngTemplateOutletContext]=\"{$implicit:item}\"\n        ></ng-container>\n      </div>\n      <div class=\"flex flex-wrap\">\n        @for (col of getFilteredColumns(); track col) {\n        <div class=\"w-12rem my-2 mr-2\">\n          <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n            {{ col.nameKey | translate }}\n          </div>\n          <div\n            [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n            tooltipPosition=\"top\"\n          >\n            @defer(on viewport;){\n            <ng-container\n              [ngTemplateOutlet]=\"_listValue ? _listValue: defaultListValue\"\n              [ngTemplateOutletContext]=\"{\n                rowObject: item,\n                column: col,\n                columnTemplates: columnTemplates\n                }\"\n            >\n            </ng-container>\n            } @placeholder {\n            <p-skeleton width=\"5rem\" />\n            }\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n  @for (subtitleLineId of subtitleLineIds; track subtitleLineId) {\n  <div class=\"subtitleLine text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n  }\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n  @if (columnTemplates[column.id]) {\n  <ng-container\n    [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n    [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n  >\n  </ng-container>\n  }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{cursor:pointer;min-width:4rem}.list-border-divider{border-top:.0625rem;border-top-style:solid;border-color:var(--p-surface-200)}.grid-border-divider{border:.0625rem;border-style:solid;border-color:var(--p-surface-200)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i4$3.DataView, selector: "p-dataView, p-dataview, p-data-view", inputs: ["paginator", "rows", "totalRecords", "pageLinks", "rowsPerPageOptions", "paginatorPosition", "paginatorStyleClass", "alwaysShowPaginator", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "lazy", "lazyLoadOnInit", "emptyMessage", "styleClass", "gridStyleClass", "trackBy", "filterBy", "filterLocale", "loading", "loadingIcon", "first", "sortField", "sortOrder", "value", "layout"], outputs: ["onLazyLoad", "onPage", "onSort", "onChangeLayout"] }, { kind: "component", type: i5.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i6.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { 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: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet], () => [i1.NgTemplateOutlet]] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataListGridComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ocx-data-list-grid', template: "@if ((displayedPageSize$ | async); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-dataView\n  [value]=\"(displayedItems$ | async) ?? []\"\n  [paginator]=\"paginator\"\n  [first]=\"page * displayedPageSize\"\n  (onPage)=\"onPageChange($event)\"\n  [rows]=\"displayedPageSize\"\n  [layout]=\"layout\"\n  [showCurrentPageReport]=\"true\"\n  currentPageReportTemplate=\"{{ (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params() }}\"\n  [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n  id=\"dataListGrid_{{name}}\"\n  paginatorDropdownAppendTo=\"body\"\n>\n  <ng-template #grid let-rows>\n    <div class=\"grid grid-cols-12 gap-4\">\n      @for (item of rows; track item) {\n      <ng-container\n        [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n        [ngTemplateOutletContext]=\"{$implicit:item}\"\n      ></ng-container>\n      }\n    </div>\n  </ng-template>\n  <ng-template #list let-rows>\n    <div class=\"p-grid p-nogutter grid grid-nogutter\">\n      @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n      <ng-container\n        [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n        [ngTemplateOutletContext]=\"{\n              $implicit: item,\n              item:item,\n              first:first,\n              columnTemplates: columnTemplates\n              }\"\n      ></ng-container>\n      } @placeholder {\n      <div style=\"width: 100%; height: 80px\"></div>\n      } }\n    </div>\n  </ng-template>\n  <ng-template pTemplate=\"empty\">\n    <span>{{ emptyResultsMessage || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n  </ng-template>\n</p-dataView>\n} }\n\n<ng-template #defaultGridItem let-item>\n  <div class=\"col-12 lg:col-6 xl:col-4 p-1 flex justify-content-center grid-border-divider\">\n    <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n      <div class=\"flex justify-content-center mb-3\">\n        <img\n          class=\"image\"\n          src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n          (error)=\"imgError(item)\"\n          alt=\"{{resolveFieldData(item, titleLineId)|| ''}}\"\n        />\n      </div>\n      <div class=\"flex flex-row justify-content-between align-items-center\">\n        <div class=\"data-grid-items flex-row\">\n          <div class=\"item-name font-medium mr-3 text-2xl\">\n            <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            [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n            tooltipPosition=\"top\"\n          ></button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n  @for (subtitleLineId of subtitleLineIds; track subtitleLineId) {\n  <div class=\"subtitleLine edit-time text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n  }\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-first=\"first\" let-columnTemplates=\"columnTemplates\">\n  @if (columnTemplates) {\n  <div class=\"col-12\">\n    <div class=\"data-list-items p-1\" [ngClass]=\"{ 'list-border-divider': !first }\">\n      <div class=\"item-name-row flex flex-row justify-content-between\">\n        <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n          @if (titleLineId) {\n          <span>{{ resolveFieldData(item, titleLineId) || '' }}</span>\n          }\n        </div>\n        <div class=\"flex flex-row\">\n          @if (viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-viewButton\"\n            type=\"button\"\n            icon=\"pi pi-eye\"\n            pButton\n            class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n            [ocxTooltip]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: !!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)\n            }\"\n            [attr.aria-label]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n            (click)=\"onViewRow(item)\"\n            *ocxIfPermission=\"viewPermission\"\n            [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } @if (editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-editButton\"\n            type=\"button\"\n            class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n            icon=\"pi pi-pencil\"\n            pButton\n            [ocxTooltip]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: !!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)\n            }\"\n            [attr.aria-label]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n            (click)=\"onEditRow(item)\"\n            *ocxIfPermission=\"editPermission\"\n            [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } @if (deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-deleteButton\"\n            type=\"button\"\n            icon=\"pi pi-trash\"\n            class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n            pButton\n            [ocxTooltip]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: !!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)\n            }\"\n            [attr.aria-label]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n            (click)=\"onDeleteRow(item)\"\n            *ocxIfPermission=\"deletePermission\"\n            [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } @for (action of inlineListActions$ | async; track action) { @if ((!action.actionVisibleField ||\n          fieldIsTruthy(item, action.actionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-{{action.id ? action.id.concat('ActionButton') : 'inlineActionButton'}}\"\n            *ocxIfPermission=\"action.permission\"\n            pButton\n            class=\"p-button-rounded p-button-text\"\n            [ngClass]=\"action.classes\"\n            [icon]=\"action.icon || ''\"\n            (click)=\"action.callback(item)\"\n            [ocxTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\n            }\"\n            [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n            [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } } @if (hasVisibleOverflowMenuItems(item) | async) {\n          <p-menu #menu [model]=\"(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            [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n            tooltipPosition=\"top\"\n            [attr.name]=\"'data-list-overflow-item-menu-button'\"\n          ></button>\n          }\n        </div>\n      </div>\n      <div class=\"text-base font-light my-1\">\n        <ng-container\n          [ngTemplateOutlet]=\"_listItemSubtitleLines ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n          [ngTemplateOutletContext]=\"{$implicit:item}\"\n        ></ng-container>\n      </div>\n      <div class=\"flex flex-wrap\">\n        @for (col of getFilteredColumns(); track col) {\n        <div class=\"w-12rem my-2 mr-2\">\n          <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n            {{ col.nameKey | translate }}\n          </div>\n          <div\n            [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n            tooltipPosition=\"top\"\n          >\n            @defer(on viewport;){\n            <ng-container\n              [ngTemplateOutlet]=\"_listValue ? _listValue: defaultListValue\"\n              [ngTemplateOutletContext]=\"{\n                rowObject: item,\n                column: col,\n                columnTemplates: columnTemplates\n                }\"\n            >\n            </ng-container>\n            } @placeholder {\n            <p-skeleton width=\"5rem\" />\n            }\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n  @for (subtitleLineId of subtitleLineIds; track subtitleLineId) {\n  <div class=\"subtitleLine text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n  }\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n  @if (columnTemplates[column.id]) {\n  <ng-container\n    [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n    [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n  >\n  </ng-container>\n  }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{cursor:pointer;min-width:4rem}.list-border-divider{border-top:.0625rem;border-top-style:solid;border-color:var(--p-surface-200)}.grid-border-divider{border:.0625rem;border-style:solid;border-color:var(--p-surface-200)}\n"] }]
+            args: [{ standalone: false, selector: 'ocx-data-list-grid', template: "@if ((displayedPageSize$ | async); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-dataView\n  [value]=\"(displayedItems$ | async) ?? []\"\n  [paginator]=\"paginator\"\n  [first]=\"page * displayedPageSize\"\n  (onPage)=\"onPageChange($event)\"\n  [rows]=\"displayedPageSize\"\n  [layout]=\"layout\"\n  [showCurrentPageReport]=\"true\"\n  currentPageReportTemplate=\"{{ (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params() }}\"\n  [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n  id=\"dataListGrid_{{name}}\"\n  paginatorDropdownAppendTo=\"body\"\n>\n  <ng-template #grid let-rows>\n    <div class=\"grid grid-cols-12 gap-4\">\n      @for (item of rows; track item) {\n      <ng-container\n        [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n        [ngTemplateOutletContext]=\"{$implicit:item}\"\n      ></ng-container>\n      }\n    </div>\n  </ng-template>\n  <ng-template #list let-rows>\n    <div class=\"p-grid p-nogutter grid grid-nogutter\">\n      @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n      <ng-container\n        [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n        [ngTemplateOutletContext]=\"{\n              $implicit: item,\n              item:item,\n              first:first,\n              columnTemplates: columnTemplates\n              }\"\n      ></ng-container>\n      } @placeholder {\n      <div style=\"width: 100%; height: 80px\"></div>\n      } }\n    </div>\n  </ng-template>\n  <ng-template pTemplate=\"empty\">\n    <span>{{ emptyResultsMessage || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n  </ng-template>\n</p-dataView>\n} }\n\n<ng-template #defaultGridItem let-item>\n  <div class=\"col-12 lg:col-6 xl:col-4 p-1 flex justify-content-center grid-border-divider\">\n    <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n      <div class=\"flex justify-content-center mb-3\">\n        <img\n          class=\"image\"\n          src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n          (error)=\"imgError(item)\"\n          alt=\"{{resolveFieldData(item, titleLineId)|| ''}}\"\n        />\n      </div>\n      <div class=\"flex flex-row justify-content-between align-items-center\">\n        <div class=\"data-grid-items flex-row\">\n          <div class=\"item-name font-medium mr-3 text-2xl\">\n            <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            [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n            tooltipPosition=\"top\"\n          ></button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n  @for (subtitleLineId of subtitleLineIds; track subtitleLineId) {\n  <div class=\"subtitleLine edit-time text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n  }\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-first=\"first\" let-columnTemplates=\"columnTemplates\">\n  @if (columnTemplates) {\n  <div class=\"col-12\">\n    <div class=\"data-list-items p-1\" [ngClass]=\"{ 'list-border-divider': !first }\">\n      <div class=\"item-name-row flex flex-row justify-content-between\">\n        <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n          @if (titleLineId) {\n          <span>{{ resolveFieldData(item, titleLineId) || '' }}</span>\n          }\n        </div>\n        <div class=\"flex flex-row\">\n          @if (viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-viewButton\"\n            type=\"button\"\n            icon=\"pi pi-eye\"\n            pButton\n            class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n            [ocxTooltip]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: !!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)\n            }\"\n            [attr.aria-label]=\"(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n            (click)=\"onViewRow(item)\"\n            *ocxIfPermission=\"viewPermission\"\n            [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(item, viewActionEnabledField)\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } @if (editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-editButton\"\n            type=\"button\"\n            class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n            icon=\"pi pi-pencil\"\n            pButton\n            [ocxTooltip]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: !!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)\n            }\"\n            [attr.aria-label]=\"(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n            (click)=\"onEditRow(item)\"\n            *ocxIfPermission=\"editPermission\"\n            [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(item, editActionEnabledField)\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } @if (deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))) {\n          <button\n            id=\"{{resolveFieldData(item, 'id')}}-deleteButton\"\n            type=\"button\"\n            icon=\"pi pi-trash\"\n            class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n            pButton\n            [ocxTooltip]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: !!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)\n            }\"\n            [attr.aria-label]=\"(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n            (click)=\"onDeleteRow(item)\"\n            *ocxIfPermission=\"deletePermission\"\n            [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(item, deleteActionEnabledField)\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          } @for (action of inlineListActions$ | async; track action) { @if ((!action.actionVisibleField ||\n          fieldIsTruthy(item, action.actionVisibleField))) {\n          @if (typeof action.routerLink === 'string' && !(action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField)))) {\n          <a\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 no-underline\"\n            [ngClass]=\"action.classes\"\n            [icon]=\"action.icon || ''\"\n            [routerLink]=\"action.routerLink\"\n            [ocxTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n            tooltipPosition=\"top\"\n            [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n            [attr.data-testid]=\"'data-list-action-button'\"\n          ></a>\n          } @else {\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)=\"onAdditionalActionClick(action, item)\"\n            [ocxTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n            tooltipPosition=\"top\"\n            [tooltipOptions]=\"{\n              disabled: action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\n            }\"\n            [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n            [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n            [attr.name]=\"'data-list-action-button'\"\n          ></button>\n          }\n          } } @if (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            [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n            tooltipPosition=\"top\"\n            [attr.name]=\"'data-list-overflow-item-menu-button'\"\n          ></button>\n          }\n        </div>\n      </div>\n      <div class=\"text-base font-light my-1\">\n        <ng-container\n          [ngTemplateOutlet]=\"_listItemSubtitleLines ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n          [ngTemplateOutletContext]=\"{$implicit:item}\"\n        ></ng-container>\n      </div>\n      <div class=\"flex flex-wrap\">\n        @for (col of getFilteredColumns(); track col) {\n        <div class=\"w-12rem my-2 mr-2\">\n          <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n            {{ col.nameKey | translate }}\n          </div>\n          <div\n            [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n            tooltipPosition=\"top\"\n          >\n            @defer(on viewport;){\n            <ng-container\n              [ngTemplateOutlet]=\"_listValue ? _listValue: defaultListValue\"\n              [ngTemplateOutletContext]=\"{\n                rowObject: item,\n                column: col,\n                columnTemplates: columnTemplates\n                }\"\n            >\n            </ng-container>\n            } @placeholder {\n            <p-skeleton width=\"5rem\" />\n            }\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n  @for (subtitleLineId of subtitleLineIds; track subtitleLineId) {\n  <div class=\"subtitleLine text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n  }\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n  @if (columnTemplates[column.id]) {\n  <ng-container\n    [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n    [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n  >\n  </ng-container>\n  }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{cursor:pointer;min-width:4rem}.list-border-divider{border-top:.0625rem;border-top-style:solid;border-color:var(--p-surface-200)}.grid-border-divider{border:.0625rem;border-style:solid;border-color:var(--p-surface-200)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { titleLineId: [{
                 type: Input
             }], subtitleLineIds: [{
@@ -2667,7 +2701,7 @@ class DataListGridSortingComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataListGridSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DataListGridSortingComponent, isStandalone: false, selector: "ocx-data-list-grid-sorting", inputs: { columns: "columns", sortStates: "sortStates", sortDirection: "sortDirection", sortField: "sortField" }, outputs: { sortChange: "sortChange", sortDirectionChange: "sortDirectionChange", componentStateChanged: "componentStateChanged", columnsChange: "columnsChange" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n  <p-floatLabel variant=\"on\">\n    <p-select\n      id=\"dataListGridSortingDropdown\"\n      inputId=\"dataListGridSortingDropdownInput\"\n      [(ngModel)]=\"selectedSortingOption\"\n      [options]=\"dropdownOptions\"\n      (onChange)=\"selectSorting($event)\"\n      [ariaLabel]=\"('OCX_LIST_GRID_SORT.DROPDOWN.ARIA_LABEL' | translate)\"\n    >\n      <ng-template let-item #item> {{ item?.columnName ? (item.columnName | translate) : ''}} </ng-template>\n      <ng-template let-item #selectedItem>\n        {{ item?.columnName ? (item.columnName | translate) : ''}}\n      </ng-template></p-select\n    >\n    <label for=\"dataListGridSortingDropdownInput\">{{ (\"OCX_LIST_GRID_SORT.DROPDOWN.LABEL\" | translate) }}</label>\n  </p-floatLabel>\n  <p-button\n    id=\"dataListGridSortingButton\"\n    type=\"button\"\n    icon=\"pi {{sortIcon()}}\"\n    styleClass=\"p-button-outlined\"\n    (onClick)=\"sortDirectionChanged()\"\n    [ocxTooltip]=\"(sortIconTitle() | translate)\"\n    tooltipPosition=\"top\"\n    [ariaLabel]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{direction: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n  ></p-button>\n</div>\n", styles: [".pi{border-radius:var(--border-radius);border-width:thin;background:none;cursor:pointer}:host ::ng-deep .p-select{min-width:12rem}\n"], dependencies: [{ kind: "component", type: i1$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DataListGridSortingComponent, isStandalone: false, selector: "ocx-data-list-grid-sorting", inputs: { columns: "columns", sortStates: "sortStates", sortDirection: "sortDirection", sortField: "sortField" }, outputs: { sortChange: "sortChange", sortDirectionChange: "sortDirectionChange", componentStateChanged: "componentStateChanged", columnsChange: "columnsChange" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n  <p-floatLabel variant=\"on\">\n    <p-select\n      id=\"dataListGridSortingDropdown\"\n      inputId=\"dataListGridSortingDropdownInput\"\n      [(ngModel)]=\"selectedSortingOption\"\n      [options]=\"dropdownOptions\"\n      (onChange)=\"selectSorting($event)\"\n      [ariaLabel]=\"('OCX_LIST_GRID_SORT.DROPDOWN.ARIA_LABEL' | translate)\"\n    >\n      <ng-template let-item #item> {{ item?.columnName ? (item.columnName | translate) : ''}} </ng-template>\n      <ng-template let-item #selectedItem>\n        {{ item?.columnName ? (item.columnName | translate) : ''}}\n      </ng-template></p-select\n    >\n    <label for=\"dataListGridSortingDropdownInput\">{{ (\"OCX_LIST_GRID_SORT.DROPDOWN.LABEL\" | translate) }}</label>\n  </p-floatLabel>\n  <p-button\n    id=\"dataListGridSortingButton\"\n    type=\"button\"\n    icon=\"pi {{sortIcon()}}\"\n    styleClass=\"p-button-outlined\"\n    (onClick)=\"sortDirectionChanged()\"\n    [ocxTooltip]=\"(sortIconTitle() | translate)\"\n    tooltipPosition=\"top\"\n    [ariaLabel]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{direction: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n  ></p-button>\n</div>\n", styles: [".pi{border-radius:var(--border-radius);border-width:thin;background:none;cursor:pointer}:host ::ng-deep .p-select{min-width:12rem}\n"], dependencies: [{ kind: "component", type: i1$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataListGridSortingComponent, decorators: [{
             type: Component,
@@ -2705,6 +2739,7 @@ var TemplateType;
 (function (TemplateType) {
     TemplateType["CELL"] = "CELL";
     TemplateType["FILTERCELL"] = "FILTERCELL";
+    TemplateType["HEADER"] = "HEADER";
 })(TemplateType || (TemplateType = {}));
 class DataTableComponent extends DataSortBase {
     get rows() {
@@ -2761,8 +2796,10 @@ class DataTableComponent extends DataSortBase {
         this._columns$.next(value);
         const obs = value.map((c) => this.getTemplate(c, TemplateType.CELL));
         const filterObs = value.map((c) => this.getTemplate(c, TemplateType.FILTERCELL));
+        const headerObs = value.map((c) => this.getTemplate(c, TemplateType.HEADER));
         this.columnTemplates$ = combineLatest(obs).pipe(map((values) => Object.fromEntries(value.map((c, i) => [c.id, values[i]]))), debounceTime(50));
         this.columnFilterTemplates$ = combineLatest(filterObs).pipe(map((values) => Object.fromEntries(value.map((c, i) => [c.id, values[i]]))));
+        this.columnHeaderTemplates$ = combineLatest(headerObs).pipe(map((values) => Object.fromEntries(value.map((c, i) => [c.id, values[i]]))), debounceTime(50));
     }
     get pageSizes() {
         return this._pageSizes$.getValue();
@@ -2818,6 +2855,9 @@ class DataTableComponent extends DataSortBase {
     get _translationKeyFilterCell() {
         return this.translationKeyFilterCellTemplate || this.translationKeyFilterCellChildTemplate;
     }
+    get _columnHeader() {
+        return this.columnHeaderTemplate || this.columnHeaderChildTemplate;
+    }
     get additionalActions() {
         return this._additionalActions$.getValue();
     }
@@ -2948,6 +2988,11 @@ class DataTableComponent extends DataSortBase {
         this.templatesObservables = {};
         this.expandedRowIds$ = new BehaviorSubject([]);
         this.expandedRowKeys = {};
+        this.headerTemplatesData = {
+            templatesObservables: {},
+            idSuffix: ['IdTableHeader', 'IdHeader'],
+            templateNames: ['columnHeader'],
+        };
         this.cellTemplatesData = {
             templatesObservables: {},
             idSuffix: ['IdTableCell', 'IdCell'],
@@ -2997,6 +3042,7 @@ class DataTableComponent extends DataSortBase {
         this.templatesDataMap = {
             [TemplateType.CELL]: this.cellTemplatesData,
             [TemplateType.FILTERCELL]: this.filterTemplatesData,
+            [TemplateType.HEADER]: this.headerTemplatesData,
         };
         this.rowTrackByFunction = (item) => {
             return item.id;
@@ -3005,21 +3051,7 @@ 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(switchMap(([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.overflowMenuItems$ = combineLatest([this.overflowActions$, this.currentMenuRow$]).pipe(switchMap(([actions, row]) => this.filterActionsBasedOnPermissions(actions).pipe(map((permittedActions) => ({ actions: permittedActions, row: row })))), mergeMap(({ actions, row }) => this.createOverflowMenuItems(actions, row)));
         this.rowSelectable = this.rowSelectable.bind(this);
         this.cachedOverflowActions$ = this.overflowActions$.pipe(shareReplay(1) // Cache the last emitted value
         );
@@ -3143,6 +3175,9 @@ class DataTableComponent extends DataSortBase {
                 case 'translationKeyFilterCell':
                     this.translationKeyFilterCellChildTemplate = item.template;
                     break;
+                case 'columnHeader':
+                    this.columnHeaderChildTemplate = item.template;
+                    break;
             }
         });
         this.allTemplates$ = combineLatest([this.templates$, this.viewTemplates$, this.parentTemplates$]).pipe(map(([templates, viewTemplates, parentTemplates]) => {
@@ -3336,6 +3371,10 @@ class DataTableComponent extends DataSortBase {
     getColumnTypeTemplate(templates, columnType, templateType) {
         let template;
         switch (templateType) {
+            case TemplateType.HEADER:
+                return (this._columnHeader ??
+                    findTemplate(templates, this.templatesDataMap[templateType].templateNames)?.template ??
+                    null);
             case TemplateType.CELL:
                 switch (columnType) {
                     case ColumnType.DATE:
@@ -3373,8 +3412,9 @@ class DataTableComponent extends DataSortBase {
                 }
                 break;
         }
+        const templateNames = this.templatesDataMap[templateType].templateNames;
         return (template ??
-            findTemplate(templates, this.templatesDataMap[templateType].templateNames[columnType])?.template ??
+            findTemplate(templates, templateNames[columnType])?.template ??
             null);
     }
     getTemplate(column, templateType) {
@@ -3403,6 +3443,26 @@ class DataTableComponent extends DataSortBase {
             [column.id]: value.label,
         };
     }
+    createOverflowMenuItems(actions, row) {
+        if (actions.length === 0) {
+            return of([]);
+        }
+        const translationKeys = actions.map((a) => a.labelKey || '');
+        return this.translateService
+            .get(translationKeys)
+            .pipe(map((translations) => actions.map((action) => this.toOverflowMenuItem(action, row, translations))));
+    }
+    toOverflowMenuItem(action, row, translations) {
+        return {
+            label: translations[action.labelKey || ''] || action.labelKey || action.id || 'Action',
+            icon: action.icon,
+            styleClass: (action.classes || []).join(' '),
+            disabled: action.disabled || (!!action.actionEnabledField && !this.fieldIsTruthy(row, action.actionEnabledField)),
+            visible: !action.actionVisibleField || this.fieldIsTruthy(row, action.actionVisibleField),
+            routerLink: typeof action.routerLink === 'string' ? action.routerLink : undefined,
+            command: typeof action.routerLink === 'string' ? undefined : () => action.callback?.(row),
+        };
+    }
     filterActionsBasedOnPermissions(actions) {
         const getPermissions = this.hasPermissionChecker?.getPermissions?.bind(this.hasPermissionChecker) ||
             this.userService.getPermissions.bind(this.userService);
@@ -3414,11 +3474,11 @@ class DataTableComponent extends DataSortBase {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DataTableComponent, isStandalone: false, selector: "ocx-data-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: false, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: false, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: false, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: false, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: false, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: false, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: false, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: false, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: false, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: false, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: false, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, selectionEnabledField: { classPropertyName: "selectionEnabledField", publicName: "selectionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: false, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: false, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: false, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: false, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: false, isRequired: false, transformFunction: null }, stringCellTemplate: { classPropertyName: "stringCellTemplate", publicName: "stringCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, numberCellTemplate: { classPropertyName: "numberCellTemplate", publicName: "numberCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, dateCellTemplate: { classPropertyName: "dateCellTemplate", publicName: "dateCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, relativeDateCellTemplate: { classPropertyName: "relativeDateCellTemplate", publicName: "relativeDateCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: false, isRequired: false, transformFunction: null }, translationKeyCellTemplate: { classPropertyName: "translationKeyCellTemplate", publicName: "translationKeyCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, stringFilterCellTemplate: { classPropertyName: "stringFilterCellTemplate", publicName: "stringFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, numberFilterCellTemplate: { classPropertyName: "numberFilterCellTemplate", publicName: "numberFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, dateFilterCellTemplate: { classPropertyName: "dateFilterCellTemplate", publicName: "dateFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, relativeDateFilterCellTemplate: { classPropertyName: "relativeDateFilterCellTemplate", publicName: "relativeDateFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, filterCellTemplate: { classPropertyName: "filterCellTemplate", publicName: "filterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, translationKeyFilterCellTemplate: { classPropertyName: "translationKeyFilterCellTemplate", publicName: "translationKeyFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: false, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: false, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: false, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: false, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: false, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: false, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed" }, queries: [{ propertyName: "stringCellChildTemplate", first: true, predicate: ["stringCell"], descendants: true }, { propertyName: "numberCellChildTemplate", first: true, predicate: ["numberCell"], descendants: true }, { propertyName: "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: "dateFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateFilterCellChildTemplate", first: true, predicate: ["relativeDateFilterCell"], descendants: true }, { propertyName: "filterCellChildTemplate", first: true, predicate: ["filterCell"], descendants: true }, { propertyName: "translationKeyFilterCellChildTemplate", first: true, predicate: ["translationKeyFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  @if (actionColumnVisible) {\n  <td\n    class=\"actions\"\n    pFrozenColumn\n    [frozen]=\"frozenActionColumn\"\n    [alignFrozen]=\"actionColumnPosition\"\n    [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-left' : 'action-column-right'\"\n    [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n  >\n    <div class=\"icon-button-row-wrapper\">\n      @if (viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))) {\n      <button\n        id=\"{{resolveFieldData(rowObject, 'id')}}-viewButton\"\n        *ocxIfPermission=\"viewPermission\"\n        [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(rowObject, viewActionEnabledField)\"\n        pButton\n        class=\"p-button-rounded p-button-text viewTableRowButton\"\n        title=\"{{ 'OCX_DATA_TABLE.ACTIONS.VIEW' | translate }}\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n        icon=\"pi pi-eye\"\n        (click)=\"onViewRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @if (editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))) {\n      <button\n        id=\"{{resolveFieldData(rowObject, 'id')}}-editButton\"\n        *ocxIfPermission=\"editPermission\"\n        [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(rowObject, editActionEnabledField)\"\n        pButton\n        class=\"p-button-rounded p-button-text editTableRowButton\"\n        title=\"{{ 'OCX_DATA_TABLE.ACTIONS.EDIT' | translate }}\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n        icon=\"pi pi-pencil\"\n        (click)=\"onEditRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @if (deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject,\n      deleteActionVisibleField))) {\n      <button\n        id=\"{{resolveFieldData(rowObject, 'id')}}-deleteButton\"\n        *ocxIfPermission=\"deletePermission\"\n        [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(rowObject, deleteActionEnabledField)\"\n        pButton\n        class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n        title=\"{{ 'OCX_DATA_TABLE.ACTIONS.DELETE' | translate }}\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n        icon=\"pi pi-trash\"\n        (click)=\"onDeleteRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @for (action of inlineActions$ | async; track action) { @if ((!action.actionVisibleField ||\n      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      } } @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n      <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n      <button\n        pButton\n        class=\"p-button-rounded p-button-text\"\n        [icon]=\"'pi pi-ellipsis-v'\"\n        (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n        [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n        [name]=\"'data-table-overflow-action-button'\"\n      ></button>\n      }\n    </div>\n  </td>\n  }\n</ng-template>\n\n<ng-template #expansionColumnHeader>\n  @if (expandable && (expansionTemplate$ | async)) {\n  <th\n    pFrozenColumn\n    [frozen]=\"frozenExpandColumn\"\n    alignFrozen=\"left\"\n    [attr.name]=\"'expansion-column-header'\"\n    style=\"width: 4rem\"\n  ></th>\n  }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  @if (actionColumnVisible) {\n  <th\n    pFrozenColumn\n    [frozen]=\"frozenActionColumn\"\n    [alignFrozen]=\"actionColumnPosition\"\n    [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n    [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n  >\n    {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n  </th>\n  }\n</ng-template>\n\n@if ((displayedPageSize$ | async); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-table\n  [value]=\"(displayedRows$ | async) ?? []\"\n  responsiveLayout=\"scroll\"\n  [paginator]=\"paginator\"\n  [first]=\"page * displayedPageSize\"\n  (onPage)=\"onPageChange($event)\"\n  [rows]=\"displayedPageSize\"\n  [showCurrentPageReport]=\"true\"\n  currentPageReportTemplate=\"{{ (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params() }}\"\n  [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n  id=\"dataTable_{{name}}\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  dataKey=\"id\"\n  [rowTrackBy]=\"rowTrackByFunction\"\n  [selection]=\"(selectedRows$ | async) ?? []\"\n  [scrollable]=\"true\"\n  scrollHeight=\"flex\"\n  [style]=\"tableStyle\"\n  paginatorDropdownAppendTo=\"body\"\n  [rowSelectable]=\"rowSelectable\"\n  tableStyleClass=\"h-full\"\n  [expandedRowKeys]=\"expandedRowKeys\"\n  (onRowExpand)=\"onRowExpand($event)\"\n  (onRowCollapse)=\"onRowCollapse($event)\"\n>\n  <ng-template #header>\n    <tr style=\"vertical-align: top\">\n      <ng-container *ngTemplateOutlet=\"expansionColumnHeader\"></ng-container>\n      @if (selectionChangedObserved) {\n      <th style=\"width: 4rem\" scope=\"col\">\n        @if (allowSelectAll) {\n        <p-tableHeaderCheckbox\n          ocxTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n          ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n        ></p-tableHeaderCheckbox>\n        }\n      </th>\n      } @if (actionColumnPosition === 'left';) {\n      <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n      } @for (column of columns; track column) { @if (column.sortable || column.filterable) {\n      <th scope=\"col\">\n        <div\n          class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n          style=\"height: 100%\"\n        >\n          <span class=\"flex\" id=\"{{column.id}}-header-name\">{{ column.nameKey | translate }}</span>\n          <span class=\"flex icon-button-header-wrapper\">\n            @if (column.sortable) {\n            <button\n              class=\"pi sortButton pl-0\"\n              [class.pi-sort-alt]=\"(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn\"\n              [class.pi-sort-amount-up]=\"column?.id === sortColumn && sortDirection === 'ASCENDING'\"\n              [class.pi-sort-amount-down]=\"column?.id === sortColumn && sortDirection === 'DESCENDING'\"\n              (click)=\"onSortColumnClick(column.id)\"\n              [ocxTooltip]=\"sortIconTitle(column.id) | translate \"\n              tooltipPosition=\"bottom\"\n              [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n            ></button>\n            } @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { @if (columnFilterTemplates$ | async; as\n            columnFilterTemplates) { @if (column.filterable && (!column.filterType || column.filterType ===\n            FilterType.EQUALS)) {\n            <p-multiselect\n              class=\"filterMultiSelect\"\n              [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n              [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\n              [showToggleAll]=\"true\"\n              emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n              [displaySelectedLabel]=\"false\"\n              [resetFilterOnHide]=\"true\"\n              (onChange)=\"onMultiselectFilterChange(column, $event)\"\n              placeholder=\" \"\n              appendTo=\"body\"\n              filterBy=\"toFilterBy\"\n              (onFocus)=\"onFilterChosen(column)\"\n              [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n              [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n              [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n            >\n              <ng-template #selecteditems let-value>\n                <div\n                  class=\"pi\"\n                  [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                  [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                ></div>\n              </ng-template>\n              <ng-template #item let-value>\n                @if (columnFilterTemplates[column.id]; as template) {\n                <ng-container\n                  [ngTemplateOutlet]=\"template\"\n                  [ngTemplateOutletContext]=\"{\n                      rowObject: getRowObjectFromMultiselectItem(value, column),\n                      column: column\n                  }\"\n                >\n                </ng-container>\n                }\n              </ng-template>\n            </p-multiselect>\n            } } } @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n            <p-multiselect\n              class=\"filterMultiSelect\"\n              [options]=\"truthyFilterOptions\"\n              [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\n              [showToggleAll]=\"true\"\n              emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n              [displaySelectedLabel]=\"false\"\n              [resetFilterOnHide]=\"true\"\n              (onChange)=\"onMultiselectFilterChange(column, $event)\"\n              placeholder=\" \"\n              appendTo=\"body\"\n              (onFocus)=\"onFilterChosen(column)\"\n              [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n              [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n              [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n            >\n              <ng-template #selecteditems let-value>\n                <div\n                  class=\"pi\"\n                  [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                  [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                ></div>\n              </ng-template>\n              <ng-template #item let-value> {{value.key | translate}} </ng-template>\n            </p-multiselect>\n            }\n          </span>\n        </div>\n      </th>\n      } @else {\n      <th scope=\"col\">{{ column.nameKey | translate }}</th>\n      } } @if (actionColumnPosition === 'right';) {\n      <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n      }\n    </tr>\n  </ng-template>\n  <ng-template #body let-rowObject>\n    @if (columnTemplates) {\n    <tr>\n      <ng-container *ngTemplateOutlet=\"expansionColumn; context: {localRowObject: rowObject}\"></ng-container>\n      @if (selectionChangedObserved) {\n      <td>\n        @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n        <p-checkbox\n          [(ngModel)]=\"checked\"\n          [binary]=\"true\"\n          [disabled]=\"true\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n        ></p-checkbox>\n        } @else {\n        <p-tableCheckbox\n          [value]=\"rowObject\"\n          [disabled]=\"isRowSelectionDisabled(rowObject)\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n        ></p-tableCheckbox>\n        }\n      </td>\n      } @if (actionColumnPosition === 'left';) {\n      <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n      } @for (column of columns; track column) {\n      <td>\n        @defer(on viewport){ @if (columnTemplates[column.id]) {\n        <ng-container\n          [ngTemplateOutlet]=\"\n                _cell ? _cell: columnTemplates[column.id]\n              \"\n          [ngTemplateOutletContext]=\"{\n                  rowObject: rowObject,\n                  column: column,\n              }\"\n        >\n        </ng-container>\n        } } @placeholder {\n        <p-skeleton width=\"3rem\" />\n        }\n      </td>\n      } @if (actionColumnPosition === 'right';) {\n      <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n      }\n    </tr>\n    }\n  </ng-template>\n\n  <ng-template #expandedrow let-rowObject>\n    @if (expansionTemplate$ | async; as expansionTemplate) {\n    <tr>\n      <td [attr.colspan]=\"getRowColspan(!!expansionTemplate)\">\n        <ng-container\n          [ngTemplateOutlet]=\"expansionTemplate.template\"\n          [ngTemplateOutletContext]=\"{\n            rowObject: rowObject\n          }\"\n        >\n        </ng-container>\n      </td>\n    </tr>\n    }\n  </ng-template>\n\n  <ng-template #emptymessage>\n    <tr>\n      <td [colSpan]=\"getRowColspan(!!(expansionTemplate$ | async))\">\n        {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n      </td>\n    </tr>\n  </ng-template>\n</p-table>\n} }\n\n<ng-template #expansionColumn let-rowObject=\"localRowObject\">\n  @if (expandable && (expansionTemplate$ | async)) {\n  <td pFrozenColumn [frozen]=\"frozenExpandColumn\" alignFrozen=\"left\" [attr.name]=\"'expansion-column'\">\n    <button\n      type=\"button\"\n      pButton\n      pRipple\n      [icon]=\"isRowExpanded(rowObject) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n      class=\"p-button-rounded p-button-text\"\n      (click)=\"toggleRowExpansion(rowObject)\"\n      [attr.aria-label]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate) : ('OCX_DATA_TABLE.EXPANDED_ROW' | translate)\"\n      [title]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate) : ('OCX_DATA_TABLE.EXPANDED_ROW' | translate)\"\n    ></button>\n  </td>\n  }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i5$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i5$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i5$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i7$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DataTableComponent, isStandalone: false, selector: "ocx-data-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: false, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: false, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: false, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: false, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: false, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: false, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: false, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: false, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: false, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: false, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: false, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, selectionEnabledField: { classPropertyName: "selectionEnabledField", publicName: "selectionEnabledField", isSignal: false, isRequired: false, transformFunction: null }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: false, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: false, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: false, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: false, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: false, isRequired: false, transformFunction: null }, stringCellTemplate: { classPropertyName: "stringCellTemplate", publicName: "stringCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, numberCellTemplate: { classPropertyName: "numberCellTemplate", publicName: "numberCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, dateCellTemplate: { classPropertyName: "dateCellTemplate", publicName: "dateCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, relativeDateCellTemplate: { classPropertyName: "relativeDateCellTemplate", publicName: "relativeDateCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: false, isRequired: false, transformFunction: null }, translationKeyCellTemplate: { classPropertyName: "translationKeyCellTemplate", publicName: "translationKeyCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, stringFilterCellTemplate: { classPropertyName: "stringFilterCellTemplate", publicName: "stringFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, numberFilterCellTemplate: { classPropertyName: "numberFilterCellTemplate", publicName: "numberFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, dateFilterCellTemplate: { classPropertyName: "dateFilterCellTemplate", publicName: "dateFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, relativeDateFilterCellTemplate: { classPropertyName: "relativeDateFilterCellTemplate", publicName: "relativeDateFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, filterCellTemplate: { classPropertyName: "filterCellTemplate", publicName: "filterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, translationKeyFilterCellTemplate: { classPropertyName: "translationKeyFilterCellTemplate", publicName: "translationKeyFilterCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, columnHeaderTemplate: { classPropertyName: "columnHeaderTemplate", publicName: "columnHeaderTemplate", isSignal: false, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: false, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: false, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: false, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: false, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: false, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: false, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed" }, queries: [{ propertyName: "stringCellChildTemplate", first: true, predicate: ["stringCell"], descendants: true }, { propertyName: "numberCellChildTemplate", first: true, predicate: ["numberCell"], descendants: true }, { propertyName: "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: "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: "columnHeaderChildTemplate", first: true, predicate: ["columnHeader"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  @if (actionColumnVisible) {\n  <td\n    class=\"actions\"\n    pFrozenColumn\n    [frozen]=\"frozenActionColumn\"\n    [alignFrozen]=\"actionColumnPosition\"\n    [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-left' : 'action-column-right'\"\n    [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n  >\n    <div class=\"icon-button-row-wrapper\">\n      @if (viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))) {\n      <button\n        id=\"{{resolveFieldData(rowObject, 'id')}}-viewButton\"\n        *ocxIfPermission=\"viewPermission\"\n        [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(rowObject, viewActionEnabledField)\"\n        pButton\n        class=\"p-button-rounded p-button-text viewTableRowButton\"\n        title=\"{{ 'OCX_DATA_TABLE.ACTIONS.VIEW' | translate }}\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n        icon=\"pi pi-eye\"\n        (click)=\"onViewRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @if (editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))) {\n      <button\n        id=\"{{resolveFieldData(rowObject, 'id')}}-editButton\"\n        *ocxIfPermission=\"editPermission\"\n        [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(rowObject, editActionEnabledField)\"\n        pButton\n        class=\"p-button-rounded p-button-text editTableRowButton\"\n        title=\"{{ 'OCX_DATA_TABLE.ACTIONS.EDIT' | translate }}\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n        icon=\"pi pi-pencil\"\n        (click)=\"onEditRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @if (deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject,\n      deleteActionVisibleField))) {\n      <button\n        id=\"{{resolveFieldData(rowObject, 'id')}}-deleteButton\"\n        *ocxIfPermission=\"deletePermission\"\n        [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(rowObject, deleteActionEnabledField)\"\n        pButton\n        class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n        title=\"{{ 'OCX_DATA_TABLE.ACTIONS.DELETE' | translate }}\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n        icon=\"pi pi-trash\"\n        (click)=\"onDeleteRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @for (action of inlineActions$ | async; track action) { @if ((!action.actionVisibleField ||\n      fieldIsTruthy(rowObject, action.actionVisibleField))) {\n      @if (typeof action.routerLink === 'string' && !(action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField)))) {\n      <a\n        id=\"{{resolveFieldData(rowObject, 'id')}}-{{action.id ? action.id.concat('ActionButton') : 'inlineActionButton'}}\"\n        *ocxIfPermission=\"action.permission\"\n        pButton\n        [routerLink]=\"action.routerLink\"\n        class=\"p-button-rounded p-button-text no-underline\"\n        [ngClass]=\"action.classes\"\n        [icon]=\"action.icon || ''\"\n        [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n        [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n        [attr.data-testid]=\"'data-table-action-button'\"\n      ></a>\n      } @else {\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      } } } @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n      <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n      <button\n        pButton\n        class=\"p-button-rounded p-button-text\"\n        [icon]=\"'pi pi-ellipsis-v'\"\n        (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n        [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n        [name]=\"'data-table-overflow-action-button'\"\n      ></button>\n      }\n    </div>\n  </td>\n  }\n</ng-template>\n\n<ng-template #expansionColumnHeader>\n  @if (expandable && (expansionTemplate$ | async)) {\n  <th\n    pFrozenColumn\n    [frozen]=\"frozenExpandColumn\"\n    alignFrozen=\"left\"\n    [attr.name]=\"'expansion-column-header'\"\n    style=\"width: 4rem\"\n  ></th>\n  }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  @if (actionColumnVisible) {\n  <th\n    pFrozenColumn\n    [frozen]=\"frozenActionColumn\"\n    [alignFrozen]=\"actionColumnPosition\"\n    [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n    [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n  >\n    {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n  </th>\n  }\n</ng-template>\n\n@if ((displayedPageSize$ | async); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n@if ((columnHeaderTemplates$ | async) ?? {}; as columnHeaderTemplates) {\n<p-table\n  [value]=\"(displayedRows$ | async) ?? []\"\n  responsiveLayout=\"scroll\"\n  [paginator]=\"paginator\"\n  [first]=\"page * displayedPageSize\"\n  (onPage)=\"onPageChange($event)\"\n  [rows]=\"displayedPageSize\"\n  [showCurrentPageReport]=\"true\"\n  currentPageReportTemplate=\"{{ (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params() }}\"\n  [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n  id=\"dataTable_{{name}}\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  dataKey=\"id\"\n  [rowTrackBy]=\"rowTrackByFunction\"\n  [selection]=\"(selectedRows$ | async) ?? []\"\n  [scrollable]=\"true\"\n  scrollHeight=\"flex\"\n  [style]=\"tableStyle\"\n  paginatorDropdownAppendTo=\"body\"\n  [rowSelectable]=\"rowSelectable\"\n  tableStyleClass=\"h-full\"\n  [expandedRowKeys]=\"expandedRowKeys\"\n  (onRowExpand)=\"onRowExpand($event)\"\n  (onRowCollapse)=\"onRowCollapse($event)\"\n>\n  <ng-template #header>\n    <tr style=\"vertical-align: top\">\n      <ng-container *ngTemplateOutlet=\"expansionColumnHeader\"></ng-container>\n      @if (selectionChangedObserved) {\n      <th style=\"width: 4rem\" scope=\"col\">\n        @if (allowSelectAll) {\n        <p-tableHeaderCheckbox\n          ocxTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n          ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n        ></p-tableHeaderCheckbox>\n        }\n      </th>\n      } @if (actionColumnPosition === 'left';) {\n      <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n      } @for (column of columns; track column) { \n      <th scope=\"col\">\n        @if (columnHeaderTemplates[column.id]; as columnHeaderTemplate){\n          <ng-container\n            [ngTemplateOutlet]=\"columnHeaderTemplate\"\n            [ngTemplateOutletContext]=\"{ column: column, labelTemplate: columnHeaderLabel, sortTemplate: columnHeaderSortButton, filterTemplate: columnHeaderFilter }\"\n          ></ng-container>\n        } @else {\n          @if (column.sortable || column.filterable) {\n            <div class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\" style=\"height: 100%\">\n              <span class=\"flex\" id=\"{{column.id}}-header-name\">\n                <ng-container [ngTemplateOutlet]=\"columnHeaderLabel\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n              </span>\n              <span class=\"flex icon-button-header-wrapper\">\n                <ng-container [ngTemplateOutlet]=\"columnHeaderSortButton\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n                <ng-container [ngTemplateOutlet]=\"columnHeaderFilter\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n              </span>\n            </div>\n          } @else {\n            <ng-container [ngTemplateOutlet]=\"columnHeaderLabel\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n          }\n        }\n      </th>\n      } @if (actionColumnPosition === 'right';) {\n      <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n      }\n    </tr>\n  </ng-template>\n  <ng-template #body let-rowObject>\n    @if (columnTemplates) {\n    <tr>\n      <ng-container *ngTemplateOutlet=\"expansionColumn; context: {localRowObject: rowObject}\"></ng-container>\n      @if (selectionChangedObserved) {\n      <td>\n        @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n        <p-checkbox\n          [(ngModel)]=\"checked\"\n          [binary]=\"true\"\n          [disabled]=\"true\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n        ></p-checkbox>\n        } @else {\n        <p-tableCheckbox\n          [value]=\"rowObject\"\n          [disabled]=\"isRowSelectionDisabled(rowObject)\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n        ></p-tableCheckbox>\n        }\n      </td>\n      } @if (actionColumnPosition === 'left';) {\n      <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n      } @for (column of columns; track column) {\n      <td>\n        @defer(on viewport){ @if (columnTemplates[column.id]) {\n        <ng-container\n          [ngTemplateOutlet]=\"\n                _cell ? _cell: columnTemplates[column.id]\n              \"\n          [ngTemplateOutletContext]=\"{\n                  rowObject: rowObject,\n                  column: column,\n              }\"\n        >\n        </ng-container>\n        } } @placeholder {\n        <p-skeleton width=\"3rem\" />\n        }\n      </td>\n      } @if (actionColumnPosition === 'right';) {\n      <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n      }\n    </tr>\n    }\n  </ng-template>\n\n  <ng-template #expandedrow let-rowObject>\n    @if (expansionTemplate$ | async; as expansionTemplate) {\n    <tr>\n      <td [attr.colspan]=\"getRowColspan(!!expansionTemplate)\">\n        <ng-container\n          [ngTemplateOutlet]=\"expansionTemplate.template\"\n          [ngTemplateOutletContext]=\"{\n            rowObject: rowObject\n          }\"\n        >\n        </ng-container>\n      </td>\n    </tr>\n    }\n  </ng-template>\n\n  <ng-template #emptymessage>\n    <tr>\n      <td [colSpan]=\"getRowColspan(!!(expansionTemplate$ | async))\">\n        {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n      </td>\n    </tr>\n  </ng-template>\n</p-table>\n} } }\n\n<ng-template #expansionColumn let-rowObject=\"localRowObject\">\n  @if (expandable && (expansionTemplate$ | async)) {\n  <td pFrozenColumn [frozen]=\"frozenExpandColumn\" alignFrozen=\"left\" [attr.name]=\"'expansion-column'\">\n    <button\n      type=\"button\"\n      pButton\n      pRipple\n      [icon]=\"isRowExpanded(rowObject) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n      class=\"p-button-rounded p-button-text\"\n      (click)=\"toggleRowExpansion(rowObject)\"\n      [attr.aria-label]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate) : ('OCX_DATA_TABLE.EXPANDED_ROW' | translate)\"\n      [title]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate) : ('OCX_DATA_TABLE.EXPANDED_ROW' | translate)\"\n    ></button>\n  </td>\n  }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"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\n<ng-template #columnHeaderLabel let-column=\"column\">{{ column.nameKey | translate }}</ng-template>\n\n<ng-template #columnHeaderSortButton let-column=\"column\">\n  @if (column.sortable) {\n  <button\n    class=\"pi sortButton pl-0\"\n    [class.pi-sort-alt]=\"(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn\"\n    [class.pi-sort-amount-up]=\"column?.id === sortColumn && sortDirection === 'ASCENDING'\"\n    [class.pi-sort-amount-down]=\"column?.id === sortColumn && sortDirection === 'DESCENDING'\"\n    (click)=\"onSortColumnClick(column.id)\"\n    [ocxTooltip]=\"sortIconTitle(column.id) | translate \"\n    tooltipPosition=\"top\"\n    [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n  ></button>\n  }\n</ng-template>\n\n<ng-template #columnHeaderFilter let-column=\"column\">\n  @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { @if (columnFilterTemplates$ | async; as\n  columnFilterTemplates) { @if (column.filterable && (!column.filterType || column.filterType ===\n  FilterType.EQUALS)) {\n  <p-multiselect\n    class=\"filterMultiSelect\"\n    [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n    [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\n    [showToggleAll]=\"true\"\n    emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n    [displaySelectedLabel]=\"false\"\n    [resetFilterOnHide]=\"true\"\n    (onChange)=\"onMultiselectFilterChange(column, $event)\"\n    placeholder=\" \"\n    appendTo=\"body\"\n    filterBy=\"toFilterBy\"\n    (onFocus)=\"onFilterChosen(column)\"\n    [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n    [ocxTooltip]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n    tooltipPosition=\"top\"\n    [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n    [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n  >\n    <ng-template #selecteditems let-value>\n      <div\n        class=\"pi\"\n        [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n        [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n      ></div>\n    </ng-template>\n    <ng-template #item let-value>\n      @if (columnFilterTemplates[column.id]; as template) {\n      <ng-container\n        [ngTemplateOutlet]=\"template\"\n        [ngTemplateOutletContext]=\"{\n            rowObject: getRowObjectFromMultiselectItem(value, column),\n            column: column\n        }\"\n      >\n      </ng-container>\n      }\n    </ng-template>\n  </p-multiselect>\n  } } } @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n  <p-multiselect\n    class=\"filterMultiSelect\"\n    [options]=\"truthyFilterOptions\"\n    [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\n    [showToggleAll]=\"true\"\n    emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n    [displaySelectedLabel]=\"false\"\n    [resetFilterOnHide]=\"true\"\n    (onChange)=\"onMultiselectFilterChange(column, $event)\"\n    placeholder=\" \"\n    appendTo=\"body\"\n    (onFocus)=\"onFilterChosen(column)\"\n    [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n    [ocxTooltip]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n    tooltipPosition=\"top\"\n    [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n    [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n  >\n    <ng-template #selecteditems let-value>\n      <div\n        class=\"pi\"\n        [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n        [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n      ></div>\n    </ng-template>\n    <ng-template #item let-value> {{value.key | translate}} </ng-template>\n  </p-multiselect>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i5$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i5$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i5$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i5.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i7$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i6.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet]] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  @if (actionColumnVisible) {\n  <td\n    class=\"actions\"\n    pFrozenColumn\n    [frozen]=\"frozenActionColumn\"\n    [alignFrozen]=\"actionColumnPosition\"\n    [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-left' : 'action-column-right'\"\n    [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n  >\n    <div class=\"icon-button-row-wrapper\">\n      @if (viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))) {\n      <button\n        id=\"{{resolveFieldData(rowObject, 'id')}}-viewButton\"\n        *ocxIfPermission=\"viewPermission\"\n        [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(rowObject, viewActionEnabledField)\"\n        pButton\n        class=\"p-button-rounded p-button-text viewTableRowButton\"\n        title=\"{{ 'OCX_DATA_TABLE.ACTIONS.VIEW' | translate }}\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n        icon=\"pi pi-eye\"\n        (click)=\"onViewRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @if (editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))) {\n      <button\n        id=\"{{resolveFieldData(rowObject, 'id')}}-editButton\"\n        *ocxIfPermission=\"editPermission\"\n        [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(rowObject, editActionEnabledField)\"\n        pButton\n        class=\"p-button-rounded p-button-text editTableRowButton\"\n        title=\"{{ 'OCX_DATA_TABLE.ACTIONS.EDIT' | translate }}\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n        icon=\"pi pi-pencil\"\n        (click)=\"onEditRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @if (deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject,\n      deleteActionVisibleField))) {\n      <button\n        id=\"{{resolveFieldData(rowObject, 'id')}}-deleteButton\"\n        *ocxIfPermission=\"deletePermission\"\n        [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(rowObject, deleteActionEnabledField)\"\n        pButton\n        class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n        title=\"{{ 'OCX_DATA_TABLE.ACTIONS.DELETE' | translate }}\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n        icon=\"pi pi-trash\"\n        (click)=\"onDeleteRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @for (action of inlineActions$ | async; track action) { @if ((!action.actionVisibleField ||\n      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      } } @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n      <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n      <button\n        pButton\n        class=\"p-button-rounded p-button-text\"\n        [icon]=\"'pi pi-ellipsis-v'\"\n        (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n        [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n        [name]=\"'data-table-overflow-action-button'\"\n      ></button>\n      }\n    </div>\n  </td>\n  }\n</ng-template>\n\n<ng-template #expansionColumnHeader>\n  @if (expandable && (expansionTemplate$ | async)) {\n  <th\n    pFrozenColumn\n    [frozen]=\"frozenExpandColumn\"\n    alignFrozen=\"left\"\n    [attr.name]=\"'expansion-column-header'\"\n    style=\"width: 4rem\"\n  ></th>\n  }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  @if (actionColumnVisible) {\n  <th\n    pFrozenColumn\n    [frozen]=\"frozenActionColumn\"\n    [alignFrozen]=\"actionColumnPosition\"\n    [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n    [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n  >\n    {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n  </th>\n  }\n</ng-template>\n\n@if ((displayedPageSize$ | async); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-table\n  [value]=\"(displayedRows$ | async) ?? []\"\n  responsiveLayout=\"scroll\"\n  [paginator]=\"paginator\"\n  [first]=\"page * displayedPageSize\"\n  (onPage)=\"onPageChange($event)\"\n  [rows]=\"displayedPageSize\"\n  [showCurrentPageReport]=\"true\"\n  currentPageReportTemplate=\"{{ (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params() }}\"\n  [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n  id=\"dataTable_{{name}}\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  dataKey=\"id\"\n  [rowTrackBy]=\"rowTrackByFunction\"\n  [selection]=\"(selectedRows$ | async) ?? []\"\n  [scrollable]=\"true\"\n  scrollHeight=\"flex\"\n  [style]=\"tableStyle\"\n  paginatorDropdownAppendTo=\"body\"\n  [rowSelectable]=\"rowSelectable\"\n  tableStyleClass=\"h-full\"\n  [expandedRowKeys]=\"expandedRowKeys\"\n  (onRowExpand)=\"onRowExpand($event)\"\n  (onRowCollapse)=\"onRowCollapse($event)\"\n>\n  <ng-template #header>\n    <tr style=\"vertical-align: top\">\n      <ng-container *ngTemplateOutlet=\"expansionColumnHeader\"></ng-container>\n      @if (selectionChangedObserved) {\n      <th style=\"width: 4rem\" scope=\"col\">\n        @if (allowSelectAll) {\n        <p-tableHeaderCheckbox\n          ocxTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n          ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n        ></p-tableHeaderCheckbox>\n        }\n      </th>\n      } @if (actionColumnPosition === 'left';) {\n      <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n      } @for (column of columns; track column) { @if (column.sortable || column.filterable) {\n      <th scope=\"col\">\n        <div\n          class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n          style=\"height: 100%\"\n        >\n          <span class=\"flex\" id=\"{{column.id}}-header-name\">{{ column.nameKey | translate }}</span>\n          <span class=\"flex icon-button-header-wrapper\">\n            @if (column.sortable) {\n            <button\n              class=\"pi sortButton pl-0\"\n              [class.pi-sort-alt]=\"(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn\"\n              [class.pi-sort-amount-up]=\"column?.id === sortColumn && sortDirection === 'ASCENDING'\"\n              [class.pi-sort-amount-down]=\"column?.id === sortColumn && sortDirection === 'DESCENDING'\"\n              (click)=\"onSortColumnClick(column.id)\"\n              [ocxTooltip]=\"sortIconTitle(column.id) | translate \"\n              tooltipPosition=\"bottom\"\n              [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n            ></button>\n            } @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { @if (columnFilterTemplates$ | async; as\n            columnFilterTemplates) { @if (column.filterable && (!column.filterType || column.filterType ===\n            FilterType.EQUALS)) {\n            <p-multiselect\n              class=\"filterMultiSelect\"\n              [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n              [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\n              [showToggleAll]=\"true\"\n              emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n              [displaySelectedLabel]=\"false\"\n              [resetFilterOnHide]=\"true\"\n              (onChange)=\"onMultiselectFilterChange(column, $event)\"\n              placeholder=\" \"\n              appendTo=\"body\"\n              filterBy=\"toFilterBy\"\n              (onFocus)=\"onFilterChosen(column)\"\n              [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n              [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n              [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n            >\n              <ng-template #selecteditems let-value>\n                <div\n                  class=\"pi\"\n                  [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                  [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                ></div>\n              </ng-template>\n              <ng-template #item let-value>\n                @if (columnFilterTemplates[column.id]; as template) {\n                <ng-container\n                  [ngTemplateOutlet]=\"template\"\n                  [ngTemplateOutletContext]=\"{\n                      rowObject: getRowObjectFromMultiselectItem(value, column),\n                      column: column\n                  }\"\n                >\n                </ng-container>\n                }\n              </ng-template>\n            </p-multiselect>\n            } } } @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n            <p-multiselect\n              class=\"filterMultiSelect\"\n              [options]=\"truthyFilterOptions\"\n              [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\n              [showToggleAll]=\"true\"\n              emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n              [displaySelectedLabel]=\"false\"\n              [resetFilterOnHide]=\"true\"\n              (onChange)=\"onMultiselectFilterChange(column, $event)\"\n              placeholder=\" \"\n              appendTo=\"body\"\n              (onFocus)=\"onFilterChosen(column)\"\n              [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n              [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n              [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n            >\n              <ng-template #selecteditems let-value>\n                <div\n                  class=\"pi\"\n                  [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                  [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                ></div>\n              </ng-template>\n              <ng-template #item let-value> {{value.key | translate}} </ng-template>\n            </p-multiselect>\n            }\n          </span>\n        </div>\n      </th>\n      } @else {\n      <th scope=\"col\">{{ column.nameKey | translate }}</th>\n      } } @if (actionColumnPosition === 'right';) {\n      <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n      }\n    </tr>\n  </ng-template>\n  <ng-template #body let-rowObject>\n    @if (columnTemplates) {\n    <tr>\n      <ng-container *ngTemplateOutlet=\"expansionColumn; context: {localRowObject: rowObject}\"></ng-container>\n      @if (selectionChangedObserved) {\n      <td>\n        @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n        <p-checkbox\n          [(ngModel)]=\"checked\"\n          [binary]=\"true\"\n          [disabled]=\"true\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n        ></p-checkbox>\n        } @else {\n        <p-tableCheckbox\n          [value]=\"rowObject\"\n          [disabled]=\"isRowSelectionDisabled(rowObject)\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n        ></p-tableCheckbox>\n        }\n      </td>\n      } @if (actionColumnPosition === 'left';) {\n      <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n      } @for (column of columns; track column) {\n      <td>\n        @defer(on viewport){ @if (columnTemplates[column.id]) {\n        <ng-container\n          [ngTemplateOutlet]=\"\n                _cell ? _cell: columnTemplates[column.id]\n              \"\n          [ngTemplateOutletContext]=\"{\n                  rowObject: rowObject,\n                  column: column,\n              }\"\n        >\n        </ng-container>\n        } } @placeholder {\n        <p-skeleton width=\"3rem\" />\n        }\n      </td>\n      } @if (actionColumnPosition === 'right';) {\n      <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n      }\n    </tr>\n    }\n  </ng-template>\n\n  <ng-template #expandedrow let-rowObject>\n    @if (expansionTemplate$ | async; as expansionTemplate) {\n    <tr>\n      <td [attr.colspan]=\"getRowColspan(!!expansionTemplate)\">\n        <ng-container\n          [ngTemplateOutlet]=\"expansionTemplate.template\"\n          [ngTemplateOutletContext]=\"{\n            rowObject: rowObject\n          }\"\n        >\n        </ng-container>\n      </td>\n    </tr>\n    }\n  </ng-template>\n\n  <ng-template #emptymessage>\n    <tr>\n      <td [colSpan]=\"getRowColspan(!!(expansionTemplate$ | async))\">\n        {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n      </td>\n    </tr>\n  </ng-template>\n</p-table>\n} }\n\n<ng-template #expansionColumn let-rowObject=\"localRowObject\">\n  @if (expandable && (expansionTemplate$ | async)) {\n  <td pFrozenColumn [frozen]=\"frozenExpandColumn\" alignFrozen=\"left\" [attr.name]=\"'expansion-column'\">\n    <button\n      type=\"button\"\n      pButton\n      pRipple\n      [icon]=\"isRowExpanded(rowObject) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n      class=\"p-button-rounded p-button-text\"\n      (click)=\"toggleRowExpansion(rowObject)\"\n      [attr.aria-label]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate) : ('OCX_DATA_TABLE.EXPANDED_ROW' | translate)\"\n      [title]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate) : ('OCX_DATA_TABLE.EXPANDED_ROW' | translate)\"\n    ></button>\n  </td>\n  }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}\n"] }]
+            args: [{ standalone: false, selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  @if (actionColumnVisible) {\n  <td\n    class=\"actions\"\n    pFrozenColumn\n    [frozen]=\"frozenActionColumn\"\n    [alignFrozen]=\"actionColumnPosition\"\n    [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-left' : 'action-column-right'\"\n    [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n  >\n    <div class=\"icon-button-row-wrapper\">\n      @if (viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))) {\n      <button\n        id=\"{{resolveFieldData(rowObject, 'id')}}-viewButton\"\n        *ocxIfPermission=\"viewPermission\"\n        [disabled]=\"!!viewActionEnabledField && !fieldIsTruthy(rowObject, viewActionEnabledField)\"\n        pButton\n        class=\"p-button-rounded p-button-text viewTableRowButton\"\n        title=\"{{ 'OCX_DATA_TABLE.ACTIONS.VIEW' | translate }}\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n        icon=\"pi pi-eye\"\n        (click)=\"onViewRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @if (editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))) {\n      <button\n        id=\"{{resolveFieldData(rowObject, 'id')}}-editButton\"\n        *ocxIfPermission=\"editPermission\"\n        [disabled]=\"!!editActionEnabledField && !fieldIsTruthy(rowObject, editActionEnabledField)\"\n        pButton\n        class=\"p-button-rounded p-button-text editTableRowButton\"\n        title=\"{{ 'OCX_DATA_TABLE.ACTIONS.EDIT' | translate }}\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n        icon=\"pi pi-pencil\"\n        (click)=\"onEditRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @if (deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject,\n      deleteActionVisibleField))) {\n      <button\n        id=\"{{resolveFieldData(rowObject, 'id')}}-deleteButton\"\n        *ocxIfPermission=\"deletePermission\"\n        [disabled]=\"!!deleteActionEnabledField && !fieldIsTruthy(rowObject, deleteActionEnabledField)\"\n        pButton\n        class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n        title=\"{{ 'OCX_DATA_TABLE.ACTIONS.DELETE' | translate }}\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n        icon=\"pi pi-trash\"\n        (click)=\"onDeleteRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @for (action of inlineActions$ | async; track action) { @if ((!action.actionVisibleField ||\n      fieldIsTruthy(rowObject, action.actionVisibleField))) {\n      @if (typeof action.routerLink === 'string' && !(action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField)))) {\n      <a\n        id=\"{{resolveFieldData(rowObject, 'id')}}-{{action.id ? action.id.concat('ActionButton') : 'inlineActionButton'}}\"\n        *ocxIfPermission=\"action.permission\"\n        pButton\n        [routerLink]=\"action.routerLink\"\n        class=\"p-button-rounded p-button-text no-underline\"\n        [ngClass]=\"action.classes\"\n        [icon]=\"action.icon || ''\"\n        [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n        [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n        [attr.data-testid]=\"'data-table-action-button'\"\n      ></a>\n      } @else {\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      } } } @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n      <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n      <button\n        pButton\n        class=\"p-button-rounded p-button-text\"\n        [icon]=\"'pi pi-ellipsis-v'\"\n        (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n        [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n        [name]=\"'data-table-overflow-action-button'\"\n      ></button>\n      }\n    </div>\n  </td>\n  }\n</ng-template>\n\n<ng-template #expansionColumnHeader>\n  @if (expandable && (expansionTemplate$ | async)) {\n  <th\n    pFrozenColumn\n    [frozen]=\"frozenExpandColumn\"\n    alignFrozen=\"left\"\n    [attr.name]=\"'expansion-column-header'\"\n    style=\"width: 4rem\"\n  ></th>\n  }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  @if (actionColumnVisible) {\n  <th\n    pFrozenColumn\n    [frozen]=\"frozenActionColumn\"\n    [alignFrozen]=\"actionColumnPosition\"\n    [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n    [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n  >\n    {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n  </th>\n  }\n</ng-template>\n\n@if ((displayedPageSize$ | async); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n@if ((columnHeaderTemplates$ | async) ?? {}; as columnHeaderTemplates) {\n<p-table\n  [value]=\"(displayedRows$ | async) ?? []\"\n  responsiveLayout=\"scroll\"\n  [paginator]=\"paginator\"\n  [first]=\"page * displayedPageSize\"\n  (onPage)=\"onPageChange($event)\"\n  [rows]=\"displayedPageSize\"\n  [showCurrentPageReport]=\"true\"\n  currentPageReportTemplate=\"{{ (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params() }}\"\n  [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n  id=\"dataTable_{{name}}\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  dataKey=\"id\"\n  [rowTrackBy]=\"rowTrackByFunction\"\n  [selection]=\"(selectedRows$ | async) ?? []\"\n  [scrollable]=\"true\"\n  scrollHeight=\"flex\"\n  [style]=\"tableStyle\"\n  paginatorDropdownAppendTo=\"body\"\n  [rowSelectable]=\"rowSelectable\"\n  tableStyleClass=\"h-full\"\n  [expandedRowKeys]=\"expandedRowKeys\"\n  (onRowExpand)=\"onRowExpand($event)\"\n  (onRowCollapse)=\"onRowCollapse($event)\"\n>\n  <ng-template #header>\n    <tr style=\"vertical-align: top\">\n      <ng-container *ngTemplateOutlet=\"expansionColumnHeader\"></ng-container>\n      @if (selectionChangedObserved) {\n      <th style=\"width: 4rem\" scope=\"col\">\n        @if (allowSelectAll) {\n        <p-tableHeaderCheckbox\n          ocxTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n          ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n        ></p-tableHeaderCheckbox>\n        }\n      </th>\n      } @if (actionColumnPosition === 'left';) {\n      <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n      } @for (column of columns; track column) { \n      <th scope=\"col\">\n        @if (columnHeaderTemplates[column.id]; as columnHeaderTemplate){\n          <ng-container\n            [ngTemplateOutlet]=\"columnHeaderTemplate\"\n            [ngTemplateOutletContext]=\"{ column: column, labelTemplate: columnHeaderLabel, sortTemplate: columnHeaderSortButton, filterTemplate: columnHeaderFilter }\"\n          ></ng-container>\n        } @else {\n          @if (column.sortable || column.filterable) {\n            <div class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\" style=\"height: 100%\">\n              <span class=\"flex\" id=\"{{column.id}}-header-name\">\n                <ng-container [ngTemplateOutlet]=\"columnHeaderLabel\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n              </span>\n              <span class=\"flex icon-button-header-wrapper\">\n                <ng-container [ngTemplateOutlet]=\"columnHeaderSortButton\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n                <ng-container [ngTemplateOutlet]=\"columnHeaderFilter\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n              </span>\n            </div>\n          } @else {\n            <ng-container [ngTemplateOutlet]=\"columnHeaderLabel\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n          }\n        }\n      </th>\n      } @if (actionColumnPosition === 'right';) {\n      <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n      }\n    </tr>\n  </ng-template>\n  <ng-template #body let-rowObject>\n    @if (columnTemplates) {\n    <tr>\n      <ng-container *ngTemplateOutlet=\"expansionColumn; context: {localRowObject: rowObject}\"></ng-container>\n      @if (selectionChangedObserved) {\n      <td>\n        @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n        <p-checkbox\n          [(ngModel)]=\"checked\"\n          [binary]=\"true\"\n          [disabled]=\"true\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n        ></p-checkbox>\n        } @else {\n        <p-tableCheckbox\n          [value]=\"rowObject\"\n          [disabled]=\"isRowSelectionDisabled(rowObject)\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n        ></p-tableCheckbox>\n        }\n      </td>\n      } @if (actionColumnPosition === 'left';) {\n      <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n      } @for (column of columns; track column) {\n      <td>\n        @defer(on viewport){ @if (columnTemplates[column.id]) {\n        <ng-container\n          [ngTemplateOutlet]=\"\n                _cell ? _cell: columnTemplates[column.id]\n              \"\n          [ngTemplateOutletContext]=\"{\n                  rowObject: rowObject,\n                  column: column,\n              }\"\n        >\n        </ng-container>\n        } } @placeholder {\n        <p-skeleton width=\"3rem\" />\n        }\n      </td>\n      } @if (actionColumnPosition === 'right';) {\n      <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n      }\n    </tr>\n    }\n  </ng-template>\n\n  <ng-template #expandedrow let-rowObject>\n    @if (expansionTemplate$ | async; as expansionTemplate) {\n    <tr>\n      <td [attr.colspan]=\"getRowColspan(!!expansionTemplate)\">\n        <ng-container\n          [ngTemplateOutlet]=\"expansionTemplate.template\"\n          [ngTemplateOutletContext]=\"{\n            rowObject: rowObject\n          }\"\n        >\n        </ng-container>\n      </td>\n    </tr>\n    }\n  </ng-template>\n\n  <ng-template #emptymessage>\n    <tr>\n      <td [colSpan]=\"getRowColspan(!!(expansionTemplate$ | async))\">\n        {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n      </td>\n    </tr>\n  </ng-template>\n</p-table>\n} } }\n\n<ng-template #expansionColumn let-rowObject=\"localRowObject\">\n  @if (expandable && (expansionTemplate$ | async)) {\n  <td pFrozenColumn [frozen]=\"frozenExpandColumn\" alignFrozen=\"left\" [attr.name]=\"'expansion-column'\">\n    <button\n      type=\"button\"\n      pButton\n      pRipple\n      [icon]=\"isRowExpanded(rowObject) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n      class=\"p-button-rounded p-button-text\"\n      (click)=\"toggleRowExpansion(rowObject)\"\n      [attr.aria-label]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate) : ('OCX_DATA_TABLE.EXPANDED_ROW' | translate)\"\n      [title]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate) : ('OCX_DATA_TABLE.EXPANDED_ROW' | translate)\"\n    ></button>\n  </td>\n  }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"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\n<ng-template #columnHeaderLabel let-column=\"column\">{{ column.nameKey | translate }}</ng-template>\n\n<ng-template #columnHeaderSortButton let-column=\"column\">\n  @if (column.sortable) {\n  <button\n    class=\"pi sortButton pl-0\"\n    [class.pi-sort-alt]=\"(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn\"\n    [class.pi-sort-amount-up]=\"column?.id === sortColumn && sortDirection === 'ASCENDING'\"\n    [class.pi-sort-amount-down]=\"column?.id === sortColumn && sortDirection === 'DESCENDING'\"\n    (click)=\"onSortColumnClick(column.id)\"\n    [ocxTooltip]=\"sortIconTitle(column.id) | translate \"\n    tooltipPosition=\"top\"\n    [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n  ></button>\n  }\n</ng-template>\n\n<ng-template #columnHeaderFilter let-column=\"column\">\n  @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { @if (columnFilterTemplates$ | async; as\n  columnFilterTemplates) { @if (column.filterable && (!column.filterType || column.filterType ===\n  FilterType.EQUALS)) {\n  <p-multiselect\n    class=\"filterMultiSelect\"\n    [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n    [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\n    [showToggleAll]=\"true\"\n    emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n    [displaySelectedLabel]=\"false\"\n    [resetFilterOnHide]=\"true\"\n    (onChange)=\"onMultiselectFilterChange(column, $event)\"\n    placeholder=\" \"\n    appendTo=\"body\"\n    filterBy=\"toFilterBy\"\n    (onFocus)=\"onFilterChosen(column)\"\n    [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n    [ocxTooltip]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n    tooltipPosition=\"top\"\n    [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n    [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n  >\n    <ng-template #selecteditems let-value>\n      <div\n        class=\"pi\"\n        [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n        [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n      ></div>\n    </ng-template>\n    <ng-template #item let-value>\n      @if (columnFilterTemplates[column.id]; as template) {\n      <ng-container\n        [ngTemplateOutlet]=\"template\"\n        [ngTemplateOutletContext]=\"{\n            rowObject: getRowObjectFromMultiselectItem(value, column),\n            column: column\n        }\"\n      >\n      </ng-container>\n      }\n    </ng-template>\n  </p-multiselect>\n  } } } @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n  <p-multiselect\n    class=\"filterMultiSelect\"\n    [options]=\"truthyFilterOptions\"\n    [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\n    [showToggleAll]=\"true\"\n    emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n    [displaySelectedLabel]=\"false\"\n    [resetFilterOnHide]=\"true\"\n    (onChange)=\"onMultiselectFilterChange(column, $event)\"\n    placeholder=\" \"\n    appendTo=\"body\"\n    (onFocus)=\"onFilterChosen(column)\"\n    [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n    [ocxTooltip]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n    tooltipPosition=\"top\"\n    [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n    [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n  >\n    <ng-template #selecteditems let-value>\n      <div\n        class=\"pi\"\n        [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n        [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n      ></div>\n    </ng-template>\n    <ng-template #item let-value> {{value.key | translate}} </ng-template>\n  </p-multiselect>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}\n"] }]
         }], ctorParameters: () => [], propDecorators: { rows: [{
                 type: Input
             }], selectedRows: [{
@@ -3537,6 +3597,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }], translationKeyFilterCellChildTemplate: [{
                 type: ContentChild,
                 args: ['translationKeyFilterCell']
+            }], columnHeaderTemplate: [{
+                type: Input
+            }], columnHeaderChildTemplate: [{
+                type: ContentChild,
+                args: ['columnHeader']
             }], additionalActions: [{
                 type: Input
             }], frozenActionColumn: [{
@@ -3734,6 +3799,9 @@ class DataViewComponent {
     get _numberTableFilterCell() {
         return this.numberTableFilterCellTemplate || this.numberTableFilterCellChildTemplate;
     }
+    get _columnHeader() {
+        return this.columnHeaderTemplate || this.columnHeaderChildTemplate;
+    }
     set parentTemplates(value) {
         this.parentTemplates$.next(value);
     }
@@ -3840,6 +3908,9 @@ class DataViewComponent {
                 case 'numberTableFilterCell':
                     this.numberTableFilterCellChildTemplate = item.template;
                     break;
+                case 'columnHeader':
+                    this.columnHeaderChildTemplate = item.template;
+                    break;
             }
         });
     }
@@ -3948,11 +4019,11 @@ class DataViewComponent {
         this.pageSizeChanged.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DataViewComponent, isStandalone: false, selector: "ocx-data-view", inputs: { deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", data: "data", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", layout: "layout", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortField: "sortField", sortDirection: "sortDirection", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", page: "page", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", selectedRows: "selectedRows", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", expandable: "expandable", frozenExpandColumn: "frozenExpandColumn", expandedRows: "expandedRows", paginator: "paginator", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", stringTableCellTemplate: "stringTableCellTemplate", numberTableCellTemplate: "numberTableCellTemplate", dateTableCellTemplate: "dateTableCellTemplate", tableCellTemplate: "tableCellTemplate", translationKeyTableCellTemplate: "translationKeyTableCellTemplate", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", gridItemTemplate: "gridItemTemplate", listItemTemplate: "listItemTemplate", relativeDateTableCellTemplate: "relativeDateTableCellTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", tableFilterCellTemplate: "tableFilterCellTemplate", dateTableFilterCellTemplate: "dateTableFilterCellTemplate", relativeDateTableFilterCellTemplate: "relativeDateTableFilterCellTemplate", translationKeyTableFilterCellTemplate: "translationKeyTableFilterCellTemplate", stringTableFilterCellTemplate: "stringTableFilterCellTemplate", numberTableFilterCellTemplate: "numberTableFilterCellTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed" }, providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], queries: [{ propertyName: "stringTableCellChildTemplate", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCellChildTemplate", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "dateTableCellChildTemplate", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableCellChildTemplate", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "translationKeyTableCellChildTemplate", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "relativeDateTableCellChildTemplate", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "tableFilterCellChildTemplate", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCellChildTemplate", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCellChildTemplate", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCellChildTemplate", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCellChildTemplate", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listGrid", first: true, predicate: DataListGridComponent, descendants: true }, { propertyName: "dataTable", first: true, predicate: DataTableComponent, descendants: true }], ngImport: i0, template: "@if (layout !== 'table') {\n<div>\n  <ocx-data-list-grid\n    #ocxdatalistgrid\n    [name]=\"name\"\n    [data]=\"data\"\n    [columns]=\"columns\"\n    [filters]=\"filters\"\n    [sortDirection]=\"sortDirection\"\n    [sortField]=\"sortField\"\n    [sortStates]=\"sortStates\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"true\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [paginator]=\"listGridPaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n    [listItemTemplate]=\"_listItem ? listItem : undefined\"\n    [listValueTemplate]=\"_listValue ? listValue : undefined\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n    [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n    [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n    [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [parentTemplates]=\"templatesForChildren$ | async\"\n  >\n  </ocx-data-list-grid>\n  <ng-template #listItemSubtitleLines let-item>\n    @if (_listItemSubtitleLines) {\n    <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #gridItemSubtitleLines let-item>\n    @if (_gridItemSubtitleLines) {\n    <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #gridItem let-item>\n    @if (_gridItem) {\n    <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n    }</ng-template\n  >\n  <ng-template #listItem let-item>\n    @if (_listItem) {\n    <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n    }</ng-template\n  >\n  <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_listValue) {\n    <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_translationKeyListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"_translationKeyListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_numberListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"_numberListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_relativeDateListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"_relativeDateListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_stringListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"_stringListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_dateListValue) {\n    <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n</div>\n} @if (layout === 'table') {\n<div>\n  <ocx-data-table\n    #ocxdatatable\n    [rows]=\"data\"\n    [columns]=\"columns\"\n    [filters]=\"filters\"\n    [sortDirection]=\"sortDirection\"\n    [sortColumn]=\"sortField\"\n    [sortStates]=\"sortStates\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [paginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [stringCellTemplate]=\"_stringTableCell ? stringCell : undefined\"\n    [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n    [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n    [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n    [cellTemplate]=\"_tableCell ? cell : undefined\"\n    [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n    [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n    [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n    [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n    [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n    [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n    [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    [parentTemplates]=\"templatesForChildren$ | async\"\n    [allowSelectAll]=\"tableAllowSelectAll\"\n    [selectionEnabledField]=\"tableSelectionEnabledField\"\n    [expandable]=\"expandable\"\n    [frozenExpandColumn]=\"frozenExpandColumn\"\n    [expandedRows]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-table>\n  <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_stringTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_stringTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_numberTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_numberTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_dateTableCell) {\n    <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_relativeDateTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_relativeDateTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_tableCell) {\n    <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_translationKeyTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_translationKeyTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_stringTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_stringTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_tableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_tableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_dateTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_dateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_numberTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_numberTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_relativeDateTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_translationKeyTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataListGridComponent, selector: "ocx-data-list-grid", inputs: ["titleLineId", "subtitleLineIds", "clientSideSorting", "clientSideFiltering", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "fallbackImage", "layout", "viewPermission", "editPermission", "deletePermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "viewMenuItemKey", "editMenuItemKey", "deleteMenuItemKey", "paginator", "page", "columns", "name", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "data", "filters", "sortDirection", "sortField", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "listItemTemplate", "gridItemTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "additionalActions", "parentTemplates"], outputs: ["viewItem", "editItem", "deleteItem", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "expandedRows", "expandable", "frozenExpandColumn", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DataViewComponent, isStandalone: false, selector: "ocx-data-view", inputs: { deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", data: "data", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", layout: "layout", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortField: "sortField", sortDirection: "sortDirection", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", page: "page", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", selectedRows: "selectedRows", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", expandable: "expandable", frozenExpandColumn: "frozenExpandColumn", expandedRows: "expandedRows", paginator: "paginator", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", stringTableCellTemplate: "stringTableCellTemplate", numberTableCellTemplate: "numberTableCellTemplate", dateTableCellTemplate: "dateTableCellTemplate", tableCellTemplate: "tableCellTemplate", translationKeyTableCellTemplate: "translationKeyTableCellTemplate", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", gridItemTemplate: "gridItemTemplate", listItemTemplate: "listItemTemplate", relativeDateTableCellTemplate: "relativeDateTableCellTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", tableFilterCellTemplate: "tableFilterCellTemplate", dateTableFilterCellTemplate: "dateTableFilterCellTemplate", relativeDateTableFilterCellTemplate: "relativeDateTableFilterCellTemplate", translationKeyTableFilterCellTemplate: "translationKeyTableFilterCellTemplate", stringTableFilterCellTemplate: "stringTableFilterCellTemplate", numberTableFilterCellTemplate: "numberTableFilterCellTemplate", columnHeaderTemplate: "columnHeaderTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed" }, providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], queries: [{ propertyName: "stringTableCellChildTemplate", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCellChildTemplate", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "dateTableCellChildTemplate", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableCellChildTemplate", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "translationKeyTableCellChildTemplate", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "relativeDateTableCellChildTemplate", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "tableFilterCellChildTemplate", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCellChildTemplate", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCellChildTemplate", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCellChildTemplate", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCellChildTemplate", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "columnHeaderChildTemplate", first: true, predicate: ["columnHeader"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listGrid", first: true, predicate: DataListGridComponent, descendants: true }, { propertyName: "dataTable", first: true, predicate: DataTableComponent, descendants: true }], ngImport: i0, template: "@if (layout !== 'table') {\n<div>\n  <ocx-data-list-grid\n    #ocxdatalistgrid\n    [name]=\"name\"\n    [data]=\"data\"\n    [columns]=\"columns\"\n    [filters]=\"filters\"\n    [sortDirection]=\"sortDirection\"\n    [sortField]=\"sortField\"\n    [sortStates]=\"sortStates\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"true\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [paginator]=\"listGridPaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n    [listItemTemplate]=\"_listItem ? listItem : undefined\"\n    [listValueTemplate]=\"_listValue ? listValue : undefined\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n    [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n    [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n    [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [parentTemplates]=\"templatesForChildren$ | async\"\n  >\n  </ocx-data-list-grid>\n  <ng-template #listItemSubtitleLines let-item>\n    @if (_listItemSubtitleLines) {\n    <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #gridItemSubtitleLines let-item>\n    @if (_gridItemSubtitleLines) {\n    <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #gridItem let-item>\n    @if (_gridItem) {\n    <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n    }</ng-template\n  >\n  <ng-template #listItem let-item>\n    @if (_listItem) {\n    <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n    }</ng-template\n  >\n  <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_listValue) {\n    <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_translationKeyListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"_translationKeyListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_numberListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"_numberListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_relativeDateListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"_relativeDateListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_stringListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"_stringListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_dateListValue) {\n    <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n</div>\n} @if (layout === 'table') {\n<div>\n  <ocx-data-table\n    #ocxdatatable\n    [rows]=\"data\"\n    [columns]=\"columns\"\n    [filters]=\"filters\"\n    [sortDirection]=\"sortDirection\"\n    [sortColumn]=\"sortField\"\n    [sortStates]=\"sortStates\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [paginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [stringCellTemplate]=\"_stringTableCell ? stringCell : undefined\"\n    [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n    [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n    [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n    [cellTemplate]=\"_tableCell ? cell : undefined\"\n    [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n    [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n    [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n    [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n    [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n    [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n    [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n    [columnHeaderTemplate]=\"_columnHeader ? columnHeader : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    [parentTemplates]=\"templatesForChildren$ | async\"\n    [allowSelectAll]=\"tableAllowSelectAll\"\n    [selectionEnabledField]=\"tableSelectionEnabledField\"\n    [expandable]=\"expandable\"\n    [frozenExpandColumn]=\"frozenExpandColumn\"\n    [expandedRows]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-table>\n  <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_stringTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_stringTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_numberTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_numberTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_dateTableCell) {\n    <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_relativeDateTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_relativeDateTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_tableCell) {\n    <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_translationKeyTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_translationKeyTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_stringTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_stringTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_tableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_tableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_dateTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_dateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_numberTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_numberTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_relativeDateTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_translationKeyTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #columnHeader let-column=\"column\" let-labelTemplate=\"labelTemplate\" let-sortTemplate=\"sortTemplate\" let-filterTemplate=\"filterTemplate\">\n    @if (_columnHeader) {\n    <ng-container\n      [ngTemplateOutlet]=\"_columnHeader\"\n      [ngTemplateOutletContext]=\"{ column: column, labelTemplate: labelTemplate, sortTemplate: sortTemplate, filterTemplate: filterTemplate }\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataListGridComponent, selector: "ocx-data-list-grid", inputs: ["titleLineId", "subtitleLineIds", "clientSideSorting", "clientSideFiltering", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "fallbackImage", "layout", "viewPermission", "editPermission", "deletePermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "viewMenuItemKey", "editMenuItemKey", "deleteMenuItemKey", "paginator", "page", "columns", "name", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "data", "filters", "sortDirection", "sortField", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "listItemTemplate", "gridItemTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "additionalActions", "parentTemplates"], outputs: ["viewItem", "editItem", "deleteItem", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "columnHeaderTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "expandedRows", "expandable", "frozenExpandColumn", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataViewComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ocx-data-view', providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], template: "@if (layout !== 'table') {\n<div>\n  <ocx-data-list-grid\n    #ocxdatalistgrid\n    [name]=\"name\"\n    [data]=\"data\"\n    [columns]=\"columns\"\n    [filters]=\"filters\"\n    [sortDirection]=\"sortDirection\"\n    [sortField]=\"sortField\"\n    [sortStates]=\"sortStates\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"true\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [paginator]=\"listGridPaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n    [listItemTemplate]=\"_listItem ? listItem : undefined\"\n    [listValueTemplate]=\"_listValue ? listValue : undefined\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n    [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n    [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n    [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [parentTemplates]=\"templatesForChildren$ | async\"\n  >\n  </ocx-data-list-grid>\n  <ng-template #listItemSubtitleLines let-item>\n    @if (_listItemSubtitleLines) {\n    <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #gridItemSubtitleLines let-item>\n    @if (_gridItemSubtitleLines) {\n    <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #gridItem let-item>\n    @if (_gridItem) {\n    <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n    }</ng-template\n  >\n  <ng-template #listItem let-item>\n    @if (_listItem) {\n    <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n    }</ng-template\n  >\n  <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_listValue) {\n    <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_translationKeyListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"_translationKeyListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_numberListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"_numberListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_relativeDateListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"_relativeDateListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_stringListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"_stringListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_dateListValue) {\n    <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n</div>\n} @if (layout === 'table') {\n<div>\n  <ocx-data-table\n    #ocxdatatable\n    [rows]=\"data\"\n    [columns]=\"columns\"\n    [filters]=\"filters\"\n    [sortDirection]=\"sortDirection\"\n    [sortColumn]=\"sortField\"\n    [sortStates]=\"sortStates\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [paginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [stringCellTemplate]=\"_stringTableCell ? stringCell : undefined\"\n    [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n    [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n    [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n    [cellTemplate]=\"_tableCell ? cell : undefined\"\n    [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n    [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n    [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n    [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n    [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n    [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n    [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    [parentTemplates]=\"templatesForChildren$ | async\"\n    [allowSelectAll]=\"tableAllowSelectAll\"\n    [selectionEnabledField]=\"tableSelectionEnabledField\"\n    [expandable]=\"expandable\"\n    [frozenExpandColumn]=\"frozenExpandColumn\"\n    [expandedRows]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-table>\n  <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_stringTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_stringTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_numberTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_numberTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_dateTableCell) {\n    <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_relativeDateTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_relativeDateTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_tableCell) {\n    <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_translationKeyTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_translationKeyTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_stringTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_stringTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_tableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_tableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_dateTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_dateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_numberTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_numberTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_relativeDateTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_translationKeyTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n</div>\n}\n" }]
+            args: [{ standalone: false, selector: 'ocx-data-view', providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], template: "@if (layout !== 'table') {\n<div>\n  <ocx-data-list-grid\n    #ocxdatalistgrid\n    [name]=\"name\"\n    [data]=\"data\"\n    [columns]=\"columns\"\n    [filters]=\"filters\"\n    [sortDirection]=\"sortDirection\"\n    [sortField]=\"sortField\"\n    [sortStates]=\"sortStates\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"true\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [paginator]=\"listGridPaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n    [listItemTemplate]=\"_listItem ? listItem : undefined\"\n    [listValueTemplate]=\"_listValue ? listValue : undefined\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n    [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n    [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n    [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [parentTemplates]=\"templatesForChildren$ | async\"\n  >\n  </ocx-data-list-grid>\n  <ng-template #listItemSubtitleLines let-item>\n    @if (_listItemSubtitleLines) {\n    <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #gridItemSubtitleLines let-item>\n    @if (_gridItemSubtitleLines) {\n    <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #gridItem let-item>\n    @if (_gridItem) {\n    <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n    }</ng-template\n  >\n  <ng-template #listItem let-item>\n    @if (_listItem) {\n    <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n    }</ng-template\n  >\n  <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_listValue) {\n    <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_translationKeyListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"_translationKeyListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_numberListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"_numberListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_relativeDateListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"_relativeDateListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_stringListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"_stringListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_dateListValue) {\n    <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n</div>\n} @if (layout === 'table') {\n<div>\n  <ocx-data-table\n    #ocxdatatable\n    [rows]=\"data\"\n    [columns]=\"columns\"\n    [filters]=\"filters\"\n    [sortDirection]=\"sortDirection\"\n    [sortColumn]=\"sortField\"\n    [sortStates]=\"sortStates\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [paginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [stringCellTemplate]=\"_stringTableCell ? stringCell : undefined\"\n    [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n    [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n    [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n    [cellTemplate]=\"_tableCell ? cell : undefined\"\n    [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n    [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n    [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n    [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n    [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n    [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n    [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n    [columnHeaderTemplate]=\"_columnHeader ? columnHeader : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    [parentTemplates]=\"templatesForChildren$ | async\"\n    [allowSelectAll]=\"tableAllowSelectAll\"\n    [selectionEnabledField]=\"tableSelectionEnabledField\"\n    [expandable]=\"expandable\"\n    [frozenExpandColumn]=\"frozenExpandColumn\"\n    [expandedRows]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-table>\n  <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_stringTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_stringTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_numberTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_numberTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_dateTableCell) {\n    <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_relativeDateTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_relativeDateTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_tableCell) {\n    <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_translationKeyTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_translationKeyTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_stringTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_stringTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_tableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_tableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_dateTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_dateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_numberTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_numberTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_relativeDateTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (_translationKeyTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #columnHeader let-column=\"column\" let-labelTemplate=\"labelTemplate\" let-sortTemplate=\"sortTemplate\" let-filterTemplate=\"filterTemplate\">\n    @if (_columnHeader) {\n    <ng-container\n      [ngTemplateOutlet]=\"_columnHeader\"\n      [ngTemplateOutletContext]=\"{ column: column, labelTemplate: labelTemplate, sortTemplate: sortTemplate, filterTemplate: filterTemplate }\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n</div>\n}\n" }]
         }], propDecorators: { listGrid: [{
                 type: ViewChild,
                 args: [DataListGridComponent]
@@ -4149,6 +4220,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }], numberTableFilterCellChildTemplate: [{
                 type: ContentChild,
                 args: ['numberTableFilterCell']
+            }], columnHeaderTemplate: [{
+                type: Input
+            }], columnHeaderChildTemplate: [{
+                type: ContentChild,
+                args: ['columnHeader']
             }], additionalActions: [{
                 type: Input
             }], filtered: [{
@@ -4383,6 +4459,8 @@ function limit(columnFilterData, amount, options) {
 
 class FilterViewComponent {
     constructor() {
+        this.translateService = inject(TranslateService);
+        this.liveAnnouncer = inject(LiveAnnouncer);
         this.ColumnType = ColumnType;
         this.FilterType = FilterType;
         this.filters$ = new BehaviorSubject([]);
@@ -4453,6 +4531,7 @@ class FilterViewComponent {
     }
     set filters(value) {
         this.filters$.next(value);
+        this.annouceFilterCount();
     }
     get columns() {
         return this.columns$.getValue();
@@ -4583,8 +4662,20 @@ class FilterViewComponent {
             [row['valueColumnId']]: row['value'],
         };
     }
+    annouceFilterCount() {
+        const currentCount = this.filters?.length ?? 0;
+        if (currentCount === 0) {
+            firstValueFrom(this.translateService.get('OCX_FILTER_VIEW.NO_FILTERS')).then((translatedText) => {
+                this.liveAnnouncer.announce(translatedText);
+            });
+            return;
+        }
+        firstValueFrom(this.translateService.get('OCX_FILTER_VIEW.SELECTED_FILTERS_COUNT', { results: currentCount })).then((translatedText) => {
+            this.liveAnnouncer.announce(translatedText);
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FilterViewComponent, isStandalone: false, selector: "ocx-filter-view", inputs: { filters: "filters", columns: "columns", displayMode: "displayMode", selectDisplayedChips: "selectDisplayedChips", chipStyleClass: "chipStyleClass", tableStyle: "tableStyle", panelStyle: "panelStyle", templates: "templates" }, outputs: { filtered: "filtered", componentStateChanged: "componentStateChanged" }, viewQueries: [{ propertyName: "panel", first: true, predicate: Popover, descendants: true }, { propertyName: "manageButton", first: true, predicate: ["manageButton"], descendants: true }, { propertyName: "defaultTemplates", predicate: PrimeTemplate, descendants: true }], ngImport: i0, template: "@if (columns$ | async; as columns) { @if (filters$ | async; as filters) {\n<div class=\"flex flex-wrap align-items-center gap-2\">\n  @if (displayMode === 'chips') {\n  <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n    @if (selectDisplayedChips(filters, columns); as selectedFilters) {\n    <p-button\n      #chipFilterResetButton\n      id=\"ocxFilterViewReset\"\n      (onClick)=\"onResetFilersClick()\"\n      icon=\"pi pi-eraser\"\n      ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n      tooltipPosition=\"top\"\n      tooltipEvent=\"hover\"\n      [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n    ></p-button>\n    @if (filters.length <= 0) { @if (_fitlerViewNoSelection) {\n    <ng-container [ngTemplateOutlet]=\"_fitlerViewNoSelection\"> </ng-container>\n    } @else {\n    <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n    } } @if ((chipTemplates$ | async) ?? {}; as templates) { @for (filter of selectedFilters; track filter) { @if\n    (getColumnForFilter(filter, columns); as column) {\n    <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass\">\n      @if (_filterViewChipContent) {\n      <ng-container\n        [ngTemplateOutlet]=\"_filterViewChipContent\"\n        [ngTemplateOutletContext]=\"{\n                filter: filter,\n                column: column,\n                filterValueTemplates: templates,\n                truthyTemplate: truthyTemplate,\n                filterValueTemplate: chipTemplate\n              }\"\n      >\n      </ng-container>\n      } @else { @if (columns$ | async; as columns) {\n      <span style=\"white-space: nowrap\" class=\"p-chip-text flex flex-nowrap\"\n        >{{column?.nameKey ?? '' | translate }}:@if (filter.filterType === FilterType.EQUALS || !filter.filterType) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate\"\n          [ngTemplateOutletContext]=\"{\n                        templates: templates,\n                        filter: filter,\n                        column: column\n                      }\"\n        ></ng-container>\n        } @if (filter.filterType === FilterType.IS_NOT_EMPTY) {\n        <ng-container\n          [ngTemplateOutlet]=\"truthyTemplate\"\n          [ngTemplateOutletContext]=\"{\n                      value: filter.value\n                    }\"\n        ></ng-container>\n        }\n      </span>\n      } }\n    </p-chip>\n    } } @if (selectedFilters.length < filters.length) {\n    <p-chip\n      #showMoreChip\n      id=\"ocxFilterViewShowMore\"\n      tabindex=\"0\"\n      role=\"button\"\n      (click)=\"showPanel($event)\"\n      class=\"cursor-pointer filter-view-focusable\"\n      (keydown.enter)=\"showPanel($event)\"\n      (keydown.space)=\"showPanel($event)\"\n    >\n      @if (_filterViewShowMoreChip) {\n      <ng-container\n        [ngTemplateOutlet]=\"_filterViewShowMoreChip\"\n        [ngTemplateOutletContext]=\"{\n            $implicit: filters.length - selectedFilters.length\n          }\"\n      >\n      </ng-container>\n      } @else {\n      <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n      }\n      <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n    </p-chip>\n    } } }\n  </ng-container>\n  } @else {\n  <ng-container [ngTemplateOutlet]=\"noChipsContent\"></ng-container>\n  }\n  <ng-template #noChipsContent>\n    <p-button\n      #manageButton\n      id=\"ocxFilterViewManage\"\n      (onClick)=\"showPanel($event)\"\n      icon=\"pi pi-sliders-h\"\n      label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n      ocxTooltip=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate }}\"\n      tooltipPosition=\"top\"\n      tooltipEvent=\"hover\"\n      [badge]=\"filters.length.toString()\"\n      [ariaLabel]=\"'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n    ></p-button>\n    <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n  </ng-template>\n  <ng-template #filterTablePanel>\n    @if (tableTemplates$ | async; as templates) {\n    <p-popover #op [style]=\"panelStyle\" (onHide)=\"focusTrigger()\">\n      <ng-template pTemplate=\"content\">\n        <div pFocusTrap>\n          <div class=\"flex justify-content-between align-items-center mb-2\">\n            <span class=\"text-2xl font-medium\">{{'OCX_FILTER_VIEW.PANEL_TITLE' | translate}}</span>\n            <div>\n              <p-button\n                pAutoFocus\n                [autofocus]=\"true\"\n                id=\"ocxFilterViewOverlayReset\"\n                (onClick)=\"onResetFilersClick()\"\n                icon=\"pi pi-eraser\"\n                ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n                tooltipPosition=\"top\"\n                tooltipEvent=\"hover\"\n                [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n              ></p-button>\n            </div>\n          </div>\n          <ocx-data-table\n            id=\"ocxFilterViewDataTable\"\n            [rows]=\"(columnFilterDataRows$ | async) ?? []\"\n            [columns]=\"columnFilterTableColumns\"\n            [emptyResultsMessage]=\"'OCX_FILTER_VIEW.NO_FILTERS' | translate\"\n            [paginator]=\"false\"\n            [tableStyle]=\"tableStyle\"\n          >\n            <ng-template pTemplate=\"columnIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n              <ng-container\n                [ngTemplateOutlet]=\"templates[column.id]\"\n                [ngTemplateOutletContext]=\"{\n            rowObject: rowObject,\n            column: column,\n          }\"\n              >\n              </ng-container>\n            </ng-template>\n            <ng-template pTemplate=\"valueIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n              @if (getColumn(rowObject['valueColumnId'], columns); as valueColumn) { @if (!valueColumn.filterType ||\n              valueColumn.filterType === FilterType.EQUALS) {\n              <ng-container\n                [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n                [ngTemplateOutletContext]=\"{\n              rowObject: getRowForValueColumn(rowObject),\n              column: valueColumn\n            }\"\n              >\n              </ng-container>\n              } @if (valueColumn.filterType === FilterType.IS_NOT_EMPTY) {\n              <ng-container\n                [ngTemplateOutlet]=\"truthyTemplate\"\n                [ngTemplateOutletContext]=\"{\n        value: resolveFieldData(rowObject, column.id)\n      }\"\n              >\n              </ng-container>\n              } }\n            </ng-template>\n            <ng-template pTemplate=\"actionsIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n              <div>\n                <button\n                  pButton\n                  class=\"p-button-rounded p-button-danger p-button-text\"\n                  title=\"{{ 'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_TITLE' | translate }}\"\n                  [attr.aria-label]=\"'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_ARIA_LABEL' | translate\"\n                  icon=\"pi pi-trash\"\n                  (click)=\"onFilterDelete(rowObject)\"\n                ></button>\n              </div>\n            </ng-template>\n          </ocx-data-table>\n        </div>\n      </ng-template>\n    </p-popover>\n    }\n  </ng-template>\n</div>\n} }\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n  @if (templates[column.id]; as template) {\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n            rowObject: getRowObjectFromFiterData(filter),\n            column: column\n          }\"\n  >\n  </ng-container>\n  }\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n  @if (value) { {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} } @if (!value) { {{'OCX_FILTER_VIEW.FILTER_NO' |\n  translate}} }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }}</ng-container>\n</ng-template>\n", styles: [".filter-view-focusable:focus{outline:1px solid var(--primary-color);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$4.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i6.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "expandedRows", "expandable", "frozenExpandColumn", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed"] }, { kind: "directive", type: IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: ["ocxIfBreakpoint", "ocxIfBreakpointElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FilterViewComponent, isStandalone: false, selector: "ocx-filter-view", inputs: { filters: "filters", columns: "columns", displayMode: "displayMode", selectDisplayedChips: "selectDisplayedChips", chipStyleClass: "chipStyleClass", tableStyle: "tableStyle", panelStyle: "panelStyle", templates: "templates" }, outputs: { filtered: "filtered", componentStateChanged: "componentStateChanged" }, viewQueries: [{ propertyName: "panel", first: true, predicate: Popover, descendants: true }, { propertyName: "manageButton", first: true, predicate: ["manageButton"], descendants: true }, { propertyName: "defaultTemplates", predicate: PrimeTemplate, descendants: true }], ngImport: i0, template: "@if (columns$ | async; as columns) { @if (filters$ | async; as filters) {\n<div class=\"flex flex-wrap align-items-center gap-2\">\n  @if (displayMode === 'chips') {\n  <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n    @if (selectDisplayedChips(filters, columns); as selectedFilters) {\n    <p-button\n      #chipFilterResetButton\n      id=\"ocxFilterViewReset\"\n      (onClick)=\"onResetFilersClick()\"\n      icon=\"pi pi-eraser\"\n      ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n      tooltipPosition=\"top\"\n      tooltipEvent=\"hover\"\n      [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n    ></p-button>\n    @if (filters.length <= 0) { @if (_fitlerViewNoSelection) {\n    <ng-container [ngTemplateOutlet]=\"_fitlerViewNoSelection\"> </ng-container>\n    } @else {\n    <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n    } } @if ((chipTemplates$ | async) ?? {}; as templates) { @for (filter of selectedFilters; track filter) { @if\n    (getColumnForFilter(filter, columns); as column) {\n    <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass\">\n      @if (_filterViewChipContent) {\n      <ng-container\n        [ngTemplateOutlet]=\"_filterViewChipContent\"\n        [ngTemplateOutletContext]=\"{\n                filter: filter,\n                column: column,\n                filterValueTemplates: templates,\n                truthyTemplate: truthyTemplate,\n                filterValueTemplate: chipTemplate\n              }\"\n      >\n      </ng-container>\n      } @else { @if (columns$ | async; as columns) {\n      <span style=\"white-space: nowrap\" class=\"p-chip-text flex flex-nowrap\"\n        >{{column?.nameKey ?? '' | translate }}:@if (filter.filterType === FilterType.EQUALS || !filter.filterType) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate\"\n          [ngTemplateOutletContext]=\"{\n                        templates: templates,\n                        filter: filter,\n                        column: column\n                      }\"\n        ></ng-container>\n        } @if (filter.filterType === FilterType.IS_NOT_EMPTY) {\n        <ng-container\n          [ngTemplateOutlet]=\"truthyTemplate\"\n          [ngTemplateOutletContext]=\"{\n                      value: filter.value\n                    }\"\n        ></ng-container>\n        }\n      </span>\n      } }\n    </p-chip>\n    } } @if (selectedFilters.length < filters.length) {\n    <p-chip\n      #showMoreChip\n      id=\"ocxFilterViewShowMore\"\n      tabindex=\"0\"\n      role=\"button\"\n      (click)=\"showPanel($event)\"\n      class=\"cursor-pointer filter-view-focusable\"\n      (keydown.enter)=\"showPanel($event)\"\n      (keydown.space)=\"showPanel($event)\"\n    >\n      @if (_filterViewShowMoreChip) {\n      <ng-container\n        [ngTemplateOutlet]=\"_filterViewShowMoreChip\"\n        [ngTemplateOutletContext]=\"{\n            $implicit: filters.length - selectedFilters.length\n          }\"\n      >\n      </ng-container>\n      } @else {\n      <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n      }\n      <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n    </p-chip>\n    } } }\n  </ng-container>\n  } @else {\n  <ng-container [ngTemplateOutlet]=\"noChipsContent\"></ng-container>\n  }\n  <ng-template #noChipsContent>\n    <p-button\n      #manageButton\n      id=\"ocxFilterViewManage\"\n      (onClick)=\"showPanel($event)\"\n      icon=\"pi pi-sliders-h\"\n      label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n      ocxTooltip=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate }}\"\n      tooltipPosition=\"top\"\n      tooltipEvent=\"hover\"\n      [badge]=\"filters.length.toString()\"\n      [ariaLabel]=\"'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n    ></p-button>\n    <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n  </ng-template>\n  <ng-template #filterTablePanel>\n    @if (tableTemplates$ | async; as templates) {\n    <p-popover #op [style]=\"panelStyle\" (onHide)=\"focusTrigger()\">\n      <ng-template pTemplate=\"content\">\n        <div pFocusTrap>\n          <div class=\"flex justify-content-between align-items-center mb-2\">\n            <span class=\"text-2xl font-medium\">{{'OCX_FILTER_VIEW.PANEL_TITLE' | translate}}</span>\n            <div>\n              <p-button\n                pAutoFocus\n                [autofocus]=\"true\"\n                id=\"ocxFilterViewOverlayReset\"\n                (onClick)=\"onResetFilersClick()\"\n                icon=\"pi pi-eraser\"\n                ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n                tooltipPosition=\"top\"\n                tooltipEvent=\"hover\"\n                [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n              ></p-button>\n            </div>\n          </div>\n          <ocx-data-table\n            id=\"ocxFilterViewDataTable\"\n            [rows]=\"(columnFilterDataRows$ | async) ?? []\"\n            [columns]=\"columnFilterTableColumns\"\n            [emptyResultsMessage]=\"'OCX_FILTER_VIEW.NO_FILTERS' | translate\"\n            [paginator]=\"false\"\n            [tableStyle]=\"tableStyle\"\n          >\n            <ng-template pTemplate=\"columnIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n              <ng-container\n                [ngTemplateOutlet]=\"templates[column.id]\"\n                [ngTemplateOutletContext]=\"{\n            rowObject: rowObject,\n            column: column,\n          }\"\n              >\n              </ng-container>\n            </ng-template>\n            <ng-template pTemplate=\"valueIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n              @if (getColumn(rowObject['valueColumnId'], columns); as valueColumn) { @if (!valueColumn.filterType ||\n              valueColumn.filterType === FilterType.EQUALS) {\n              <ng-container\n                [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n                [ngTemplateOutletContext]=\"{\n              rowObject: getRowForValueColumn(rowObject),\n              column: valueColumn\n            }\"\n              >\n              </ng-container>\n              } @if (valueColumn.filterType === FilterType.IS_NOT_EMPTY) {\n              <ng-container\n                [ngTemplateOutlet]=\"truthyTemplate\"\n                [ngTemplateOutletContext]=\"{\n        value: resolveFieldData(rowObject, column.id)\n      }\"\n              >\n              </ng-container>\n              } }\n            </ng-template>\n            <ng-template pTemplate=\"actionsIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n              <div>\n                <button\n                  pButton\n                  class=\"p-button-rounded p-button-danger p-button-text\"\n                  title=\"{{ 'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_TITLE' | translate }}\"\n                  [attr.aria-label]=\"'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_ARIA_LABEL' | translate\"\n                  icon=\"pi pi-trash\"\n                  (click)=\"onFilterDelete(rowObject)\"\n                ></button>\n              </div>\n            </ng-template>\n          </ocx-data-table>\n        </div>\n      </ng-template>\n    </p-popover>\n    }\n  </ng-template>\n</div>\n} }\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n  @if (templates[column.id]; as template) {\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n            rowObject: getRowObjectFromFiterData(filter),\n            column: column\n          }\"\n  >\n  </ng-container>\n  }\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n  @if (value) { {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} } @if (!value) { {{'OCX_FILTER_VIEW.FILTER_NO' |\n  translate}} }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }}</ng-container>\n</ng-template>\n", styles: [".filter-view-focusable:focus{outline:1px solid var(--primary-color);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$4.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i6$1.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "columnHeaderTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "expandedRows", "expandable", "frozenExpandColumn", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed"] }, { kind: "directive", type: IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: ["ocxIfBreakpoint", "ocxIfBreakpointElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FilterViewComponent, decorators: [{
             type: Component,
@@ -4875,6 +4966,9 @@ class InteractiveDataViewComponent {
     get _numberTableFilterCell() {
         return this.numberTableFilterCell;
     }
+    get _columnHeader() {
+        return this.columnHeader;
+    }
     get data() {
         return this._data;
     }
@@ -5101,6 +5195,9 @@ class InteractiveDataViewComponent {
                 case 'numberTableFilterCell':
                     this.primeNgNumberTableFilterCell = item.template;
                     break;
+                case 'columnHeader':
+                    this.primeNgColumnHeader = item.template;
+                    break;
             }
         });
     }
@@ -5206,11 +5303,11 @@ class InteractiveDataViewComponent {
             .filter((d) => d) ?? []);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InteractiveDataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InteractiveDataViewComponent, isStandalone: false, selector: "ocx-interactive-data-view", inputs: { searchConfigPermission: "searchConfigPermission", deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", supportedViewLayouts: "supportedViewLayouts", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", 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", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", headerStyleClass: "headerStyleClass", contentStyleClass: "contentStyleClass", expandable: "expandable", frozenExpandColumn: "frozenExpandColumn", expandedRows: "expandedRows", paginator: "paginator", data: "data" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnKeysChange: "displayedColumnKeysChange", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], queries: [{ propertyName: "tableCell", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "dateTableCell", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "relativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], 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: "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: "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: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "dataView", first: true, predicate: DataViewComponent, descendants: true }], ngImport: i0, template: "<div class=\"p-3 border-bottom-1 surface-border\" [ngClass]=\"headerStyleClass\" id=\"interactiveDataViewHeader\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n      <ocx-data-layout-selection\n        [supportedViewLayouts]=\"supportedViewLayouts\"\n        [layout]=\"layout\"\n        (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n        (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n      ></ocx-data-layout-selection>\n      @if (!disableFilterView) {\n      <ocx-filter-view\n        [filters]=\"filters\"\n        [columns]=\"columns\"\n        [templates]=\"templates$ | async\"\n        [displayMode]=\"filterViewDisplayMode\"\n        [selectDisplayedChips]=\"selectDisplayedChips\"\n        [chipStyleClass]=\"filterViewChipStyleClass\"\n        [tableStyle]=\"filterViewTableStyle\"\n        (filtered)=\"filtering($event)\"\n        (componentStateChanged)=\"filterViewComponentState$.next($event)\"\n      ></ocx-filter-view>\n      }\n    </div>\n\n    @if (topCenter) {\n    <div>\n      <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n    </div>\n    } @if (layout !== 'table') {\n    <div class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection\"\n        [sortField]=\"sortField\"\n        [columns]=\"(displayedColumns$ | async) ?? []\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n    }\n\n    <div\n      [ngStyle]=\"layout !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      @if (isColumnGroupSelectionComponentDefined$ | async) { @if (displayedColumnKeys$ | async; as displayedColumnKeys)\n      {\n      <ocx-slot\n        [ngStyle]=\"layout !== 'table' ? {'display' : 'none'}  : {}\"\n        *ocxIfPermission=\"searchConfigPermission; elseTemplate: defaultColumnGroupSelectionComponent\"\n        name=\"{{columnGroupSlotName}}\"\n        [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey, defaultGroupKey: defaultGroupKey, customGroupKey: customGroupKey, columns: columns, selectedGroupKey: selectedGroupKey, layout: layout, displayedColumnsIds: displayedColumnKeys }\"\n        [outputs]=\"{ groupSelectionChanged: groupSelectionChangedSlotEmitter }\"\n      >\n        <ng-template #skeleton>\n          <div class=\"flex\">\n            <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n          </div>\n        </ng-template>\n      </ocx-slot>\n      } } @else {\n      <ng-container [ngTemplateOutlet]=\"defaultColumnGroupSelectionComponent\"></ng-container>\n      } @if (layout === 'table') {\n      <ocx-custom-group-column-selector\n        [columns]=\"columns\"\n        [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\n        [customGroupKey]=\"customGroupKey\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n      }\n    </div>\n  </div>\n</div>\n<div class=\"p-3\" [ngClass]=\"contentStyleClass\" id=\"interactiveDataViewContent\">\n  <ocx-data-view\n    [columns]=\"(displayedColumns$ | async) ?? []\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [listGridPaginator]=\"listGridPaginator\"\n    [tablePaginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [stringTableCellTemplate]=\"primeNgStringTableCell ?? _stringTableCell\"\n    [numberTableCellTemplate]=\"primeNgNumberTableCell ?? _numberTableCell\"\n    [dateTableCellTemplate]=\"primeNgDateTableCell ?? _dateTableCell\"\n    [relativeDateTableCellTemplate]=\"primeNgRelativeDateTableCell ?? _relativeDateTableCell\"\n    [tableCellTemplate]=\"primeNgTableCell ?? _tableCell\"\n    [translationKeyTableCellTemplate]=\"primeNgTranslationKeyTableCell ?? _translationKeyTableCell\"\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    [stringListValueTemplate]=\"primeNgStringListValue ?? _stringListValue\"\n    [dateListValueTemplate]=\"primeNgDateListValue ?? _dateListValue\"\n    [gridItemTemplate]=\"primeNgGridItem ?? _gridItem\"\n    [tableFilterCellTemplate]=\"primeNgTableFilterCell ?? _tableFilterCell\"\n    [dateTableFilterCellTemplate]=\"primeNgDateTableFilterCell ?? _dateTableFilterCell\"\n    [numberTableFilterCellTemplate]=\"primeNgNumberTableFilterCell ?? _numberTableFilterCell\"\n    [stringTableFilterCellTemplate]=\"primeNgStringTableFilterCell ?? _stringTableFilterCell\"\n    [relativeDateTableFilterCellTemplate]=\"primeNgRelativeDateTableFilterCell ?? _relativeDateTableFilterCell\"\n    [translationKeyTableFilterCellTemplate]=\"primeNgTranslationKeyTableFilterCell ?? _translationKeyTableFilterCell\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates$ | async\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\n    [expandable]=\"expandable\"\n    [frozenExpandColumn]=\"frozenExpandColumn\"\n    [expandedRows]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  @if (layout === 'table') {\n  <ocx-column-group-selection\n    [selectedGroupKey]=\"selectedGroupKey ?? defaultGroupKey\"\n    [columns]=\"columns\"\n    [defaultGroupKey]=\"defaultGroupKey !== customGroupKey ? defaultGroupKey : ''\"\n    [customGroupKey]=\"customGroupKey\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n  }\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_stringTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_numberTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableCell) {\n  <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItemSubtitleLines let-item>\n  @if (_gridItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  @if (_listItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItem let-item>\n  @if (_gridItem) {\n  <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listItem let-item>\n  @if (_listItem) {\n  <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_listValue) {\n  <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberListValue) {\n  <ng-container [ngTemplateOutlet]=\"_numberListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringListValue) {\n  <ng-container [ngTemplateOutlet]=\"_stringListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateListValue) {\n  <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i4$1.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "inputs", "outputs"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["groupSelectionChanged", "componentStateChanged"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "customGroupKey", "dialogTitle", "dialogTitleKey", "openButtonTitle", "openButtonTitleKey", "openButtonAriaLabel", "openButtonAriaLabelKey", "saveButtonLabel", "saveButtonLabelKey", "saveButtonAriaLabel", "saveButtonAriaLabelKey", "cancelButtonLabel", "cancelButtonLabelKey", "cancelButtonAriaLabel", "cancelButtonAriaLabelKey", "activeColumnsLabel", "activeColumnsLabelKey", "inactiveColumnsLabel", "inactiveColumnsLabelKey", "frozenActionColumn", "actionColumnPosition"], outputs: ["columnSelectionChanged", "actionColumnConfigChanged", "componentStateChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["dataViewLayoutChange", "componentStateChanged"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortChange", "sortDirectionChange", "componentStateChanged", "columnsChange"] }, { kind: "component", type: DataViewComponent, selector: "ocx-data-view", inputs: ["deletePermission", "editPermission", "viewPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "tableSelectionEnabledField", "tableAllowSelectAll", "data", "name", "titleLineId", "subtitleLineIds", "layout", "columns", "emptyResultsMessage", "clientSideSorting", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "listGridPaginator", "tablePaginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "expandable", "frozenExpandColumn", "expandedRows", "paginator", "sortStates", "pageSizes", "pageSize", "stringTableCellTemplate", "numberTableCellTemplate", "dateTableCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "tableFilterCellTemplate", "dateTableFilterCellTemplate", "relativeDateTableFilterCellTemplate", "translationKeyTableFilterCellTemplate", "stringTableFilterCellTemplate", "numberTableFilterCellTemplate", "additionalActions", "parentTemplates"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "component", type: FilterViewComponent, selector: "ocx-filter-view", inputs: ["filters", "columns", "displayMode", "selectDisplayedChips", "chipStyleClass", "tableStyle", "panelStyle", "templates"], outputs: ["filtered", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InteractiveDataViewComponent, isStandalone: false, selector: "ocx-interactive-data-view", inputs: { searchConfigPermission: "searchConfigPermission", deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", supportedViewLayouts: "supportedViewLayouts", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", 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", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", headerStyleClass: "headerStyleClass", contentStyleClass: "contentStyleClass", expandable: "expandable", frozenExpandColumn: "frozenExpandColumn", expandedRows: "expandedRows", paginator: "paginator", data: "data" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnKeysChange: "displayedColumnKeysChange", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], queries: [{ propertyName: "tableCell", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "dateTableCell", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "relativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], 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: "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: "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: "columnHeader", first: true, predicate: ["columnHeader"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "dataView", first: true, predicate: DataViewComponent, descendants: true }], ngImport: i0, template: "<div class=\"p-3 border-bottom-1 surface-border\" [ngClass]=\"headerStyleClass\" id=\"interactiveDataViewHeader\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n      <ocx-data-layout-selection\n        [supportedViewLayouts]=\"supportedViewLayouts\"\n        [layout]=\"layout\"\n        (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n        (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n      ></ocx-data-layout-selection>\n      @if (!disableFilterView) {\n      <ocx-filter-view\n        [filters]=\"filters\"\n        [columns]=\"columns\"\n        [templates]=\"templates$ | async\"\n        [displayMode]=\"filterViewDisplayMode\"\n        [selectDisplayedChips]=\"selectDisplayedChips\"\n        [chipStyleClass]=\"filterViewChipStyleClass\"\n        [tableStyle]=\"filterViewTableStyle\"\n        (filtered)=\"filtering($event)\"\n        (componentStateChanged)=\"filterViewComponentState$.next($event)\"\n      ></ocx-filter-view>\n      }\n    </div>\n\n    @if (topCenter) {\n    <div>\n      <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n    </div>\n    } @if (layout !== 'table') {\n    <div class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection\"\n        [sortField]=\"sortField\"\n        [columns]=\"(displayedColumns$ | async) ?? []\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n    }\n\n    <div\n      [ngStyle]=\"layout !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      @if (isColumnGroupSelectionComponentDefined$ | async) { @if (displayedColumnKeys$ | async; as displayedColumnKeys)\n      {\n      <ocx-slot\n        [ngStyle]=\"layout !== 'table' ? {'display' : 'none'}  : {}\"\n        *ocxIfPermission=\"searchConfigPermission; elseTemplate: defaultColumnGroupSelectionComponent\"\n        name=\"{{columnGroupSlotName}}\"\n        [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey, defaultGroupKey: defaultGroupKey, customGroupKey: customGroupKey, columns: columns, selectedGroupKey: selectedGroupKey, layout: layout, displayedColumnsIds: displayedColumnKeys }\"\n        [outputs]=\"{ groupSelectionChanged: groupSelectionChangedSlotEmitter }\"\n      >\n        <ng-template #skeleton>\n          <div class=\"flex\">\n            <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n          </div>\n        </ng-template>\n      </ocx-slot>\n      } } @else {\n      <ng-container [ngTemplateOutlet]=\"defaultColumnGroupSelectionComponent\"></ng-container>\n      } @if (layout === 'table') {\n      <ocx-custom-group-column-selector\n        [columns]=\"columns\"\n        [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\n        [customGroupKey]=\"customGroupKey\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n      }\n    </div>\n  </div>\n</div>\n<div class=\"p-3\" [ngClass]=\"contentStyleClass\" id=\"interactiveDataViewContent\">\n  <ocx-data-view\n    [columns]=\"(displayedColumns$ | async) ?? []\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [listGridPaginator]=\"listGridPaginator\"\n    [tablePaginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [stringTableCellTemplate]=\"primeNgStringTableCell ?? _stringTableCell\"\n    [numberTableCellTemplate]=\"primeNgNumberTableCell ?? _numberTableCell\"\n    [dateTableCellTemplate]=\"primeNgDateTableCell ?? _dateTableCell\"\n    [relativeDateTableCellTemplate]=\"primeNgRelativeDateTableCell ?? _relativeDateTableCell\"\n    [tableCellTemplate]=\"primeNgTableCell ?? _tableCell\"\n    [translationKeyTableCellTemplate]=\"primeNgTranslationKeyTableCell ?? _translationKeyTableCell\"\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    [stringListValueTemplate]=\"primeNgStringListValue ?? _stringListValue\"\n    [dateListValueTemplate]=\"primeNgDateListValue ?? _dateListValue\"\n    [gridItemTemplate]=\"primeNgGridItem ?? _gridItem\"\n    [tableFilterCellTemplate]=\"primeNgTableFilterCell ?? _tableFilterCell\"\n    [dateTableFilterCellTemplate]=\"primeNgDateTableFilterCell ?? _dateTableFilterCell\"\n    [numberTableFilterCellTemplate]=\"primeNgNumberTableFilterCell ?? _numberTableFilterCell\"\n    [stringTableFilterCellTemplate]=\"primeNgStringTableFilterCell ?? _stringTableFilterCell\"\n    [relativeDateTableFilterCellTemplate]=\"primeNgRelativeDateTableFilterCell ?? _relativeDateTableFilterCell\"\n    [translationKeyTableFilterCellTemplate]=\"primeNgTranslationKeyTableFilterCell ?? _translationKeyTableFilterCell\"\n    [columnHeaderTemplate]=\"primeNgColumnHeader ?? _columnHeader\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates$ | async\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\n    [expandable]=\"expandable\"\n    [frozenExpandColumn]=\"frozenExpandColumn\"\n    [expandedRows]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  @if (layout === 'table') {\n  <ocx-column-group-selection\n    [selectedGroupKey]=\"selectedGroupKey ?? defaultGroupKey\"\n    [columns]=\"columns\"\n    [defaultGroupKey]=\"defaultGroupKey !== customGroupKey ? defaultGroupKey : ''\"\n    [customGroupKey]=\"customGroupKey\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n  }\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_stringTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_numberTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableCell) {\n  <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItemSubtitleLines let-item>\n  @if (_gridItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  @if (_listItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItem let-item>\n  @if (_gridItem) {\n  <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listItem let-item>\n  @if (_listItem) {\n  <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_listValue) {\n  <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberListValue) {\n  <ng-container [ngTemplateOutlet]=\"_numberListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringListValue) {\n  <ng-container [ngTemplateOutlet]=\"_stringListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateListValue) {\n  <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i4$1.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "inputs", "outputs"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["groupSelectionChanged", "componentStateChanged"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "customGroupKey", "dialogTitle", "dialogTitleKey", "openButtonTitle", "openButtonTitleKey", "openButtonAriaLabel", "openButtonAriaLabelKey", "saveButtonLabel", "saveButtonLabelKey", "saveButtonAriaLabel", "saveButtonAriaLabelKey", "cancelButtonLabel", "cancelButtonLabelKey", "cancelButtonAriaLabel", "cancelButtonAriaLabelKey", "activeColumnsLabel", "activeColumnsLabelKey", "inactiveColumnsLabel", "inactiveColumnsLabelKey", "frozenActionColumn", "actionColumnPosition"], outputs: ["columnSelectionChanged", "actionColumnConfigChanged", "componentStateChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["dataViewLayoutChange", "componentStateChanged"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortChange", "sortDirectionChange", "componentStateChanged", "columnsChange"] }, { kind: "component", type: DataViewComponent, selector: "ocx-data-view", inputs: ["deletePermission", "editPermission", "viewPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "tableSelectionEnabledField", "tableAllowSelectAll", "data", "name", "titleLineId", "subtitleLineIds", "layout", "columns", "emptyResultsMessage", "clientSideSorting", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "listGridPaginator", "tablePaginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "expandable", "frozenExpandColumn", "expandedRows", "paginator", "sortStates", "pageSizes", "pageSize", "stringTableCellTemplate", "numberTableCellTemplate", "dateTableCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "tableFilterCellTemplate", "dateTableFilterCellTemplate", "relativeDateTableFilterCellTemplate", "translationKeyTableFilterCellTemplate", "stringTableFilterCellTemplate", "numberTableFilterCellTemplate", "columnHeaderTemplate", "additionalActions", "parentTemplates"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "component", type: FilterViewComponent, selector: "ocx-filter-view", inputs: ["filters", "columns", "displayMode", "selectDisplayedChips", "chipStyleClass", "tableStyle", "panelStyle", "templates"], outputs: ["filtered", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InteractiveDataViewComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ocx-interactive-data-view', providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], template: "<div class=\"p-3 border-bottom-1 surface-border\" [ngClass]=\"headerStyleClass\" id=\"interactiveDataViewHeader\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n      <ocx-data-layout-selection\n        [supportedViewLayouts]=\"supportedViewLayouts\"\n        [layout]=\"layout\"\n        (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n        (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n      ></ocx-data-layout-selection>\n      @if (!disableFilterView) {\n      <ocx-filter-view\n        [filters]=\"filters\"\n        [columns]=\"columns\"\n        [templates]=\"templates$ | async\"\n        [displayMode]=\"filterViewDisplayMode\"\n        [selectDisplayedChips]=\"selectDisplayedChips\"\n        [chipStyleClass]=\"filterViewChipStyleClass\"\n        [tableStyle]=\"filterViewTableStyle\"\n        (filtered)=\"filtering($event)\"\n        (componentStateChanged)=\"filterViewComponentState$.next($event)\"\n      ></ocx-filter-view>\n      }\n    </div>\n\n    @if (topCenter) {\n    <div>\n      <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n    </div>\n    } @if (layout !== 'table') {\n    <div class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection\"\n        [sortField]=\"sortField\"\n        [columns]=\"(displayedColumns$ | async) ?? []\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n    }\n\n    <div\n      [ngStyle]=\"layout !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      @if (isColumnGroupSelectionComponentDefined$ | async) { @if (displayedColumnKeys$ | async; as displayedColumnKeys)\n      {\n      <ocx-slot\n        [ngStyle]=\"layout !== 'table' ? {'display' : 'none'}  : {}\"\n        *ocxIfPermission=\"searchConfigPermission; elseTemplate: defaultColumnGroupSelectionComponent\"\n        name=\"{{columnGroupSlotName}}\"\n        [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey, defaultGroupKey: defaultGroupKey, customGroupKey: customGroupKey, columns: columns, selectedGroupKey: selectedGroupKey, layout: layout, displayedColumnsIds: displayedColumnKeys }\"\n        [outputs]=\"{ groupSelectionChanged: groupSelectionChangedSlotEmitter }\"\n      >\n        <ng-template #skeleton>\n          <div class=\"flex\">\n            <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n          </div>\n        </ng-template>\n      </ocx-slot>\n      } } @else {\n      <ng-container [ngTemplateOutlet]=\"defaultColumnGroupSelectionComponent\"></ng-container>\n      } @if (layout === 'table') {\n      <ocx-custom-group-column-selector\n        [columns]=\"columns\"\n        [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\n        [customGroupKey]=\"customGroupKey\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n      }\n    </div>\n  </div>\n</div>\n<div class=\"p-3\" [ngClass]=\"contentStyleClass\" id=\"interactiveDataViewContent\">\n  <ocx-data-view\n    [columns]=\"(displayedColumns$ | async) ?? []\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [listGridPaginator]=\"listGridPaginator\"\n    [tablePaginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [stringTableCellTemplate]=\"primeNgStringTableCell ?? _stringTableCell\"\n    [numberTableCellTemplate]=\"primeNgNumberTableCell ?? _numberTableCell\"\n    [dateTableCellTemplate]=\"primeNgDateTableCell ?? _dateTableCell\"\n    [relativeDateTableCellTemplate]=\"primeNgRelativeDateTableCell ?? _relativeDateTableCell\"\n    [tableCellTemplate]=\"primeNgTableCell ?? _tableCell\"\n    [translationKeyTableCellTemplate]=\"primeNgTranslationKeyTableCell ?? _translationKeyTableCell\"\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    [stringListValueTemplate]=\"primeNgStringListValue ?? _stringListValue\"\n    [dateListValueTemplate]=\"primeNgDateListValue ?? _dateListValue\"\n    [gridItemTemplate]=\"primeNgGridItem ?? _gridItem\"\n    [tableFilterCellTemplate]=\"primeNgTableFilterCell ?? _tableFilterCell\"\n    [dateTableFilterCellTemplate]=\"primeNgDateTableFilterCell ?? _dateTableFilterCell\"\n    [numberTableFilterCellTemplate]=\"primeNgNumberTableFilterCell ?? _numberTableFilterCell\"\n    [stringTableFilterCellTemplate]=\"primeNgStringTableFilterCell ?? _stringTableFilterCell\"\n    [relativeDateTableFilterCellTemplate]=\"primeNgRelativeDateTableFilterCell ?? _relativeDateTableFilterCell\"\n    [translationKeyTableFilterCellTemplate]=\"primeNgTranslationKeyTableFilterCell ?? _translationKeyTableFilterCell\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates$ | async\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\n    [expandable]=\"expandable\"\n    [frozenExpandColumn]=\"frozenExpandColumn\"\n    [expandedRows]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  @if (layout === 'table') {\n  <ocx-column-group-selection\n    [selectedGroupKey]=\"selectedGroupKey ?? defaultGroupKey\"\n    [columns]=\"columns\"\n    [defaultGroupKey]=\"defaultGroupKey !== customGroupKey ? defaultGroupKey : ''\"\n    [customGroupKey]=\"customGroupKey\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n  }\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_stringTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_numberTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableCell) {\n  <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItemSubtitleLines let-item>\n  @if (_gridItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  @if (_listItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItem let-item>\n  @if (_gridItem) {\n  <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listItem let-item>\n  @if (_listItem) {\n  <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_listValue) {\n  <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberListValue) {\n  <ng-container [ngTemplateOutlet]=\"_numberListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringListValue) {\n  <ng-container [ngTemplateOutlet]=\"_stringListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateListValue) {\n  <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n" }]
+            args: [{ standalone: false, selector: 'ocx-interactive-data-view', providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], template: "<div class=\"p-3 border-bottom-1 surface-border\" [ngClass]=\"headerStyleClass\" id=\"interactiveDataViewHeader\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n      <ocx-data-layout-selection\n        [supportedViewLayouts]=\"supportedViewLayouts\"\n        [layout]=\"layout\"\n        (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n        (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n      ></ocx-data-layout-selection>\n      @if (!disableFilterView) {\n      <ocx-filter-view\n        [filters]=\"filters\"\n        [columns]=\"columns\"\n        [templates]=\"templates$ | async\"\n        [displayMode]=\"filterViewDisplayMode\"\n        [selectDisplayedChips]=\"selectDisplayedChips\"\n        [chipStyleClass]=\"filterViewChipStyleClass\"\n        [tableStyle]=\"filterViewTableStyle\"\n        (filtered)=\"filtering($event)\"\n        (componentStateChanged)=\"filterViewComponentState$.next($event)\"\n      ></ocx-filter-view>\n      }\n    </div>\n\n    @if (topCenter) {\n    <div>\n      <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n    </div>\n    } @if (layout !== 'table') {\n    <div class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection\"\n        [sortField]=\"sortField\"\n        [columns]=\"(displayedColumns$ | async) ?? []\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n    }\n\n    <div\n      [ngStyle]=\"layout !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      @if (isColumnGroupSelectionComponentDefined$ | async) { @if (displayedColumnKeys$ | async; as displayedColumnKeys)\n      {\n      <ocx-slot\n        [ngStyle]=\"layout !== 'table' ? {'display' : 'none'}  : {}\"\n        *ocxIfPermission=\"searchConfigPermission; elseTemplate: defaultColumnGroupSelectionComponent\"\n        name=\"{{columnGroupSlotName}}\"\n        [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey, defaultGroupKey: defaultGroupKey, customGroupKey: customGroupKey, columns: columns, selectedGroupKey: selectedGroupKey, layout: layout, displayedColumnsIds: displayedColumnKeys }\"\n        [outputs]=\"{ groupSelectionChanged: groupSelectionChangedSlotEmitter }\"\n      >\n        <ng-template #skeleton>\n          <div class=\"flex\">\n            <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n          </div>\n        </ng-template>\n      </ocx-slot>\n      } } @else {\n      <ng-container [ngTemplateOutlet]=\"defaultColumnGroupSelectionComponent\"></ng-container>\n      } @if (layout === 'table') {\n      <ocx-custom-group-column-selector\n        [columns]=\"columns\"\n        [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\n        [customGroupKey]=\"customGroupKey\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n      }\n    </div>\n  </div>\n</div>\n<div class=\"p-3\" [ngClass]=\"contentStyleClass\" id=\"interactiveDataViewContent\">\n  <ocx-data-view\n    [columns]=\"(displayedColumns$ | async) ?? []\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [listGridPaginator]=\"listGridPaginator\"\n    [tablePaginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [stringTableCellTemplate]=\"primeNgStringTableCell ?? _stringTableCell\"\n    [numberTableCellTemplate]=\"primeNgNumberTableCell ?? _numberTableCell\"\n    [dateTableCellTemplate]=\"primeNgDateTableCell ?? _dateTableCell\"\n    [relativeDateTableCellTemplate]=\"primeNgRelativeDateTableCell ?? _relativeDateTableCell\"\n    [tableCellTemplate]=\"primeNgTableCell ?? _tableCell\"\n    [translationKeyTableCellTemplate]=\"primeNgTranslationKeyTableCell ?? _translationKeyTableCell\"\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    [stringListValueTemplate]=\"primeNgStringListValue ?? _stringListValue\"\n    [dateListValueTemplate]=\"primeNgDateListValue ?? _dateListValue\"\n    [gridItemTemplate]=\"primeNgGridItem ?? _gridItem\"\n    [tableFilterCellTemplate]=\"primeNgTableFilterCell ?? _tableFilterCell\"\n    [dateTableFilterCellTemplate]=\"primeNgDateTableFilterCell ?? _dateTableFilterCell\"\n    [numberTableFilterCellTemplate]=\"primeNgNumberTableFilterCell ?? _numberTableFilterCell\"\n    [stringTableFilterCellTemplate]=\"primeNgStringTableFilterCell ?? _stringTableFilterCell\"\n    [relativeDateTableFilterCellTemplate]=\"primeNgRelativeDateTableFilterCell ?? _relativeDateTableFilterCell\"\n    [translationKeyTableFilterCellTemplate]=\"primeNgTranslationKeyTableFilterCell ?? _translationKeyTableFilterCell\"\n    [columnHeaderTemplate]=\"primeNgColumnHeader ?? _columnHeader\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates$ | async\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\n    [expandable]=\"expandable\"\n    [frozenExpandColumn]=\"frozenExpandColumn\"\n    [expandedRows]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  @if (layout === 'table') {\n  <ocx-column-group-selection\n    [selectedGroupKey]=\"selectedGroupKey ?? defaultGroupKey\"\n    [columns]=\"columns\"\n    [defaultGroupKey]=\"defaultGroupKey !== customGroupKey ? defaultGroupKey : ''\"\n    [customGroupKey]=\"customGroupKey\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n  }\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_stringTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_numberTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableCell) {\n  <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItemSubtitleLines let-item>\n  @if (_gridItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  @if (_listItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItem let-item>\n  @if (_gridItem) {\n  <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listItem let-item>\n  @if (_listItem) {\n  <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_listValue) {\n  <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberListValue) {\n  <ng-container [ngTemplateOutlet]=\"_numberListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringListValue) {\n  <ng-container [ngTemplateOutlet]=\"_stringListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateListValue) {\n  <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n" }]
         }], ctorParameters: () => [], propDecorators: { dataView: [{
                 type: ViewChild,
                 args: [DataViewComponent]
@@ -5389,6 +5486,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }], numberTableFilterCell: [{
                 type: ContentChild,
                 args: ['numberTableFilterCell']
+            }], columnHeader: [{
+                type: ContentChild,
+                args: ['columnHeader']
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
@@ -5429,7 +5529,7 @@ class LifecycleComponent {
         this.steps = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LifecycleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LifecycleComponent, isStandalone: false, selector: "ocx-lifecycle", inputs: { steps: "steps", activeStepId: "activeStepId" }, ngImport: i0, template: "<p-timeline [value]=\"steps\">\n  <ng-template pTemplate=\"marker\" let-step>\n    <span class=\"p-timeline-event-marker\" [ngClass]=\"activeStepId && activeStepId === step.id ? 'bg-primary' : ''\"></span>\n  </ng-template>\n  <ng-template pTemplate=\"content\" let-step>\n    <div class=\"pb-4 h-full\">\n      <div class=\"card h-full\" [ngClass]=\"activeStepId && activeStepId === step.id ? 'bg-primary' : ''\">\n        <p class=\"font-bold text-xl\" [ngClass]=\"step.details ? 'mb-2' : ''\">{{ step.title }}</p>\n        @if (step.details) {\n          <p [ngClass]=\"activeStepId && activeStepId === step.id ? '' : 'text-color-secondary'\">{{ step.details }}</p>\n        }\n      </div>\n    </div>\n  </ng-template>\n</p-timeline>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$5.Timeline, selector: "p-timeline", inputs: ["value", "styleClass", "align", "layout"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LifecycleComponent, isStandalone: false, selector: "ocx-lifecycle", inputs: { steps: "steps", activeStepId: "activeStepId" }, ngImport: i0, template: "<p-timeline [value]=\"steps\">\n  <ng-template pTemplate=\"marker\" let-step>\n    <span class=\"p-timeline-event-marker\" [ngClass]=\"activeStepId && activeStepId === step.id ? 'bg-primary' : ''\"></span>\n  </ng-template>\n  <ng-template pTemplate=\"content\" let-step>\n    <div class=\"pb-4 h-full\">\n      <div class=\"card h-full\" [ngClass]=\"activeStepId && activeStepId === step.id ? 'bg-primary' : ''\">\n        <p class=\"font-bold text-xl\" [ngClass]=\"step.details ? 'mb-2' : ''\">{{ step.title }}</p>\n        @if (step.details) {\n          <p [ngClass]=\"activeStepId && activeStepId === step.id ? '' : 'text-color-secondary'\">{{ step.details }}</p>\n        }\n      </div>\n    </div>\n  </ng-template>\n</p-timeline>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$5.Timeline, selector: "p-timeline", inputs: ["value", "styleClass", "align", "layout"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LifecycleComponent, decorators: [{
             type: Component,
@@ -5725,7 +5825,7 @@ class DialogFooterComponent {
         this.rightCustomButtons = dialogData.config.customButtons?.filter((button) => button.alignment === 'right') ?? [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DialogFooterComponent, isStandalone: false, selector: "ocx-dialog-footer", inputs: { config: "config" }, outputs: { buttonClickedEmitter: "buttonClickedEmitter" }, viewQueries: [{ propertyName: "primaryButton", first: true, predicate: ["primaryButton"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "secondaryButton", first: true, predicate: ["secondaryButton"], descendants: true, read: ViewContainerRef }, { propertyName: "customButtons", predicate: ["customButton"], descendants: true }], ngImport: i0, template: "<div class=\"w-full flex-row justify-content-end flex flex-wrap gap-2\">\n  @for (button of leftCustomButtons; track button; let i = $index) {\n    <div [ngStyle]=\"{'margin-right': (i === leftCustomButtons.length - 1) ? 'auto' : 0}\">\n      <ng-container *ngTemplateOutlet=\"customButtonTemplate; context: {button: button}\"> </ng-container>\n    </div>\n  }\n  @for (button of rightCustomButtons; track button) {\n    <div>\n      <ng-container *ngTemplateOutlet=\"customButtonTemplate; context: {button: button}\"> </ng-container>\n    </div>\n  }\n  <div>\n    @if (dialogData.config.secondaryButtonIncluded) {\n      <button\n        #secondaryButton\n        id=\"{{dialogData.config.secondaryButtonDetails?.id ?? 'buttonDialogSecondaryButton'}}\"\n        pButton\n        [icon]=\"dialogData.config.secondaryButtonDetails!.icon !== undefined ? dialogData.config.secondaryButtonDetails!.icon : ''\"\n        (click)=\"secondaryButtonAction()\"\n        [label]=\"dialogData.config.secondaryButtonDetails!.key | translate:dialogData.config.secondaryButtonDetails?.parameters\"\n        [disabled]=\"secondaryButtonDisabled$ | async\"\n        [ocxTooltip]=\"dialogData.config.secondaryButtonDetails!.tooltipKey ? (dialogData.config.secondaryButtonDetails!.tooltipKey | translate) : null\"\n        [tooltipPosition]=\"dialogData.config.secondaryButtonDetails?.tooltipPosition ?? ''\"\n        [attr.aria-label]=\"dialogData.config.secondaryButtonDetails!.key | translate:dialogData.config.secondaryButtonDetails?.parameters\"\n      ></button>\n    }\n  </div>\n  <div>\n    <button\n      #primaryButton\n      id=\"{{dialogData.config.primaryButtonDetails?.id ?? 'buttonDialogPrimaryButton'}}\"\n      pButton\n      autofocus\n      [icon]=\"dialogData.config.primaryButtonDetails!.icon !== undefined ? dialogData.config.primaryButtonDetails!.icon : ''\"\n      (click)=\"primaryButtonAction()\"\n      [label]=\"dialogData.config.primaryButtonDetails!.key | translate:dialogData.config.primaryButtonDetails?.parameters\"\n      [disabled]=\"primaryButtonDisabled$ | async\"\n      [ocxTooltip]=\"dialogData.config.primaryButtonDetails!.tooltipKey ? (dialogData.config.primaryButtonDetails!.tooltipKey | translate) : null\"\n      [tooltipPosition]=\"dialogData.config.primaryButtonDetails?.tooltipPosition ?? ''\"\n      [attr.aria-label]=\"dialogData.config.primaryButtonDetails!.key | translate:dialogData.config.primaryButtonDetails?.parameters\"\n    ></button>\n  </div>\n</div>\n\n<ng-template #customButtonTemplate let-button=\"button\">\n  <button\n    #customButton\n    id=\"{{button.id}}\"\n    pButton\n    [icon]=\"button.icon !== undefined ? button.icon : ''\"\n    (click)=\"customButtonAction(button)\"\n    [label]=\"button.key | translate:button.parameters\"\n    [disabled]=\"resolveCustomButtonDisabled((customButtonsDisabled$ | async) ?? {}, button.id)\"\n    [ocxTooltip]=\"button.tooltipKey ? (button.tooltipKey | translate) : null\"\n    [tooltipPosition]=\"button.tooltipPosition ?? ''\"\n    [attr.aria-label]=\"button.key | translate:button.parameters\"\n  ></button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DialogFooterComponent, isStandalone: false, selector: "ocx-dialog-footer", inputs: { config: "config" }, outputs: { buttonClickedEmitter: "buttonClickedEmitter" }, viewQueries: [{ propertyName: "primaryButton", first: true, predicate: ["primaryButton"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "secondaryButton", first: true, predicate: ["secondaryButton"], descendants: true, read: ViewContainerRef }, { propertyName: "customButtons", predicate: ["customButton"], descendants: true }], ngImport: i0, template: "<div class=\"w-full flex-row justify-content-end flex flex-wrap gap-2\">\n  @for (button of leftCustomButtons; track button; let i = $index) {\n    <div [ngStyle]=\"{'margin-right': (i === leftCustomButtons.length - 1) ? 'auto' : 0}\">\n      <ng-container *ngTemplateOutlet=\"customButtonTemplate; context: {button: button}\"> </ng-container>\n    </div>\n  }\n  @for (button of rightCustomButtons; track button) {\n    <div>\n      <ng-container *ngTemplateOutlet=\"customButtonTemplate; context: {button: button}\"> </ng-container>\n    </div>\n  }\n  <div>\n    @if (dialogData.config.secondaryButtonIncluded) {\n      <button\n        #secondaryButton\n        id=\"{{dialogData.config.secondaryButtonDetails?.id ?? 'buttonDialogSecondaryButton'}}\"\n        pButton\n        [icon]=\"dialogData.config.secondaryButtonDetails!.icon !== undefined ? dialogData.config.secondaryButtonDetails!.icon : ''\"\n        (click)=\"secondaryButtonAction()\"\n        [label]=\"dialogData.config.secondaryButtonDetails!.key | translate:dialogData.config.secondaryButtonDetails?.parameters\"\n        [disabled]=\"secondaryButtonDisabled$ | async\"\n        [ocxTooltip]=\"dialogData.config.secondaryButtonDetails!.tooltipKey ? (dialogData.config.secondaryButtonDetails!.tooltipKey | translate) : null\"\n        [tooltipPosition]=\"dialogData.config.secondaryButtonDetails?.tooltipPosition ?? ''\"\n        [attr.aria-label]=\"dialogData.config.secondaryButtonDetails!.key | translate:dialogData.config.secondaryButtonDetails?.parameters\"\n      ></button>\n    }\n  </div>\n  <div>\n    <button\n      #primaryButton\n      id=\"{{dialogData.config.primaryButtonDetails?.id ?? 'buttonDialogPrimaryButton'}}\"\n      pButton\n      autofocus\n      [icon]=\"dialogData.config.primaryButtonDetails!.icon !== undefined ? dialogData.config.primaryButtonDetails!.icon : ''\"\n      (click)=\"primaryButtonAction()\"\n      [label]=\"dialogData.config.primaryButtonDetails!.key | translate:dialogData.config.primaryButtonDetails?.parameters\"\n      [disabled]=\"primaryButtonDisabled$ | async\"\n      [ocxTooltip]=\"dialogData.config.primaryButtonDetails!.tooltipKey ? (dialogData.config.primaryButtonDetails!.tooltipKey | translate) : null\"\n      [tooltipPosition]=\"dialogData.config.primaryButtonDetails?.tooltipPosition ?? ''\"\n      [attr.aria-label]=\"dialogData.config.primaryButtonDetails!.key | translate:dialogData.config.primaryButtonDetails?.parameters\"\n    ></button>\n  </div>\n</div>\n\n<ng-template #customButtonTemplate let-button=\"button\">\n  <button\n    #customButton\n    id=\"{{button.id}}\"\n    pButton\n    [icon]=\"button.icon !== undefined ? button.icon : ''\"\n    (click)=\"customButtonAction(button)\"\n    [label]=\"button.key | translate:button.parameters\"\n    [disabled]=\"resolveCustomButtonDisabled((customButtonsDisabled$ | async) ?? {}, button.id)\"\n    [ocxTooltip]=\"button.tooltipKey ? (button.tooltipKey | translate) : null\"\n    [tooltipPosition]=\"button.tooltipPosition ?? ''\"\n    [attr.aria-label]=\"button.key | translate:button.parameters\"\n  ></button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogFooterComponent, decorators: [{
             type: Component,
@@ -5779,7 +5879,7 @@ class GlobalErrorComponent {
         window.location.reload();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GlobalErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: GlobalErrorComponent, isStandalone: false, selector: "ocx-error", inputs: { errCode: "errCode" }, ngImport: i0, template: "<div class=\"pages-body error-page flex flex-column\">\n  <div class=\"align-self-center mt-auto mb-auto\">\n    <div class=\"pages-panel card flex flex-column\">\n      <div class=\"pages-header px-3 py-1\">\n        <h2>ERROR</h2>\n      </div>\n      <div class=\"card mt-3 px-6\">\n        <img src=\"assets/images/error.png\" alt=\"\" />\n      </div>\n      <div class=\"pages-detail pb-6\">{{errCode}}</div>\n      <button pButton pRipple type=\"button\" label=\"Try Again\" (click)=\"reload()\" class=\"p-button-text\"></button>\n    </div>\n  </div>\n</div>\n", styles: [".pages-body{height:100vh}.pages-body .topbar{box-shadow:0 2px 5px #00000042;background-color:#1565c0;z-index:100}.pages-body .topbar .topbar-left img{height:2rem}.pages-body .topbar .p-button.p-button-text.p-button-plain{color:#fff}.pages-body .pages-panel{text-align:center;z-index:200}.pages-body .pages-panel.card{border:1.5px solid var(--divider-color);border-radius:6px}.pages-body .pages-panel.card img{width:100%}.pages-body .pages-panel.card>.card{background-color:var(--content-alt-bg-color)}.pages-body .pages-panel .pages-header{margin-top:-3rem;color:var(--primary-color-text);border:1.5px solid var(--divider-color);border-radius:4px;margin-left:auto;margin-right:auto}.pages-body .pages-panel .pages-header h2{margin:0}.pages-body .pages-panel .pages-detail{color:var(--text-secondary-color)}.pages-body.error-page{background-size:cover;background-color:var(--primary-color)}.pages-body.error-page .pages-panel .pages-header{background:#d81b60}.pages-body.notfound-page{background-size:cover}.pages-body.notfound-page .pages-panel .pages-header{background:#455a64}.pages-body.accessdenied-page{background-size:cover}.pages-body.accessdenied-page .pages-panel .pages-header{background:#fb8c00}@media screen and (max-width:768px){.pages-body.contact-page .pages-panel{padding-bottom:10em}.pages-body.contact-page .pages-panel .p-button{width:100%}.pages-body.contact-page .pages-panel .card .right-panel{text-align:center}}\n"], dependencies: [{ kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: GlobalErrorComponent, isStandalone: false, selector: "ocx-error", inputs: { errCode: "errCode" }, ngImport: i0, template: "<div class=\"pages-body error-page flex flex-column\">\n  <div class=\"align-self-center mt-auto mb-auto\">\n    <div class=\"pages-panel card flex flex-column\">\n      <div class=\"pages-header px-3 py-1\">\n        <h2>ERROR</h2>\n      </div>\n      <div class=\"card mt-3 px-6\">\n        <img src=\"assets/images/error.png\" alt=\"\" />\n      </div>\n      <div class=\"pages-detail pb-6\">{{errCode}}</div>\n      <button pButton pRipple type=\"button\" label=\"Try Again\" (click)=\"reload()\" class=\"p-button-text\"></button>\n    </div>\n  </div>\n</div>\n", styles: [".pages-body{height:100vh}.pages-body .topbar{box-shadow:0 2px 5px #00000042;background-color:#1565c0;z-index:100}.pages-body .topbar .topbar-left img{height:2rem}.pages-body .topbar .p-button.p-button-text.p-button-plain{color:#fff}.pages-body .pages-panel{text-align:center;z-index:200}.pages-body .pages-panel.card{border:1.5px solid var(--divider-color);border-radius:6px}.pages-body .pages-panel.card img{width:100%}.pages-body .pages-panel.card>.card{background-color:var(--content-alt-bg-color)}.pages-body .pages-panel .pages-header{margin-top:-3rem;color:var(--primary-color-text);border:1.5px solid var(--divider-color);border-radius:4px;margin-left:auto;margin-right:auto}.pages-body .pages-panel .pages-header h2{margin:0}.pages-body .pages-panel .pages-detail{color:var(--text-secondary-color)}.pages-body.error-page{background-size:cover;background-color:var(--primary-color)}.pages-body.error-page .pages-panel .pages-header{background:#d81b60}.pages-body.notfound-page{background-size:cover}.pages-body.notfound-page .pages-panel .pages-header{background:#455a64}.pages-body.accessdenied-page{background-size:cover}.pages-body.accessdenied-page .pages-panel .pages-header{background:#fb8c00}@media screen and (max-width:768px){.pages-body.contact-page .pages-panel{padding-bottom:10em}.pages-body.contact-page .pages-panel .p-button{width:100%}.pages-body.contact-page .pages-panel .card .right-panel{text-align:center}}\n"], dependencies: [{ kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GlobalErrorComponent, decorators: [{
             type: Component,
@@ -5822,11 +5922,10 @@ class PortalDialogService {
         this._eventsTopic$?.destroy();
     }
     openDialog(title, componentOrMessage, primaryButtonTranslationKeyOrDetails, secondaryButtonTranslationKeyOrDetails, extrasOrShowXButton = {}) {
-        const dialogOptions = typeof extrasOrShowXButton === 'object'
+        const isObject = typeof extrasOrShowXButton === 'object';
+        const dialogOptions = isObject
             ? extrasOrShowXButton
-            : {
-                showXButton: extrasOrShowXButton,
-            };
+            : { showXButton: extrasOrShowXButton || false };
         const translateParams = this.prepareTitleForTranslation(title);
         const componentToRender = this.getComponentToRender(componentOrMessage);
         const dynamicDialogDataConfig = {
@@ -5853,7 +5952,7 @@ class PortalDialogService {
                         buttonClicked$: new EventEmitter(),
                     },
                 },
-                closable: dialogOptions.showXButton && secondaryButtonTranslationKeyOrDetails !== undefined,
+                closable: this.getShowXStatus(secondaryButtonTranslationKeyOrDetails !== undefined, dialogOptions),
                 modal: true,
                 ...dialogOptions,
                 focusOnShow: false,
@@ -5874,9 +5973,24 @@ class PortalDialogService {
             else {
                 console.warn('Dialog component instance could not be found after creation. The displayed dialog may not function as expected.');
             }
-            return dialogRef.onClose;
+            return dialogRef.onClose.pipe(tap(() => {
+                if (isObject) {
+                    this.setFocusOnInitiator(extrasOrShowXButton);
+                }
+            }));
         }));
     }
+    setFocusOnInitiator(dialogOptions) {
+        const hasOnCloseFocus = Object.hasOwn(dialogOptions, 'onCloseFocus') && dialogOptions.onCloseFocus !== 'initiator';
+        if (hasOnCloseFocus)
+            return;
+        const initiator = dialogOptions.initiatorRef;
+        if (!initiator || typeof document === 'undefined' || !document.contains(initiator) || dialogOptions.onCloseFocus !== 'initiator')
+            return;
+        else {
+            initiator.focus();
+        }
+    }
     cleanupAndCloseDialog() {
         if (this.dialogService.dialogComponentRefMap.size > 0) {
             this.dialogService.dialogComponentRefMap.forEach((_, dialogRef) => {
@@ -5981,6 +6095,16 @@ class PortalDialogService {
     isType(obj) {
         return obj instanceof Type;
     }
+    getShowXStatus(isSecondaryButtonPresent, configuration) {
+        let showXButton;
+        if (Object.hasOwn(configuration, 'closable')) {
+            showXButton = configuration.closable;
+        }
+        else {
+            showXButton = configuration.showXButton && isSecondaryButtonPresent;
+        }
+        return Boolean(showXButton);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PortalDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PortalDialogService, providedIn: 'any' }); }
 }