@onecx/angular-accelerator 7.5.0 → 7.6.1
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.
|
@@ -454,6 +454,12 @@ class OcxTooltipDirective extends Tooltip {
|
|
|
454
454
|
this.content = value;
|
|
455
455
|
this.setOption({ tooltipLabel: value });
|
|
456
456
|
this.ensureIdAndAriaDescribedBy();
|
|
457
|
+
if (value) {
|
|
458
|
+
this.renderer.setStyle(this.el.nativeElement, 'cursor', 'pointer');
|
|
459
|
+
}
|
|
460
|
+
else {
|
|
461
|
+
this.renderer.removeStyle(this.el.nativeElement, 'cursor');
|
|
462
|
+
}
|
|
457
463
|
}
|
|
458
464
|
constructor() {
|
|
459
465
|
const zone = inject(NgZone);
|
|
@@ -876,11 +882,11 @@ class PageHeaderComponent {
|
|
|
876
882
|
}));
|
|
877
883
|
}
|
|
878
884
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
879
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PageHeaderComponent, isStandalone: false, selector: "ocx-page-header", inputs: { header: "header", loading: "loading", figureBackground: "figureBackground", showFigure: "showFigure", figureImage: "figureImage", disableDefaultActions: "disableDefaultActions", subheader: "subheader", actions: "actions", objectDetails: "objectDetails", showBreadcrumbs: "showBreadcrumbs", manualBreadcrumbs: "manualBreadcrumbs", enableGridView: "enableGridView", gridLayoutDesktopColumns: "gridLayoutDesktopColumns" }, outputs: { save: "save" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }], ngImport: i0, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n <p-breadcrumb\n [model]=\"items\"\n [home]=\"(home$ | async)?.menuItem ?? {}\"\n [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n [attr.manual]=\"manualBreadcrumbs\"\n ></p-breadcrumb>\n } }\n <div class=\"title-bar flex flex-row md:justify-content-between align-items-center p-3\">\n <div class=\"title-wrap\">\n @if (showFigure) {\n <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n <ng-content select=\"[figureImage]\"></ng-content>\n @if (figureImage && !figureImageLoadError) {\n <img [ocxSrc]=\"figureImage\" alt=\"Figure\" class=\"w-full border-round-sm\" (error)=\"handleImageError()\" />\n }\n </div>\n @if (previewImage.children.length === 0 || figureImageLoadError) {\n <div class=\"colorblob flex-1 border-round\"></div>\n }\n </div>\n } @if (!loading) {\n <div class=\"header\">\n @if (!!header) {\n <h1 id=\"page-header\">{{ header }}</h1>\n } @if (!!subheader) {\n <div id=\"page-subheader\" role=\"note\" [attr.aria-label]=\"'OCX_PAGE_HEADER.SUBHEADER' | translate\">\n {{ subheader }}\n </div>\n }\n </div>\n } @else {\n <div class=\"header justify-content-evenly\">\n <p-skeleton width=\"10rem\"></p-skeleton>\n <p-skeleton width=\"10rem\"></p-skeleton>\n </div>\n }\n </div>\n\n <div class=\"action-items-wrap mt-2 md:mt-0\">\n @if (additionalToolbarContentLeft) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n } @if (!loading) { @if( inlineActions$ | async; as inlineActions) { @if (inlineActions && inlineActions.length >\n 0) {\n <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n @for (action of inlineActions; track action) {\n <span\n [ocxTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n >\n <p-button\n [id]=\"action.id\"\n [icon]=\"action.icon ?? ''\"\n [iconPos]=\"action.iconPos ?? 'left'\"\n type=\"button\"\n class=\"action-button\"\n (onClick)=\"action.actionCallback()\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </span>\n }\n </div>\n } }\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n @if(overflowActions$ | async; as overflowActions) {@if (overflowActions.length !== 0) {\n <div>\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n [ocxTooltip]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n } }\n </ng-container>\n } @else {\n <div class=\"flex\">\n <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n } @if (additionalToolbarContent) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n }\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n @if (objectDetails) { @for (item of objectDetails; track item) {\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n <span\n class=\"flex font-medium text-600 object-info-grid-label\"\n name=\"object-detail-label\"\n [ocxTooltip]=\"item.labelTooltipKey ? ((typeof item.labelTooltipKey === 'string' ? item.labelTooltipKey : item.labelTooltipKey.key) | translate : (typeof item.labelTooltipKey === 'object' ? item.labelTooltipKey.parameters : undefined)) : ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n {{ item.label | dynamicPipe:item.labelPipe }}\n </span>\n @if (item.icon || item.value) {\n <span class=\"object-info-grid-value\">\n <span\n class=\"flex text-900 align-items-center gap-2 w-max\"\n [ngClass]=\"generateItemStyle(item)\"\n name=\"object-detail-value\"\n >\n <span\n class=\"flex align-items-center gap-2\"\n [ocxTooltip]=\"item.valueTooltipKey ? ((typeof item.valueTooltipKey === 'string' ? item.valueTooltipKey : item.valueTooltipKey.key) | translate : (typeof item.valueTooltipKey === 'object' ? item.valueTooltipKey.parameters : undefined)) : ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n @if (item.icon) {\n <i [class]=\"item.icon + ' ' + (item.iconStyleClass ?? '')\" name=\"object-detail-icon\"></i>\n } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n @if (item.actionItemIcon && item.actionItemCallback) {\n <p-button\n [icon]=\"item.actionItemIcon\"\n styleClass=\"p-button-text p-0 w-full\"\n [ariaLabel]=\"item.actionItemAriaLabelKey ? ((typeof item.actionItemAriaLabelKey === 'string' ? item.actionItemAriaLabelKey : item.actionItemAriaLabelKey.key) | translate : (typeof item.actionItemAriaLabelKey === 'object' ? item.actionItemAriaLabelKey.parameters : undefined)) : 'button for ' + item.actionItemIcon\"\n [ocxTooltip]=\"item.actionItemTooltipKey ? ((typeof item.actionItemTooltipKey === 'string' ? item.actionItemTooltipKey : item.actionItemTooltipKey.key) | translate : (typeof item.actionItemTooltipKey === 'object' ? item.actionItemTooltipKey.parameters : undefined)) : ''\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n }\n </span>\n </span>\n }\n </div>\n } }\n <ng-content></ng-content>\n </div>\n</div>", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "directive", type: SrcDirective, selector: "[ocxSrc]", inputs: ["ocxSrc"], outputs: ["error"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
885
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PageHeaderComponent, isStandalone: false, selector: "ocx-page-header", inputs: { header: "header", loading: "loading", figureBackground: "figureBackground", showFigure: "showFigure", figureImage: "figureImage", disableDefaultActions: "disableDefaultActions", subheader: "subheader", actions: "actions", objectDetails: "objectDetails", showBreadcrumbs: "showBreadcrumbs", manualBreadcrumbs: "manualBreadcrumbs", enableGridView: "enableGridView", gridLayoutDesktopColumns: "gridLayoutDesktopColumns" }, outputs: { save: "save" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }], ngImport: i0, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n <p-breadcrumb\n [model]=\"items\"\n [home]=\"(home$ | async)?.menuItem ?? {}\"\n [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n [attr.manual]=\"manualBreadcrumbs\"\n ></p-breadcrumb>\n } }\n <div class=\"title-bar flex flex-row md:justify-content-between align-items-center p-3\">\n <div class=\"title-wrap\">\n @if (showFigure) {\n <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n <ng-content select=\"[figureImage]\"></ng-content>\n @if (figureImage && !figureImageLoadError) {\n <img [ocxSrc]=\"figureImage\" alt=\"Figure\" class=\"w-full border-round-sm\" (error)=\"handleImageError()\" />\n }\n </div>\n @if (previewImage.children.length === 0 || figureImageLoadError) {\n <div class=\"colorblob flex-1 border-round\"></div>\n }\n </div>\n } @if (!loading) {\n <div class=\"header\">\n @if (!!header) {\n <h1 id=\"page-header\">{{ header }}</h1>\n } @if (!!subheader) {\n <div id=\"page-subheader\" role=\"note\" [attr.aria-label]=\"'OCX_PAGE_HEADER.SUBHEADER' | translate\">\n {{ subheader }}\n </div>\n }\n </div>\n } @else {\n <div class=\"header justify-content-evenly\">\n <p-skeleton width=\"10rem\"></p-skeleton>\n <p-skeleton width=\"10rem\"></p-skeleton>\n </div>\n }\n </div>\n\n <div class=\"action-items-wrap mt-2 md:mt-0\">\n @if (additionalToolbarContentLeft) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n } @if (!loading) { @if( inlineActions$ | async; as inlineActions) { @if (inlineActions && inlineActions.length >\n 0) {\n <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n @for (action of inlineActions; track action) {\n <span\n [ocxTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n >\n <p-button\n [id]=\"action.id\"\n [icon]=\"action.icon ?? ''\"\n [iconPos]=\"action.iconPos ?? 'left'\"\n type=\"button\"\n class=\"action-button\"\n (onClick)=\"action.actionCallback()\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </span>\n }\n </div>\n } }\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n @if(overflowActions$ | async; as overflowActions) {@if (overflowActions.length !== 0) {\n <div>\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n [ocxTooltip]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n } }\n </ng-container>\n } @else {\n <div class=\"flex\">\n <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n } @if (additionalToolbarContent) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n }\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n @if (objectDetails) { @for (item of objectDetails; track item) {\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n <span\n class=\"flex font-medium text-600 object-info-grid-label\"\n name=\"object-detail-label\"\n [ocxTooltip]=\"item.labelTooltipKey ? ((typeof item.labelTooltipKey === 'string' ? item.labelTooltipKey : item.labelTooltipKey.key) | translate : (typeof item.labelTooltipKey === 'object' ? item.labelTooltipKey.parameters : undefined)) : ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n {{ item.label | dynamicPipe:item.labelPipe }}\n </span>\n @if (item.icon || item.value) {\n <span class=\"object-info-grid-value\">\n <span\n class=\"flex text-900 align-items-center gap-2 w-max\"\n [ngClass]=\"generateItemStyle(item)\"\n name=\"object-detail-value\"\n >\n <span\n class=\"flex align-items-center gap-2\"\n [ocxTooltip]=\"item.valueTooltipKey ? ((typeof item.valueTooltipKey === 'string' ? item.valueTooltipKey : item.valueTooltipKey.key) | translate : (typeof item.valueTooltipKey === 'object' ? item.valueTooltipKey.parameters : undefined)) : ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n @if (item.icon) {\n <i [class]=\"item.icon + ' ' + (item.iconStyleClass ?? '')\" name=\"object-detail-icon\" aria-hidden=\"true\"></i>\n } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n @if (item.actionItemIcon && item.actionItemCallback) {\n <p-button\n [icon]=\"item.actionItemIcon\"\n styleClass=\"p-button-text p-0 w-full\"\n [ariaLabel]=\"item.actionItemAriaLabelKey ? ((typeof item.actionItemAriaLabelKey === 'string' ? item.actionItemAriaLabelKey : item.actionItemAriaLabelKey.key) | translate : (typeof item.actionItemAriaLabelKey === 'object' ? item.actionItemAriaLabelKey.parameters : undefined)) : 'button for ' + item.actionItemIcon\"\n [ocxTooltip]=\"item.actionItemTooltipKey ? ((typeof item.actionItemTooltipKey === 'string' ? item.actionItemTooltipKey : item.actionItemTooltipKey.key) | translate : (typeof item.actionItemTooltipKey === 'object' ? item.actionItemTooltipKey.parameters : undefined)) : ''\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n }\n </span>\n </span>\n }\n </div>\n } }\n <ng-content></ng-content>\n </div>\n</div>", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "directive", type: SrcDirective, selector: "[ocxSrc]", inputs: ["ocxSrc"], outputs: ["error"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
880
886
|
}
|
|
881
887
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
882
888
|
type: Component,
|
|
883
|
-
args: [{ standalone: false, selector: 'ocx-page-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n <p-breadcrumb\n [model]=\"items\"\n [home]=\"(home$ | async)?.menuItem ?? {}\"\n [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n [attr.manual]=\"manualBreadcrumbs\"\n ></p-breadcrumb>\n } }\n <div class=\"title-bar flex flex-row md:justify-content-between align-items-center p-3\">\n <div class=\"title-wrap\">\n @if (showFigure) {\n <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n <ng-content select=\"[figureImage]\"></ng-content>\n @if (figureImage && !figureImageLoadError) {\n <img [ocxSrc]=\"figureImage\" alt=\"Figure\" class=\"w-full border-round-sm\" (error)=\"handleImageError()\" />\n }\n </div>\n @if (previewImage.children.length === 0 || figureImageLoadError) {\n <div class=\"colorblob flex-1 border-round\"></div>\n }\n </div>\n } @if (!loading) {\n <div class=\"header\">\n @if (!!header) {\n <h1 id=\"page-header\">{{ header }}</h1>\n } @if (!!subheader) {\n <div id=\"page-subheader\" role=\"note\" [attr.aria-label]=\"'OCX_PAGE_HEADER.SUBHEADER' | translate\">\n {{ subheader }}\n </div>\n }\n </div>\n } @else {\n <div class=\"header justify-content-evenly\">\n <p-skeleton width=\"10rem\"></p-skeleton>\n <p-skeleton width=\"10rem\"></p-skeleton>\n </div>\n }\n </div>\n\n <div class=\"action-items-wrap mt-2 md:mt-0\">\n @if (additionalToolbarContentLeft) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n } @if (!loading) { @if( inlineActions$ | async; as inlineActions) { @if (inlineActions && inlineActions.length >\n 0) {\n <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n @for (action of inlineActions; track action) {\n <span\n [ocxTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n >\n <p-button\n [id]=\"action.id\"\n [icon]=\"action.icon ?? ''\"\n [iconPos]=\"action.iconPos ?? 'left'\"\n type=\"button\"\n class=\"action-button\"\n (onClick)=\"action.actionCallback()\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </span>\n }\n </div>\n } }\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n @if(overflowActions$ | async; as overflowActions) {@if (overflowActions.length !== 0) {\n <div>\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n [ocxTooltip]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n } }\n </ng-container>\n } @else {\n <div class=\"flex\">\n <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n } @if (additionalToolbarContent) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n }\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n @if (objectDetails) { @for (item of objectDetails; track item) {\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n <span\n class=\"flex font-medium text-600 object-info-grid-label\"\n name=\"object-detail-label\"\n [ocxTooltip]=\"item.labelTooltipKey ? ((typeof item.labelTooltipKey === 'string' ? item.labelTooltipKey : item.labelTooltipKey.key) | translate : (typeof item.labelTooltipKey === 'object' ? item.labelTooltipKey.parameters : undefined)) : ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n {{ item.label | dynamicPipe:item.labelPipe }}\n </span>\n @if (item.icon || item.value) {\n <span class=\"object-info-grid-value\">\n <span\n class=\"flex text-900 align-items-center gap-2 w-max\"\n [ngClass]=\"generateItemStyle(item)\"\n name=\"object-detail-value\"\n >\n <span\n class=\"flex align-items-center gap-2\"\n [ocxTooltip]=\"item.valueTooltipKey ? ((typeof item.valueTooltipKey === 'string' ? item.valueTooltipKey : item.valueTooltipKey.key) | translate : (typeof item.valueTooltipKey === 'object' ? item.valueTooltipKey.parameters : undefined)) : ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n @if (item.icon) {\n <i [class]=\"item.icon + ' ' + (item.iconStyleClass ?? '')\" name=\"object-detail-icon\"></i>\n } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n @if (item.actionItemIcon && item.actionItemCallback) {\n <p-button\n [icon]=\"item.actionItemIcon\"\n styleClass=\"p-button-text p-0 w-full\"\n [ariaLabel]=\"item.actionItemAriaLabelKey ? ((typeof item.actionItemAriaLabelKey === 'string' ? item.actionItemAriaLabelKey : item.actionItemAriaLabelKey.key) | translate : (typeof item.actionItemAriaLabelKey === 'object' ? item.actionItemAriaLabelKey.parameters : undefined)) : 'button for ' + item.actionItemIcon\"\n [ocxTooltip]=\"item.actionItemTooltipKey ? ((typeof item.actionItemTooltipKey === 'string' ? item.actionItemTooltipKey : item.actionItemTooltipKey.key) | translate : (typeof item.actionItemTooltipKey === 'object' ? item.actionItemTooltipKey.parameters : undefined)) : ''\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n }\n </span>\n </span>\n }\n </div>\n } }\n <ng-content></ng-content>\n </div>\n</div>", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"] }]
|
|
889
|
+
args: [{ standalone: false, selector: 'ocx-page-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n <p-breadcrumb\n [model]=\"items\"\n [home]=\"(home$ | async)?.menuItem ?? {}\"\n [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n [attr.manual]=\"manualBreadcrumbs\"\n ></p-breadcrumb>\n } }\n <div class=\"title-bar flex flex-row md:justify-content-between align-items-center p-3\">\n <div class=\"title-wrap\">\n @if (showFigure) {\n <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n <ng-content select=\"[figureImage]\"></ng-content>\n @if (figureImage && !figureImageLoadError) {\n <img [ocxSrc]=\"figureImage\" alt=\"Figure\" class=\"w-full border-round-sm\" (error)=\"handleImageError()\" />\n }\n </div>\n @if (previewImage.children.length === 0 || figureImageLoadError) {\n <div class=\"colorblob flex-1 border-round\"></div>\n }\n </div>\n } @if (!loading) {\n <div class=\"header\">\n @if (!!header) {\n <h1 id=\"page-header\">{{ header }}</h1>\n } @if (!!subheader) {\n <div id=\"page-subheader\" role=\"note\" [attr.aria-label]=\"'OCX_PAGE_HEADER.SUBHEADER' | translate\">\n {{ subheader }}\n </div>\n }\n </div>\n } @else {\n <div class=\"header justify-content-evenly\">\n <p-skeleton width=\"10rem\"></p-skeleton>\n <p-skeleton width=\"10rem\"></p-skeleton>\n </div>\n }\n </div>\n\n <div class=\"action-items-wrap mt-2 md:mt-0\">\n @if (additionalToolbarContentLeft) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n } @if (!loading) { @if( inlineActions$ | async; as inlineActions) { @if (inlineActions && inlineActions.length >\n 0) {\n <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n @for (action of inlineActions; track action) {\n <span\n [ocxTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n >\n <p-button\n [id]=\"action.id\"\n [icon]=\"action.icon ?? ''\"\n [iconPos]=\"action.iconPos ?? 'left'\"\n type=\"button\"\n class=\"action-button\"\n (onClick)=\"action.actionCallback()\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </span>\n }\n </div>\n } }\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n @if(overflowActions$ | async; as overflowActions) {@if (overflowActions.length !== 0) {\n <div>\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n [ocxTooltip]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n } }\n </ng-container>\n } @else {\n <div class=\"flex\">\n <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n } @if (additionalToolbarContent) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n }\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n @if (objectDetails) { @for (item of objectDetails; track item) {\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n <span\n class=\"flex font-medium text-600 object-info-grid-label\"\n name=\"object-detail-label\"\n [ocxTooltip]=\"item.labelTooltipKey ? ((typeof item.labelTooltipKey === 'string' ? item.labelTooltipKey : item.labelTooltipKey.key) | translate : (typeof item.labelTooltipKey === 'object' ? item.labelTooltipKey.parameters : undefined)) : ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n {{ item.label | dynamicPipe:item.labelPipe }}\n </span>\n @if (item.icon || item.value) {\n <span class=\"object-info-grid-value\">\n <span\n class=\"flex text-900 align-items-center gap-2 w-max\"\n [ngClass]=\"generateItemStyle(item)\"\n name=\"object-detail-value\"\n >\n <span\n class=\"flex align-items-center gap-2\"\n [ocxTooltip]=\"item.valueTooltipKey ? ((typeof item.valueTooltipKey === 'string' ? item.valueTooltipKey : item.valueTooltipKey.key) | translate : (typeof item.valueTooltipKey === 'object' ? item.valueTooltipKey.parameters : undefined)) : ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n @if (item.icon) {\n <i [class]=\"item.icon + ' ' + (item.iconStyleClass ?? '')\" name=\"object-detail-icon\" aria-hidden=\"true\"></i>\n } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n @if (item.actionItemIcon && item.actionItemCallback) {\n <p-button\n [icon]=\"item.actionItemIcon\"\n styleClass=\"p-button-text p-0 w-full\"\n [ariaLabel]=\"item.actionItemAriaLabelKey ? ((typeof item.actionItemAriaLabelKey === 'string' ? item.actionItemAriaLabelKey : item.actionItemAriaLabelKey.key) | translate : (typeof item.actionItemAriaLabelKey === 'object' ? item.actionItemAriaLabelKey.parameters : undefined)) : 'button for ' + item.actionItemIcon\"\n [ocxTooltip]=\"item.actionItemTooltipKey ? ((typeof item.actionItemTooltipKey === 'string' ? item.actionItemTooltipKey : item.actionItemTooltipKey.key) | translate : (typeof item.actionItemTooltipKey === 'object' ? item.actionItemTooltipKey.parameters : undefined)) : ''\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n }\n </span>\n </span>\n }\n </div>\n } }\n <ng-content></ng-content>\n </div>\n</div>", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"] }]
|
|
884
890
|
}], ctorParameters: () => [], propDecorators: { header: [{
|
|
885
891
|
type: Input
|
|
886
892
|
}], loading: [{
|
|
@@ -1353,11 +1359,11 @@ class ColumnGroupSelectionComponent {
|
|
|
1353
1359
|
});
|
|
1354
1360
|
}
|
|
1355
1361
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ColumnGroupSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1356
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ColumnGroupSelectionComponent, isStandalone: false, selector: "ocx-column-group-selection", inputs: { selectedGroupKey: "selectedGroupKey", columns: "columns", placeholderKey: "placeholderKey", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey" }, outputs: { groupSelectionChanged: "groupSelectionChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-floatlabel variant=\"on\">\n @if ((allGroupKeys$ | async)?.length) {\n <p-select\n inputId=\"columnGroupSelectionDropdown\"\n id=\"columnGroupSelectionDropdownElement\"\n (onChange)=\"changeGroupSelection($event)\"\n [options]=\"(allGroupKeys$ | async) || []\"\n [placeholder]=\"placeholderKey | translate\"\n [(ngModel)]=\"selectedGroupKey\"\n [ariaLabel]=\"'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABEL' | translate\"\n >\n <ng-template let-item #item> {{ item ? (item | translate) : ''}} </ng-template>\n <ng-template let-item #selectedItem> {{ item ? (item | translate) : ''}} </ng-template>\n </p-select>\n }\n @if ((allGroupKeys$ | async)?.length) {\n <label for=\"columnGroupSelectionDropdown\"\n >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n >\n }\n </p-floatlabel>\n", styles: [":host ::ng-deep .p-select{min-width:12rem}\n"], dependencies: [{ kind: "component", type: i1$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i2$2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
1362
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ColumnGroupSelectionComponent, isStandalone: false, selector: "ocx-column-group-selection", inputs: { selectedGroupKey: "selectedGroupKey", columns: "columns", placeholderKey: "placeholderKey", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey" }, outputs: { groupSelectionChanged: "groupSelectionChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-floatlabel variant=\"on\">\n @if ((allGroupKeys$ | async)?.length) {\n <p-select\n class=\"p-inputwrapper-filled\"\n inputId=\"columnGroupSelectionDropdown\"\n id=\"columnGroupSelectionDropdownElement\"\n (onChange)=\"changeGroupSelection($event)\"\n [options]=\"(allGroupKeys$ | async) || []\"\n [placeholder]=\"placeholderKey | translate\"\n [(ngModel)]=\"selectedGroupKey\"\n [ariaLabel]=\"'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABEL' | translate\"\n >\n <ng-template let-item #item> {{ item ? (item | translate) : ''}} </ng-template>\n <ng-template let-item #selectedItem> {{ item ? (item | translate) : ''}} </ng-template>\n </p-select>\n }\n @if ((allGroupKeys$ | async)?.length) {\n <label for=\"columnGroupSelectionDropdown\"\n >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n >\n }\n </p-floatlabel>\n", styles: [":host ::ng-deep .p-select{min-width:12rem}\n"], dependencies: [{ kind: "component", type: i1$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i2$2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
1357
1363
|
}
|
|
1358
1364
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ColumnGroupSelectionComponent, decorators: [{
|
|
1359
1365
|
type: Component,
|
|
1360
|
-
args: [{ standalone: false, selector: 'ocx-column-group-selection', template: "<p-floatlabel variant=\"on\">\n @if ((allGroupKeys$ | async)?.length) {\n <p-select\n inputId=\"columnGroupSelectionDropdown\"\n id=\"columnGroupSelectionDropdownElement\"\n (onChange)=\"changeGroupSelection($event)\"\n [options]=\"(allGroupKeys$ | async) || []\"\n [placeholder]=\"placeholderKey | translate\"\n [(ngModel)]=\"selectedGroupKey\"\n [ariaLabel]=\"'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABEL' | translate\"\n >\n <ng-template let-item #item> {{ item ? (item | translate) : ''}} </ng-template>\n <ng-template let-item #selectedItem> {{ item ? (item | translate) : ''}} </ng-template>\n </p-select>\n }\n @if ((allGroupKeys$ | async)?.length) {\n <label for=\"columnGroupSelectionDropdown\"\n >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n >\n }\n </p-floatlabel>\n", styles: [":host ::ng-deep .p-select{min-width:12rem}\n"] }]
|
|
1366
|
+
args: [{ standalone: false, selector: 'ocx-column-group-selection', template: "<p-floatlabel variant=\"on\">\n @if ((allGroupKeys$ | async)?.length) {\n <p-select\n class=\"p-inputwrapper-filled\"\n inputId=\"columnGroupSelectionDropdown\"\n id=\"columnGroupSelectionDropdownElement\"\n (onChange)=\"changeGroupSelection($event)\"\n [options]=\"(allGroupKeys$ | async) || []\"\n [placeholder]=\"placeholderKey | translate\"\n [(ngModel)]=\"selectedGroupKey\"\n [ariaLabel]=\"'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABEL' | translate\"\n >\n <ng-template let-item #item> {{ item ? (item | translate) : ''}} </ng-template>\n <ng-template let-item #selectedItem> {{ item ? (item | translate) : ''}} </ng-template>\n </p-select>\n }\n @if ((allGroupKeys$ | async)?.length) {\n <label for=\"columnGroupSelectionDropdown\"\n >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n >\n }\n </p-floatlabel>\n", styles: [":host ::ng-deep .p-select{min-width:12rem}\n"] }]
|
|
1361
1367
|
}], propDecorators: { selectedGroupKey: [{
|
|
1362
1368
|
type: Input
|
|
1363
1369
|
}], columns: [{
|
|
@@ -5441,11 +5447,11 @@ class DialogMessageContentComponent {
|
|
|
5441
5447
|
this.icon = '';
|
|
5442
5448
|
}
|
|
5443
5449
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogMessageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5444
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DialogMessageContentComponent, isStandalone: false, selector: "ng-component", inputs: { message: "message", messageParameters: "messageParameters", icon: "icon" }, ngImport: i0, template: "<div class=\"dialogMessageContent\">\n <div>\n @if (icon !== '') {\n <i [class]=\"icon\"></i
|
|
5450
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DialogMessageContentComponent, isStandalone: false, selector: "ng-component", inputs: { message: "message", messageParameters: "messageParameters", icon: "icon" }, ngImport: i0, template: "<div class=\"dialogMessageContent\">\n <div>\n @if (icon !== '') {\n <i [class]=\"icon\" aria-hidden=\"true\"></i> \n }\n <span id=\"dialogMessage\">{{message | translate:messageParameters}}</span>\n </div>\n</div>", dependencies: [{ kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
5445
5451
|
}
|
|
5446
5452
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogMessageContentComponent, decorators: [{
|
|
5447
5453
|
type: Component,
|
|
5448
|
-
args: [{ standalone: false, template: "<div class=\"dialogMessageContent\">\n <div>\n @if (icon !== '') {\n <i [class]=\"icon\"></i
|
|
5454
|
+
args: [{ standalone: false, template: "<div class=\"dialogMessageContent\">\n <div>\n @if (icon !== '') {\n <i [class]=\"icon\" aria-hidden=\"true\"></i> \n }\n <span id=\"dialogMessage\">{{message | translate:messageParameters}}</span>\n </div>\n</div>" }]
|
|
5449
5455
|
}], propDecorators: { message: [{
|
|
5450
5456
|
type: Input
|
|
5451
5457
|
}], messageParameters: [{
|