@onecx/angular-accelerator 4.15.1 → 4.15.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -482,10 +482,10 @@ class PageHeaderComponent {
482
482
  }
483
483
  }
484
484
  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 });
485
- 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 *ngIf=\"figureImage\" [src]=\"figureImage\" alt=\"Figure image\" class=\"w-full\" />\n </div>\n <div class=\"colorblob flex-1 border-round\" *ngIf=\"previewImage.children.length === 0\"></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\"> </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\">{{ item.label | dynamicPipe:item.labelPipe }}</label>\n <span\n *ngIf=\"item.icon || item.value\"\n class=\"flex text-900 mt-2\"\n [ngClass]=\"item.icon ? 'gap-1 align-items-center' : null\"\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: "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 });
485
+ 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 *ngIf=\"figureImage\" [ocxSrc]=\"figureImage\" alt=\"Figure image\" class=\"w-full\" />\n </div>\n <div class=\"colorblob flex-1 border-round\" *ngIf=\"previewImage.children.length === 0\"></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\"> </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\">{{ item.label | dynamicPipe:item.labelPipe }}</label>\n <span\n *ngIf=\"item.icon || item.value\"\n class=\"flex text-900 mt-2\"\n [ngClass]=\"item.icon ? 'gap-1 align-items-center' : null\"\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"] }, { 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 });
486
486
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PageHeaderComponent, decorators: [{
487
487
  type: Component,
488
- 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 *ngIf=\"figureImage\" [src]=\"figureImage\" alt=\"Figure image\" class=\"w-full\" />\n </div>\n <div class=\"colorblob flex-1 border-round\" *ngIf=\"previewImage.children.length === 0\"></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\"> </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\">{{ item.label | dynamicPipe:item.labelPipe }}</label>\n <span\n *ngIf=\"item.icon || item.value\"\n class=\"flex text-900 mt-2\"\n [ngClass]=\"item.icon ? 'gap-1 align-items-center' : null\"\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"] }]
488
+ 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 *ngIf=\"figureImage\" [ocxSrc]=\"figureImage\" alt=\"Figure image\" class=\"w-full\" />\n </div>\n <div class=\"colorblob flex-1 border-round\" *ngIf=\"previewImage.children.length === 0\"></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\"> </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\">{{ item.label | dynamicPipe:item.labelPipe }}</label>\n <span\n *ngIf=\"item.icon || item.value\"\n class=\"flex text-900 mt-2\"\n [ngClass]=\"item.icon ? 'gap-1 align-items-center' : null\"\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"] }]
489
489
  }], ctorParameters: function () { return [{ type: BreadcrumbService }, { type: i1$1.TranslateService }, { type: i3.AppStateService }, { type: i3.UserService }]; }, propDecorators: { header: [{
490
490
  type: Input
491
491
  }], loading: [{
@@ -3141,6 +3141,7 @@ AngularAcceleratorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0"
3141
3141
  },
3142
3142
  deps: [UserService],
3143
3143
  },
3144
+ AppConfigService,
3144
3145
  ], imports: [CommonModule,
3145
3146
  AngularAcceleratorPrimeNgModule,
3146
3147
  TranslateModule.forRoot({
@@ -3200,7 +3201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
3200
3201
  SrcDirective,
3201
3202
  OcxTimeAgoPipe,
3202
3203
  SrcDirective,
3203
- AdvancedDirective
3204
+ AdvancedDirective,
3204
3205
  ],
3205
3206
  providers: [
3206
3207
  {
@@ -3210,6 +3211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
3210
3211
  },
3211
3212
  deps: [UserService],
3212
3213
  },
3214
+ AppConfigService,
3213
3215
  ],
3214
3216
  exports: [
3215
3217
  ColumnGroupSelectionComponent,