@onecx/angular-accelerator 6.0.0-rc.4 → 6.0.0-rc.6

package/fesm2022/onecx-angular-accelerator.mjs

@@ -6,8 +6,8 @@ import { UserService, AppStateService, ConfigurationService, CONFIG_KEY, AppConf
 import { HttpClient } from '@angular/common/http';
 import * as i3$1 from '@angular/forms';
 import { FormGroupDirective, FormControlName, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BehaviorSubject, map, filter, concat, of, from, combineLatest, startWith, debounceTime, mergeMap, first, withLatestFrom, ReplaySubject, timestamp, distinctUntilChanged, tap, firstValueFrom, skip, defaultIfEmpty, forkJoin, catchError } from 'rxjs';
 import { SyncableTopic, getLocation, isValidDate as isValidDate$1, getUTCDateWithoutTimezoneIssues } from '@onecx/accelerator';
-import { BehaviorSubject, map, filter, concat, of, combineLatest, startWith, debounceTime, mergeMap, first, withLatestFrom, ReplaySubject, timestamp, distinctUntilChanged, tap, firstValueFrom, skip, defaultIfEmpty, forkJoin, catchError } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CurrencyPipe, DecimalPipe, DatePipe, formatDate, CommonModule, Location } from '@angular/common';
 import * as i3 from 'primeng/button';
@@ -748,11 +748,11 @@ class PageHeaderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PageHeaderComponent, isStandalone: false, selector: "ocx-page-header", inputs: { header: "header", loading: "loading", figureBackground: "figureBackground", showFigure: "showFigure", figureImage: "figureImage", disableDefaultActions: "disableDefaultActions", subheader: "subheader", actions: "actions", objectDetails: "objectDetails", showBreadcrumbs: "showBreadcrumbs", manualBreadcrumbs: "manualBreadcrumbs", enableGridView: "enableGridView", gridLayoutDesktopColumns: "gridLayoutDesktopColumns" }, outputs: { save: "save" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n  @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n  <p-breadcrumb\n    [model]=\"items\"\n    [home]=\"(home$ | async)?.menuItem ?? {}\"\n    [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n    [attr.manual]=\"manualBreadcrumbs\"\n  ></p-breadcrumb>\n  } }\n  <div class=\"title-bar flex flex-row md:justify-content-between p-3\">\n    <div class=\"title-wrap\">\n      @if (showFigure) {\n      <div class=\"figure flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n        <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n          <ng-content select=\"[figureImage]\"></ng-content>\n          @if (figureImage && !figureImageLoadError) {\n          <img [ocxSrc]=\"figureImage\" alt=\"Figure image\" class=\"w-full\" (error)=\"handleImageError()\" />\n          }\n        </div>\n        @if (previewImage.children.length === 0 || figureImageLoadError) {\n        <div class=\"colorblob flex-1 border-round\"></div>\n        }\n      </div>\n      } @if (!loading) {\n      <div class=\"header\">\n        @if (!!header) {\n        <h1 id=\"page-header\">{{ header }}</h1>\n        } @if (!!subheader) {\n        <h2 id=\"page-subheader\">{{ subheader }}</h2>\n        }\n      </div>\n      } @else {\n      <div class=\"header justify-content-evenly\">\n        <p-skeleton width=\"10rem\"></p-skeleton>\n        <p-skeleton width=\"10rem\"></p-skeleton>\n      </div>\n      }\n    </div>\n    <div class=\"action-items-wrap mt-2 md:mt-0\">\n      @if (additionalToolbarContentLeft) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n      } @if (!loading) { @if (inlineActions && inlineActions.length > 0) {\n      <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n        @for (action of inlineActions; track action) {\n        <span\n          [pTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n          tooltipPosition=\"top\"\n          tooltipEvent=\"hover\"\n        >\n          <p-button\n            id=\"{{ action.id }}\"\n            [icon]=\"action.icon ?? ''\"\n            type=\"button\"\n            class=\"action-button\"\n            [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n            (onClick)=\"action.actionCallback()\"\n            [disabled]=\"action.disabled ? action.disabled : false\"\n            [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n            [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n          ></p-button>\n        </span>\n        }\n      </div>\n      }\n      <ng-content select=\"[toolbarItems]\"></ng-content>\n      <ng-container>\n        @if (overflowActions.length !== 0) {\n        <div>\n          <button\n            id=\"pageHeaderMenuButton\"\n            type=\"button\"\n            pButton\n            icon=\"pi pi-ellipsis-v\"\n            pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n            tooltipEvent=\"hover\"\n            tooltipPosition=\"top\"\n            class=\"more-actions-menu-button action-button ml-2\"\n            (click)=\"menu.toggle($event)\"\n            name=\"ocx-page-header-overflow-action-button\"\n            [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n          ></button>\n          <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n        </div>\n        }\n      </ng-container>\n      } @else {\n      <div class=\"flex\">\n        <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n        <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n      </div>\n      } @if (additionalToolbarContent) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n      }\n    </div>\n  </div>\n\n  <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n    @if (objectDetails) { @for (item of objectDetails; track item) {\n    <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n      <span\n        class=\"flex font-medium text-600 object-info-grid-label\"\n        name=\"object-detail-label\"\n        [pTooltip]=\"item.labelTooltip || ''\"\n        tooltipEvent=\"hover\"\n        tooltipPosition=\"top\"\n        >{{ item.label | dynamicPipe:item.labelPipe }}</span\n      >\n      @if (item.icon || item.value) {\n      <span class=\"object-info-grid-value\">\n        <span\n          class=\"flex text-900 align-items-center gap-2 w-max\"\n          [ngClass]=\"generateItemStyle(item)\"\n          name=\"object-detail-value\"\n        >\n          <span\n            class=\"flex align-items-center gap-2\"\n            [pTooltip]=\"item.valueTooltip || item.tooltip || ''\"\n            tooltipEvent=\"hover\"\n            tooltipPosition=\"top\"\n          >\n            @if (item.icon) {\n            <i class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}' name=\"object-detail-icon\"></i>\n            } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n          </span>\n          @if (item.actionItemIcon && item.actionItemCallback) {\n          <p-button\n            [icon]=\"item.actionItemIcon\"\n            styleClass=\"p-button-text p-0 w-full\"\n            [pTooltip]=\"item.actionItemTooltip || ''\"\n            tooltipPosition=\"top\"\n            tooltipEvent=\"hover\"\n            [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n            (onClick)=\"item.actionItemCallback()\"\n          ></p-button>\n          }\n        </span>\n      </span>\n      }\n    </div>\n    } }\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure{width:3rem;height:3rem;margin-right:.5rem;position:relative}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: SrcDirective, selector: "[ocxSrc]", inputs: ["ocxSrc"], outputs: ["error"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PageHeaderComponent, isStandalone: false, selector: "ocx-page-header", inputs: { header: "header", loading: "loading", figureBackground: "figureBackground", showFigure: "showFigure", figureImage: "figureImage", disableDefaultActions: "disableDefaultActions", subheader: "subheader", actions: "actions", objectDetails: "objectDetails", showBreadcrumbs: "showBreadcrumbs", manualBreadcrumbs: "manualBreadcrumbs", enableGridView: "enableGridView", gridLayoutDesktopColumns: "gridLayoutDesktopColumns" }, outputs: { save: "save" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n  @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n  <p-breadcrumb\n    [model]=\"items\"\n    [home]=\"(home$ | async)?.menuItem ?? {}\"\n    [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n    [attr.manual]=\"manualBreadcrumbs\"\n  ></p-breadcrumb>\n  } }\n  <div class=\"title-bar flex flex-row md:justify-content-between p-3\">\n    <div class=\"title-wrap\">\n      @if (showFigure) {\n      <div class=\"figure flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n        <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n          <ng-content select=\"[figureImage]\"></ng-content>\n          @if (figureImage && !figureImageLoadError) {\n          <img [ocxSrc]=\"figureImage\" alt=\"Figure image\" class=\"w-full\" (error)=\"handleImageError()\" />\n          }\n        </div>\n        @if (previewImage.children.length === 0 || figureImageLoadError) {\n        <div class=\"colorblob flex-1 border-round\"></div>\n        }\n      </div>\n      } @if (!loading) {\n      <div class=\"header\">\n        @if (!!header) {\n        <h1 id=\"page-header\">{{ header }}</h1>\n        } @if (!!subheader) {\n        <h2 id=\"page-subheader\">{{ subheader }}</h2>\n        }\n      </div>\n      } @else {\n      <div class=\"header justify-content-evenly\">\n        <p-skeleton width=\"10rem\"></p-skeleton>\n        <p-skeleton width=\"10rem\"></p-skeleton>\n      </div>\n      }\n    </div>\n    <div class=\"action-items-wrap mt-2 md:mt-0\">\n      @if (additionalToolbarContentLeft) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n      } @if (!loading) { @if (inlineActions && inlineActions.length > 0) {\n      <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n        @for (action of inlineActions; track action) {\n        <span\n          [pTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n          tooltipPosition=\"top\"\n          tooltipEvent=\"hover\"\n        >\n          <p-button\n            id=\"{{ action.id }}\"\n            [icon]=\"action.icon ?? ''\"\n            [iconPos]=\"action.iconPos ?? 'left'\"\n            type=\"button\"\n            class=\"action-button\"\n            [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n            (onClick)=\"action.actionCallback()\"\n            [disabled]=\"action.disabled ? action.disabled : false\"\n            [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n            [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n          ></p-button>\n        </span>\n        }\n      </div>\n      }\n      <ng-content select=\"[toolbarItems]\"></ng-content>\n      <ng-container>\n        @if (overflowActions.length !== 0) {\n        <div>\n          <button\n            id=\"pageHeaderMenuButton\"\n            type=\"button\"\n            pButton\n            icon=\"pi pi-ellipsis-v\"\n            pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n            tooltipEvent=\"hover\"\n            tooltipPosition=\"top\"\n            class=\"more-actions-menu-button action-button ml-2\"\n            (click)=\"menu.toggle($event)\"\n            name=\"ocx-page-header-overflow-action-button\"\n            [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n          ></button>\n          <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n        </div>\n        }\n      </ng-container>\n      } @else {\n      <div class=\"flex\">\n        <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n        <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n      </div>\n      } @if (additionalToolbarContent) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n      }\n    </div>\n  </div>\n\n  <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n    @if (objectDetails) { @for (item of objectDetails; track item) {\n    <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n      <span\n        class=\"flex font-medium text-600 object-info-grid-label\"\n        name=\"object-detail-label\"\n        [pTooltip]=\"item.labelTooltip || ''\"\n        tooltipEvent=\"hover\"\n        tooltipPosition=\"top\"\n        >{{ item.label | dynamicPipe:item.labelPipe }}</span\n      >\n      @if (item.icon || item.value) {\n      <span class=\"object-info-grid-value\">\n        <span\n          class=\"flex text-900 align-items-center gap-2 w-max\"\n          [ngClass]=\"generateItemStyle(item)\"\n          name=\"object-detail-value\"\n        >\n          <span\n            class=\"flex align-items-center gap-2\"\n            [pTooltip]=\"item.valueTooltip || item.tooltip || ''\"\n            tooltipEvent=\"hover\"\n            tooltipPosition=\"top\"\n          >\n            @if (item.icon) {\n            <i class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}' name=\"object-detail-icon\"></i>\n            } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n          </span>\n          @if (item.actionItemIcon && item.actionItemCallback) {\n          <p-button\n            [icon]=\"item.actionItemIcon\"\n            styleClass=\"p-button-text p-0 w-full\"\n            [pTooltip]=\"item.actionItemTooltip || ''\"\n            tooltipPosition=\"top\"\n            tooltipEvent=\"hover\"\n            [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n            (onClick)=\"item.actionItemCallback()\"\n          ></p-button>\n          }\n        </span>\n      </span>\n      }\n    </div>\n    } }\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure{width:3rem;height:3rem;margin-right:.5rem;position:relative}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: SrcDirective, selector: "[ocxSrc]", inputs: ["ocxSrc"], outputs: ["error"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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 p-3\">\n    <div class=\"title-wrap\">\n      @if (showFigure) {\n      <div class=\"figure flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n        <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n          <ng-content select=\"[figureImage]\"></ng-content>\n          @if (figureImage && !figureImageLoadError) {\n          <img [ocxSrc]=\"figureImage\" alt=\"Figure image\" class=\"w-full\" (error)=\"handleImageError()\" />\n          }\n        </div>\n        @if (previewImage.children.length === 0 || figureImageLoadError) {\n        <div class=\"colorblob flex-1 border-round\"></div>\n        }\n      </div>\n      } @if (!loading) {\n      <div class=\"header\">\n        @if (!!header) {\n        <h1 id=\"page-header\">{{ header }}</h1>\n        } @if (!!subheader) {\n        <h2 id=\"page-subheader\">{{ subheader }}</h2>\n        }\n      </div>\n      } @else {\n      <div class=\"header justify-content-evenly\">\n        <p-skeleton width=\"10rem\"></p-skeleton>\n        <p-skeleton width=\"10rem\"></p-skeleton>\n      </div>\n      }\n    </div>\n    <div class=\"action-items-wrap mt-2 md:mt-0\">\n      @if (additionalToolbarContentLeft) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n      } @if (!loading) { @if (inlineActions && inlineActions.length > 0) {\n      <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n        @for (action of inlineActions; track action) {\n        <span\n          [pTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n          tooltipPosition=\"top\"\n          tooltipEvent=\"hover\"\n        >\n          <p-button\n            id=\"{{ action.id }}\"\n            [icon]=\"action.icon ?? ''\"\n            type=\"button\"\n            class=\"action-button\"\n            [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n            (onClick)=\"action.actionCallback()\"\n            [disabled]=\"action.disabled ? action.disabled : false\"\n            [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n            [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n          ></p-button>\n        </span>\n        }\n      </div>\n      }\n      <ng-content select=\"[toolbarItems]\"></ng-content>\n      <ng-container>\n        @if (overflowActions.length !== 0) {\n        <div>\n          <button\n            id=\"pageHeaderMenuButton\"\n            type=\"button\"\n            pButton\n            icon=\"pi pi-ellipsis-v\"\n            pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n            tooltipEvent=\"hover\"\n            tooltipPosition=\"top\"\n            class=\"more-actions-menu-button action-button ml-2\"\n            (click)=\"menu.toggle($event)\"\n            name=\"ocx-page-header-overflow-action-button\"\n            [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n          ></button>\n          <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n        </div>\n        }\n      </ng-container>\n      } @else {\n      <div class=\"flex\">\n        <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n        <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n      </div>\n      } @if (additionalToolbarContent) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n      }\n    </div>\n  </div>\n\n  <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n    @if (objectDetails) { @for (item of objectDetails; track item) {\n    <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n      <span\n        class=\"flex font-medium text-600 object-info-grid-label\"\n        name=\"object-detail-label\"\n        [pTooltip]=\"item.labelTooltip || ''\"\n        tooltipEvent=\"hover\"\n        tooltipPosition=\"top\"\n        >{{ item.label | dynamicPipe:item.labelPipe }}</span\n      >\n      @if (item.icon || item.value) {\n      <span class=\"object-info-grid-value\">\n        <span\n          class=\"flex text-900 align-items-center gap-2 w-max\"\n          [ngClass]=\"generateItemStyle(item)\"\n          name=\"object-detail-value\"\n        >\n          <span\n            class=\"flex align-items-center gap-2\"\n            [pTooltip]=\"item.valueTooltip || item.tooltip || ''\"\n            tooltipEvent=\"hover\"\n            tooltipPosition=\"top\"\n          >\n            @if (item.icon) {\n            <i class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}' name=\"object-detail-icon\"></i>\n            } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n          </span>\n          @if (item.actionItemIcon && item.actionItemCallback) {\n          <p-button\n            [icon]=\"item.actionItemIcon\"\n            styleClass=\"p-button-text p-0 w-full\"\n            [pTooltip]=\"item.actionItemTooltip || ''\"\n            tooltipPosition=\"top\"\n            tooltipEvent=\"hover\"\n            [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n            (onClick)=\"item.actionItemCallback()\"\n          ></p-button>\n          }\n        </span>\n      </span>\n      }\n    </div>\n    } }\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure{width:3rem;height:3rem;margin-right:.5rem;position:relative}.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 p-3\">\n    <div class=\"title-wrap\">\n      @if (showFigure) {\n      <div class=\"figure flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n        <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n          <ng-content select=\"[figureImage]\"></ng-content>\n          @if (figureImage && !figureImageLoadError) {\n          <img [ocxSrc]=\"figureImage\" alt=\"Figure image\" class=\"w-full\" (error)=\"handleImageError()\" />\n          }\n        </div>\n        @if (previewImage.children.length === 0 || figureImageLoadError) {\n        <div class=\"colorblob flex-1 border-round\"></div>\n        }\n      </div>\n      } @if (!loading) {\n      <div class=\"header\">\n        @if (!!header) {\n        <h1 id=\"page-header\">{{ header }}</h1>\n        } @if (!!subheader) {\n        <h2 id=\"page-subheader\">{{ subheader }}</h2>\n        }\n      </div>\n      } @else {\n      <div class=\"header justify-content-evenly\">\n        <p-skeleton width=\"10rem\"></p-skeleton>\n        <p-skeleton width=\"10rem\"></p-skeleton>\n      </div>\n      }\n    </div>\n    <div class=\"action-items-wrap mt-2 md:mt-0\">\n      @if (additionalToolbarContentLeft) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n      } @if (!loading) { @if (inlineActions && inlineActions.length > 0) {\n      <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n        @for (action of inlineActions; track action) {\n        <span\n          [pTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n          tooltipPosition=\"top\"\n          tooltipEvent=\"hover\"\n        >\n          <p-button\n            id=\"{{ action.id }}\"\n            [icon]=\"action.icon ?? ''\"\n            [iconPos]=\"action.iconPos ?? 'left'\"\n            type=\"button\"\n            class=\"action-button\"\n            [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n            (onClick)=\"action.actionCallback()\"\n            [disabled]=\"action.disabled ? action.disabled : false\"\n            [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n            [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n          ></p-button>\n        </span>\n        }\n      </div>\n      }\n      <ng-content select=\"[toolbarItems]\"></ng-content>\n      <ng-container>\n        @if (overflowActions.length !== 0) {\n        <div>\n          <button\n            id=\"pageHeaderMenuButton\"\n            type=\"button\"\n            pButton\n            icon=\"pi pi-ellipsis-v\"\n            pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n            tooltipEvent=\"hover\"\n            tooltipPosition=\"top\"\n            class=\"more-actions-menu-button action-button ml-2\"\n            (click)=\"menu.toggle($event)\"\n            name=\"ocx-page-header-overflow-action-button\"\n            [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n          ></button>\n          <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n        </div>\n        }\n      </ng-container>\n      } @else {\n      <div class=\"flex\">\n        <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n        <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n      </div>\n      } @if (additionalToolbarContent) {\n      <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n      }\n    </div>\n  </div>\n\n  <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n    @if (objectDetails) { @for (item of objectDetails; track item) {\n    <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n      <span\n        class=\"flex font-medium text-600 object-info-grid-label\"\n        name=\"object-detail-label\"\n        [pTooltip]=\"item.labelTooltip || ''\"\n        tooltipEvent=\"hover\"\n        tooltipPosition=\"top\"\n        >{{ item.label | dynamicPipe:item.labelPipe }}</span\n      >\n      @if (item.icon || item.value) {\n      <span class=\"object-info-grid-value\">\n        <span\n          class=\"flex text-900 align-items-center gap-2 w-max\"\n          [ngClass]=\"generateItemStyle(item)\"\n          name=\"object-detail-value\"\n        >\n          <span\n            class=\"flex align-items-center gap-2\"\n            [pTooltip]=\"item.valueTooltip || item.tooltip || ''\"\n            tooltipEvent=\"hover\"\n            tooltipPosition=\"top\"\n          >\n            @if (item.icon) {\n            <i class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}' name=\"object-detail-icon\"></i>\n            } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n          </span>\n          @if (item.actionItemIcon && item.actionItemCallback) {\n          <p-button\n            [icon]=\"item.actionItemIcon\"\n            styleClass=\"p-button-text p-0 w-full\"\n            [pTooltip]=\"item.actionItemTooltip || ''\"\n            tooltipPosition=\"top\"\n            tooltipEvent=\"hover\"\n            [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n            (onClick)=\"item.actionItemCallback()\"\n          ></p-button>\n          }\n        </span>\n      </span>\n      }\n    </div>\n    } }\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure{width:3rem;height:3rem;margin-right:.5rem;position:relative}.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: [{
@@ -855,7 +855,7 @@ class SearchHeaderComponent {
             show: 'always',
         };
         this.headerActions = [];
-        this.searchButtonsReversed = false;
+        this.searchButtonsReversed$ = of(false);
         this.fieldValues$ = of({});
         this.searchConfigChangedSlotEmitter = new EventEmitter();
         const configurationService = inject(ConfigurationService);
@@ -865,8 +865,7 @@ class SearchHeaderComponent {
             });
             this.selectedSearchConfigChanged.emit(config);
         });
-        this.searchButtonsReversed =
-            configurationService.getProperty(CONFIG_KEY.ONECX_PORTAL_SEARCH_BUTTONS_REVERSED) === 'true';
+        this.searchButtonsReversed$ = from(configurationService.getProperty(CONFIG_KEY.ONECX_PORTAL_SEARCH_BUTTONS_REVERSED)).pipe(map((config) => config === 'true'));
     }
     ngAfterContentInit() {
         if (this.formGroup) {
@@ -925,11 +924,11 @@ class SearchHeaderComponent {
         return this.visibleFormControls.some((formControl) => formControl.name !== null && String(formControl.name) === control);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SearchHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: SearchHeaderComponent, isStandalone: false, selector: "ocx-search-header", inputs: { header: "header", headline: "headline", subheader: "subheader", viewMode: "viewMode", manualBreadcrumbs: "manualBreadcrumbs", actions: "actions", searchConfigPermission: "searchConfigPermission", searchButtonDisabled: "searchButtonDisabled", resetButtonDisabled: "resetButtonDisabled", pageName: "pageName" }, outputs: { searched: "searched", resetted: "resetted", selectedSearchConfigChanged: "selectedSearchConfigChanged", viewModeChanged: "viewModeChanged", componentStateChanged: "componentStateChanged" }, providers: [], queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }, { propertyName: "formGroup", first: true, predicate: FormGroupDirective, descendants: true }, { propertyName: "visibleFormControls", predicate: FormControlName, descendants: true }], viewQueries: [{ propertyName: "searchParameterFields", first: true, predicate: ["searchParameterFields"], descendants: true }], ngImport: i0, template: "<ocx-page-header\n  [header]=\"header || ('OCX_SEARCH_HEADER.HEADER' | translate)\"\n  [subheader]=\"subheader\"\n  [manualBreadcrumbs]=\"manualBreadcrumbs\"\n  [actions]=\"headerActions\"\n  >\n  <ng-template #additionalToolbarContentLeft>\n    @if (searchConfigChangeObserved && pageName) {\n      <ocx-slot\n        *ocxIfPermission=\"searchConfigPermission\"\n        name=\"onecx-search-config\"\n        [inputs]=\"{ pageName: pageName, currentFieldValues: fieldValues$ | async, viewMode: viewMode }\"\n        [outputs]=\"{ searchConfigSelected: searchConfigChangedSlotEmitter }\"\n        >\n        <ng-template #skeleton>\n          <div class=\"flex\">\n            <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n          </div>\n        </ng-template>\n      </ocx-slot>\n    }\n    @if (_additionalToolbarContentLeft) {\n      <ng-container\n        [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"\n      ></ng-container>\n    }\n  </ng-template>\n  <ng-template #additionalToolbarContent>\n    @if (_additionalToolbarContent) {\n      <ng-container [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\n    }\n  </ng-template>\n  <div class=\"flex row-gap-3 column-gap-6 flex-wrap align-items-center\">\n    <div>\n      <div #searchParameterFields>\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"flex flex-wrap gap-2\" [ngClass]=\"searchButtonsReversed ? 'flex-row-reverse' : 'flex-row'\">\n      @if (resetted.observed) {\n        <p-button\n          id=\"resetButton\"\n          (onClick)=\"onResetClicked()\"\n          label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n          icon=\"pi pi-eraser\"\n          pTooltip=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n          tooltipPosition=\"top\"\n          tooltipEvent=\"hover\"\n          [disabled]=\"resetButtonDisabled\"\n          [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.ARIA_LABEL' | translate\"\n          >\n        </p-button>\n      }\n\n      <p-button\n        id=\"searchButton\"\n        (onClick)=\"onSearchClicked()\"\n        label=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}\"\n        icon=\"pi pi-search\"\n        pTooltip=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n        tooltipPosition=\"top\"\n        tooltipEvent=\"hover\"\n        [disabled]=\"searchButtonDisabled || formGroup?.invalid\"\n        [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.ARIA_LABEL' | translate\"\n        >\n      </p-button>\n    </div>\n  </div>\n</ocx-page-header>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i5$1.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "inputs", "outputs"] }, { kind: "component", type: PageHeaderComponent, selector: "ocx-page-header", inputs: ["header", "loading", "figureBackground", "showFigure", "figureImage", "disableDefaultActions", "subheader", "actions", "objectDetails", "showBreadcrumbs", "manualBreadcrumbs", "enableGridView", "gridLayoutDesktopColumns"], outputs: ["save"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: SearchHeaderComponent, isStandalone: false, selector: "ocx-search-header", inputs: { header: "header", headline: "headline", subheader: "subheader", viewMode: "viewMode", manualBreadcrumbs: "manualBreadcrumbs", actions: "actions", searchConfigPermission: "searchConfigPermission", searchButtonDisabled: "searchButtonDisabled", resetButtonDisabled: "resetButtonDisabled", pageName: "pageName" }, outputs: { searched: "searched", resetted: "resetted", selectedSearchConfigChanged: "selectedSearchConfigChanged", viewModeChanged: "viewModeChanged", componentStateChanged: "componentStateChanged" }, providers: [], queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }, { propertyName: "formGroup", first: true, predicate: FormGroupDirective, descendants: true }, { propertyName: "visibleFormControls", predicate: FormControlName, descendants: true }], viewQueries: [{ propertyName: "searchParameterFields", first: true, predicate: ["searchParameterFields"], descendants: true }], ngImport: i0, template: "<ocx-page-header\n  [header]=\"header || ('OCX_SEARCH_HEADER.HEADER' | translate)\"\n  [subheader]=\"subheader\"\n  [manualBreadcrumbs]=\"manualBreadcrumbs\"\n  [actions]=\"headerActions\"\n  >\n  <ng-template #additionalToolbarContentLeft>\n    @if (searchConfigChangeObserved && pageName) {\n      <ocx-slot\n        *ocxIfPermission=\"searchConfigPermission\"\n        name=\"onecx-search-config\"\n        [inputs]=\"{ pageName: pageName, currentFieldValues: fieldValues$ | async, viewMode: viewMode }\"\n        [outputs]=\"{ searchConfigSelected: searchConfigChangedSlotEmitter }\"\n        >\n        <ng-template #skeleton>\n          <div class=\"flex\">\n            <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n          </div>\n        </ng-template>\n      </ocx-slot>\n    }\n    @if (_additionalToolbarContentLeft) {\n      <ng-container\n        [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"\n      ></ng-container>\n    }\n  </ng-template>\n  <ng-template #additionalToolbarContent>\n    @if (_additionalToolbarContent) {\n      <ng-container [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\n    }\n  </ng-template>\n  <div class=\"flex row-gap-3 column-gap-6 flex-wrap align-items-center\">\n    <div>\n      <div #searchParameterFields>\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"flex flex-wrap gap-2\" [ngClass]=\"(searchButtonsReversed$ | async) ? 'flex-row-reverse' : 'flex-row'\">\n      @if (resetted.observed) {\n        <p-button\n          id=\"resetButton\"\n          (onClick)=\"onResetClicked()\"\n          label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n          icon=\"pi pi-eraser\"\n          pTooltip=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n          tooltipPosition=\"top\"\n          tooltipEvent=\"hover\"\n          [disabled]=\"resetButtonDisabled\"\n          [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.ARIA_LABEL' | translate\"\n          >\n        </p-button>\n      }\n\n      <p-button\n        id=\"searchButton\"\n        (onClick)=\"onSearchClicked()\"\n        label=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}\"\n        icon=\"pi pi-search\"\n        pTooltip=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n        tooltipPosition=\"top\"\n        tooltipEvent=\"hover\"\n        [disabled]=\"searchButtonDisabled || formGroup?.invalid\"\n        [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.ARIA_LABEL' | translate\"\n        >\n      </p-button>\n    </div>\n  </div>\n</ocx-page-header>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i5$1.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "inputs", "outputs"] }, { kind: "component", type: PageHeaderComponent, selector: "ocx-page-header", inputs: ["header", "loading", "figureBackground", "showFigure", "figureImage", "disableDefaultActions", "subheader", "actions", "objectDetails", "showBreadcrumbs", "manualBreadcrumbs", "enableGridView", "gridLayoutDesktopColumns"], outputs: ["save"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SearchHeaderComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ocx-search-header', providers: [], template: "<ocx-page-header\n  [header]=\"header || ('OCX_SEARCH_HEADER.HEADER' | translate)\"\n  [subheader]=\"subheader\"\n  [manualBreadcrumbs]=\"manualBreadcrumbs\"\n  [actions]=\"headerActions\"\n  >\n  <ng-template #additionalToolbarContentLeft>\n    @if (searchConfigChangeObserved && pageName) {\n      <ocx-slot\n        *ocxIfPermission=\"searchConfigPermission\"\n        name=\"onecx-search-config\"\n        [inputs]=\"{ pageName: pageName, currentFieldValues: fieldValues$ | async, viewMode: viewMode }\"\n        [outputs]=\"{ searchConfigSelected: searchConfigChangedSlotEmitter }\"\n        >\n        <ng-template #skeleton>\n          <div class=\"flex\">\n            <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n          </div>\n        </ng-template>\n      </ocx-slot>\n    }\n    @if (_additionalToolbarContentLeft) {\n      <ng-container\n        [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"\n      ></ng-container>\n    }\n  </ng-template>\n  <ng-template #additionalToolbarContent>\n    @if (_additionalToolbarContent) {\n      <ng-container [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\n    }\n  </ng-template>\n  <div class=\"flex row-gap-3 column-gap-6 flex-wrap align-items-center\">\n    <div>\n      <div #searchParameterFields>\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"flex flex-wrap gap-2\" [ngClass]=\"searchButtonsReversed ? 'flex-row-reverse' : 'flex-row'\">\n      @if (resetted.observed) {\n        <p-button\n          id=\"resetButton\"\n          (onClick)=\"onResetClicked()\"\n          label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n          icon=\"pi pi-eraser\"\n          pTooltip=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n          tooltipPosition=\"top\"\n          tooltipEvent=\"hover\"\n          [disabled]=\"resetButtonDisabled\"\n          [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.ARIA_LABEL' | translate\"\n          >\n        </p-button>\n      }\n\n      <p-button\n        id=\"searchButton\"\n        (onClick)=\"onSearchClicked()\"\n        label=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}\"\n        icon=\"pi pi-search\"\n        pTooltip=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n        tooltipPosition=\"top\"\n        tooltipEvent=\"hover\"\n        [disabled]=\"searchButtonDisabled || formGroup?.invalid\"\n        [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.ARIA_LABEL' | translate\"\n        >\n      </p-button>\n    </div>\n  </div>\n</ocx-page-header>\n" }]
+            args: [{ standalone: false, selector: 'ocx-search-header', providers: [], template: "<ocx-page-header\n  [header]=\"header || ('OCX_SEARCH_HEADER.HEADER' | translate)\"\n  [subheader]=\"subheader\"\n  [manualBreadcrumbs]=\"manualBreadcrumbs\"\n  [actions]=\"headerActions\"\n  >\n  <ng-template #additionalToolbarContentLeft>\n    @if (searchConfigChangeObserved && pageName) {\n      <ocx-slot\n        *ocxIfPermission=\"searchConfigPermission\"\n        name=\"onecx-search-config\"\n        [inputs]=\"{ pageName: pageName, currentFieldValues: fieldValues$ | async, viewMode: viewMode }\"\n        [outputs]=\"{ searchConfigSelected: searchConfigChangedSlotEmitter }\"\n        >\n        <ng-template #skeleton>\n          <div class=\"flex\">\n            <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n          </div>\n        </ng-template>\n      </ocx-slot>\n    }\n    @if (_additionalToolbarContentLeft) {\n      <ng-container\n        [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"\n      ></ng-container>\n    }\n  </ng-template>\n  <ng-template #additionalToolbarContent>\n    @if (_additionalToolbarContent) {\n      <ng-container [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\n    }\n  </ng-template>\n  <div class=\"flex row-gap-3 column-gap-6 flex-wrap align-items-center\">\n    <div>\n      <div #searchParameterFields>\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"flex flex-wrap gap-2\" [ngClass]=\"(searchButtonsReversed$ | async) ? 'flex-row-reverse' : 'flex-row'\">\n      @if (resetted.observed) {\n        <p-button\n          id=\"resetButton\"\n          (onClick)=\"onResetClicked()\"\n          label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n          icon=\"pi pi-eraser\"\n          pTooltip=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n          tooltipPosition=\"top\"\n          tooltipEvent=\"hover\"\n          [disabled]=\"resetButtonDisabled\"\n          [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.ARIA_LABEL' | translate\"\n          >\n        </p-button>\n      }\n\n      <p-button\n        id=\"searchButton\"\n        (onClick)=\"onSearchClicked()\"\n        label=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}\"\n        icon=\"pi pi-search\"\n        pTooltip=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n        tooltipPosition=\"top\"\n        tooltipEvent=\"hover\"\n        [disabled]=\"searchButtonDisabled || formGroup?.invalid\"\n        [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.ARIA_LABEL' | translate\"\n        >\n      </p-button>\n    </div>\n  </div>\n</ocx-page-header>\n" }]
         }], ctorParameters: () => [], propDecorators: { header: [{
                 type: Input
             }], headline: [{
@@ -1767,9 +1766,10 @@ class DataListGridComponent extends DataSortBase {
     set pageSize(value) {
         this._pageSize$.next(value);
     }
-    set showAllOption(value) {
-        this._showAllOption$.next(value);
-    }
+    /**
+     * @deprecated
+     */
+    set showAllOption(value) { }
     get columns() {
         return this._columns$.getValue();
     }
@@ -1898,7 +1898,6 @@ class DataListGridComponent extends DataSortBase {
         this.sortStates = [];
         this._pageSizes$ = new BehaviorSubject([10, 25, 50]);
         this._pageSize$ = new BehaviorSubject(undefined);
-        this._showAllOption$ = new BehaviorSubject(false);
         this.fallbackImage = 'placeholder.png';
         this.layout = 'grid';
         this.paginator = true;
@@ -2513,9 +2512,10 @@ class DataTableComponent extends DataSortBase {
     set pageSize(value) {
         this._pageSize$.next(value);
     }
-    set showAllOption(value) {
-        this._showAllOption$.next(value);
-    }
+    /**
+     * @deprecated
+     */
+    set showAllOption(value) { }
     get totalRecordsOnServer() {
         return this.params['totalRecordsOnServer'] ? Number(this.params['totalRecordsOnServer']) : undefined;
     }
@@ -2619,7 +2619,6 @@ class DataTableComponent extends DataSortBase {
         this.sortStates = ["ASCENDING" /* DataSortDirection.ASCENDING */, "DESCENDING" /* DataSortDirection.DESCENDING */];
         this._pageSizes$ = new BehaviorSubject([10, 25, 50]);
         this._pageSize$ = new BehaviorSubject(undefined);
-        this._showAllOption$ = new BehaviorSubject(false);
         this.name = '';
         this.allowSelectAll = true;
         this.paginator = true;
@@ -2780,7 +2779,7 @@ class DataTableComponent extends DataSortBase {
                     .map((filterOption) => ({
                     label: filterOption,
                     value: filterOption,
-                    toFilterBy: filterOption
+                    toFilterBy: filterOption,
                 }));
             }), map((options) => {
                 return {
@@ -3296,6 +3295,9 @@ class DataViewComponent {
         this.actionColumnPosition = 'right';
         this.sortStates = ["ASCENDING" /* DataSortDirection.ASCENDING */, "DESCENDING" /* DataSortDirection.DESCENDING */];
         this.pageSizes = [10, 25, 50];
+        /**
+         * @deprecated
+         */
         this.showAllOption = false;
         this.additionalActions = [];
         this.filtered = new EventEmitter();
@@ -3677,11 +3679,11 @@ class DataViewComponent {
         this.pageSizeChanged.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: DataViewComponent, isStandalone: false, selector: "ocx-data-view", inputs: { deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", data: "data", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", layout: "layout", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortField: "sortField", sortDirection: "sortDirection", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", page: "page", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", selectedRows: "selectedRows", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", paginator: "paginator", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", stringTableCellTemplate: "stringTableCellTemplate", numberTableCellTemplate: "numberTableCellTemplate", customTableCellTemplate: "customTableCellTemplate", dateTableCellTemplate: "dateTableCellTemplate", tableDateCellTemplate: "tableDateCellTemplate", tableCellTemplate: "tableCellTemplate", translationKeyTableCellTemplate: "translationKeyTableCellTemplate", tableTranslationKeyCellTemplate: "tableTranslationKeyCellTemplate", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", gridItemTemplate: "gridItemTemplate", listItemTemplate: "listItemTemplate", relativeDateTableCellTemplate: "relativeDateTableCellTemplate", tableRelativeDateCellTemplate: "tableRelativeDateCellTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", customListValueTemplate: "customListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", tableFilterCellTemplate: "tableFilterCellTemplate", dateTableFilterCellTemplate: "dateTableFilterCellTemplate", relativeDateTableFilterCellTemplate: "relativeDateTableFilterCellTemplate", translationKeyTableFilterCellTemplate: "translationKeyTableFilterCellTemplate", stringTableFilterCellTemplate: "stringTableFilterCellTemplate", numberTableFilterCellTemplate: "numberTableFilterCellTemplate", customTableFilterCellTemplate: "customTableFilterCellTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], queries: [{ propertyName: "stringTableCellChildTemplate", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCellChildTemplate", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "customTableCellChildTemplate", first: true, predicate: ["customTableCell"], descendants: true }, { propertyName: "tableDateCellChildTemplate", first: true, predicate: ["tableDateCell"], descendants: true }, { propertyName: "dateTableCellChildTemplate", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableCellChildTemplate", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "tableTranslationKeyCellChildTemplate", first: true, predicate: ["tableTranslationKeyCell"], descendants: true }, { propertyName: "translationKeyTableCellChildTemplate", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "tableRelativeDateCellChildTemplate", first: true, predicate: ["tableRelativeDateCell"], descendants: true }, { propertyName: "relativeDateTableCellChildTemplate", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "customListValueChildTemplate", first: true, predicate: ["customListValue"], descendants: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "tableFilterCellChildTemplate", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCellChildTemplate", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCellChildTemplate", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCellChildTemplate", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCellChildTemplate", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "customTableFilterCellChildTemplate", first: true, predicate: ["customTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listGrid", first: true, predicate: DataListGridComponent, descendants: true }, { propertyName: "dataTable", first: true, predicate: DataTableComponent, descendants: true }], ngImport: i0, template: "@if (layout !== 'table') {\n  <div>\n    <ocx-data-list-grid\n      #ocxdatalistgrid\n      [name]=\"name\"\n      [data]=\"data\"\n      [columns]=\"columns\"\n      [filters]=\"filters\"\n      [sortDirection]=\"sortDirection\"\n      [sortField]=\"sortField\"\n      [sortStates]=\"sortStates\"\n      [clientSideFiltering]=\"clientSideFiltering\"\n      [clientSideSorting]=\"clientSideSorting\"\n      [titleLineId]=\"titleLineId\"\n      [subtitleLineIds]=\"subtitleLineIds\"\n      [clientSideSorting]=\"true\"\n      [pageSizes]=\"pageSizes\"\n      [pageSize]=\"pageSize\"\n      [showAllOption]=\"showAllOption\"\n      [paginator]=\"listGridPaginator\"\n      [page]=\"page\"\n      (pageChanged)=\"onPageChange($event)\"\n      (pageSizeChanged)=\"onPageSizeChange($event)\"\n      (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n      [emptyResultsMessage]=\"emptyResultsMessage\"\n      [layout]=\"layout\"\n      [deletePermission]=\"deletePermission\"\n      [editPermission]=\"editPermission\"\n      [viewPermission]=\"viewPermission\"\n      [deleteActionEnabledField]=\"deleteActionEnabledField\"\n      [deleteActionVisibleField]=\"deleteActionVisibleField\"\n      [editActionEnabledField]=\"editActionEnabledField\"\n      [editActionVisibleField]=\"editActionVisibleField\"\n      [viewActionEnabledField]=\"viewActionEnabledField\"\n      [viewActionVisibleField]=\"viewActionVisibleField\"\n      [additionalActions]=\"additionalActions\"\n      [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n      [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n      [listItemTemplate]=\"_listItem ? listItem : undefined\"\n      [listValueTemplate]=\"_listValue ? listValue : undefined\"\n      [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n      [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n      [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n      [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n      [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n      [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n      [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n      [totalRecordsOnServer]=\"totalRecordsOnServer\"\n      [parentTemplates]=\"templatesForChildren$ | async\"\n      >\n    </ocx-data-list-grid>\n    <ng-template #listItemSubtitleLines let-item>\n      @if (_listItemSubtitleLines) {\n        <ng-container\n          [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n          [ngTemplateOutletContext]=\"{$implicit:item}\"\n          >\n          </ng-container\n          >\n        }</ng-template>\n        <ng-template #gridItemSubtitleLines let-item>\n          @if (_gridItemSubtitleLines) {\n            <ng-container\n              [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n              [ngTemplateOutletContext]=\"{$implicit:item}\"\n              >\n              </ng-container\n              >\n            }</ng-template>\n            <ng-template #gridItem let-item>\n              @if (_gridItem) {\n                <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n                  </ng-container\n                  >\n                }</ng-template>\n                <ng-template #listItem let-item>\n                  @if (_listItem) {\n                    <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n                      </ng-container\n                      >\n                    }</ng-template>\n                    <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n                      @if (_listValue) {\n                        <ng-container\n                          [ngTemplateOutlet]=\"_listValue\"\n                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                          >\n                          </ng-container\n                          >\n                        }</ng-template>\n                        <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                          @if (_translationKeyListValue) {\n                            <ng-container\n                              [ngTemplateOutlet]=\"_translationKeyListValue\"\n                              [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                              >\n                              </ng-container\n                              >\n                            }</ng-template>\n                            <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                              @if (_numberListValue) {\n                                <ng-container\n                                  [ngTemplateOutlet]=\"_numberListValue\"\n                                  [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                  >\n                                  </ng-container\n                                  >\n                                }</ng-template>\n                                <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                  @if (_relativeDateListValue) {\n                                    <ng-container\n                                      [ngTemplateOutlet]=\"_relativeDateListValue\"\n                                      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                      >\n                                      </ng-container\n                                      >\n                                    }</ng-template>\n                                    <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                      @if (_customListValue) {\n                                        <ng-container\n                                          [ngTemplateOutlet]=\"_customListValue\"\n                                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                          >\n                                          </ng-container\n                                          >\n                                        }</ng-template>\n                                        <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                          @if (_stringListValue) {\n                                            <ng-container\n                                              [ngTemplateOutlet]=\"_stringListValue\"\n                                              [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                              >\n                                              </ng-container\n                                              >\n                                            }</ng-template>\n                                            <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                              @if (_dateListValue) {\n                                                <ng-container\n                                                  [ngTemplateOutlet]=\"_dateListValue\"\n                                                  [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                  >\n                                                  </ng-container\n                                                  >\n                                                }</ng-template>\n                                              </div>\n                                            }\n\n                                            @if (layout === 'table') {\n                                              <div>\n                                                <ocx-data-table\n                                                  #ocxdatatable\n                                                  [rows]=\"data\"\n                                                  [columns]=\"columns\"\n                                                  [filters]=\"filters\"\n                                                  [sortDirection]=\"sortDirection\"\n                                                  [sortColumn]=\"sortField\"\n                                                  [sortStates]=\"sortStates\"\n                                                  [clientSideFiltering]=\"clientSideFiltering\"\n                                                  [clientSideSorting]=\"clientSideSorting\"\n                                                  [pageSizes]=\"pageSizes\"\n                                                  [pageSize]=\"pageSize\"\n                                                  [showAllOption]=\"showAllOption\"\n                                                  [paginator]=\"tablePaginator\"\n                                                  [page]=\"page\"\n                                                  (pageChanged)=\"onPageChange($event)\"\n                                                  (pageSizeChanged)=\"onPageSizeChange($event)\"\n                                                  (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n                                                  [selectedRows]=\"selectedRows\"\n                                                  [frozenActionColumn]=\"frozenActionColumn\"\n                                                  [actionColumnPosition]=\"actionColumnPosition\"\n                                                  [emptyResultsMessage]=\"emptyResultsMessage\"\n                                                  [name]=\"name\"\n                                                  [deletePermission]=\"deletePermission\"\n                                                  [editPermission]=\"editPermission\"\n                                                  [viewPermission]=\"viewPermission\"\n                                                  [deleteActionEnabledField]=\"deleteActionEnabledField\"\n                                                  [deleteActionVisibleField]=\"deleteActionVisibleField\"\n                                                  [editActionEnabledField]=\"editActionEnabledField\"\n                                                  [editActionVisibleField]=\"editActionVisibleField\"\n                                                  [viewActionEnabledField]=\"viewActionEnabledField\"\n                                                  [viewActionVisibleField]=\"viewActionVisibleField\"\n                                                  [additionalActions]=\"additionalActions\"\n                                                  [stringCellTemplate]=\"_stringTableCell ? stringCell : undefined\"\n                                                  [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n                                                  [customCellTemplate]=\"_customTableCell ? customCell : undefined\"\n                                                  [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n                                                  [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n                                                  [cellTemplate]=\"_tableCell ? cell : undefined\"\n                                                  [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n                                                  [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n                                                  [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n                                                  [customFilterCellTemplate]=\"_customTableFilterCell ? customFilterCell : undefined\"\n                                                  [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n                                                  [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n                                                  [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n                                                  [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n                                                  (sorted)=\"sorting($event)\"\n                                                  (filtered)=\"filtering($event)\"\n                                                  [totalRecordsOnServer]=\"totalRecordsOnServer\"\n                                                  [currentPageShowingKey]=\"currentPageShowingKey\"\n                                                  [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n                                                  [parentTemplates]=\"templatesForChildren$ | async\"\n                                                  [allowSelectAll]=\"tableAllowSelectAll\"\n                                                  [selectionEnabledField]=\"tableSelectionEnabledField\"\n                                                  >\n                                                </ocx-data-table>\n                                                <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                  @if (_stringTableCell) {\n                                                    <ng-container\n                                                      [ngTemplateOutlet]=\"_stringTableCell\"\n                                                      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                      >\n                                                      </ng-container\n                                                      >\n                                                    }</ng-template>\n                                                    <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                      @if (_numberTableCell) {\n                                                        <ng-container\n                                                          [ngTemplateOutlet]=\"_numberTableCell\"\n                                                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                          >\n                                                          </ng-container\n                                                          >\n                                                        }</ng-template>\n                                                        <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                          @if (_customTableCell) {\n                                                            <ng-container\n                                                              [ngTemplateOutlet]=\"_customTableCell\"\n                                                              [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                              >\n                                                              </ng-container\n                                                              >\n                                                            }</ng-template>\n                                                            <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                              @if (_dateTableCell) {\n                                                                <ng-container\n                                                                  [ngTemplateOutlet]=\"_dateTableCell\"\n                                                                  [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                  >\n                                                                  </ng-container\n                                                                  >\n                                                                }</ng-template>\n                                                                <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                  @if (_relativeDateTableCell) {\n                                                                    <ng-container\n                                                                      [ngTemplateOutlet]=\"_relativeDateTableCell\"\n                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                      >\n                                                                      </ng-container\n                                                                      >\n                                                                    }</ng-template>\n                                                                    <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                      @if (_tableCell) {\n                                                                        <ng-container\n                                                                          [ngTemplateOutlet]=\"_tableCell\"\n                                                                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                                          >\n                                                                          </ng-container\n                                                                          >\n                                                                        }</ng-template>\n                                                                        <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                          @if (_translationKeyTableCell) {\n                                                                            <ng-container\n                                                                              [ngTemplateOutlet]=\"_translationKeyTableCell\"\n                                                                              [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                              >\n                                                                              </ng-container\n                                                                              >\n                                                                            }</ng-template>\n                                                                            <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                              @if (_stringTableFilterCell) {\n                                                                                <ng-container\n                                                                                  [ngTemplateOutlet]=\"_stringTableFilterCell\"\n                                                                                  [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                  >\n                                                                                  </ng-container\n                                                                                  >\n                                                                                }</ng-template>\n                                                                                <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_tableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_tableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_dateTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_dateTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #customFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_customTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_customTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_numberTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_numberTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_relativeDateTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_translationKeyTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                              </div>\n                                                                            }\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataListGridComponent, selector: "ocx-data-list-grid", inputs: ["titleLineId", "subtitleLineIds", "clientSideSorting", "clientSideFiltering", "sortStates", "pageSizes", "pageSize", "showAllOption", "emptyResultsMessage", "fallbackImage", "layout", "viewPermission", "editPermission", "deletePermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "viewMenuItemKey", "editMenuItemKey", "deleteMenuItemKey", "paginator", "page", "columns", "name", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "data", "filters", "sortDirection", "sortField", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "listItemTemplate", "gridItemTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "customListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "additionalActions", "parentTemplates"], outputs: ["viewItem", "editItem", "deleteItem", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "showAllOption", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "customCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "customFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: DataViewComponent, isStandalone: false, selector: "ocx-data-view", inputs: { deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", data: "data", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", layout: "layout", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortField: "sortField", sortDirection: "sortDirection", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", page: "page", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", selectedRows: "selectedRows", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", paginator: "paginator", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", stringTableCellTemplate: "stringTableCellTemplate", numberTableCellTemplate: "numberTableCellTemplate", customTableCellTemplate: "customTableCellTemplate", dateTableCellTemplate: "dateTableCellTemplate", tableDateCellTemplate: "tableDateCellTemplate", tableCellTemplate: "tableCellTemplate", translationKeyTableCellTemplate: "translationKeyTableCellTemplate", tableTranslationKeyCellTemplate: "tableTranslationKeyCellTemplate", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", gridItemTemplate: "gridItemTemplate", listItemTemplate: "listItemTemplate", relativeDateTableCellTemplate: "relativeDateTableCellTemplate", tableRelativeDateCellTemplate: "tableRelativeDateCellTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", customListValueTemplate: "customListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", tableFilterCellTemplate: "tableFilterCellTemplate", dateTableFilterCellTemplate: "dateTableFilterCellTemplate", relativeDateTableFilterCellTemplate: "relativeDateTableFilterCellTemplate", translationKeyTableFilterCellTemplate: "translationKeyTableFilterCellTemplate", stringTableFilterCellTemplate: "stringTableFilterCellTemplate", numberTableFilterCellTemplate: "numberTableFilterCellTemplate", customTableFilterCellTemplate: "customTableFilterCellTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], queries: [{ propertyName: "stringTableCellChildTemplate", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCellChildTemplate", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "customTableCellChildTemplate", first: true, predicate: ["customTableCell"], descendants: true }, { propertyName: "tableDateCellChildTemplate", first: true, predicate: ["tableDateCell"], descendants: true }, { propertyName: "dateTableCellChildTemplate", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableCellChildTemplate", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "tableTranslationKeyCellChildTemplate", first: true, predicate: ["tableTranslationKeyCell"], descendants: true }, { propertyName: "translationKeyTableCellChildTemplate", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "tableRelativeDateCellChildTemplate", first: true, predicate: ["tableRelativeDateCell"], descendants: true }, { propertyName: "relativeDateTableCellChildTemplate", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "customListValueChildTemplate", first: true, predicate: ["customListValue"], descendants: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "tableFilterCellChildTemplate", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCellChildTemplate", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCellChildTemplate", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCellChildTemplate", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCellChildTemplate", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "customTableFilterCellChildTemplate", first: true, predicate: ["customTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listGrid", first: true, predicate: DataListGridComponent, descendants: true }, { propertyName: "dataTable", first: true, predicate: DataTableComponent, descendants: true }], ngImport: i0, template: "@if (layout !== 'table') {\n  <div>\n    <ocx-data-list-grid\n      #ocxdatalistgrid\n      [name]=\"name\"\n      [data]=\"data\"\n      [columns]=\"columns\"\n      [filters]=\"filters\"\n      [sortDirection]=\"sortDirection\"\n      [sortField]=\"sortField\"\n      [sortStates]=\"sortStates\"\n      [clientSideFiltering]=\"clientSideFiltering\"\n      [clientSideSorting]=\"clientSideSorting\"\n      [titleLineId]=\"titleLineId\"\n      [subtitleLineIds]=\"subtitleLineIds\"\n      [clientSideSorting]=\"true\"\n      [pageSizes]=\"pageSizes\"\n      [pageSize]=\"pageSize\"\n      [paginator]=\"listGridPaginator\"\n      [page]=\"page\"\n      (pageChanged)=\"onPageChange($event)\"\n      (pageSizeChanged)=\"onPageSizeChange($event)\"\n      (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n      [emptyResultsMessage]=\"emptyResultsMessage\"\n      [layout]=\"layout\"\n      [deletePermission]=\"deletePermission\"\n      [editPermission]=\"editPermission\"\n      [viewPermission]=\"viewPermission\"\n      [deleteActionEnabledField]=\"deleteActionEnabledField\"\n      [deleteActionVisibleField]=\"deleteActionVisibleField\"\n      [editActionEnabledField]=\"editActionEnabledField\"\n      [editActionVisibleField]=\"editActionVisibleField\"\n      [viewActionEnabledField]=\"viewActionEnabledField\"\n      [viewActionVisibleField]=\"viewActionVisibleField\"\n      [additionalActions]=\"additionalActions\"\n      [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n      [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n      [listItemTemplate]=\"_listItem ? listItem : undefined\"\n      [listValueTemplate]=\"_listValue ? listValue : undefined\"\n      [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n      [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n      [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n      [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n      [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n      [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n      [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n      [totalRecordsOnServer]=\"totalRecordsOnServer\"\n      [parentTemplates]=\"templatesForChildren$ | async\"\n      >\n    </ocx-data-list-grid>\n    <ng-template #listItemSubtitleLines let-item>\n      @if (_listItemSubtitleLines) {\n        <ng-container\n          [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n          [ngTemplateOutletContext]=\"{$implicit:item}\"\n          >\n          </ng-container\n          >\n        }</ng-template>\n        <ng-template #gridItemSubtitleLines let-item>\n          @if (_gridItemSubtitleLines) {\n            <ng-container\n              [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n              [ngTemplateOutletContext]=\"{$implicit:item}\"\n              >\n              </ng-container\n              >\n            }</ng-template>\n            <ng-template #gridItem let-item>\n              @if (_gridItem) {\n                <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n                  </ng-container\n                  >\n                }</ng-template>\n                <ng-template #listItem let-item>\n                  @if (_listItem) {\n                    <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n                      </ng-container\n                      >\n                    }</ng-template>\n                    <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n                      @if (_listValue) {\n                        <ng-container\n                          [ngTemplateOutlet]=\"_listValue\"\n                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                          >\n                          </ng-container\n                          >\n                        }</ng-template>\n                        <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                          @if (_translationKeyListValue) {\n                            <ng-container\n                              [ngTemplateOutlet]=\"_translationKeyListValue\"\n                              [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                              >\n                              </ng-container\n                              >\n                            }</ng-template>\n                            <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                              @if (_numberListValue) {\n                                <ng-container\n                                  [ngTemplateOutlet]=\"_numberListValue\"\n                                  [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                  >\n                                  </ng-container\n                                  >\n                                }</ng-template>\n                                <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                  @if (_relativeDateListValue) {\n                                    <ng-container\n                                      [ngTemplateOutlet]=\"_relativeDateListValue\"\n                                      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                      >\n                                      </ng-container\n                                      >\n                                    }</ng-template>\n                                    <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                      @if (_customListValue) {\n                                        <ng-container\n                                          [ngTemplateOutlet]=\"_customListValue\"\n                                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                          >\n                                          </ng-container\n                                          >\n                                        }</ng-template>\n                                        <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                          @if (_stringListValue) {\n                                            <ng-container\n                                              [ngTemplateOutlet]=\"_stringListValue\"\n                                              [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                              >\n                                              </ng-container\n                                              >\n                                            }</ng-template>\n                                            <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                              @if (_dateListValue) {\n                                                <ng-container\n                                                  [ngTemplateOutlet]=\"_dateListValue\"\n                                                  [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                  >\n                                                  </ng-container\n                                                  >\n                                                }</ng-template>\n                                              </div>\n                                            }\n\n                                            @if (layout === 'table') {\n                                              <div>\n                                                <ocx-data-table\n                                                  #ocxdatatable\n                                                  [rows]=\"data\"\n                                                  [columns]=\"columns\"\n                                                  [filters]=\"filters\"\n                                                  [sortDirection]=\"sortDirection\"\n                                                  [sortColumn]=\"sortField\"\n                                                  [sortStates]=\"sortStates\"\n                                                  [clientSideFiltering]=\"clientSideFiltering\"\n                                                  [clientSideSorting]=\"clientSideSorting\"\n                                                  [pageSizes]=\"pageSizes\"\n                                                  [pageSize]=\"pageSize\"\n                                                  [paginator]=\"tablePaginator\"\n                                                  [page]=\"page\"\n                                                  (pageChanged)=\"onPageChange($event)\"\n                                                  (pageSizeChanged)=\"onPageSizeChange($event)\"\n                                                  (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n                                                  [selectedRows]=\"selectedRows\"\n                                                  [frozenActionColumn]=\"frozenActionColumn\"\n                                                  [actionColumnPosition]=\"actionColumnPosition\"\n                                                  [emptyResultsMessage]=\"emptyResultsMessage\"\n                                                  [name]=\"name\"\n                                                  [deletePermission]=\"deletePermission\"\n                                                  [editPermission]=\"editPermission\"\n                                                  [viewPermission]=\"viewPermission\"\n                                                  [deleteActionEnabledField]=\"deleteActionEnabledField\"\n                                                  [deleteActionVisibleField]=\"deleteActionVisibleField\"\n                                                  [editActionEnabledField]=\"editActionEnabledField\"\n                                                  [editActionVisibleField]=\"editActionVisibleField\"\n                                                  [viewActionEnabledField]=\"viewActionEnabledField\"\n                                                  [viewActionVisibleField]=\"viewActionVisibleField\"\n                                                  [additionalActions]=\"additionalActions\"\n                                                  [stringCellTemplate]=\"_stringTableCell ? stringCell : undefined\"\n                                                  [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n                                                  [customCellTemplate]=\"_customTableCell ? customCell : undefined\"\n                                                  [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n                                                  [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n                                                  [cellTemplate]=\"_tableCell ? cell : undefined\"\n                                                  [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n                                                  [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n                                                  [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n                                                  [customFilterCellTemplate]=\"_customTableFilterCell ? customFilterCell : undefined\"\n                                                  [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n                                                  [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n                                                  [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n                                                  [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n                                                  (sorted)=\"sorting($event)\"\n                                                  (filtered)=\"filtering($event)\"\n                                                  [totalRecordsOnServer]=\"totalRecordsOnServer\"\n                                                  [currentPageShowingKey]=\"currentPageShowingKey\"\n                                                  [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n                                                  [parentTemplates]=\"templatesForChildren$ | async\"\n                                                  [allowSelectAll]=\"tableAllowSelectAll\"\n                                                  [selectionEnabledField]=\"tableSelectionEnabledField\"\n                                                  >\n                                                </ocx-data-table>\n                                                <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                  @if (_stringTableCell) {\n                                                    <ng-container\n                                                      [ngTemplateOutlet]=\"_stringTableCell\"\n                                                      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                      >\n                                                      </ng-container\n                                                      >\n                                                    }</ng-template>\n                                                    <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                      @if (_numberTableCell) {\n                                                        <ng-container\n                                                          [ngTemplateOutlet]=\"_numberTableCell\"\n                                                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                          >\n                                                          </ng-container\n                                                          >\n                                                        }</ng-template>\n                                                        <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                          @if (_customTableCell) {\n                                                            <ng-container\n                                                              [ngTemplateOutlet]=\"_customTableCell\"\n                                                              [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                              >\n                                                              </ng-container\n                                                              >\n                                                            }</ng-template>\n                                                            <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                              @if (_dateTableCell) {\n                                                                <ng-container\n                                                                  [ngTemplateOutlet]=\"_dateTableCell\"\n                                                                  [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                  >\n                                                                  </ng-container\n                                                                  >\n                                                                }</ng-template>\n                                                                <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                  @if (_relativeDateTableCell) {\n                                                                    <ng-container\n                                                                      [ngTemplateOutlet]=\"_relativeDateTableCell\"\n                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                      >\n                                                                      </ng-container\n                                                                      >\n                                                                    }</ng-template>\n                                                                    <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                      @if (_tableCell) {\n                                                                        <ng-container\n                                                                          [ngTemplateOutlet]=\"_tableCell\"\n                                                                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                                          >\n                                                                          </ng-container\n                                                                          >\n                                                                        }</ng-template>\n                                                                        <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                          @if (_translationKeyTableCell) {\n                                                                            <ng-container\n                                                                              [ngTemplateOutlet]=\"_translationKeyTableCell\"\n                                                                              [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                              >\n                                                                              </ng-container\n                                                                              >\n                                                                            }</ng-template>\n                                                                            <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                              @if (_stringTableFilterCell) {\n                                                                                <ng-container\n                                                                                  [ngTemplateOutlet]=\"_stringTableFilterCell\"\n                                                                                  [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                  >\n                                                                                  </ng-container\n                                                                                  >\n                                                                                }</ng-template>\n                                                                                <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_tableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_tableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_dateTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_dateTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #customFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_customTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_customTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_numberTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_numberTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_relativeDateTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_translationKeyTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                              </div>\n                                                                            }\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataListGridComponent, selector: "ocx-data-list-grid", inputs: ["titleLineId", "subtitleLineIds", "clientSideSorting", "clientSideFiltering", "sortStates", "pageSizes", "pageSize", "showAllOption", "emptyResultsMessage", "fallbackImage", "layout", "viewPermission", "editPermission", "deletePermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "viewMenuItemKey", "editMenuItemKey", "deleteMenuItemKey", "paginator", "page", "columns", "name", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "data", "filters", "sortDirection", "sortField", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "listItemTemplate", "gridItemTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "customListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "additionalActions", "parentTemplates"], outputs: ["viewItem", "editItem", "deleteItem", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "showAllOption", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "customCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "customFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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      [showAllOption]=\"showAllOption\"\n      [paginator]=\"listGridPaginator\"\n      [page]=\"page\"\n      (pageChanged)=\"onPageChange($event)\"\n      (pageSizeChanged)=\"onPageSizeChange($event)\"\n      (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n      [emptyResultsMessage]=\"emptyResultsMessage\"\n      [layout]=\"layout\"\n      [deletePermission]=\"deletePermission\"\n      [editPermission]=\"editPermission\"\n      [viewPermission]=\"viewPermission\"\n      [deleteActionEnabledField]=\"deleteActionEnabledField\"\n      [deleteActionVisibleField]=\"deleteActionVisibleField\"\n      [editActionEnabledField]=\"editActionEnabledField\"\n      [editActionVisibleField]=\"editActionVisibleField\"\n      [viewActionEnabledField]=\"viewActionEnabledField\"\n      [viewActionVisibleField]=\"viewActionVisibleField\"\n      [additionalActions]=\"additionalActions\"\n      [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n      [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n      [listItemTemplate]=\"_listItem ? listItem : undefined\"\n      [listValueTemplate]=\"_listValue ? listValue : undefined\"\n      [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n      [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n      [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n      [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n      [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n      [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n      [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n      [totalRecordsOnServer]=\"totalRecordsOnServer\"\n      [parentTemplates]=\"templatesForChildren$ | async\"\n      >\n    </ocx-data-list-grid>\n    <ng-template #listItemSubtitleLines let-item>\n      @if (_listItemSubtitleLines) {\n        <ng-container\n          [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n          [ngTemplateOutletContext]=\"{$implicit:item}\"\n          >\n          </ng-container\n          >\n        }</ng-template>\n        <ng-template #gridItemSubtitleLines let-item>\n          @if (_gridItemSubtitleLines) {\n            <ng-container\n              [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n              [ngTemplateOutletContext]=\"{$implicit:item}\"\n              >\n              </ng-container\n              >\n            }</ng-template>\n            <ng-template #gridItem let-item>\n              @if (_gridItem) {\n                <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n                  </ng-container\n                  >\n                }</ng-template>\n                <ng-template #listItem let-item>\n                  @if (_listItem) {\n                    <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n                      </ng-container\n                      >\n                    }</ng-template>\n                    <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n                      @if (_listValue) {\n                        <ng-container\n                          [ngTemplateOutlet]=\"_listValue\"\n                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                          >\n                          </ng-container\n                          >\n                        }</ng-template>\n                        <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                          @if (_translationKeyListValue) {\n                            <ng-container\n                              [ngTemplateOutlet]=\"_translationKeyListValue\"\n                              [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                              >\n                              </ng-container\n                              >\n                            }</ng-template>\n                            <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                              @if (_numberListValue) {\n                                <ng-container\n                                  [ngTemplateOutlet]=\"_numberListValue\"\n                                  [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                  >\n                                  </ng-container\n                                  >\n                                }</ng-template>\n                                <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                  @if (_relativeDateListValue) {\n                                    <ng-container\n                                      [ngTemplateOutlet]=\"_relativeDateListValue\"\n                                      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                      >\n                                      </ng-container\n                                      >\n                                    }</ng-template>\n                                    <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                      @if (_customListValue) {\n                                        <ng-container\n                                          [ngTemplateOutlet]=\"_customListValue\"\n                                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                          >\n                                          </ng-container\n                                          >\n                                        }</ng-template>\n                                        <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                          @if (_stringListValue) {\n                                            <ng-container\n                                              [ngTemplateOutlet]=\"_stringListValue\"\n                                              [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                              >\n                                              </ng-container\n                                              >\n                                            }</ng-template>\n                                            <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                              @if (_dateListValue) {\n                                                <ng-container\n                                                  [ngTemplateOutlet]=\"_dateListValue\"\n                                                  [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                  >\n                                                  </ng-container\n                                                  >\n                                                }</ng-template>\n                                              </div>\n                                            }\n\n                                            @if (layout === 'table') {\n                                              <div>\n                                                <ocx-data-table\n                                                  #ocxdatatable\n                                                  [rows]=\"data\"\n                                                  [columns]=\"columns\"\n                                                  [filters]=\"filters\"\n                                                  [sortDirection]=\"sortDirection\"\n                                                  [sortColumn]=\"sortField\"\n                                                  [sortStates]=\"sortStates\"\n                                                  [clientSideFiltering]=\"clientSideFiltering\"\n                                                  [clientSideSorting]=\"clientSideSorting\"\n                                                  [pageSizes]=\"pageSizes\"\n                                                  [pageSize]=\"pageSize\"\n                                                  [showAllOption]=\"showAllOption\"\n                                                  [paginator]=\"tablePaginator\"\n                                                  [page]=\"page\"\n                                                  (pageChanged)=\"onPageChange($event)\"\n                                                  (pageSizeChanged)=\"onPageSizeChange($event)\"\n                                                  (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n                                                  [selectedRows]=\"selectedRows\"\n                                                  [frozenActionColumn]=\"frozenActionColumn\"\n                                                  [actionColumnPosition]=\"actionColumnPosition\"\n                                                  [emptyResultsMessage]=\"emptyResultsMessage\"\n                                                  [name]=\"name\"\n                                                  [deletePermission]=\"deletePermission\"\n                                                  [editPermission]=\"editPermission\"\n                                                  [viewPermission]=\"viewPermission\"\n                                                  [deleteActionEnabledField]=\"deleteActionEnabledField\"\n                                                  [deleteActionVisibleField]=\"deleteActionVisibleField\"\n                                                  [editActionEnabledField]=\"editActionEnabledField\"\n                                                  [editActionVisibleField]=\"editActionVisibleField\"\n                                                  [viewActionEnabledField]=\"viewActionEnabledField\"\n                                                  [viewActionVisibleField]=\"viewActionVisibleField\"\n                                                  [additionalActions]=\"additionalActions\"\n                                                  [stringCellTemplate]=\"_stringTableCell ? stringCell : undefined\"\n                                                  [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n                                                  [customCellTemplate]=\"_customTableCell ? customCell : undefined\"\n                                                  [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n                                                  [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n                                                  [cellTemplate]=\"_tableCell ? cell : undefined\"\n                                                  [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n                                                  [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n                                                  [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n                                                  [customFilterCellTemplate]=\"_customTableFilterCell ? customFilterCell : undefined\"\n                                                  [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n                                                  [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n                                                  [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n                                                  [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n                                                  (sorted)=\"sorting($event)\"\n                                                  (filtered)=\"filtering($event)\"\n                                                  [totalRecordsOnServer]=\"totalRecordsOnServer\"\n                                                  [currentPageShowingKey]=\"currentPageShowingKey\"\n                                                  [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n                                                  [parentTemplates]=\"templatesForChildren$ | async\"\n                                                  [allowSelectAll]=\"tableAllowSelectAll\"\n                                                  [selectionEnabledField]=\"tableSelectionEnabledField\"\n                                                  >\n                                                </ocx-data-table>\n                                                <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                  @if (_stringTableCell) {\n                                                    <ng-container\n                                                      [ngTemplateOutlet]=\"_stringTableCell\"\n                                                      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                      >\n                                                      </ng-container\n                                                      >\n                                                    }</ng-template>\n                                                    <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                      @if (_numberTableCell) {\n                                                        <ng-container\n                                                          [ngTemplateOutlet]=\"_numberTableCell\"\n                                                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                          >\n                                                          </ng-container\n                                                          >\n                                                        }</ng-template>\n                                                        <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                          @if (_customTableCell) {\n                                                            <ng-container\n                                                              [ngTemplateOutlet]=\"_customTableCell\"\n                                                              [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                              >\n                                                              </ng-container\n                                                              >\n                                                            }</ng-template>\n                                                            <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                              @if (_dateTableCell) {\n                                                                <ng-container\n                                                                  [ngTemplateOutlet]=\"_dateTableCell\"\n                                                                  [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                  >\n                                                                  </ng-container\n                                                                  >\n                                                                }</ng-template>\n                                                                <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                  @if (_relativeDateTableCell) {\n                                                                    <ng-container\n                                                                      [ngTemplateOutlet]=\"_relativeDateTableCell\"\n                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                      >\n                                                                      </ng-container\n                                                                      >\n                                                                    }</ng-template>\n                                                                    <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                      @if (_tableCell) {\n                                                                        <ng-container\n                                                                          [ngTemplateOutlet]=\"_tableCell\"\n                                                                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                                          >\n                                                                          </ng-container\n                                                                          >\n                                                                        }</ng-template>\n                                                                        <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                          @if (_translationKeyTableCell) {\n                                                                            <ng-container\n                                                                              [ngTemplateOutlet]=\"_translationKeyTableCell\"\n                                                                              [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                              >\n                                                                              </ng-container\n                                                                              >\n                                                                            }</ng-template>\n                                                                            <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                              @if (_stringTableFilterCell) {\n                                                                                <ng-container\n                                                                                  [ngTemplateOutlet]=\"_stringTableFilterCell\"\n                                                                                  [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                  >\n                                                                                  </ng-container\n                                                                                  >\n                                                                                }</ng-template>\n                                                                                <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_tableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_tableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_dateTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_dateTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #customFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_customTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_customTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_numberTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_numberTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_relativeDateTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_translationKeyTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                              </div>\n                                                                            }\n" }]
+            args: [{ standalone: false, selector: 'ocx-data-view', providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], template: "@if (layout !== 'table') {\n  <div>\n    <ocx-data-list-grid\n      #ocxdatalistgrid\n      [name]=\"name\"\n      [data]=\"data\"\n      [columns]=\"columns\"\n      [filters]=\"filters\"\n      [sortDirection]=\"sortDirection\"\n      [sortField]=\"sortField\"\n      [sortStates]=\"sortStates\"\n      [clientSideFiltering]=\"clientSideFiltering\"\n      [clientSideSorting]=\"clientSideSorting\"\n      [titleLineId]=\"titleLineId\"\n      [subtitleLineIds]=\"subtitleLineIds\"\n      [clientSideSorting]=\"true\"\n      [pageSizes]=\"pageSizes\"\n      [pageSize]=\"pageSize\"\n      [paginator]=\"listGridPaginator\"\n      [page]=\"page\"\n      (pageChanged)=\"onPageChange($event)\"\n      (pageSizeChanged)=\"onPageSizeChange($event)\"\n      (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n      [emptyResultsMessage]=\"emptyResultsMessage\"\n      [layout]=\"layout\"\n      [deletePermission]=\"deletePermission\"\n      [editPermission]=\"editPermission\"\n      [viewPermission]=\"viewPermission\"\n      [deleteActionEnabledField]=\"deleteActionEnabledField\"\n      [deleteActionVisibleField]=\"deleteActionVisibleField\"\n      [editActionEnabledField]=\"editActionEnabledField\"\n      [editActionVisibleField]=\"editActionVisibleField\"\n      [viewActionEnabledField]=\"viewActionEnabledField\"\n      [viewActionVisibleField]=\"viewActionVisibleField\"\n      [additionalActions]=\"additionalActions\"\n      [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n      [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n      [listItemTemplate]=\"_listItem ? listItem : undefined\"\n      [listValueTemplate]=\"_listValue ? listValue : undefined\"\n      [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n      [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n      [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n      [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n      [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n      [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n      [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n      [totalRecordsOnServer]=\"totalRecordsOnServer\"\n      [parentTemplates]=\"templatesForChildren$ | async\"\n      >\n    </ocx-data-list-grid>\n    <ng-template #listItemSubtitleLines let-item>\n      @if (_listItemSubtitleLines) {\n        <ng-container\n          [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n          [ngTemplateOutletContext]=\"{$implicit:item}\"\n          >\n          </ng-container\n          >\n        }</ng-template>\n        <ng-template #gridItemSubtitleLines let-item>\n          @if (_gridItemSubtitleLines) {\n            <ng-container\n              [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n              [ngTemplateOutletContext]=\"{$implicit:item}\"\n              >\n              </ng-container\n              >\n            }</ng-template>\n            <ng-template #gridItem let-item>\n              @if (_gridItem) {\n                <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n                  </ng-container\n                  >\n                }</ng-template>\n                <ng-template #listItem let-item>\n                  @if (_listItem) {\n                    <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n                      </ng-container\n                      >\n                    }</ng-template>\n                    <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n                      @if (_listValue) {\n                        <ng-container\n                          [ngTemplateOutlet]=\"_listValue\"\n                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                          >\n                          </ng-container\n                          >\n                        }</ng-template>\n                        <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                          @if (_translationKeyListValue) {\n                            <ng-container\n                              [ngTemplateOutlet]=\"_translationKeyListValue\"\n                              [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                              >\n                              </ng-container\n                              >\n                            }</ng-template>\n                            <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                              @if (_numberListValue) {\n                                <ng-container\n                                  [ngTemplateOutlet]=\"_numberListValue\"\n                                  [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                  >\n                                  </ng-container\n                                  >\n                                }</ng-template>\n                                <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                  @if (_relativeDateListValue) {\n                                    <ng-container\n                                      [ngTemplateOutlet]=\"_relativeDateListValue\"\n                                      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                      >\n                                      </ng-container\n                                      >\n                                    }</ng-template>\n                                    <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                      @if (_customListValue) {\n                                        <ng-container\n                                          [ngTemplateOutlet]=\"_customListValue\"\n                                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                          >\n                                          </ng-container\n                                          >\n                                        }</ng-template>\n                                        <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                          @if (_stringListValue) {\n                                            <ng-container\n                                              [ngTemplateOutlet]=\"_stringListValue\"\n                                              [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                              >\n                                              </ng-container\n                                              >\n                                            }</ng-template>\n                                            <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n                                              @if (_dateListValue) {\n                                                <ng-container\n                                                  [ngTemplateOutlet]=\"_dateListValue\"\n                                                  [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                  >\n                                                  </ng-container\n                                                  >\n                                                }</ng-template>\n                                              </div>\n                                            }\n\n                                            @if (layout === 'table') {\n                                              <div>\n                                                <ocx-data-table\n                                                  #ocxdatatable\n                                                  [rows]=\"data\"\n                                                  [columns]=\"columns\"\n                                                  [filters]=\"filters\"\n                                                  [sortDirection]=\"sortDirection\"\n                                                  [sortColumn]=\"sortField\"\n                                                  [sortStates]=\"sortStates\"\n                                                  [clientSideFiltering]=\"clientSideFiltering\"\n                                                  [clientSideSorting]=\"clientSideSorting\"\n                                                  [pageSizes]=\"pageSizes\"\n                                                  [pageSize]=\"pageSize\"\n                                                  [paginator]=\"tablePaginator\"\n                                                  [page]=\"page\"\n                                                  (pageChanged)=\"onPageChange($event)\"\n                                                  (pageSizeChanged)=\"onPageSizeChange($event)\"\n                                                  (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n                                                  [selectedRows]=\"selectedRows\"\n                                                  [frozenActionColumn]=\"frozenActionColumn\"\n                                                  [actionColumnPosition]=\"actionColumnPosition\"\n                                                  [emptyResultsMessage]=\"emptyResultsMessage\"\n                                                  [name]=\"name\"\n                                                  [deletePermission]=\"deletePermission\"\n                                                  [editPermission]=\"editPermission\"\n                                                  [viewPermission]=\"viewPermission\"\n                                                  [deleteActionEnabledField]=\"deleteActionEnabledField\"\n                                                  [deleteActionVisibleField]=\"deleteActionVisibleField\"\n                                                  [editActionEnabledField]=\"editActionEnabledField\"\n                                                  [editActionVisibleField]=\"editActionVisibleField\"\n                                                  [viewActionEnabledField]=\"viewActionEnabledField\"\n                                                  [viewActionVisibleField]=\"viewActionVisibleField\"\n                                                  [additionalActions]=\"additionalActions\"\n                                                  [stringCellTemplate]=\"_stringTableCell ? stringCell : undefined\"\n                                                  [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n                                                  [customCellTemplate]=\"_customTableCell ? customCell : undefined\"\n                                                  [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n                                                  [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n                                                  [cellTemplate]=\"_tableCell ? cell : undefined\"\n                                                  [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n                                                  [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n                                                  [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n                                                  [customFilterCellTemplate]=\"_customTableFilterCell ? customFilterCell : undefined\"\n                                                  [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n                                                  [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n                                                  [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n                                                  [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n                                                  (sorted)=\"sorting($event)\"\n                                                  (filtered)=\"filtering($event)\"\n                                                  [totalRecordsOnServer]=\"totalRecordsOnServer\"\n                                                  [currentPageShowingKey]=\"currentPageShowingKey\"\n                                                  [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n                                                  [parentTemplates]=\"templatesForChildren$ | async\"\n                                                  [allowSelectAll]=\"tableAllowSelectAll\"\n                                                  [selectionEnabledField]=\"tableSelectionEnabledField\"\n                                                  >\n                                                </ocx-data-table>\n                                                <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                  @if (_stringTableCell) {\n                                                    <ng-container\n                                                      [ngTemplateOutlet]=\"_stringTableCell\"\n                                                      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                      >\n                                                      </ng-container\n                                                      >\n                                                    }</ng-template>\n                                                    <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                      @if (_numberTableCell) {\n                                                        <ng-container\n                                                          [ngTemplateOutlet]=\"_numberTableCell\"\n                                                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                          >\n                                                          </ng-container\n                                                          >\n                                                        }</ng-template>\n                                                        <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                          @if (_customTableCell) {\n                                                            <ng-container\n                                                              [ngTemplateOutlet]=\"_customTableCell\"\n                                                              [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                              >\n                                                              </ng-container\n                                                              >\n                                                            }</ng-template>\n                                                            <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                              @if (_dateTableCell) {\n                                                                <ng-container\n                                                                  [ngTemplateOutlet]=\"_dateTableCell\"\n                                                                  [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                  >\n                                                                  </ng-container\n                                                                  >\n                                                                }</ng-template>\n                                                                <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                  @if (_relativeDateTableCell) {\n                                                                    <ng-container\n                                                                      [ngTemplateOutlet]=\"_relativeDateTableCell\"\n                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                      >\n                                                                      </ng-container\n                                                                      >\n                                                                    }</ng-template>\n                                                                    <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                      @if (_tableCell) {\n                                                                        <ng-container\n                                                                          [ngTemplateOutlet]=\"_tableCell\"\n                                                                          [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n                                                                          >\n                                                                          </ng-container\n                                                                          >\n                                                                        }</ng-template>\n                                                                        <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                          @if (_translationKeyTableCell) {\n                                                                            <ng-container\n                                                                              [ngTemplateOutlet]=\"_translationKeyTableCell\"\n                                                                              [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                              >\n                                                                              </ng-container\n                                                                              >\n                                                                            }</ng-template>\n                                                                            <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                              @if (_stringTableFilterCell) {\n                                                                                <ng-container\n                                                                                  [ngTemplateOutlet]=\"_stringTableFilterCell\"\n                                                                                  [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                  >\n                                                                                  </ng-container\n                                                                                  >\n                                                                                }</ng-template>\n                                                                                <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_tableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_tableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_dateTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_dateTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #customFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_customTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_customTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_numberTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_numberTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_relativeDateTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                                <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n                                                                                  @if (_translationKeyTableFilterCell) {\n                                                                                    <ng-container\n                                                                                      [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n                                                                                      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n                                                                                      >\n                                                                                    </ng-container>\n                                                                                  }\n                                                                                </ng-template>\n                                                                              </div>\n                                                                            }\n" }]
         }], propDecorators: { listGrid: [{
                 type: ViewChild,
                 args: [DataListGridComponent]
@@ -4646,6 +4648,9 @@ class InteractiveDataViewComponent {
             "NONE" /* DataSortDirection.NONE */,
         ];
         this.pageSizes = [10, 25, 50];
+        /**
+         * @deprecated
+         */
         this.showAllOption = false;
         this.layout = 'table';
         this.defaultGroupKey = '';
@@ -4968,11 +4973,11 @@ class InteractiveDataViewComponent {
         this.pageSizeChanged.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: InteractiveDataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: InteractiveDataViewComponent, isStandalone: false, selector: "ocx-interactive-data-view", inputs: { searchConfigPermission: "searchConfigPermission", deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", supportedViewLayouts: "supportedViewLayouts", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", totalRecordsOnServer: "totalRecordsOnServer", layout: "layout", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey", groupSelectionNoGroupSelectedKey: "groupSelectionNoGroupSelectedKey", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", additionalActions: "additionalActions", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", disableFilterView: "disableFilterView", filterViewDisplayMode: "filterViewDisplayMode", filterViewChipStyleClass: "filterViewChipStyleClass", filterViewTableStyle: "filterViewTableStyle", filterViewPanelStyle: "filterViewPanelStyle", selectDisplayedChips: "selectDisplayedChips", page: "page", selectedRows: "selectedRows", displayedColumnKeys: "displayedColumnKeys", displayedColumns: "displayedColumns", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", headerStyleClass: "headerStyleClass", contentStyleClass: "contentStyleClass", paginator: "paginator", data: "data" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnsChange: "displayedColumnsChange", displayedColumnKeysChange: "displayedColumnKeysChange", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], queries: [{ propertyName: "tableCell", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "tableDateCell", first: true, predicate: ["tableDateCell"], descendants: true }, { propertyName: "dateTableCell", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableRelativeDateCell", first: true, predicate: ["tableRelativeDateCell"], descendants: true }, { propertyName: "relativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "tableTranslationKeyCell", first: true, predicate: ["tableTranslationKeyCell"], descendants: true }, { propertyName: "translationKeyTableCell", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLines", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLines", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "stringTableCell", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCell", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "customTableCell", first: true, predicate: ["customTableCell"], descendants: true }, { propertyName: "gridItem", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItem", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "topCenter", first: true, predicate: ["topCenter"], descendants: true }, { propertyName: "listValue", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValue", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValue", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValue", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "customListValue", first: true, predicate: ["customListValue"], descendants: true }, { propertyName: "stringListValue", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValue", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "tableFilterCell", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCell", first: true, predicate: ["dateTableFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCell", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCell", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCell", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCell", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "customTableFilterCell", first: true, predicate: ["customTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "dataView", first: true, predicate: DataViewComponent, descendants: true }], ngImport: i0, template: "<div class=\"p-3 border-bottom-1 surface-border\" [ngClass]=\"headerStyleClass\" id=\"interactiveDataViewHeader\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n      <ocx-data-layout-selection\n        [supportedViewLayouts]=\"supportedViewLayouts\"\n        [layout]=\"layout\"\n        (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n        (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n      ></ocx-data-layout-selection>\n      @if (!disableFilterView) {\n      <ocx-filter-view\n        [filters]=\"filters\"\n        [columns]=\"columns\"\n        [templates]=\"templates$ | async\"\n        [displayMode]=\"filterViewDisplayMode\"\n        [selectDisplayedChips]=\"selectDisplayedChips\"\n        [chipStyleClass]=\"filterViewChipStyleClass\"\n        [tableStyle]=\"filterViewTableStyle\"\n        (filtered)=\"filtering($event)\"\n        (componentStateChanged)=\"filterViewComponentState$.next($event)\"\n      ></ocx-filter-view>\n      }\n    </div>\n\n    @if (topCenter) {\n    <div>\n      <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n    </div>\n    } @if (layout !== 'table') {\n    <div class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection\"\n        [sortField]=\"sortField\"\n        [columns]=\"(displayedColumns$ | async) ?? []\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n    }\n\n    <div\n      [ngStyle]=\"layout !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      @if (isColumnGroupSelectionComponentDefined$ | async) { @if (displayedColumnKeys$ | async; as displayedColumnKeys)\n      {\n      <ocx-slot\n        [ngStyle]=\"layout !== 'table' ? {'display' : 'none'}  : {}\"\n        *ocxIfPermission=\"searchConfigPermission; elseTemplate: defaultColumnGroupSelectionComponent\"\n        name=\"{{columnGroupSlotName}}\"\n        [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey, defaultGroupKey: defaultGroupKey, customGroupKey: customGroupKey, columns: columns, selectedGroupKey: selectedGroupKey, layout: layout, displayedColumnsIds: displayedColumnKeys }\"\n        [outputs]=\"{ groupSelectionChanged: groupSelectionChangedSlotEmitter }\"\n      >\n        <ng-template #skeleton>\n          <div class=\"flex\">\n            <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n          </div>\n        </ng-template>\n      </ocx-slot>\n      } } @else {\n        <ng-container [ngTemplateOutlet]=\"defaultColumnGroupSelectionComponent\"></ng-container>\n      } @if (layout === 'table') {\n      <ocx-custom-group-column-selector\n        [columns]=\"columns\"\n        [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\n        [customGroupKey]=\"customGroupKey\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n      }\n    </div>\n  </div>\n</div>\n<div class=\"p-3\" [ngClass]=\"contentStyleClass\" id=\"interactiveDataViewContent\">\n  <ocx-data-view\n    [columns]=\"(displayedColumns$ | async) ?? []\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [showAllOption]=\"showAllOption\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [listGridPaginator]=\"listGridPaginator\"\n    [tablePaginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [stringTableCellTemplate]=\"_stringTableCell ? stringTableCell : undefined\"\n    [numberTableCellTemplate]=\"_numberTableCell ? numberTableCell : undefined\"\n    [customTableCellTemplate]=\"_customTableCell ? customTableCell : undefined\"\n    [dateTableCellTemplate]=\"_dateTableCell ? dateTableCell : _tableDateCell ? tableDateCell : undefined\"\n    [relativeDateTableCellTemplate]=\"_relativeDateTableCell ? relativeDateTableCell : _tableRelativeDateCell ? tableRelativeDateCell : undefined\"\n    [tableCellTemplate]=\"_tableCell ? tableCell : undefined\"\n    [translationKeyTableCellTemplate]=\"_translationKeyTableCell ? translationKeyTableCell : _tableTranslationKeyCell ? tableTranslationKeyCell : undefined\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n    [listItemTemplate]=\"_listItem ? listItem : undefined\"\n    [listValueTemplate]=\"_listValue ? listValue : undefined\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n    [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n    [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n    [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n    [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [tableFilterCellTemplate]=\"_tableFilterCell ? tableFilterCell : undefined\"\n    [dateTableFilterCellTemplate]=\"_dateTableFilterCell ? dateTableFilterCell : undefined\"\n    [customTableFilterCellTemplate]=\"_customTableFilterCell ? customTableFilterCell : undefined\"\n    [numberTableFilterCellTemplate]=\"_numberTableFilterCell ? numberTableFilterCell : undefined\"\n    [stringTableFilterCellTemplate]=\"_stringTableFilterCell ? stringTableFilterCell : undefined\"\n    [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateTableFilterCell : undefined\"\n    [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyTableFilterCell : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates$ | async\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  @if (layout === 'table') {\n  <ocx-column-group-selection\n    [selectedGroupKey]=\"selectedGroupKey ?? defaultGroupKey\"\n    [columns]=\"columns\"\n    [defaultGroupKey]=\"defaultGroupKey !== customGroupKey ? defaultGroupKey : ''\"\n    [customGroupKey]=\"customGroupKey\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n  }\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_stringTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableDateCell) {\n  <ng-container [ngTemplateOutlet]=\"_tableDateCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableRelativeDateCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableCell) {\n  <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableTranslationKeyCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItemSubtitleLines let-item>\n  @if (_gridItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  @if (_listItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItem let-item>\n  @if (_gridItem) {\n  <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listItem let-item>\n  @if (_listItem) {\n  <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_listValue) {\n  <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberListValue) {\n  <ng-container [ngTemplateOutlet]=\"_numberListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_customListValue) {\n  <ng-container [ngTemplateOutlet]=\"_customListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringListValue) {\n  <ng-container [ngTemplateOutlet]=\"_stringListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateListValue) {\n  <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_customTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_customTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i5$1.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "inputs", "outputs"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["groupSelectionChanged", "componentStateChanged"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "customGroupKey", "dialogTitle", "dialogTitleKey", "openButtonTitle", "openButtonTitleKey", "openButtonAriaLabel", "openButtonAriaLabelKey", "saveButtonLabel", "saveButtonLabelKey", "saveButtonAriaLabel", "saveButtonAriaLabelKey", "cancelButtonLabel", "cancelButtonLabelKey", "cancelButtonAriaLabel", "cancelButtonAriaLabelKey", "activeColumnsLabel", "activeColumnsLabelKey", "inactiveColumnsLabel", "inactiveColumnsLabelKey", "frozenActionColumn", "actionColumnPosition"], outputs: ["columnSelectionChanged", "actionColumnConfigChanged", "componentStateChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["dataViewLayoutChange", "componentStateChanged"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortChange", "sortDirectionChange", "componentStateChanged", "columnsChange"] }, { kind: "component", type: DataViewComponent, selector: "ocx-data-view", inputs: ["deletePermission", "editPermission", "viewPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "tableSelectionEnabledField", "tableAllowSelectAll", "data", "name", "titleLineId", "subtitleLineIds", "layout", "columns", "emptyResultsMessage", "clientSideSorting", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "listGridPaginator", "tablePaginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "paginator", "sortStates", "pageSizes", "pageSize", "showAllOption", "stringTableCellTemplate", "numberTableCellTemplate", "customTableCellTemplate", "dateTableCellTemplate", "tableDateCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "tableTranslationKeyCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "tableRelativeDateCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "customListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "tableFilterCellTemplate", "dateTableFilterCellTemplate", "relativeDateTableFilterCellTemplate", "translationKeyTableFilterCellTemplate", "stringTableFilterCellTemplate", "numberTableFilterCellTemplate", "customTableFilterCellTemplate", "additionalActions", "parentTemplates"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "component", type: FilterViewComponent, selector: "ocx-filter-view", inputs: ["filters", "columns", "displayMode", "selectDisplayedChips", "chipStyleClass", "tableStyle", "panelStyle", "templates"], outputs: ["filtered", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: InteractiveDataViewComponent, isStandalone: false, selector: "ocx-interactive-data-view", inputs: { searchConfigPermission: "searchConfigPermission", deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", supportedViewLayouts: "supportedViewLayouts", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", totalRecordsOnServer: "totalRecordsOnServer", layout: "layout", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey", groupSelectionNoGroupSelectedKey: "groupSelectionNoGroupSelectedKey", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", additionalActions: "additionalActions", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", disableFilterView: "disableFilterView", filterViewDisplayMode: "filterViewDisplayMode", filterViewChipStyleClass: "filterViewChipStyleClass", filterViewTableStyle: "filterViewTableStyle", filterViewPanelStyle: "filterViewPanelStyle", selectDisplayedChips: "selectDisplayedChips", page: "page", selectedRows: "selectedRows", displayedColumnKeys: "displayedColumnKeys", displayedColumns: "displayedColumns", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", headerStyleClass: "headerStyleClass", contentStyleClass: "contentStyleClass", paginator: "paginator", data: "data" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnsChange: "displayedColumnsChange", displayedColumnKeysChange: "displayedColumnKeysChange", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], queries: [{ propertyName: "tableCell", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "tableDateCell", first: true, predicate: ["tableDateCell"], descendants: true }, { propertyName: "dateTableCell", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableRelativeDateCell", first: true, predicate: ["tableRelativeDateCell"], descendants: true }, { propertyName: "relativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "tableTranslationKeyCell", first: true, predicate: ["tableTranslationKeyCell"], descendants: true }, { propertyName: "translationKeyTableCell", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLines", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLines", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "stringTableCell", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCell", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "customTableCell", first: true, predicate: ["customTableCell"], descendants: true }, { propertyName: "gridItem", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItem", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "topCenter", first: true, predicate: ["topCenter"], descendants: true }, { propertyName: "listValue", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValue", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValue", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValue", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "customListValue", first: true, predicate: ["customListValue"], descendants: true }, { propertyName: "stringListValue", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValue", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "tableFilterCell", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCell", first: true, predicate: ["dateTableFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCell", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCell", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCell", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCell", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "customTableFilterCell", first: true, predicate: ["customTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "dataView", first: true, predicate: DataViewComponent, descendants: true }], ngImport: i0, template: "<div class=\"p-3 border-bottom-1 surface-border\" [ngClass]=\"headerStyleClass\" id=\"interactiveDataViewHeader\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n      <ocx-data-layout-selection\n        [supportedViewLayouts]=\"supportedViewLayouts\"\n        [layout]=\"layout\"\n        (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n        (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n      ></ocx-data-layout-selection>\n      @if (!disableFilterView) {\n      <ocx-filter-view\n        [filters]=\"filters\"\n        [columns]=\"columns\"\n        [templates]=\"templates$ | async\"\n        [displayMode]=\"filterViewDisplayMode\"\n        [selectDisplayedChips]=\"selectDisplayedChips\"\n        [chipStyleClass]=\"filterViewChipStyleClass\"\n        [tableStyle]=\"filterViewTableStyle\"\n        (filtered)=\"filtering($event)\"\n        (componentStateChanged)=\"filterViewComponentState$.next($event)\"\n      ></ocx-filter-view>\n      }\n    </div>\n\n    @if (topCenter) {\n    <div>\n      <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n    </div>\n    } @if (layout !== 'table') {\n    <div class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection\"\n        [sortField]=\"sortField\"\n        [columns]=\"(displayedColumns$ | async) ?? []\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n    }\n\n    <div\n      [ngStyle]=\"layout !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      @if (isColumnGroupSelectionComponentDefined$ | async) { @if (displayedColumnKeys$ | async; as displayedColumnKeys)\n      {\n      <ocx-slot\n        [ngStyle]=\"layout !== 'table' ? {'display' : 'none'}  : {}\"\n        *ocxIfPermission=\"searchConfigPermission; elseTemplate: defaultColumnGroupSelectionComponent\"\n        name=\"{{columnGroupSlotName}}\"\n        [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey, defaultGroupKey: defaultGroupKey, customGroupKey: customGroupKey, columns: columns, selectedGroupKey: selectedGroupKey, layout: layout, displayedColumnsIds: displayedColumnKeys }\"\n        [outputs]=\"{ groupSelectionChanged: groupSelectionChangedSlotEmitter }\"\n      >\n        <ng-template #skeleton>\n          <div class=\"flex\">\n            <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n          </div>\n        </ng-template>\n      </ocx-slot>\n      } } @else {\n        <ng-container [ngTemplateOutlet]=\"defaultColumnGroupSelectionComponent\"></ng-container>\n      } @if (layout === 'table') {\n      <ocx-custom-group-column-selector\n        [columns]=\"columns\"\n        [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\n        [customGroupKey]=\"customGroupKey\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n      }\n    </div>\n  </div>\n</div>\n<div class=\"p-3\" [ngClass]=\"contentStyleClass\" id=\"interactiveDataViewContent\">\n  <ocx-data-view\n    [columns]=\"(displayedColumns$ | async) ?? []\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [listGridPaginator]=\"listGridPaginator\"\n    [tablePaginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [stringTableCellTemplate]=\"_stringTableCell ? stringTableCell : undefined\"\n    [numberTableCellTemplate]=\"_numberTableCell ? numberTableCell : undefined\"\n    [customTableCellTemplate]=\"_customTableCell ? customTableCell : undefined\"\n    [dateTableCellTemplate]=\"_dateTableCell ? dateTableCell : _tableDateCell ? tableDateCell : undefined\"\n    [relativeDateTableCellTemplate]=\"_relativeDateTableCell ? relativeDateTableCell : _tableRelativeDateCell ? tableRelativeDateCell : undefined\"\n    [tableCellTemplate]=\"_tableCell ? tableCell : undefined\"\n    [translationKeyTableCellTemplate]=\"_translationKeyTableCell ? translationKeyTableCell : _tableTranslationKeyCell ? tableTranslationKeyCell : undefined\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n    [listItemTemplate]=\"_listItem ? listItem : undefined\"\n    [listValueTemplate]=\"_listValue ? listValue : undefined\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n    [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n    [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n    [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n    [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [tableFilterCellTemplate]=\"_tableFilterCell ? tableFilterCell : undefined\"\n    [dateTableFilterCellTemplate]=\"_dateTableFilterCell ? dateTableFilterCell : undefined\"\n    [customTableFilterCellTemplate]=\"_customTableFilterCell ? customTableFilterCell : undefined\"\n    [numberTableFilterCellTemplate]=\"_numberTableFilterCell ? numberTableFilterCell : undefined\"\n    [stringTableFilterCellTemplate]=\"_stringTableFilterCell ? stringTableFilterCell : undefined\"\n    [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateTableFilterCell : undefined\"\n    [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyTableFilterCell : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates$ | async\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  @if (layout === 'table') {\n  <ocx-column-group-selection\n    [selectedGroupKey]=\"selectedGroupKey ?? defaultGroupKey\"\n    [columns]=\"columns\"\n    [defaultGroupKey]=\"defaultGroupKey !== customGroupKey ? defaultGroupKey : ''\"\n    [customGroupKey]=\"customGroupKey\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n  }\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_stringTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableDateCell) {\n  <ng-container [ngTemplateOutlet]=\"_tableDateCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableRelativeDateCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableCell) {\n  <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableTranslationKeyCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItemSubtitleLines let-item>\n  @if (_gridItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  @if (_listItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItem let-item>\n  @if (_gridItem) {\n  <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listItem let-item>\n  @if (_listItem) {\n  <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_listValue) {\n  <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberListValue) {\n  <ng-container [ngTemplateOutlet]=\"_numberListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_customListValue) {\n  <ng-container [ngTemplateOutlet]=\"_customListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringListValue) {\n  <ng-container [ngTemplateOutlet]=\"_stringListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateListValue) {\n  <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_customTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_customTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i5$1.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "inputs", "outputs"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["groupSelectionChanged", "componentStateChanged"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "customGroupKey", "dialogTitle", "dialogTitleKey", "openButtonTitle", "openButtonTitleKey", "openButtonAriaLabel", "openButtonAriaLabelKey", "saveButtonLabel", "saveButtonLabelKey", "saveButtonAriaLabel", "saveButtonAriaLabelKey", "cancelButtonLabel", "cancelButtonLabelKey", "cancelButtonAriaLabel", "cancelButtonAriaLabelKey", "activeColumnsLabel", "activeColumnsLabelKey", "inactiveColumnsLabel", "inactiveColumnsLabelKey", "frozenActionColumn", "actionColumnPosition"], outputs: ["columnSelectionChanged", "actionColumnConfigChanged", "componentStateChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["dataViewLayoutChange", "componentStateChanged"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortChange", "sortDirectionChange", "componentStateChanged", "columnsChange"] }, { kind: "component", type: DataViewComponent, selector: "ocx-data-view", inputs: ["deletePermission", "editPermission", "viewPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "tableSelectionEnabledField", "tableAllowSelectAll", "data", "name", "titleLineId", "subtitleLineIds", "layout", "columns", "emptyResultsMessage", "clientSideSorting", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "listGridPaginator", "tablePaginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "paginator", "sortStates", "pageSizes", "pageSize", "showAllOption", "stringTableCellTemplate", "numberTableCellTemplate", "customTableCellTemplate", "dateTableCellTemplate", "tableDateCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "tableTranslationKeyCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "tableRelativeDateCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "customListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "tableFilterCellTemplate", "dateTableFilterCellTemplate", "relativeDateTableFilterCellTemplate", "translationKeyTableFilterCellTemplate", "stringTableFilterCellTemplate", "numberTableFilterCellTemplate", "customTableFilterCellTemplate", "additionalActions", "parentTemplates"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "component", type: FilterViewComponent, selector: "ocx-filter-view", inputs: ["filters", "columns", "displayMode", "selectDisplayedChips", "chipStyleClass", "tableStyle", "panelStyle", "templates"], outputs: ["filtered", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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    [showAllOption]=\"showAllOption\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [listGridPaginator]=\"listGridPaginator\"\n    [tablePaginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [stringTableCellTemplate]=\"_stringTableCell ? stringTableCell : undefined\"\n    [numberTableCellTemplate]=\"_numberTableCell ? numberTableCell : undefined\"\n    [customTableCellTemplate]=\"_customTableCell ? customTableCell : undefined\"\n    [dateTableCellTemplate]=\"_dateTableCell ? dateTableCell : _tableDateCell ? tableDateCell : undefined\"\n    [relativeDateTableCellTemplate]=\"_relativeDateTableCell ? relativeDateTableCell : _tableRelativeDateCell ? tableRelativeDateCell : undefined\"\n    [tableCellTemplate]=\"_tableCell ? tableCell : undefined\"\n    [translationKeyTableCellTemplate]=\"_translationKeyTableCell ? translationKeyTableCell : _tableTranslationKeyCell ? tableTranslationKeyCell : undefined\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n    [listItemTemplate]=\"_listItem ? listItem : undefined\"\n    [listValueTemplate]=\"_listValue ? listValue : undefined\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n    [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n    [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n    [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n    [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [tableFilterCellTemplate]=\"_tableFilterCell ? tableFilterCell : undefined\"\n    [dateTableFilterCellTemplate]=\"_dateTableFilterCell ? dateTableFilterCell : undefined\"\n    [customTableFilterCellTemplate]=\"_customTableFilterCell ? customTableFilterCell : undefined\"\n    [numberTableFilterCellTemplate]=\"_numberTableFilterCell ? numberTableFilterCell : undefined\"\n    [stringTableFilterCellTemplate]=\"_stringTableFilterCell ? stringTableFilterCell : undefined\"\n    [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateTableFilterCell : undefined\"\n    [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyTableFilterCell : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates$ | async\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  @if (layout === 'table') {\n  <ocx-column-group-selection\n    [selectedGroupKey]=\"selectedGroupKey ?? defaultGroupKey\"\n    [columns]=\"columns\"\n    [defaultGroupKey]=\"defaultGroupKey !== customGroupKey ? defaultGroupKey : ''\"\n    [customGroupKey]=\"customGroupKey\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n  }\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_stringTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableDateCell) {\n  <ng-container [ngTemplateOutlet]=\"_tableDateCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableRelativeDateCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableCell) {\n  <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableTranslationKeyCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItemSubtitleLines let-item>\n  @if (_gridItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  @if (_listItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItem let-item>\n  @if (_gridItem) {\n  <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listItem let-item>\n  @if (_listItem) {\n  <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_listValue) {\n  <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberListValue) {\n  <ng-container [ngTemplateOutlet]=\"_numberListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_customListValue) {\n  <ng-container [ngTemplateOutlet]=\"_customListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringListValue) {\n  <ng-container [ngTemplateOutlet]=\"_stringListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateListValue) {\n  <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_customTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_customTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n" }]
+            args: [{ standalone: false, selector: 'ocx-interactive-data-view', providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], template: "<div class=\"p-3 border-bottom-1 surface-border\" [ngClass]=\"headerStyleClass\" id=\"interactiveDataViewHeader\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n      <ocx-data-layout-selection\n        [supportedViewLayouts]=\"supportedViewLayouts\"\n        [layout]=\"layout\"\n        (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n        (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n      ></ocx-data-layout-selection>\n      @if (!disableFilterView) {\n      <ocx-filter-view\n        [filters]=\"filters\"\n        [columns]=\"columns\"\n        [templates]=\"templates$ | async\"\n        [displayMode]=\"filterViewDisplayMode\"\n        [selectDisplayedChips]=\"selectDisplayedChips\"\n        [chipStyleClass]=\"filterViewChipStyleClass\"\n        [tableStyle]=\"filterViewTableStyle\"\n        (filtered)=\"filtering($event)\"\n        (componentStateChanged)=\"filterViewComponentState$.next($event)\"\n      ></ocx-filter-view>\n      }\n    </div>\n\n    @if (topCenter) {\n    <div>\n      <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n    </div>\n    } @if (layout !== 'table') {\n    <div class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection\"\n        [sortField]=\"sortField\"\n        [columns]=\"(displayedColumns$ | async) ?? []\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n    }\n\n    <div\n      [ngStyle]=\"layout !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      @if (isColumnGroupSelectionComponentDefined$ | async) { @if (displayedColumnKeys$ | async; as displayedColumnKeys)\n      {\n      <ocx-slot\n        [ngStyle]=\"layout !== 'table' ? {'display' : 'none'}  : {}\"\n        *ocxIfPermission=\"searchConfigPermission; elseTemplate: defaultColumnGroupSelectionComponent\"\n        name=\"{{columnGroupSlotName}}\"\n        [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey, defaultGroupKey: defaultGroupKey, customGroupKey: customGroupKey, columns: columns, selectedGroupKey: selectedGroupKey, layout: layout, displayedColumnsIds: displayedColumnKeys }\"\n        [outputs]=\"{ groupSelectionChanged: groupSelectionChangedSlotEmitter }\"\n      >\n        <ng-template #skeleton>\n          <div class=\"flex\">\n            <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n          </div>\n        </ng-template>\n      </ocx-slot>\n      } } @else {\n        <ng-container [ngTemplateOutlet]=\"defaultColumnGroupSelectionComponent\"></ng-container>\n      } @if (layout === 'table') {\n      <ocx-custom-group-column-selector\n        [columns]=\"columns\"\n        [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\n        [customGroupKey]=\"customGroupKey\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n      }\n    </div>\n  </div>\n</div>\n<div class=\"p-3\" [ngClass]=\"contentStyleClass\" id=\"interactiveDataViewContent\">\n  <ocx-data-view\n    [columns]=\"(displayedColumns$ | async) ?? []\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"clientSideSorting\"\n    [clientSideFiltering]=\"clientSideFiltering\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [emptyResultsMessage]=\"emptyResultsMessage\"\n    [layout]=\"layout\"\n    [name]=\"name\"\n    [deletePermission]=\"deletePermission\"\n    [editPermission]=\"editPermission\"\n    [viewPermission]=\"viewPermission\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField\"\n    [editActionEnabledField]=\"editActionEnabledField\"\n    [editActionVisibleField]=\"editActionVisibleField\"\n    [viewActionEnabledField]=\"viewActionEnabledField\"\n    [viewActionVisibleField]=\"viewActionVisibleField\"\n    [additionalActions]=\"additionalActions\"\n    [listGridPaginator]=\"listGridPaginator\"\n    [tablePaginator]=\"tablePaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [stringTableCellTemplate]=\"_stringTableCell ? stringTableCell : undefined\"\n    [numberTableCellTemplate]=\"_numberTableCell ? numberTableCell : undefined\"\n    [customTableCellTemplate]=\"_customTableCell ? customTableCell : undefined\"\n    [dateTableCellTemplate]=\"_dateTableCell ? dateTableCell : _tableDateCell ? tableDateCell : undefined\"\n    [relativeDateTableCellTemplate]=\"_relativeDateTableCell ? relativeDateTableCell : _tableRelativeDateCell ? tableRelativeDateCell : undefined\"\n    [tableCellTemplate]=\"_tableCell ? tableCell : undefined\"\n    [translationKeyTableCellTemplate]=\"_translationKeyTableCell ? translationKeyTableCell : _tableTranslationKeyCell ? tableTranslationKeyCell : undefined\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n    [listItemTemplate]=\"_listItem ? listItem : undefined\"\n    [listValueTemplate]=\"_listValue ? listValue : undefined\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n    [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n    [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n    [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n    [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [tableFilterCellTemplate]=\"_tableFilterCell ? tableFilterCell : undefined\"\n    [dateTableFilterCellTemplate]=\"_dateTableFilterCell ? dateTableFilterCell : undefined\"\n    [customTableFilterCellTemplate]=\"_customTableFilterCell ? customTableFilterCell : undefined\"\n    [numberTableFilterCellTemplate]=\"_numberTableFilterCell ? numberTableFilterCell : undefined\"\n    [stringTableFilterCellTemplate]=\"_stringTableFilterCell ? stringTableFilterCell : undefined\"\n    [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateTableFilterCell : undefined\"\n    [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyTableFilterCell : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates$ | async\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  @if (layout === 'table') {\n  <ocx-column-group-selection\n    [selectedGroupKey]=\"selectedGroupKey ?? defaultGroupKey\"\n    [columns]=\"columns\"\n    [defaultGroupKey]=\"defaultGroupKey !== customGroupKey ? defaultGroupKey : ''\"\n    [customGroupKey]=\"customGroupKey\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n  }\n</ng-template>\n\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_stringTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableDateCell) {\n  <ng-container [ngTemplateOutlet]=\"_tableDateCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableCell) {\n  <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableRelativeDateCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableCell) {\n  <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_tableTranslationKeyCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableCell\"\n    [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItemSubtitleLines let-item>\n  @if (_gridItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n  @if (_listItemSubtitleLines) {\n  <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #gridItem let-item>\n  @if (_gridItem) {\n  <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listItem let-item>\n  @if (_listItem) {\n  <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n  }</ng-template\n>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_listValue) {\n  <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberListValue) {\n  <ng-container [ngTemplateOutlet]=\"_numberListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateListValue) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateListValue\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_customListValue) {\n  <ng-container [ngTemplateOutlet]=\"_customListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringListValue) {\n  <ng-container [ngTemplateOutlet]=\"_stringListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateListValue) {\n  <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n  </ng-container>\n  }</ng-template\n>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_stringTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_stringTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_numberTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_numberTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_customTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_customTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_dateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_dateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_relativeDateTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n  @if (_translationKeyTableFilterCell) {\n  <ng-container\n    [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n    [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n  >\n  </ng-container>\n  }</ng-template\n>\n" }]
         }], ctorParameters: () => [], propDecorators: { dataView: [{
                 type: ViewChild,
                 args: [DataViewComponent]
@@ -5242,7 +5247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 }]
         }] });
 
-class ConnectionService {
+class TranslationConnectionService {
     constructor() {
         const userService = inject(UserService);
         const translateService = inject(TranslateService);
@@ -5251,10 +5256,10 @@ class ConnectionService {
     ngOnDestroy() {
         this.languageSub.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ConnectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ConnectionService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TranslationConnectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TranslationConnectionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ConnectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TranslationConnectionService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -5455,16 +5460,16 @@ class DynamicLocaleId {
     }
 }
 
-function provideConnectionService() {
+function provideTranslationConnectionService() {
     return [
         {
             provide: ENVIRONMENT_INITIALIZER,
             multi: true,
             useFactory() {
-                return () => inject(ConnectionService);
+                return () => inject(TranslationConnectionService);
             },
         },
-        ConnectionService,
+        TranslationConnectionService,
     ];
 }
 
@@ -5563,7 +5568,7 @@ class AngularAcceleratorModule {
                 multi: true,
             },
             AppConfigService,
-            provideConnectionService(),
+            provideTranslationConnectionService(),
         ], imports: [CommonModule,
             AngularAcceleratorPrimeNgModule,
             AngularRemoteComponentsModule,
@@ -5611,7 +5616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         FilterViewComponent,
                         TemplateDirective,
                         OcxContentDirective,
-                        OcxContentContainerDirective
+                        OcxContentContainerDirective,
                     ],
                     providers: [
                         providePermissionChecker(),
@@ -5637,7 +5642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                             multi: true,
                         },
                         AppConfigService,
-                        provideConnectionService(),
+                        provideTranslationConnectionService(),
                     ],
                     exports: [
                         AngularRemoteComponentsModule,
@@ -5665,7 +5670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         FilterViewComponent,
                         TemplateDirective,
                         OcxContentDirective,
-                        OcxContentContainerDirective
+                        OcxContentContainerDirective,
                     ],
                 }]
         }] });
@@ -5972,5 +5977,5 @@ function searchPrefixWithSpecialChars(strings, prefix) {
  * Generated bundle index. Do not edit.
  */
 
-export { AdvancedDirective, AngularAcceleratorMissingTranslationHandler, AngularAcceleratorModule, AngularAcceleratorPrimeNgModule, AsyncTranslateLoader, BreadcrumbService, CachingTranslateLoader, ColorUtils, ColumnGroupSelectionComponent, ColumnType, ConnectionService, CustomGroupColumnSelectorComponent, DataLayoutSelectionComponent, DataListGridComponent, DataListGridSortingComponent, DataLoadingErrorComponent, DataOperationStrategy, DataTableComponent, DataViewComponent, DateUtils, DiagramComponent, DynamicPipe, FilterType, FilterViewComponent, GroupByCountDiagramComponent, IfBreakpointDirective, IfPermissionDirective, InteractiveDataViewComponent, LifecycleComponent, ObjectUtils, OcxContentComponent, OcxContentContainerComponent, OcxContentContainerDirective, OcxContentDirective, OcxTimeAgoPipe, PageHeaderComponent, SearchHeaderComponent, SrcDirective, TemplateDirective, TemplateType, TooltipOnOverflowDirective, TranslateCombinedLoader, TranslationCacheService, atLeastOneFieldFilledValidator, buildSearchCriteria, createRemoteComponentAndMfeTranslateLoader, createRemoteComponentTranslateLoader, createTranslateLoader, enumToDropdownOptions, findEntryWithKeyword, findTemplate, flattenObject, isValidDate, limit, removeKeyword, searchPrefixWithSpecialChars };
+export { AdvancedDirective, AngularAcceleratorMissingTranslationHandler, AngularAcceleratorModule, AngularAcceleratorPrimeNgModule, AsyncTranslateLoader, BreadcrumbService, CachingTranslateLoader, ColorUtils, ColumnGroupSelectionComponent, ColumnType, CustomGroupColumnSelectorComponent, DataLayoutSelectionComponent, DataListGridComponent, DataListGridSortingComponent, DataLoadingErrorComponent, DataOperationStrategy, DataTableComponent, DataViewComponent, DateUtils, DiagramComponent, DynamicPipe, FilterType, FilterViewComponent, GroupByCountDiagramComponent, IfBreakpointDirective, IfPermissionDirective, InteractiveDataViewComponent, LifecycleComponent, ObjectUtils, OcxContentComponent, OcxContentContainerComponent, OcxContentContainerDirective, OcxContentDirective, OcxTimeAgoPipe, PageHeaderComponent, SearchHeaderComponent, SrcDirective, TemplateDirective, TemplateType, TooltipOnOverflowDirective, TranslateCombinedLoader, TranslationCacheService, TranslationConnectionService, atLeastOneFieldFilledValidator, buildSearchCriteria, createRemoteComponentAndMfeTranslateLoader, createRemoteComponentTranslateLoader, createTranslateLoader, enumToDropdownOptions, findEntryWithKeyword, findTemplate, flattenObject, isValidDate, limit, removeKeyword, searchPrefixWithSpecialChars };
 //# sourceMappingURL=onecx-angular-accelerator.mjs.map