@onecx/angular-accelerator 5.29.0 → 5.31.0
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.
- package/esm2022/index.mjs +3 -1
- package/esm2022/lib/angular-accelerator.module.mjs +26 -11
- package/esm2022/lib/components/column-group-selection/column-group-selection.component.mjs +3 -3
- package/esm2022/lib/components/diagram/diagram.component.mjs +26 -3
- package/esm2022/lib/components/group-by-count-diagram/group-by-count-diagram.component.mjs +24 -6
- package/esm2022/lib/components/page-header/page-header.component.mjs +3 -3
- package/esm2022/lib/directives/if-permission.directive.mjs +3 -11
- package/esm2022/lib/injection-tokens/has-permission-checker.mjs +10 -0
- package/esm2022/lib/model/diagram-data.mjs +1 -1
- package/esm2022/lib/services/translation-cache.service.mjs +4 -1
- package/esm2022/lib/utils/async-translate-loader.utils.mjs +4 -1
- package/esm2022/lib/utils/caching-translate-loader.utils.mjs +4 -1
- package/esm2022/lib/utils/create-translate-loader.utils.mjs +4 -1
- package/esm2022/lib/utils/translate.combined.loader.mjs +4 -1
- package/fesm2022/onecx-angular-accelerator.mjs +96 -28
- package/fesm2022/onecx-angular-accelerator.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/components/diagram/diagram.component.d.ts +8 -1
- package/lib/components/group-by-count-diagram/group-by-count-diagram.component.d.ts +10 -1
- package/lib/components/page-header/page-header.component.d.ts +2 -0
- package/lib/directives/if-permission.directive.d.ts +2 -11
- package/lib/injection-tokens/has-permission-checker.d.ts +13 -0
- package/lib/model/diagram-data.d.ts +1 -0
- package/lib/services/translation-cache.service.d.ts +3 -0
- package/lib/utils/async-translate-loader.utils.d.ts +3 -0
- package/lib/utils/caching-translate-loader.utils.d.ts +3 -0
- package/lib/utils/create-translate-loader.utils.d.ts +3 -0
- package/lib/utils/translate.combined.loader.d.ts +3 -0
- package/package.json +10 -6
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import { HAS_PERMISSION_CHECKER, providePermissionChecker, TRANSLATION_PATH } from '@onecx/angular-utils';
|
|
2
|
+
export { AlwaysGrantPermissionChecker, HAS_PERMISSION_CHECKER } from '@onecx/angular-utils';
|
|
1
3
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
4
|
+
import { Directive, Optional, Inject, Input, HostListener, EventEmitter, Output, Injectable, Injector, LOCALE_ID, Pipe, Component, ViewEncapsulation, ContentChild, ContentChildren, ViewChild, PLATFORM_ID, ViewChildren, QueryList, NgModule, APP_INITIALIZER, inject } from '@angular/core';
|
|
3
5
|
import * as i3 from '@onecx/angular-integration-interface';
|
|
4
6
|
import { CONFIG_KEY, UserService, AppConfigService } from '@onecx/angular-integration-interface';
|
|
5
7
|
import * as i1 from '@angular/common/http';
|
|
@@ -62,13 +64,9 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
|
|
|
62
64
|
|
|
63
65
|
/**
|
|
64
66
|
* This checker always returns true, basically disabling the permission system on the UI side
|
|
67
|
+
* @deprecated Please import from `@onecx/angular-utils` instead.
|
|
65
68
|
*/
|
|
66
|
-
|
|
67
|
-
hasPermission(_permissionKey) {
|
|
68
|
-
return true;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
const HAS_PERMISSION_CHECKER = new InjectionToken('hasPermission');
|
|
69
|
+
|
|
72
70
|
class IfPermissionDirective {
|
|
73
71
|
set notPermission(value) {
|
|
74
72
|
this.permission = value;
|
|
@@ -615,11 +613,11 @@ class PageHeaderComponent {
|
|
|
615
613
|
}
|
|
616
614
|
}
|
|
617
615
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PageHeaderComponent, deps: [{ token: BreadcrumbService }, { token: i1$2.TranslateService }, { token: i3.AppStateService }, { token: i3.UserService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
618
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", 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 mb-4\" 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-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 [pTooltip]=\"(action.titleKey ? (action.titleKey | translate) : action.title)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </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 pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"additionalToolbarContent\" [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n <ng-container *ngIf=\"objectDetails\">\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\" *ngFor=\"let item of objectDetails\">\n <span\n class=\"flex font-medium text-600 object-info-grid-label\"\n name=\"object-detail-label\"\n [pTooltip]=\"item.labelTooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >{{ item.label | dynamicPipe:item.labelPipe }}</span\n >\n <span *ngIf=\"item.icon || item.value\" class=\"object-info-grid-value\">\n <span\n class=\"flex text-900 align-items-center gap-2 w-max\"\n [ngClass]=\"generateItemStyle(item)\"\n name=\"object-detail-value\"\n >\n <span\n class=\"flex align-items-center gap-2\"\n [pTooltip]=\"item.valueTooltip || item.tooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n <i\n *ngIf=\"item.icon\"\n class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}'\n name=\"object-detail-icon\"\n ></i>\n {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n <p-button\n *ngIf=\"item.actionItemIcon && item.actionItemCallback\"\n [icon]=\"item.actionItemIcon\"\n styleClass=\"p-button-text p-0 w-full\"\n [pTooltip]=\"item.actionItemTooltip || ''\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n </span>\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}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure{width:3rem;height:3rem;margin-right:.5rem;position:relative}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i8.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i9.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: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
616
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", 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 mb-4\" 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-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 <span\n [pTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n >\n <p-button\n id=\"{{ action.id }}\"\n [icon]=\"action.icon ?? ''\"\n type=\"button\"\n class=\"action-button\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n (onClick)=\"action.actionCallback()\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </span>\n </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 pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"additionalToolbarContent\" [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n <ng-container *ngIf=\"objectDetails\">\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\" *ngFor=\"let item of objectDetails\">\n <span\n class=\"flex font-medium text-600 object-info-grid-label\"\n name=\"object-detail-label\"\n [pTooltip]=\"item.labelTooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >{{ item.label | dynamicPipe:item.labelPipe }}</span\n >\n <span *ngIf=\"item.icon || item.value\" class=\"object-info-grid-value\">\n <span\n class=\"flex text-900 align-items-center gap-2 w-max\"\n [ngClass]=\"generateItemStyle(item)\"\n name=\"object-detail-value\"\n >\n <span\n class=\"flex align-items-center gap-2\"\n [pTooltip]=\"item.valueTooltip || item.tooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n <i\n *ngIf=\"item.icon\"\n class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}'\n name=\"object-detail-icon\"\n ></i>\n {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n <p-button\n *ngIf=\"item.actionItemIcon && item.actionItemCallback\"\n [icon]=\"item.actionItemIcon\"\n styleClass=\"p-button-text p-0 w-full\"\n [pTooltip]=\"item.actionItemTooltip || ''\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n </span>\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}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure{width:3rem;height:3rem;margin-right:.5rem;position:relative}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i8.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i9.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: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
619
617
|
}
|
|
620
618
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
621
619
|
type: Component,
|
|
622
|
-
args: [{ selector: 'ocx-page-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"onecx-page-header mb-4\" 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-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
|
|
620
|
+
args: [{ selector: 'ocx-page-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"onecx-page-header mb-4\" 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-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 <span\n [pTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n >\n <p-button\n id=\"{{ action.id }}\"\n [icon]=\"action.icon ?? ''\"\n type=\"button\"\n class=\"action-button\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n (onClick)=\"action.actionCallback()\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </span>\n </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 pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"additionalToolbarContent\" [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n <ng-container *ngIf=\"objectDetails\">\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\" *ngFor=\"let item of objectDetails\">\n <span\n class=\"flex font-medium text-600 object-info-grid-label\"\n name=\"object-detail-label\"\n [pTooltip]=\"item.labelTooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >{{ item.label | dynamicPipe:item.labelPipe }}</span\n >\n <span *ngIf=\"item.icon || item.value\" class=\"object-info-grid-value\">\n <span\n class=\"flex text-900 align-items-center gap-2 w-max\"\n [ngClass]=\"generateItemStyle(item)\"\n name=\"object-detail-value\"\n >\n <span\n class=\"flex align-items-center gap-2\"\n [pTooltip]=\"item.valueTooltip || item.tooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n <i\n *ngIf=\"item.icon\"\n class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}'\n name=\"object-detail-icon\"\n ></i>\n {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n <p-button\n *ngIf=\"item.actionItemIcon && item.actionItemCallback\"\n [icon]=\"item.actionItemIcon\"\n styleClass=\"p-button-text p-0 w-full\"\n [pTooltip]=\"item.actionItemTooltip || ''\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n </span>\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}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure{width:3rem;height:3rem;margin-right:.5rem;position:relative}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"] }]
|
|
623
621
|
}], ctorParameters: () => [{ type: BreadcrumbService }, { type: i1$2.TranslateService }, { type: i3.AppStateService }, { type: i3.UserService }], propDecorators: { header: [{
|
|
624
622
|
type: Input
|
|
625
623
|
}], loading: [{
|
|
@@ -975,11 +973,11 @@ class ColumnGroupSelectionComponent {
|
|
|
975
973
|
});
|
|
976
974
|
}
|
|
977
975
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ColumnGroupSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
978
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: ColumnGroupSelectionComponent, 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>\n <p-dropdown\n inputId=\"columnGroupSelectionDropdown\"\n *ngIf=\"(allGroupKeys$ | async)?.length\"\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 pTemplate=\"item\"> {{ item ? (item | translate) : ''}} </ng-template>\n <ng-template let-item pTemplate=\"selectedItem\"> {{ item ? (item | translate) : ''}} </ng-template>\n </p-dropdown>\n <label *ngIf=\"(allGroupKeys$ | async)?.length\" for=\"columnGroupSelectionDropdown\"\n >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n >\n</p-floatLabel>\n", styles: [":host ::ng-deep .p-dropdown{min-width:12rem}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4$1.FloatLabel, selector: "p-floatLabel" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
976
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: ColumnGroupSelectionComponent, 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>\n <p-dropdown\n inputId=\"columnGroupSelectionDropdown\"\n id=\"columnGroupSelectionDropdownElement\"\n *ngIf=\"(allGroupKeys$ | async)?.length\"\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 pTemplate=\"item\"> {{ item ? (item | translate) : ''}} </ng-template>\n <ng-template let-item pTemplate=\"selectedItem\"> {{ item ? (item | translate) : ''}} </ng-template>\n </p-dropdown>\n <label *ngIf=\"(allGroupKeys$ | async)?.length\" for=\"columnGroupSelectionDropdown\"\n >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n >\n</p-floatLabel>\n", styles: [":host ::ng-deep .p-dropdown{min-width:12rem}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4$1.FloatLabel, selector: "p-floatLabel" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
979
977
|
}
|
|
980
978
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ColumnGroupSelectionComponent, decorators: [{
|
|
981
979
|
type: Component,
|
|
982
|
-
args: [{ selector: 'ocx-column-group-selection', template: "<p-floatLabel>\n <p-dropdown\n inputId=\"columnGroupSelectionDropdown\"\n *ngIf=\"(allGroupKeys$ | async)?.length\"\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 pTemplate=\"item\"> {{ item ? (item | translate) : ''}} </ng-template>\n <ng-template let-item pTemplate=\"selectedItem\"> {{ item ? (item | translate) : ''}} </ng-template>\n </p-dropdown>\n <label *ngIf=\"(allGroupKeys$ | async)?.length\" for=\"columnGroupSelectionDropdown\"\n >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n >\n</p-floatLabel>\n", styles: [":host ::ng-deep .p-dropdown{min-width:12rem}\n"] }]
|
|
980
|
+
args: [{ selector: 'ocx-column-group-selection', template: "<p-floatLabel>\n <p-dropdown\n inputId=\"columnGroupSelectionDropdown\"\n id=\"columnGroupSelectionDropdownElement\"\n *ngIf=\"(allGroupKeys$ | async)?.length\"\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 pTemplate=\"item\"> {{ item ? (item | translate) : ''}} </ng-template>\n <ng-template let-item pTemplate=\"selectedItem\"> {{ item ? (item | translate) : ''}} </ng-template>\n </p-dropdown>\n <label *ngIf=\"(allGroupKeys$ | async)?.length\" for=\"columnGroupSelectionDropdown\"\n >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n >\n</p-floatLabel>\n", styles: [":host ::ng-deep .p-dropdown{min-width:12rem}\n"] }]
|
|
983
981
|
}], propDecorators: { selectedGroupKey: [{
|
|
984
982
|
type: Input
|
|
985
983
|
}], columns: [{
|
|
@@ -3774,6 +3772,12 @@ class DiagramComponent {
|
|
|
3774
3772
|
constructor(translateService) {
|
|
3775
3773
|
this.translateService = translateService;
|
|
3776
3774
|
this.sumKey = 'OCX_DIAGRAM.SUM';
|
|
3775
|
+
/**
|
|
3776
|
+
* This property determines if diagram should generate the colors for the data that does not have any set.
|
|
3777
|
+
*
|
|
3778
|
+
* Setting this property to false will result in using the provided colors only if every data item has one. In the scenario where at least one item does not have a color set, diagram will generate all colors.
|
|
3779
|
+
*/
|
|
3780
|
+
this.fillMissingColors = true;
|
|
3777
3781
|
this._diagramType = "PIE" /* DiagramType.PIE */;
|
|
3778
3782
|
this.chartType = 'pie';
|
|
3779
3783
|
this._supportedDiagramTypes = [];
|
|
@@ -3800,7 +3804,7 @@ class DiagramComponent {
|
|
|
3800
3804
|
if (this.data) {
|
|
3801
3805
|
const inputData = this.data.map((diagramData) => diagramData.value);
|
|
3802
3806
|
this.amountOfData = this.data.reduce((acc, current) => acc + current.value, 0);
|
|
3803
|
-
const COLORS =
|
|
3807
|
+
const COLORS = this.generateColors(this.data, colorScale, colorRangeInfo);
|
|
3804
3808
|
this.chartData = {
|
|
3805
3809
|
labels: this.data.map((data) => data.label),
|
|
3806
3810
|
datasets: [
|
|
@@ -3829,6 +3833,21 @@ class DiagramComponent {
|
|
|
3829
3833
|
}),
|
|
3830
3834
|
};
|
|
3831
3835
|
}
|
|
3836
|
+
generateColors(data, colorScale, colorRangeInfo) {
|
|
3837
|
+
const dataColors = data.map((diagramData) => diagramData.backgroundColor);
|
|
3838
|
+
if (dataColors.filter((v) => v !== undefined).length === data.length) {
|
|
3839
|
+
return dataColors;
|
|
3840
|
+
}
|
|
3841
|
+
else if (this.fillMissingColors) {
|
|
3842
|
+
// it is intended to generate more colors than needed, so interval for generated colors is same as amount of items on the diagram
|
|
3843
|
+
const interpolatedColors = interpolateColors(dataColors.length, colorScale, colorRangeInfo);
|
|
3844
|
+
let interpolatedIndex = 0;
|
|
3845
|
+
return dataColors.map((color) => (color === undefined ? interpolatedColors[interpolatedIndex++] : color));
|
|
3846
|
+
}
|
|
3847
|
+
else {
|
|
3848
|
+
return interpolateColors(data.length, colorScale, colorRangeInfo);
|
|
3849
|
+
}
|
|
3850
|
+
}
|
|
3832
3851
|
generateTotal(data) {
|
|
3833
3852
|
return data.reduce((acc, current) => acc + current.value, 0);
|
|
3834
3853
|
}
|
|
@@ -3854,7 +3873,7 @@ class DiagramComponent {
|
|
|
3854
3873
|
});
|
|
3855
3874
|
}
|
|
3856
3875
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DiagramComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3857
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: DiagramComponent, selector: "ocx-diagram", inputs: { data: "data", sumKey: "sumKey", diagramType: "diagramType", supportedDiagramTypes: "supportedDiagramTypes" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged", componentStateChanged: "componentStateChanged" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"this.data\">\n <div class=\"flex justify-content-center pb-2\" *ngIf=\"shownDiagramTypes.length > 1\">\n <p-selectButton\n [options]=\"shownDiagramTypes\"\n [(ngModel)]=\"selectedDiagramType\"\n optionLabel=\"id\"\n (onChange)=\"onDiagramTypeChanged($event)\"\n name=\"diagram-type-select-button\"\n >\n <ng-template let-item pTemplate>\n <i\n [class]=\"item.icon\"\n [pTooltip]=\"item.tooltip || (item.tooltipKey | translate)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n ></i>\n <label style=\"display: none\" id=\"{{item.id}}\"> {{item.label ? item.label : item.labelKey | translate}} </label>\n </ng-template>\n </p-selectButton>\n </div>\n <div class=\"w-full flex justify-content-center\">\n <p-chart\n id=\"diagram\"\n [type]=\"chartType\"\n [data]=\"chartData\"\n [responsive]=\"false\"\n [options]=\"chartOptions\"\n (onDataSelect)=\"dataClicked($event)\"\n [ariaLabel]=\"(data ? 'OCX_DIAGRAM.ARIA_LABEL' : 'OCX_DIAGRAM.EMPTY_ARIA_LABEL') | translate: {total: generateTotal(data), valueString: generateDiagramValueString(data)}\"\n ></p-chart>\n </div>\n <div class=\"w-full flex justify-content-center mt-2 sumKey\">\n <p class=\"text-md font-medium text-700\">\n <span name=\"sumLabel\"> {{ sumKey | translate }}</span> : <span name=\"amountOfData\">{{ amountOfData}}</span>\n </p>\n </div>\n</ng-container>\n\n<div *ngIf=\"!this.data\" class=\"w-full flex justify-content-center\">\n <p-message severity=\"info\" text=\"{{ 'OCX_DIAGRAM.NO_DATA' | translate }}\"></p-message>\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$1.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: i6$1.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "ariaLabel", "ariaLabelledBy", "data", "options"], outputs: ["onDataSelect"] }, { kind: "component", type: i7$3.UIMessage, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
3876
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: DiagramComponent, selector: "ocx-diagram", inputs: { data: "data", sumKey: "sumKey", fillMissingColors: "fillMissingColors", diagramType: "diagramType", supportedDiagramTypes: "supportedDiagramTypes" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged", componentStateChanged: "componentStateChanged" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"this.data\">\n <div class=\"flex justify-content-center pb-2\" *ngIf=\"shownDiagramTypes.length > 1\">\n <p-selectButton\n [options]=\"shownDiagramTypes\"\n [(ngModel)]=\"selectedDiagramType\"\n optionLabel=\"id\"\n (onChange)=\"onDiagramTypeChanged($event)\"\n name=\"diagram-type-select-button\"\n >\n <ng-template let-item pTemplate>\n <i\n [class]=\"item.icon\"\n [pTooltip]=\"item.tooltip || (item.tooltipKey | translate)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n ></i>\n <label style=\"display: none\" id=\"{{item.id}}\"> {{item.label ? item.label : item.labelKey | translate}} </label>\n </ng-template>\n </p-selectButton>\n </div>\n <div class=\"w-full flex justify-content-center\">\n <p-chart\n id=\"diagram\"\n [type]=\"chartType\"\n [data]=\"chartData\"\n [responsive]=\"false\"\n [options]=\"chartOptions\"\n (onDataSelect)=\"dataClicked($event)\"\n [ariaLabel]=\"(data ? 'OCX_DIAGRAM.ARIA_LABEL' : 'OCX_DIAGRAM.EMPTY_ARIA_LABEL') | translate: {total: generateTotal(data), valueString: generateDiagramValueString(data)}\"\n ></p-chart>\n </div>\n <div class=\"w-full flex justify-content-center mt-2 sumKey\">\n <p class=\"text-md font-medium text-700\">\n <span name=\"sumLabel\"> {{ sumKey | translate }}</span> : <span name=\"amountOfData\">{{ amountOfData}}</span>\n </p>\n </div>\n</ng-container>\n\n<div *ngIf=\"!this.data\" class=\"w-full flex justify-content-center\">\n <p-message severity=\"info\" text=\"{{ 'OCX_DIAGRAM.NO_DATA' | translate }}\"></p-message>\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$1.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: i6$1.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "ariaLabel", "ariaLabelledBy", "data", "options"], outputs: ["onDataSelect"] }, { kind: "component", type: i7$3.UIMessage, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
3858
3877
|
}
|
|
3859
3878
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DiagramComponent, decorators: [{
|
|
3860
3879
|
type: Component,
|
|
@@ -3863,6 +3882,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
|
|
|
3863
3882
|
type: Input
|
|
3864
3883
|
}], sumKey: [{
|
|
3865
3884
|
type: Input
|
|
3885
|
+
}], fillMissingColors: [{
|
|
3886
|
+
type: Input
|
|
3866
3887
|
}], diagramType: [{
|
|
3867
3888
|
type: Input
|
|
3868
3889
|
}], supportedDiagramTypes: [{
|
|
@@ -4160,30 +4181,44 @@ class GroupByCountDiagramComponent {
|
|
|
4160
4181
|
this.columnType = value.columnType;
|
|
4161
4182
|
this.columnField = value.id;
|
|
4162
4183
|
}
|
|
4184
|
+
get colors() {
|
|
4185
|
+
return this._colors$.getValue();
|
|
4186
|
+
}
|
|
4187
|
+
set colors(value) {
|
|
4188
|
+
this._colors$.next(value);
|
|
4189
|
+
}
|
|
4163
4190
|
constructor(translateService) {
|
|
4164
4191
|
this.translateService = translateService;
|
|
4165
4192
|
this.sumKey = 'SEARCH.SUMMARY_TITLE';
|
|
4166
4193
|
this.diagramType = "PIE" /* DiagramType.PIE */;
|
|
4194
|
+
/**
|
|
4195
|
+
* This property determines if diagram should generate the colors for the data that does not have any set.
|
|
4196
|
+
*
|
|
4197
|
+
* Setting this property to false will result in using the provided colors only if every data item has one. In the scenario where at least one item does not have a color set, diagram will generate all colors.
|
|
4198
|
+
*/
|
|
4199
|
+
this.fillMissingColors = true;
|
|
4167
4200
|
this.supportedDiagramTypes = [];
|
|
4168
4201
|
this._data$ = new BehaviorSubject([]);
|
|
4169
4202
|
this._columnType$ = new BehaviorSubject(ColumnType.STRING);
|
|
4170
4203
|
this._columnField$ = new BehaviorSubject('');
|
|
4204
|
+
this._colors$ = new BehaviorSubject({});
|
|
4171
4205
|
this.dataSelected = new EventEmitter();
|
|
4172
4206
|
this.diagramTypeChanged = new EventEmitter();
|
|
4173
4207
|
this.componentStateChanged = new EventEmitter();
|
|
4174
4208
|
}
|
|
4175
4209
|
ngOnInit() {
|
|
4176
|
-
this.diagramData$ = combineLatest([this._data$, this._columnField$, this._columnType$]).pipe(mergeMap(([data, columnField, columnType]) => {
|
|
4210
|
+
this.diagramData$ = combineLatest([this._data$, this._columnField$, this._columnType$, this._colors$]).pipe(mergeMap(([data, columnField, columnType, colors]) => {
|
|
4177
4211
|
const columnData = data.map((d) => ObjectUtils.resolveFieldData(d, columnField));
|
|
4178
4212
|
const occurrences = columnData.reduce((acc, current) => {
|
|
4179
4213
|
return acc.some((e) => e.label === current)
|
|
4180
4214
|
? (acc.find((e) => e.label === current).value++, acc)
|
|
4181
|
-
: [...acc, { label: current, value: 1 }];
|
|
4215
|
+
: [...acc, { label: current, value: 1, backgroundColor: colors[current.toString()] }];
|
|
4182
4216
|
}, []);
|
|
4183
4217
|
if (columnType === ColumnType.TRANSLATION_KEY && occurrences.length > 0) {
|
|
4184
4218
|
return this.translateService.get(occurrences.map((o) => o.label)).pipe(map((translations) => occurrences.map((o) => ({
|
|
4185
4219
|
label: translations[o.label],
|
|
4186
4220
|
value: o.value,
|
|
4221
|
+
backgroundColor: o.backgroundColor,
|
|
4187
4222
|
}))));
|
|
4188
4223
|
}
|
|
4189
4224
|
else {
|
|
@@ -4198,19 +4233,21 @@ class GroupByCountDiagramComponent {
|
|
|
4198
4233
|
this.diagramType = newDiagramType;
|
|
4199
4234
|
this.diagramTypeChanged.emit(newDiagramType);
|
|
4200
4235
|
this.componentStateChanged.emit({
|
|
4201
|
-
activeDiagramType: newDiagramType
|
|
4236
|
+
activeDiagramType: newDiagramType,
|
|
4202
4237
|
});
|
|
4203
4238
|
}
|
|
4204
4239
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: GroupByCountDiagramComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4205
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: GroupByCountDiagramComponent, selector: "ocx-group-by-count-diagram", inputs: { sumKey: "sumKey", diagramType: "diagramType", type: "type", supportedDiagramTypes: "supportedDiagramTypes", data: "data", columnType: "columnType", columnField: "columnField", column: "column" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<ocx-diagram\n [data]=\"(diagramData$ | async) || []\"\n [sumKey]=\"sumKey\"\n [diagramType]=\"diagramType\"\n (onDataSelect)=\"dataClicked($event)\"\n [supportedDiagramTypes]=\"supportedDiagramTypes\"\n (diagramTypeChanged)=\"onDiagramTypeChanged($event)\"\n></ocx-diagram>\n", dependencies: [{ kind: "component", type: DiagramComponent, selector: "ocx-diagram", inputs: ["data", "sumKey", "diagramType", "supportedDiagramTypes"], outputs: ["dataSelected", "diagramTypeChanged", "componentStateChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
|
|
4240
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: GroupByCountDiagramComponent, selector: "ocx-group-by-count-diagram", inputs: { sumKey: "sumKey", diagramType: "diagramType", fillMissingColors: "fillMissingColors", type: "type", supportedDiagramTypes: "supportedDiagramTypes", data: "data", columnType: "columnType", columnField: "columnField", column: "column", colors: "colors" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<ocx-diagram\n [data]=\"(diagramData$ | async) || []\"\n [fillMissingColors]=\"fillMissingColors\"\n [sumKey]=\"sumKey\"\n [diagramType]=\"diagramType\"\n (onDataSelect)=\"dataClicked($event)\"\n [supportedDiagramTypes]=\"supportedDiagramTypes\"\n (diagramTypeChanged)=\"onDiagramTypeChanged($event)\"\n></ocx-diagram>\n", dependencies: [{ kind: "component", type: DiagramComponent, selector: "ocx-diagram", inputs: ["data", "sumKey", "fillMissingColors", "diagramType", "supportedDiagramTypes"], outputs: ["dataSelected", "diagramTypeChanged", "componentStateChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
|
|
4206
4241
|
}
|
|
4207
4242
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: GroupByCountDiagramComponent, decorators: [{
|
|
4208
4243
|
type: Component,
|
|
4209
|
-
args: [{ selector: 'ocx-group-by-count-diagram', template: "<ocx-diagram\n [data]=\"(diagramData$ | async) || []\"\n [sumKey]=\"sumKey\"\n [diagramType]=\"diagramType\"\n (onDataSelect)=\"dataClicked($event)\"\n [supportedDiagramTypes]=\"supportedDiagramTypes\"\n (diagramTypeChanged)=\"onDiagramTypeChanged($event)\"\n></ocx-diagram>\n" }]
|
|
4244
|
+
args: [{ selector: 'ocx-group-by-count-diagram', template: "<ocx-diagram\n [data]=\"(diagramData$ | async) || []\"\n [fillMissingColors]=\"fillMissingColors\"\n [sumKey]=\"sumKey\"\n [diagramType]=\"diagramType\"\n (onDataSelect)=\"dataClicked($event)\"\n [supportedDiagramTypes]=\"supportedDiagramTypes\"\n (diagramTypeChanged)=\"onDiagramTypeChanged($event)\"\n></ocx-diagram>\n" }]
|
|
4210
4245
|
}], ctorParameters: () => [{ type: i1$2.TranslateService }], propDecorators: { sumKey: [{
|
|
4211
4246
|
type: Input
|
|
4212
4247
|
}], diagramType: [{
|
|
4213
4248
|
type: Input
|
|
4249
|
+
}], fillMissingColors: [{
|
|
4250
|
+
type: Input
|
|
4214
4251
|
}], type: [{
|
|
4215
4252
|
type: Input
|
|
4216
4253
|
}], supportedDiagramTypes: [{
|
|
@@ -4223,6 +4260,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
|
|
|
4223
4260
|
type: Input
|
|
4224
4261
|
}], column: [{
|
|
4225
4262
|
type: Input
|
|
4263
|
+
}], colors: [{
|
|
4264
|
+
type: Input
|
|
4226
4265
|
}], dataSelected: [{
|
|
4227
4266
|
type: Output
|
|
4228
4267
|
}], diagramTypeChanged: [{
|
|
@@ -4970,6 +5009,9 @@ class TranslationCacheTopic extends SyncableTopic {
|
|
|
4970
5009
|
super('translationCache', 2);
|
|
4971
5010
|
}
|
|
4972
5011
|
}
|
|
5012
|
+
/**
|
|
5013
|
+
* @deprecated Please import from `@onecx/angular-utils` instead.
|
|
5014
|
+
*/
|
|
4973
5015
|
class TranslationCacheService {
|
|
4974
5016
|
constructor() {
|
|
4975
5017
|
this.translationTopic$ = new TranslationCacheTopic();
|
|
@@ -5205,21 +5247,28 @@ class AngularAcceleratorModule {
|
|
|
5205
5247
|
TooltipOnOverflowDirective,
|
|
5206
5248
|
FilterViewComponent] }); }
|
|
5207
5249
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AngularAcceleratorModule, providers: [
|
|
5250
|
+
providePermissionChecker(),
|
|
5208
5251
|
{
|
|
5209
5252
|
provide: LOCALE_ID,
|
|
5210
5253
|
useClass: DynamicLocaleId,
|
|
5211
5254
|
deps: [UserService],
|
|
5212
5255
|
},
|
|
5213
|
-
{
|
|
5214
|
-
provide: HAS_PERMISSION_CHECKER,
|
|
5215
|
-
useExisting: UserService,
|
|
5216
|
-
},
|
|
5217
5256
|
{
|
|
5218
5257
|
provide: APP_INITIALIZER,
|
|
5219
5258
|
useFactory: appInitializer,
|
|
5220
5259
|
deps: [UserService],
|
|
5221
5260
|
multi: true,
|
|
5222
5261
|
},
|
|
5262
|
+
{
|
|
5263
|
+
provide: TRANSLATION_PATH,
|
|
5264
|
+
useValue: './onecx-angular-accelerator/assets/i18n/',
|
|
5265
|
+
multi: true
|
|
5266
|
+
},
|
|
5267
|
+
{
|
|
5268
|
+
provide: TRANSLATION_PATH,
|
|
5269
|
+
useValue: './onecx-angular-accelerator/assets/i18n/primeng/',
|
|
5270
|
+
multi: true
|
|
5271
|
+
},
|
|
5223
5272
|
AppConfigService,
|
|
5224
5273
|
], imports: [CommonModule,
|
|
5225
5274
|
AngularAcceleratorPrimeNgModule,
|
|
@@ -5265,21 +5314,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
|
|
|
5265
5314
|
FilterViewComponent,
|
|
5266
5315
|
],
|
|
5267
5316
|
providers: [
|
|
5317
|
+
providePermissionChecker(),
|
|
5268
5318
|
{
|
|
5269
5319
|
provide: LOCALE_ID,
|
|
5270
5320
|
useClass: DynamicLocaleId,
|
|
5271
5321
|
deps: [UserService],
|
|
5272
5322
|
},
|
|
5273
|
-
{
|
|
5274
|
-
provide: HAS_PERMISSION_CHECKER,
|
|
5275
|
-
useExisting: UserService,
|
|
5276
|
-
},
|
|
5277
5323
|
{
|
|
5278
5324
|
provide: APP_INITIALIZER,
|
|
5279
5325
|
useFactory: appInitializer,
|
|
5280
5326
|
deps: [UserService],
|
|
5281
5327
|
multi: true,
|
|
5282
5328
|
},
|
|
5329
|
+
{
|
|
5330
|
+
provide: TRANSLATION_PATH,
|
|
5331
|
+
useValue: './onecx-angular-accelerator/assets/i18n/',
|
|
5332
|
+
multi: true
|
|
5333
|
+
},
|
|
5334
|
+
{
|
|
5335
|
+
provide: TRANSLATION_PATH,
|
|
5336
|
+
useValue: './onecx-angular-accelerator/assets/i18n/primeng/',
|
|
5337
|
+
multi: true
|
|
5338
|
+
},
|
|
5283
5339
|
AppConfigService,
|
|
5284
5340
|
],
|
|
5285
5341
|
exports: [
|
|
@@ -5314,6 +5370,9 @@ const atLeastOneFieldFilledValidator = (form) => {
|
|
|
5314
5370
|
return null;
|
|
5315
5371
|
};
|
|
5316
5372
|
|
|
5373
|
+
/**
|
|
5374
|
+
* @deprecated Please import from `@onecx/angular-utils` instead.
|
|
5375
|
+
*/
|
|
5317
5376
|
class AsyncTranslateLoader {
|
|
5318
5377
|
static { this.lastTimerId = 0; }
|
|
5319
5378
|
constructor(translateLoader$) {
|
|
@@ -5325,6 +5384,9 @@ class AsyncTranslateLoader {
|
|
|
5325
5384
|
}
|
|
5326
5385
|
}
|
|
5327
5386
|
|
|
5387
|
+
/**
|
|
5388
|
+
* @deprecated Please import from `@onecx/angular-utils` instead.
|
|
5389
|
+
*/
|
|
5328
5390
|
class CachingTranslateLoader {
|
|
5329
5391
|
constructor(translationCache, http, prefix, suffix) {
|
|
5330
5392
|
this.translationCache = translationCache;
|
|
@@ -5339,6 +5401,9 @@ class CachingTranslateLoader {
|
|
|
5339
5401
|
}
|
|
5340
5402
|
}
|
|
5341
5403
|
|
|
5404
|
+
/**
|
|
5405
|
+
* @deprecated Please import from `@onecx/angular-utils` instead.
|
|
5406
|
+
*/
|
|
5342
5407
|
class TranslateCombinedLoader {
|
|
5343
5408
|
constructor(...loaders) {
|
|
5344
5409
|
this._loaders = loaders;
|
|
@@ -5378,6 +5443,9 @@ class TranslateCombinedLoader {
|
|
|
5378
5443
|
}
|
|
5379
5444
|
|
|
5380
5445
|
let lastTranslateLoaderTimerId$1 = 0;
|
|
5446
|
+
/**
|
|
5447
|
+
* @deprecated Please import from `@onecx/angular-utils` instead.
|
|
5448
|
+
*/
|
|
5381
5449
|
function createTranslateLoader(http, appStateService, translationCacheService) {
|
|
5382
5450
|
const ts = translationCacheService ?? inject(TranslationCacheService);
|
|
5383
5451
|
const timerId = lastTranslateLoaderTimerId$1++;
|
|
@@ -5513,11 +5581,11 @@ function searchPrefixWithSpecialChars(strings, prefix) {
|
|
|
5513
5581
|
return null;
|
|
5514
5582
|
}
|
|
5515
5583
|
|
|
5516
|
-
//
|
|
5584
|
+
// injection tokens + related utilities
|
|
5517
5585
|
|
|
5518
5586
|
/**
|
|
5519
5587
|
* Generated bundle index. Do not edit.
|
|
5520
5588
|
*/
|
|
5521
5589
|
|
|
5522
|
-
export { AdvancedDirective,
|
|
5590
|
+
export { AdvancedDirective, AngularAcceleratorMissingTranslationHandler, AngularAcceleratorModule, AngularAcceleratorPrimeNgModule, AsyncTranslateLoader, BreadcrumbService, CachingTranslateLoader, ColorUtils, ColumnGroupSelectionComponent, ColumnType, CustomGroupColumnSelectorComponent, DataLayoutSelectionComponent, DataListGridComponent, DataListGridSortingComponent, DataLoadingErrorComponent, DataTableComponent, DataViewComponent, DateUtils, DiagramComponent, DynamicPipe, FilterType, FilterViewComponent, GroupByCountDiagramComponent, IfBreakpointDirective, IfPermissionDirective, InteractiveDataViewComponent, ObjectUtils, OcxTimeAgoPipe, PageHeaderComponent, SearchHeaderComponent, SrcDirective, TemplateType, TooltipOnOverflowDirective, TranslateCombinedLoader, TranslationCacheService, atLeastOneFieldFilledValidator, buildSearchCriteria, createRemoteComponentAndMfeTranslateLoader, createRemoteComponentTranslateLoader, createTranslateLoader, enumToDropdownOptions, findEntryWithKeyword, findTemplate, flattenObject, isValidDate, limit, removeKeyword, searchPrefixWithSpecialChars };
|
|
5523
5591
|
//# sourceMappingURL=onecx-angular-accelerator.mjs.map
|