@onecx/angular-accelerator 4.32.1 → 4.33.0

package/fesm2020/onecx-angular-accelerator.mjs

@@ -380,6 +380,12 @@ class PageHeaderComponent {
         this.overflowActions = [];
         this.dd = new Date();
         this.figureImageLoadError = false;
+        this.objectPanelGridLayoutClasses = 'grid row-gap-2 m-0';
+        this.objectPanelColumnLayoutClasses = 'flex flex-row justify-content-between overflow-x-auto';
+        this.objectPanelDefaultLayoutClasses = 'flex flex-column row-gap-2 md:flex-row md:justify-content-between';
+        this.objectInfoGridLayoutClasses = 'col-12 flex gap-4 md:col-6 align-items-center p-0';
+        this.objectInfoColumnLayoutClasses = 'flex flex-column align-items-center gap-2 min-w-120';
+        this.objectInfoDefaultLayoutClasses = 'flex flex-row md:flex-column md:align-items-center md:gap-2';
         this.breadcrumbs = breadcrumbs;
         this.home$ = concat(of({ menuItem: { icon: PrimeIcons.HOME, routerLink: '/' } }), this.appStateService.currentPortal$.pipe(map((portal) => ({
             menuItem: {
@@ -425,6 +431,24 @@ class PageHeaderComponent {
             style = style.concat(style, ' ', item.valueCssClass);
         return style;
     }
+    getObjectPanelLayoutClasses() {
+        if (this.enableGridView) {
+            return this.objectPanelGridLayoutClasses;
+        }
+        if (this.enableGridView === false) {
+            return this.objectPanelColumnLayoutClasses;
+        }
+        return this.objectPanelDefaultLayoutClasses;
+    }
+    getObjectInfoLayoutClasses() {
+        if (this.enableGridView) {
+            return `${this.objectInfoGridLayoutClasses} lg:col-${this.gridLayoutDesktopColumns ? 12 / this.gridLayoutDesktopColumns : 4}`;
+        }
+        if (this.enableGridView === false) {
+            return this.objectInfoColumnLayoutClasses;
+        }
+        return this.objectInfoDefaultLayoutClasses;
+    }
     /**
      * Generates a list of actions that should be rendered in an overflow menu
      */
@@ -507,10 +531,10 @@ class PageHeaderComponent {
     }
 }
 PageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PageHeaderComponent, deps: [{ token: BreadcrumbService }, { token: i1$1.TranslateService }, { token: i3.AppStateService }, { token: i3.UserService }], target: i0.ɵɵFactoryTarget.Component });
-PageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PageHeaderComponent, selector: "ocx-page-header", inputs: { header: "header", loading: "loading", figureBackground: "figureBackground", showFigure: "showFigure", figureImage: "figureImage", disableDefaultActions: "disableDefaultActions", subheader: "subheader", actions: "actions", objectDetails: "objectDetails", showBreadcrumbs: "showBreadcrumbs", manualBreadcrumbs: "manualBreadcrumbs" }, 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\" name=\"ocx-page-header-wrapper\">\n  <ng-container *ngIf=\"showBreadcrumbs\">\n    <p-breadcrumb\n      [model]=\"items\"\n      *ngIf=\"breadcrumbs$ | async  as items\"\n      [home]=\"(home$ | async)?.menuItem ?? {}\"\n      [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n      [attr.manual]=\"manualBreadcrumbs\"\n    ></p-breadcrumb>\n  </ng-container>\n  <div class=\"title-bar flex flex-row md:justify-content-between p-2 md:p-3\">\n    <div class=\"title-wrap\">\n      <div class=\"figure flex h-2rem w-2rem md:h-3rem md:w-3rem\" *ngIf=\"showFigure\">\n        <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n          <ng-content select=\"[figureImage]\"></ng-content>\n          <img\n            *ngIf=\"figureImage && !figureImageLoadError\"\n            [ocxSrc]=\"figureImage\"\n            alt=\"Figure image\"\n            class=\"w-full\"\n            (error)=\"handleImageError()\"\n          />\n        </div>\n        <div\n          class=\"colorblob flex-1 border-round\"\n          *ngIf=\"previewImage.children.length === 0 || figureImageLoadError\"\n        ></div>\n      </div>\n      <ng-template #skeletonBar>\n        <div class=\"header justify-content-evenly\">\n          <p-skeleton width=\"10rem\"></p-skeleton>\n          <p-skeleton width=\"10rem\"></p-skeleton>\n        </div>\n      </ng-template>\n      <div class=\"header\" *ngIf=\"!loading; else skeletonBar\">\n        <h1 id=\"page-header\" *ngIf=\"!!header\">{{ header }}</h1>\n        <h2 id=\"page-subheader\" *ngIf=\"!!subheader\">{{ subheader }}</h2>\n      </div>\n    </div>\n    <div class=\"action-items-wrap mt-2 md:mt-0\">\n      <ng-container *ngIf=\"additionalToolbarContentLeft\" [ngTemplateOutlet]=\"additionalToolbarContentLeft\">\n      </ng-container>\n\n      <ng-container *ngIf=\"!disableDefaultActions\"> </ng-container>\n      <ng-template #skeletonActions>\n        <div class=\"flex\">\n          <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n          <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n        </div>\n      </ng-template>\n      <ng-container *ngIf=\"!loading; else skeletonActions\">\n        <div *ngIf=\"inlineActions && inlineActions.length > 0\" class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n          <ng-container *ngFor=\"let action of inlineActions\">\n            <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              [title]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\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.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n            ></p-button>\n          </ng-container>\n        </div>\n        <ng-content select=\"[toolbarItems]\"></ng-content>\n        <ng-container>\n          <div *ngIf=\"overflowActions.length !== 0\">\n            <button\n              id=\"pageHeaderMenuButton\"\n              type=\"button\"\n              pButton\n              icon=\"pi pi-ellipsis-v\"\n              title=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n              class=\"more-actions-menu-button action-button ml-2\"\n              (click)=\"menu.toggle($event)\"\n              name=\"ocx-page-header-overflow-action-button\"\n              [ariaLabel]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n            ></button>\n            <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n          </div>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"additionalToolbarContent\" [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"object-panel flex-column md:flex-row\"\n    [class.justify-content-evenly]=\"objectDetails\"\n    [class.justify-content-start]=\"!objectDetails\"\n  >\n    <ng-container *ngIf=\"objectDetails\">\n      <div\n        class=\"object-info flex flex-row md:flex-column align-items-baseline md:align-items-center justify-content-between\"\n        *ngFor=\"let item of objectDetails\"\n      >\n        <label class=\"flex font-medium text-600\" name=\"object-detail-label\"\n          >{{ item.label | dynamicPipe:item.labelPipe }}</label\n        >\n        <span\n          *ngIf=\"item.icon || item.value\"\n          class=\"flex text-900 mt-2\"\n          [ngClass]=\"generateItemStyle(item)\"\n          [title]=\"item.tooltip || ''\"\n          name=\"object-detail-value\"\n        >\n          <i *ngIf=\"item.icon\" class=\"{{item.icon}}\" name=\"object-detail-icon\"></i>\n          {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}</span\n        >\n      </div>\n    </ng-container>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host(.p-button-label){font-weight:400}:host ::ng-deep .action-button{padding:.5rem;font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;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:-moz-fit-content;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .title-bar .action-items-wrap button{padding:.5rem}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem;display:flex}.onecx-page-header .object-panel:empty{display:none}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i7.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i8.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: SrcDirective, selector: "[ocxSrc]", inputs: ["ocxSrc"], outputs: ["error"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None });
+PageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PageHeaderComponent, selector: "ocx-page-header", inputs: { header: "header", loading: "loading", figureBackground: "figureBackground", showFigure: "showFigure", figureImage: "figureImage", disableDefaultActions: "disableDefaultActions", subheader: "subheader", actions: "actions", objectDetails: "objectDetails", showBreadcrumbs: "showBreadcrumbs", manualBreadcrumbs: "manualBreadcrumbs", enableGridView: "enableGridView", gridLayoutDesktopColumns: "gridLayoutDesktopColumns" }, outputs: { save: "save" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"onecx-page-header\" name=\"ocx-page-header-wrapper\">\n  <ng-container *ngIf=\"showBreadcrumbs\">\n    <p-breadcrumb\n      [model]=\"items\"\n      *ngIf=\"breadcrumbs$ | async  as items\"\n      [home]=\"(home$ | async)?.menuItem ?? {}\"\n      [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n      [attr.manual]=\"manualBreadcrumbs\"\n    ></p-breadcrumb>\n  </ng-container>\n  <div class=\"title-bar flex flex-row md:justify-content-between p-2 md:p-3\">\n    <div class=\"title-wrap\">\n      <div class=\"figure flex h-2rem w-2rem md:h-3rem md:w-3rem\" *ngIf=\"showFigure\">\n        <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n          <ng-content select=\"[figureImage]\"></ng-content>\n          <img\n            *ngIf=\"figureImage && !figureImageLoadError\"\n            [ocxSrc]=\"figureImage\"\n            alt=\"Figure image\"\n            class=\"w-full\"\n            (error)=\"handleImageError()\"\n          />\n        </div>\n        <div\n          class=\"colorblob flex-1 border-round\"\n          *ngIf=\"previewImage.children.length === 0 || figureImageLoadError\"\n        ></div>\n      </div>\n      <ng-template #skeletonBar>\n        <div class=\"header justify-content-evenly\">\n          <p-skeleton width=\"10rem\"></p-skeleton>\n          <p-skeleton width=\"10rem\"></p-skeleton>\n        </div>\n      </ng-template>\n      <div class=\"header\" *ngIf=\"!loading; else skeletonBar\">\n        <h1 id=\"page-header\" *ngIf=\"!!header\">{{ header }}</h1>\n        <h2 id=\"page-subheader\" *ngIf=\"!!subheader\">{{ subheader }}</h2>\n      </div>\n    </div>\n    <div class=\"action-items-wrap mt-2 md:mt-0\">\n      <ng-container *ngIf=\"additionalToolbarContentLeft\" [ngTemplateOutlet]=\"additionalToolbarContentLeft\">\n      </ng-container>\n\n      <ng-container *ngIf=\"!disableDefaultActions\"> </ng-container>\n      <ng-template #skeletonActions>\n        <div class=\"flex\">\n          <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n          <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n        </div>\n      </ng-template>\n      <ng-container *ngIf=\"!loading; else skeletonActions\">\n        <div *ngIf=\"inlineActions && inlineActions.length > 0\" class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n          <ng-container *ngFor=\"let action of inlineActions\">\n            <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              [title]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\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.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n            ></p-button>\n          </ng-container>\n        </div>\n        <ng-content select=\"[toolbarItems]\"></ng-content>\n        <ng-container>\n          <div *ngIf=\"overflowActions.length !== 0\">\n            <button\n              id=\"pageHeaderMenuButton\"\n              type=\"button\"\n              pButton\n              icon=\"pi pi-ellipsis-v\"\n              title=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n              class=\"more-actions-menu-button action-button ml-2\"\n              (click)=\"menu.toggle($event)\"\n              name=\"ocx-page-header-overflow-action-button\"\n              [ariaLabel]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n            ></button>\n            <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n          </div>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"additionalToolbarContent\" [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"object-panel\"\n    [ngClass]=\"getObjectPanelLayoutClasses()\"\n  >\n    <ng-container *ngIf=\"objectDetails\">\n      <div\n        class=\"object-info\"\n        [ngClass]=\"getObjectInfoLayoutClasses()\"\n        *ngFor=\"let item of objectDetails\"\n      >\n        <span\n          class=\"flex font-medium text-600 object-info-grid-label\"\n          name=\"object-detail-label\"\n          [title]=\"item.labelTooltip || ''\"\n          >{{ item.label | dynamicPipe:item.labelPipe }}</span\n        >\n        <span\n          *ngIf=\"item.icon || item.value\"\n          class=\"flex text-900 align-items-center gap-2 object-info-grid-value\"\n          [ngClass]=\"generateItemStyle(item)\"\n          [title]=\"item.valueTooltip || item.tooltip || ''\"\n          name=\"object-detail-value\"\n        >\n          <i *ngIf=\"item.icon\" class=\"{{item.icon}}\" name=\"object-detail-icon\"></i>\n          {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n          <p-button\n            *ngIf=\"item.actionItemIcon && item.actionItemCallback\"\n            [icon]=\"item.actionItemIcon\"\n            styleClass=\"p-button-text p-0 w-full\"\n            [title]=\"item.actionItemTooltip || ''\"\n            (onClick)=\"item.actionItemCallback()\"\n          ></p-button>\n        </span>\n      </div>\n    </ng-container>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host(.p-button-label){font-weight:400}:host ::ng-deep .action-button{padding:.5rem;font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;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:-moz-fit-content;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .title-bar .action-items-wrap button{padding:.5rem}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none}.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: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i7.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i8.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: SrcDirective, selector: "[ocxSrc]", inputs: ["ocxSrc"], outputs: ["error"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ocx-page-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"onecx-page-header\" name=\"ocx-page-header-wrapper\">\n  <ng-container *ngIf=\"showBreadcrumbs\">\n    <p-breadcrumb\n      [model]=\"items\"\n      *ngIf=\"breadcrumbs$ | async  as items\"\n      [home]=\"(home$ | async)?.menuItem ?? {}\"\n      [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n      [attr.manual]=\"manualBreadcrumbs\"\n    ></p-breadcrumb>\n  </ng-container>\n  <div class=\"title-bar flex flex-row md:justify-content-between p-2 md:p-3\">\n    <div class=\"title-wrap\">\n      <div class=\"figure flex h-2rem w-2rem md:h-3rem md:w-3rem\" *ngIf=\"showFigure\">\n        <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n          <ng-content select=\"[figureImage]\"></ng-content>\n          <img\n            *ngIf=\"figureImage && !figureImageLoadError\"\n            [ocxSrc]=\"figureImage\"\n            alt=\"Figure image\"\n            class=\"w-full\"\n            (error)=\"handleImageError()\"\n          />\n        </div>\n        <div\n          class=\"colorblob flex-1 border-round\"\n          *ngIf=\"previewImage.children.length === 0 || figureImageLoadError\"\n        ></div>\n      </div>\n      <ng-template #skeletonBar>\n        <div class=\"header justify-content-evenly\">\n          <p-skeleton width=\"10rem\"></p-skeleton>\n          <p-skeleton width=\"10rem\"></p-skeleton>\n        </div>\n      </ng-template>\n      <div class=\"header\" *ngIf=\"!loading; else skeletonBar\">\n        <h1 id=\"page-header\" *ngIf=\"!!header\">{{ header }}</h1>\n        <h2 id=\"page-subheader\" *ngIf=\"!!subheader\">{{ subheader }}</h2>\n      </div>\n    </div>\n    <div class=\"action-items-wrap mt-2 md:mt-0\">\n      <ng-container *ngIf=\"additionalToolbarContentLeft\" [ngTemplateOutlet]=\"additionalToolbarContentLeft\">\n      </ng-container>\n\n      <ng-container *ngIf=\"!disableDefaultActions\"> </ng-container>\n      <ng-template #skeletonActions>\n        <div class=\"flex\">\n          <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n          <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n        </div>\n      </ng-template>\n      <ng-container *ngIf=\"!loading; else skeletonActions\">\n        <div *ngIf=\"inlineActions && inlineActions.length > 0\" class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n          <ng-container *ngFor=\"let action of inlineActions\">\n            <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              [title]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\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.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n            ></p-button>\n          </ng-container>\n        </div>\n        <ng-content select=\"[toolbarItems]\"></ng-content>\n        <ng-container>\n          <div *ngIf=\"overflowActions.length !== 0\">\n            <button\n              id=\"pageHeaderMenuButton\"\n              type=\"button\"\n              pButton\n              icon=\"pi pi-ellipsis-v\"\n              title=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n              class=\"more-actions-menu-button action-button ml-2\"\n              (click)=\"menu.toggle($event)\"\n              name=\"ocx-page-header-overflow-action-button\"\n              [ariaLabel]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n            ></button>\n            <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n          </div>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"additionalToolbarContent\" [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"object-panel flex-column md:flex-row\"\n    [class.justify-content-evenly]=\"objectDetails\"\n    [class.justify-content-start]=\"!objectDetails\"\n  >\n    <ng-container *ngIf=\"objectDetails\">\n      <div\n        class=\"object-info flex flex-row md:flex-column align-items-baseline md:align-items-center justify-content-between\"\n        *ngFor=\"let item of objectDetails\"\n      >\n        <label class=\"flex font-medium text-600\" name=\"object-detail-label\"\n          >{{ item.label | dynamicPipe:item.labelPipe }}</label\n        >\n        <span\n          *ngIf=\"item.icon || item.value\"\n          class=\"flex text-900 mt-2\"\n          [ngClass]=\"generateItemStyle(item)\"\n          [title]=\"item.tooltip || ''\"\n          name=\"object-detail-value\"\n        >\n          <i *ngIf=\"item.icon\" class=\"{{item.icon}}\" name=\"object-detail-icon\"></i>\n          {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}</span\n        >\n      </div>\n    </ng-container>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host(.p-button-label){font-weight:400}:host ::ng-deep .action-button{padding:.5rem;font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;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:-moz-fit-content;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .title-bar .action-items-wrap button{padding:.5rem}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem;display:flex}.onecx-page-header .object-panel:empty{display:none}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}\n"] }]
+            args: [{ selector: 'ocx-page-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"onecx-page-header\" name=\"ocx-page-header-wrapper\">\n  <ng-container *ngIf=\"showBreadcrumbs\">\n    <p-breadcrumb\n      [model]=\"items\"\n      *ngIf=\"breadcrumbs$ | async  as items\"\n      [home]=\"(home$ | async)?.menuItem ?? {}\"\n      [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n      [attr.manual]=\"manualBreadcrumbs\"\n    ></p-breadcrumb>\n  </ng-container>\n  <div class=\"title-bar flex flex-row md:justify-content-between p-2 md:p-3\">\n    <div class=\"title-wrap\">\n      <div class=\"figure flex h-2rem w-2rem md:h-3rem md:w-3rem\" *ngIf=\"showFigure\">\n        <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n          <ng-content select=\"[figureImage]\"></ng-content>\n          <img\n            *ngIf=\"figureImage && !figureImageLoadError\"\n            [ocxSrc]=\"figureImage\"\n            alt=\"Figure image\"\n            class=\"w-full\"\n            (error)=\"handleImageError()\"\n          />\n        </div>\n        <div\n          class=\"colorblob flex-1 border-round\"\n          *ngIf=\"previewImage.children.length === 0 || figureImageLoadError\"\n        ></div>\n      </div>\n      <ng-template #skeletonBar>\n        <div class=\"header justify-content-evenly\">\n          <p-skeleton width=\"10rem\"></p-skeleton>\n          <p-skeleton width=\"10rem\"></p-skeleton>\n        </div>\n      </ng-template>\n      <div class=\"header\" *ngIf=\"!loading; else skeletonBar\">\n        <h1 id=\"page-header\" *ngIf=\"!!header\">{{ header }}</h1>\n        <h2 id=\"page-subheader\" *ngIf=\"!!subheader\">{{ subheader }}</h2>\n      </div>\n    </div>\n    <div class=\"action-items-wrap mt-2 md:mt-0\">\n      <ng-container *ngIf=\"additionalToolbarContentLeft\" [ngTemplateOutlet]=\"additionalToolbarContentLeft\">\n      </ng-container>\n\n      <ng-container *ngIf=\"!disableDefaultActions\"> </ng-container>\n      <ng-template #skeletonActions>\n        <div class=\"flex\">\n          <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n          <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n        </div>\n      </ng-template>\n      <ng-container *ngIf=\"!loading; else skeletonActions\">\n        <div *ngIf=\"inlineActions && inlineActions.length > 0\" class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n          <ng-container *ngFor=\"let action of inlineActions\">\n            <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              [title]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\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.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n            ></p-button>\n          </ng-container>\n        </div>\n        <ng-content select=\"[toolbarItems]\"></ng-content>\n        <ng-container>\n          <div *ngIf=\"overflowActions.length !== 0\">\n            <button\n              id=\"pageHeaderMenuButton\"\n              type=\"button\"\n              pButton\n              icon=\"pi pi-ellipsis-v\"\n              title=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n              class=\"more-actions-menu-button action-button ml-2\"\n              (click)=\"menu.toggle($event)\"\n              name=\"ocx-page-header-overflow-action-button\"\n              [ariaLabel]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n            ></button>\n            <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n          </div>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"additionalToolbarContent\" [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"object-panel\"\n    [ngClass]=\"getObjectPanelLayoutClasses()\"\n  >\n    <ng-container *ngIf=\"objectDetails\">\n      <div\n        class=\"object-info\"\n        [ngClass]=\"getObjectInfoLayoutClasses()\"\n        *ngFor=\"let item of objectDetails\"\n      >\n        <span\n          class=\"flex font-medium text-600 object-info-grid-label\"\n          name=\"object-detail-label\"\n          [title]=\"item.labelTooltip || ''\"\n          >{{ item.label | dynamicPipe:item.labelPipe }}</span\n        >\n        <span\n          *ngIf=\"item.icon || item.value\"\n          class=\"flex text-900 align-items-center gap-2 object-info-grid-value\"\n          [ngClass]=\"generateItemStyle(item)\"\n          [title]=\"item.valueTooltip || item.tooltip || ''\"\n          name=\"object-detail-value\"\n        >\n          <i *ngIf=\"item.icon\" class=\"{{item.icon}}\" name=\"object-detail-icon\"></i>\n          {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n          <p-button\n            *ngIf=\"item.actionItemIcon && item.actionItemCallback\"\n            [icon]=\"item.actionItemIcon\"\n            styleClass=\"p-button-text p-0 w-full\"\n            [title]=\"item.actionItemTooltip || ''\"\n            (onClick)=\"item.actionItemCallback()\"\n          ></p-button>\n        </span>\n      </div>\n    </ng-container>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host(.p-button-label){font-weight:400}:host ::ng-deep .action-button{padding:.5rem;font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;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:-moz-fit-content;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .title-bar .action-items-wrap button{padding:.5rem}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none}.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: function () { return [{ type: BreadcrumbService }, { type: i1$1.TranslateService }, { type: i3.AppStateService }, { type: i3.UserService }]; }, propDecorators: { header: [{
                 type: Input
             }], loading: [{
@@ -533,6 +557,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], manualBreadcrumbs: [{
                 type: Input
+            }], enableGridView: [{
+                type: Input
+            }], gridLayoutDesktopColumns: [{
+                type: Input
             }], save: [{
                 type: Output
             }], additionalToolbarContent: [{
@@ -635,7 +663,7 @@ class SearchHeaderComponent {
     }
 }
 SearchHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SearchHeaderComponent, selector: "ocx-search-header", inputs: { searchConfigs: "searchConfigs", header: "header", headline: "headline", subheader: "subheader", viewMode: "viewMode", manualBreadcrumbs: "manualBreadcrumbs", actions: "actions" }, outputs: { searched: "searched", resetted: "resetted", selectedSearchConfigChanged: "selectedSearchConfigChanged", viewModeChanged: "viewModeChanged" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], 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    <ocx-search-config [searchConfigs]=\"searchConfigs\" (selectedSearchConfigChanged)=\"confirmSearchConfig($event)\">\n    </ocx-search-config>\n    <ng-container *ngIf=\"_additionalToolbarContentLeft\" [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"></ng-container>\n  </ng-template>\n  <ng-template #additionalToolbarContent>\n    <ng-container *ngIf=\"_additionalToolbarContent\" [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\n  </ng-template>\n  <div class=\"search-criteria-container\">\n    <div #searchParameterFields>\n      <ng-content></ng-content>\n      <div class=\"search-criteria-buttons\">\n        <p-button\n          id=\"resetButton\"\n          *ngIf=\"resetted.observed\"\n          (onClick)=\"onResetClicked()\"\n          label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n          icon=\"pi pi-eraser\"\n          [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate\"\n          title=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n        >\n        </p-button>\n\n        <p-button\n          id=\"searchButton\"\n          (onClick)=\"onSearchClicked()\"\n          label=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}\"\n          icon=\"pi pi-search\"\n          [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate\"\n          title=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n        >\n        </p-button>\n      </div>\n    </div>\n  </div>\n</ocx-page-header>\n", styles: [".search-criteria-buttons{display:flex;flex-flow:row;align-items:flex-start;gap:.5rem;margin-top:.5rem}.search-criteria-container{width:100%;display:flex}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SearchConfigComponent, selector: "ocx-search-config", inputs: ["searchConfigs", "placeholderKey"], outputs: ["selectedSearchConfigChanged"] }, { kind: "component", type: PageHeaderComponent, selector: "ocx-page-header", inputs: ["header", "loading", "figureBackground", "showFigure", "figureImage", "disableDefaultActions", "subheader", "actions", "objectDetails", "showBreadcrumbs", "manualBreadcrumbs"], outputs: ["save"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+SearchHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SearchHeaderComponent, selector: "ocx-search-header", inputs: { searchConfigs: "searchConfigs", header: "header", headline: "headline", subheader: "subheader", viewMode: "viewMode", manualBreadcrumbs: "manualBreadcrumbs", actions: "actions" }, outputs: { searched: "searched", resetted: "resetted", selectedSearchConfigChanged: "selectedSearchConfigChanged", viewModeChanged: "viewModeChanged" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], 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    <ocx-search-config [searchConfigs]=\"searchConfigs\" (selectedSearchConfigChanged)=\"confirmSearchConfig($event)\">\n    </ocx-search-config>\n    <ng-container *ngIf=\"_additionalToolbarContentLeft\" [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"></ng-container>\n  </ng-template>\n  <ng-template #additionalToolbarContent>\n    <ng-container *ngIf=\"_additionalToolbarContent\" [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\n  </ng-template>\n  <div class=\"search-criteria-container\">\n    <div #searchParameterFields>\n      <ng-content></ng-content>\n      <div class=\"search-criteria-buttons\">\n        <p-button\n          id=\"resetButton\"\n          *ngIf=\"resetted.observed\"\n          (onClick)=\"onResetClicked()\"\n          label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n          icon=\"pi pi-eraser\"\n          [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate\"\n          title=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n        >\n        </p-button>\n\n        <p-button\n          id=\"searchButton\"\n          (onClick)=\"onSearchClicked()\"\n          label=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}\"\n          icon=\"pi pi-search\"\n          [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate\"\n          title=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n        >\n        </p-button>\n      </div>\n    </div>\n  </div>\n</ocx-page-header>\n", styles: [".search-criteria-buttons{display:flex;flex-flow:row;align-items:flex-start;gap:.5rem;margin-top:.5rem}.search-criteria-container{width:100%;display:flex}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SearchConfigComponent, selector: "ocx-search-config", inputs: ["searchConfigs", "placeholderKey"], outputs: ["selectedSearchConfigChanged"] }, { 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: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ocx-search-header', 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    <ocx-search-config [searchConfigs]=\"searchConfigs\" (selectedSearchConfigChanged)=\"confirmSearchConfig($event)\">\n    </ocx-search-config>\n    <ng-container *ngIf=\"_additionalToolbarContentLeft\" [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"></ng-container>\n  </ng-template>\n  <ng-template #additionalToolbarContent>\n    <ng-container *ngIf=\"_additionalToolbarContent\" [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\n  </ng-template>\n  <div class=\"search-criteria-container\">\n    <div #searchParameterFields>\n      <ng-content></ng-content>\n      <div class=\"search-criteria-buttons\">\n        <p-button\n          id=\"resetButton\"\n          *ngIf=\"resetted.observed\"\n          (onClick)=\"onResetClicked()\"\n          label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n          icon=\"pi pi-eraser\"\n          [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate\"\n          title=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n        >\n        </p-button>\n\n        <p-button\n          id=\"searchButton\"\n          (onClick)=\"onSearchClicked()\"\n          label=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}\"\n          icon=\"pi pi-search\"\n          [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate\"\n          title=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n        >\n        </p-button>\n      </div>\n    </div>\n  </div>\n</ocx-page-header>\n", styles: [".search-criteria-buttons{display:flex;flex-flow:row;align-items:flex-start;gap:.5rem;margin-top:.5rem}.search-criteria-container{width:100%;display:flex}\n"] }]