@onecx/angular-accelerator 8.7.0 → 8.8.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/fesm2022/onecx-angular-accelerator-testing.mjs +2 -2
- package/fesm2022/onecx-angular-accelerator-testing.mjs.map +1 -1
- package/fesm2022/onecx-angular-accelerator.mjs +64 -36
- package/fesm2022/onecx-angular-accelerator.mjs.map +1 -1
- package/package.json +7 -7
- package/types/onecx-angular-accelerator.d.ts +13 -3
|
@@ -9,7 +9,7 @@ import { HttpClient } from '@angular/common/http';
|
|
|
9
9
|
import * as i3 from '@angular/forms';
|
|
10
10
|
import { FormGroup, FormControlName, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
11
11
|
import { LiveAnnouncer } from '@angular/cdk/a11y';
|
|
12
|
-
import * as
|
|
12
|
+
import * as i4$1 from '@ngx-translate/core';
|
|
13
13
|
import { TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
|
|
14
14
|
import * as i1 from '@angular/common';
|
|
15
15
|
import { DatePipe, DecimalPipe, CurrencyPipe, formatDate, registerLocaleData, CommonModule } from '@angular/common';
|
|
@@ -17,13 +17,13 @@ import * as i2$1 from 'primeng/button';
|
|
|
17
17
|
import { ButtonModule } from 'primeng/button';
|
|
18
18
|
import * as i5 from 'primeng/skeleton';
|
|
19
19
|
import { SkeletonModule } from 'primeng/skeleton';
|
|
20
|
-
import * as i4$
|
|
20
|
+
import * as i4$2 from '@onecx/angular-remote-components';
|
|
21
21
|
import { SlotService, REMOTE_COMPONENT_CONFIG, AngularRemoteComponentsModule } from '@onecx/angular-remote-components';
|
|
22
22
|
import { Tooltip, TooltipStyle, TooltipModule } from 'primeng/tooltip';
|
|
23
23
|
import * as i2$3 from 'primeng/api';
|
|
24
24
|
import { PrimeIcons, PrimeTemplate, SharedModule, MessageService } from 'primeng/api';
|
|
25
25
|
import { __decorate } from 'tslib';
|
|
26
|
-
import * as
|
|
26
|
+
import * as i6 from '@angular/router';
|
|
27
27
|
import { Router, ActivatedRoute, NavigationEnd, NavigationStart, RouterModule } from '@angular/router';
|
|
28
28
|
import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
|
|
29
29
|
import * as i2 from 'primeng/breadcrumb';
|
|
@@ -36,32 +36,32 @@ import * as i2$2 from 'primeng/floatlabel';
|
|
|
36
36
|
import { FloatLabelModule } from 'primeng/floatlabel';
|
|
37
37
|
import * as i3$1 from 'primeng/dialog';
|
|
38
38
|
import { DialogModule } from 'primeng/dialog';
|
|
39
|
-
import * as i4$
|
|
39
|
+
import * as i4$3 from 'primeng/picklist';
|
|
40
40
|
import { PickListModule } from 'primeng/picklist';
|
|
41
41
|
import * as i5$1 from 'primeng/selectbutton';
|
|
42
42
|
import { SelectButtonModule } from 'primeng/selectbutton';
|
|
43
43
|
import { computedPrevious } from 'ngxtension/computed-previous';
|
|
44
44
|
import equal from 'fast-deep-equal';
|
|
45
|
-
import * as i4$
|
|
45
|
+
import * as i4$4 from 'primeng/dataview';
|
|
46
46
|
import { DataViewModule } from 'primeng/dataview';
|
|
47
47
|
import * as i3$2 from 'primeng/checkbox';
|
|
48
48
|
import { CheckboxModule } from 'primeng/checkbox';
|
|
49
49
|
import * as i5$2 from 'primeng/table';
|
|
50
50
|
import { TableModule } from 'primeng/table';
|
|
51
|
-
import * as i7
|
|
51
|
+
import * as i7 from 'primeng/multiselect';
|
|
52
52
|
import { MultiSelectModule } from 'primeng/multiselect';
|
|
53
53
|
import * as i2$4 from 'primeng/ripple';
|
|
54
54
|
import { RippleModule } from 'primeng/ripple';
|
|
55
55
|
import * as d3 from 'd3-scale-chromatic';
|
|
56
56
|
import * as i3$3 from 'primeng/chart';
|
|
57
57
|
import { ChartModule } from 'primeng/chart';
|
|
58
|
-
import * as i4$
|
|
58
|
+
import * as i4$5 from 'primeng/message';
|
|
59
59
|
import { MessageModule } from 'primeng/message';
|
|
60
60
|
import * as i5$3 from 'primeng/popover';
|
|
61
61
|
import { Popover, PopoverModule } from 'primeng/popover';
|
|
62
62
|
import * as i3$4 from 'primeng/chip';
|
|
63
63
|
import { ChipModule } from 'primeng/chip';
|
|
64
|
-
import * as i6 from 'primeng/focustrap';
|
|
64
|
+
import * as i6$1 from 'primeng/focustrap';
|
|
65
65
|
import { FocusTrapModule } from 'primeng/focustrap';
|
|
66
66
|
import * as i3$5 from 'primeng/timeline';
|
|
67
67
|
import { TimelineModule } from 'primeng/timeline';
|
|
@@ -967,7 +967,8 @@ class PageHeaderComponent {
|
|
|
967
967
|
tooltipEvent: 'hover',
|
|
968
968
|
tooltipPosition: 'top',
|
|
969
969
|
},
|
|
970
|
-
|
|
970
|
+
routerLink: typeof a.routerLink === 'string' ? a.routerLink : undefined,
|
|
971
|
+
command: typeof a.routerLink === 'string' ? undefined : () => handleActionSync(this.router, a),
|
|
971
972
|
disabled: a.disabled,
|
|
972
973
|
}));
|
|
973
974
|
}
|
|
@@ -993,11 +994,11 @@ class PageHeaderComponent {
|
|
|
993
994
|
});
|
|
994
995
|
}
|
|
995
996
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
996
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: PageHeaderComponent, isStandalone: false, selector: "ocx-page-header", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, figureBackground: { classPropertyName: "figureBackground", publicName: "figureBackground", isSignal: true, isRequired: false, transformFunction: null }, showFigure: { classPropertyName: "showFigure", publicName: "showFigure", isSignal: true, isRequired: false, transformFunction: null }, figureImage: { classPropertyName: "figureImage", publicName: "figureImage", isSignal: true, isRequired: false, transformFunction: null }, disableDefaultActions: { classPropertyName: "disableDefaultActions", publicName: "disableDefaultActions", isSignal: true, isRequired: false, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, objectDetails: { classPropertyName: "objectDetails", publicName: "objectDetails", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, manualBreadcrumbs: { classPropertyName: "manualBreadcrumbs", publicName: "manualBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, enableGridView: { classPropertyName: "enableGridView", publicName: "enableGridView", isSignal: true, isRequired: false, transformFunction: null }, gridLayoutDesktopColumns: { classPropertyName: "gridLayoutDesktopColumns", publicName: "gridLayoutDesktopColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actions: "actionsChange", save: "save" }, queries: [{ propertyName: "_additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true, isSignal: true }, { propertyName: "_additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "breadcrumbElementRef", first: true, predicate: ["breadcrumbRef"], descendants: true, read: ElementRef }], 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 #breadcrumbRef\n id=\"pageHeaderBreadcrumb\"\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\n [ocxSrc]=\"figureImage()\"\n alt=\"Figure Image\"\n class=\"w-full border-round-sm\"\n (error)=\"handleImageError()\"\n />\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)=\"onActionClick(action)\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [loading]=\"action.loading ?? 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\" class=\"mr-2\"></p-skeleton>\n <p-skeleton shape=\"circle\" size=\"2rem\" class=\"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]=\"objectPanelLayoutClasses()\">\n @if (objectDetails()) { @for (item of objectDetails(); track item) {\n <div class=\"object-info\" [ngClass]=\"objectInfoLayoutClasses()\">\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>\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{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", "pButtonPT", "pButtonUnstyled", "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", "motionOptions"], 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 }); }
|
|
997
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: PageHeaderComponent, isStandalone: false, selector: "ocx-page-header", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, figureBackground: { classPropertyName: "figureBackground", publicName: "figureBackground", isSignal: true, isRequired: false, transformFunction: null }, showFigure: { classPropertyName: "showFigure", publicName: "showFigure", isSignal: true, isRequired: false, transformFunction: null }, figureImage: { classPropertyName: "figureImage", publicName: "figureImage", isSignal: true, isRequired: false, transformFunction: null }, disableDefaultActions: { classPropertyName: "disableDefaultActions", publicName: "disableDefaultActions", isSignal: true, isRequired: false, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, objectDetails: { classPropertyName: "objectDetails", publicName: "objectDetails", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, manualBreadcrumbs: { classPropertyName: "manualBreadcrumbs", publicName: "manualBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, enableGridView: { classPropertyName: "enableGridView", publicName: "enableGridView", isSignal: true, isRequired: false, transformFunction: null }, gridLayoutDesktopColumns: { classPropertyName: "gridLayoutDesktopColumns", publicName: "gridLayoutDesktopColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actions: "actionsChange", save: "save" }, queries: [{ propertyName: "_additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true, isSignal: true }, { propertyName: "_additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "breadcrumbElementRef", first: true, predicate: ["breadcrumbRef"], descendants: true, read: ElementRef }], 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 #breadcrumbRef\n id=\"pageHeaderBreadcrumb\"\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\n [ocxSrc]=\"figureImage()\"\n alt=\"Figure Image\"\n class=\"w-full border-round-sm\"\n (error)=\"handleImageError()\"\n />\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 @if (typeof action.routerLink === 'string' && !action.disabled) {\n <a\n pButton\n [id]=\"action.id\"\n [icon]=\"action.icon ?? ''\"\n [iconPos]=\"action.iconPos ?? 'left'\"\n class=\"action-button no-underline\"\n [ngClass]=\"action.btnClass\"\n [routerLink]=\"action.routerLink\"\n [attr.data-testid]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [attr.aria-label]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n >{{ action.labelKey ? (action.labelKey | translate) : action.label }}</a\n >\n } @else {\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)=\"onActionClick(action)\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [loading]=\"action.loading ?? 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 }\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\" class=\"mr-2\"></p-skeleton>\n <p-skeleton shape=\"circle\" size=\"2rem\" class=\"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]=\"objectPanelLayoutClasses()\">\n @if (objectDetails()) { @for (item of objectDetails(); track item) {\n <div class=\"object-info\" [ngClass]=\"objectInfoLayoutClasses()\">\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>\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{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", "pButtonPT", "pButtonUnstyled", "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", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: i4$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
997
998
|
}
|
|
998
999
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
999
1000
|
type: Component,
|
|
1000
|
-
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 #breadcrumbRef\n id=\"pageHeaderBreadcrumb\"\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\n [ocxSrc]=\"figureImage()\"\n alt=\"Figure Image\"\n class=\"w-full border-round-sm\"\n (error)=\"handleImageError()\"\n />\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)=\"onActionClick(action)\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [loading]=\"action.loading ?? 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\" class=\"mr-2\"></p-skeleton>\n <p-skeleton shape=\"circle\" size=\"2rem\" class=\"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]=\"objectPanelLayoutClasses()\">\n @if (objectDetails()) { @for (item of objectDetails(); track item) {\n <div class=\"object-info\" [ngClass]=\"objectInfoLayoutClasses()\">\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>\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{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"] }]
|
|
1001
|
+
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 #breadcrumbRef\n id=\"pageHeaderBreadcrumb\"\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\n [ocxSrc]=\"figureImage()\"\n alt=\"Figure Image\"\n class=\"w-full border-round-sm\"\n (error)=\"handleImageError()\"\n />\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 @if (typeof action.routerLink === 'string' && !action.disabled) {\n <a\n pButton\n [id]=\"action.id\"\n [icon]=\"action.icon ?? ''\"\n [iconPos]=\"action.iconPos ?? 'left'\"\n class=\"action-button no-underline\"\n [ngClass]=\"action.btnClass\"\n [routerLink]=\"action.routerLink\"\n [attr.data-testid]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [attr.aria-label]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n >{{ action.labelKey ? (action.labelKey | translate) : action.label }}</a\n >\n } @else {\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)=\"onActionClick(action)\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [loading]=\"action.loading ?? 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 }\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\" class=\"mr-2\"></p-skeleton>\n <p-skeleton shape=\"circle\" size=\"2rem\" class=\"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]=\"objectPanelLayoutClasses()\">\n @if (objectDetails()) { @for (item of objectDetails(); track item) {\n <div class=\"object-info\" [ngClass]=\"objectInfoLayoutClasses()\">\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>\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{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"] }]
|
|
1001
1002
|
}], ctorParameters: () => [], propDecorators: { breadcrumbElementRef: [{
|
|
1002
1003
|
type: ViewChild,
|
|
1003
1004
|
args: ['breadcrumbRef', { read: ElementRef }]
|
|
@@ -1144,7 +1145,7 @@ class SearchHeaderComponent {
|
|
|
1144
1145
|
});
|
|
1145
1146
|
}
|
|
1146
1147
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SearchHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1147
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SearchHeaderComponent, isStandalone: false, selector: "ocx-search-header", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, manualBreadcrumbs: { classPropertyName: "manualBreadcrumbs", publicName: "manualBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, searchResultsCount: { classPropertyName: "searchResultsCount", publicName: "searchResultsCount", isSignal: true, isRequired: false, transformFunction: null }, searchConfigPermission: { classPropertyName: "searchConfigPermission", publicName: "searchConfigPermission", isSignal: true, isRequired: false, transformFunction: null }, searchButtonDisabled: { classPropertyName: "searchButtonDisabled", publicName: "searchButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, resetButtonDisabled: { classPropertyName: "resetButtonDisabled", publicName: "resetButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, pageName: { classPropertyName: "pageName", publicName: "pageName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewMode: "viewModeChange", searched: "searched", resetted: "resetted", selectedSearchConfigChanged: "selectedSearchConfigChanged", viewModeChanged: "viewModeChanged", componentStateChanged: "componentStateChanged" }, providers: [], queries: [{ propertyName: "_additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true, isSignal: true }, { propertyName: "_additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true, isSignal: true }, { propertyName: "formGroup", first: true, predicate: FormGroup, descendants: true, isSignal: true }, { propertyName: "visibleFormControls", predicate: FormControlName, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "searchParameterFields", first: true, predicate: ["searchParameterFields"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #searchBtn>\n <p-button\n id=\"searchButton\"\n icon=\"pi pi-search\"\n (onClick)=\"onSearchClicked()\"\n (keydown.enter)=\"onSearchClicked()\"\n (keydown.space)=\"onSearchClicked()\"\n [disabled]=\"searchButtonDisabled() || formGroup()?.invalid\"\n [label]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate\"\n [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.ARIA_LABEL' | translate\"\n [ocxTooltip]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n ></p-button>\n</ng-template>\n<ng-template #resetBtn>\n <p-button\n id=\"resetButton\"\n icon=\"pi pi-eraser\"\n (onClick)=\"onResetClicked()\"\n (keydown.enter)=\"onResetClicked()\"\n (keydown.space)=\"onResetClicked()\"\n [disabled]=\"resetButtonDisabled()\"\n [label]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate\"\n [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.ARIA_LABEL' | translate\"\n [ocxTooltip]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n ></p-button>\n</ng-template>\n\n<ocx-page-header\n [header]=\"header() || ('OCX_SEARCH_HEADER.HEADER' | translate)\"\n [subheader]=\"subheader()\"\n [manualBreadcrumbs]=\"manualBreadcrumbs()\"\n [actions]=\"headerActions()\"\n>\n <ng-template #additionalToolbarContentLeft>\n @if (searchConfigChangeObserved() && pageName()) {\n <ocx-slot\n *ocxIfPermission=\"searchConfigPermission()\"\n name=\"onecx-search-config\"\n [inputs]=\"{ pageName: pageName(), currentFieldValues: fieldValues$ | async, viewMode: viewMode() }\"\n [outputs]=\"{ searchConfigSelected: searchConfigChangedSlotEmitter }\"\n >\n <ng-template #skeleton>\n <div class=\"flex\">\n <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n </div>\n </ng-template>\n </ocx-slot>\n } @if (_additionalToolbarContentLeft()) {\n <ng-container [ngTemplateOutlet]=\"_additionalToolbarContentLeft()\"></ng-container>\n }\n </ng-template>\n <ng-template #additionalToolbarContent>\n @if (_additionalToolbarContent()) {\n <ng-container [ngTemplateOutlet]=\"_additionalToolbarContent()\"></ng-container>\n }\n </ng-template>\n <div class=\"flex row-gap-3 column-gap-6 flex-wrap align-items-center\">\n <section #searchParameterFields [attr.aria-label]=\"'Search Criteria'\">\n <ng-content></ng-content>\n </section>\n <section\n class=\"flex flex-wrap gap-2\"\n [ngClass]=\"'flex-row'\"\n [attr.aria-label]=\"'OCX_SEARCH_HEADER.CONTROLS.ARIA_LABEL' | translate\"\n >\n @let searchButtonsReversed = (searchButtonsReversed$ | async);\n @if (searchButtonsReversed !== null) {\n @if (searchButtonsReversed) {\n <ng-container [ngTemplateOutlet]=\"searchBtn\"></ng-container>\n @if (resetted.observed()) {\n <ng-container [ngTemplateOutlet]=\"resetBtn\"></ng-container>\n }\n } @else {\n @if (resetted.observed()) {\n <ng-container [ngTemplateOutlet]=\"resetBtn\"></ng-container>\n }\n <ng-container [ngTemplateOutlet]=\"searchBtn\"></ng-container>\n }\n }\n </section>\n </div>\n</ocx-page-header>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i4$
|
|
1148
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SearchHeaderComponent, isStandalone: false, selector: "ocx-search-header", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, manualBreadcrumbs: { classPropertyName: "manualBreadcrumbs", publicName: "manualBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, searchResultsCount: { classPropertyName: "searchResultsCount", publicName: "searchResultsCount", isSignal: true, isRequired: false, transformFunction: null }, searchConfigPermission: { classPropertyName: "searchConfigPermission", publicName: "searchConfigPermission", isSignal: true, isRequired: false, transformFunction: null }, searchButtonDisabled: { classPropertyName: "searchButtonDisabled", publicName: "searchButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, resetButtonDisabled: { classPropertyName: "resetButtonDisabled", publicName: "resetButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, pageName: { classPropertyName: "pageName", publicName: "pageName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewMode: "viewModeChange", searched: "searched", resetted: "resetted", selectedSearchConfigChanged: "selectedSearchConfigChanged", viewModeChanged: "viewModeChanged", componentStateChanged: "componentStateChanged" }, providers: [], queries: [{ propertyName: "_additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true, isSignal: true }, { propertyName: "_additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true, isSignal: true }, { propertyName: "formGroup", first: true, predicate: FormGroup, descendants: true, isSignal: true }, { propertyName: "visibleFormControls", predicate: FormControlName, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "searchParameterFields", first: true, predicate: ["searchParameterFields"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #searchBtn>\n <p-button\n id=\"searchButton\"\n icon=\"pi pi-search\"\n (onClick)=\"onSearchClicked()\"\n (keydown.enter)=\"onSearchClicked()\"\n (keydown.space)=\"onSearchClicked()\"\n [disabled]=\"searchButtonDisabled() || formGroup()?.invalid\"\n [label]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate\"\n [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.ARIA_LABEL' | translate\"\n [ocxTooltip]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n ></p-button>\n</ng-template>\n<ng-template #resetBtn>\n <p-button\n id=\"resetButton\"\n icon=\"pi pi-eraser\"\n (onClick)=\"onResetClicked()\"\n (keydown.enter)=\"onResetClicked()\"\n (keydown.space)=\"onResetClicked()\"\n [disabled]=\"resetButtonDisabled()\"\n [label]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate\"\n [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.ARIA_LABEL' | translate\"\n [ocxTooltip]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n ></p-button>\n</ng-template>\n\n<ocx-page-header\n [header]=\"header() || ('OCX_SEARCH_HEADER.HEADER' | translate)\"\n [subheader]=\"subheader()\"\n [manualBreadcrumbs]=\"manualBreadcrumbs()\"\n [actions]=\"headerActions()\"\n>\n <ng-template #additionalToolbarContentLeft>\n @if (searchConfigChangeObserved() && pageName()) {\n <ocx-slot\n *ocxIfPermission=\"searchConfigPermission()\"\n name=\"onecx-search-config\"\n [inputs]=\"{ pageName: pageName(), currentFieldValues: fieldValues$ | async, viewMode: viewMode() }\"\n [outputs]=\"{ searchConfigSelected: searchConfigChangedSlotEmitter }\"\n >\n <ng-template #skeleton>\n <div class=\"flex\">\n <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n </div>\n </ng-template>\n </ocx-slot>\n } @if (_additionalToolbarContentLeft()) {\n <ng-container [ngTemplateOutlet]=\"_additionalToolbarContentLeft()\"></ng-container>\n }\n </ng-template>\n <ng-template #additionalToolbarContent>\n @if (_additionalToolbarContent()) {\n <ng-container [ngTemplateOutlet]=\"_additionalToolbarContent()\"></ng-container>\n }\n </ng-template>\n <div class=\"flex row-gap-3 column-gap-6 flex-wrap align-items-center\">\n <section #searchParameterFields [attr.aria-label]=\"'Search Criteria'\">\n <ng-content></ng-content>\n </section>\n <section\n class=\"flex flex-wrap gap-2\"\n [ngClass]=\"'flex-row'\"\n [attr.aria-label]=\"'OCX_SEARCH_HEADER.CONTROLS.ARIA_LABEL' | translate\"\n >\n @let searchButtonsReversed = (searchButtonsReversed$ | async);\n @if (searchButtonsReversed !== null) {\n @if (searchButtonsReversed) {\n <ng-container [ngTemplateOutlet]=\"searchBtn\"></ng-container>\n @if (resetted.observed()) {\n <ng-container [ngTemplateOutlet]=\"resetBtn\"></ng-container>\n }\n } @else {\n @if (resetted.observed()) {\n <ng-container [ngTemplateOutlet]=\"resetBtn\"></ng-container>\n }\n <ng-container [ngTemplateOutlet]=\"searchBtn\"></ng-container>\n }\n }\n </section>\n </div>\n</ocx-page-header>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i4$2.SlotComponent, selector: "ocx-slot", inputs: ["name", "inputs", "outputs"], outputs: ["inputsChange", "outputsChange"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "component", type: PageHeaderComponent, selector: "ocx-page-header", inputs: ["header", "loading", "figureBackground", "showFigure", "figureImage", "disableDefaultActions", "subheader", "actions", "objectDetails", "showBreadcrumbs", "manualBreadcrumbs", "enableGridView", "gridLayoutDesktopColumns"], outputs: ["actionsChange", "save"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] }); }
|
|
1148
1149
|
}
|
|
1149
1150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SearchHeaderComponent, decorators: [{
|
|
1150
1151
|
type: Component,
|
|
@@ -1398,7 +1399,7 @@ class ColumnGroupSelectionComponent {
|
|
|
1398
1399
|
});
|
|
1399
1400
|
}
|
|
1400
1401
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColumnGroupSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1401
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ColumnGroupSelectionComponent, isStandalone: false, selector: "ocx-column-group-selection", inputs: { selectedGroupKey: { classPropertyName: "selectedGroupKey", publicName: "selectedGroupKey", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, defaultGroupKey: { classPropertyName: "defaultGroupKey", publicName: "defaultGroupKey", isSignal: true, isRequired: false, transformFunction: null }, customGroupKey: { classPropertyName: "customGroupKey", publicName: "customGroupKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedGroupKey: "selectedGroupKeyChange", groupSelectionChanged: "groupSelectionChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-floatlabel variant=\"on\">\n @if (allGroupKeys().length) {\n <p-select\n class=\"p-inputwrapper-filled\"\n inputId=\"columnGroupSelectionDropdown\"\n id=\"columnGroupSelectionDropdownElement\"\n (onChange)=\"changeGroupSelection($event)\"\n [options]=\"allGroupKeys()\"\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 } @if (allGroupKeys().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", "motionOptions"], 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:
|
|
1402
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ColumnGroupSelectionComponent, isStandalone: false, selector: "ocx-column-group-selection", inputs: { selectedGroupKey: { classPropertyName: "selectedGroupKey", publicName: "selectedGroupKey", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, defaultGroupKey: { classPropertyName: "defaultGroupKey", publicName: "defaultGroupKey", isSignal: true, isRequired: false, transformFunction: null }, customGroupKey: { classPropertyName: "customGroupKey", publicName: "customGroupKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedGroupKey: "selectedGroupKeyChange", groupSelectionChanged: "groupSelectionChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-floatlabel variant=\"on\">\n @if (allGroupKeys().length) {\n <p-select\n class=\"p-inputwrapper-filled\"\n inputId=\"columnGroupSelectionDropdown\"\n id=\"columnGroupSelectionDropdownElement\"\n (onChange)=\"changeGroupSelection($event)\"\n [options]=\"allGroupKeys()\"\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 } @if (allGroupKeys().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", "motionOptions"], 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: i4$1.TranslatePipe, name: "translate" }] }); }
|
|
1402
1403
|
}
|
|
1403
1404
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColumnGroupSelectionComponent, decorators: [{
|
|
1404
1405
|
type: Component,
|
|
@@ -1557,7 +1558,7 @@ class CustomGroupColumnSelectorComponent {
|
|
|
1557
1558
|
this.visible.set(false);
|
|
1558
1559
|
}
|
|
1559
1560
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CustomGroupColumnSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1560
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: CustomGroupColumnSelectorComponent, isStandalone: false, selector: "ocx-custom-group-column-selector", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, customGroupKey: { classPropertyName: "customGroupKey", publicName: "customGroupKey", isSignal: true, isRequired: false, transformFunction: null }, dialogTitle: { classPropertyName: "dialogTitle", publicName: "dialogTitle", isSignal: true, isRequired: false, transformFunction: null }, dialogTitleKey: { classPropertyName: "dialogTitleKey", publicName: "dialogTitleKey", isSignal: true, isRequired: false, transformFunction: null }, openButtonTitle: { classPropertyName: "openButtonTitle", publicName: "openButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, openButtonTitleKey: { classPropertyName: "openButtonTitleKey", publicName: "openButtonTitleKey", isSignal: true, isRequired: false, transformFunction: null }, openButtonAriaLabel: { classPropertyName: "openButtonAriaLabel", publicName: "openButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, openButtonAriaLabelKey: { classPropertyName: "openButtonAriaLabelKey", publicName: "openButtonAriaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, saveButtonLabel: { classPropertyName: "saveButtonLabel", publicName: "saveButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, saveButtonLabelKey: { classPropertyName: "saveButtonLabelKey", publicName: "saveButtonLabelKey", isSignal: true, isRequired: false, transformFunction: null }, saveButtonAriaLabel: { classPropertyName: "saveButtonAriaLabel", publicName: "saveButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, saveButtonAriaLabelKey: { classPropertyName: "saveButtonAriaLabelKey", publicName: "saveButtonAriaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabelKey: { classPropertyName: "cancelButtonLabelKey", publicName: "cancelButtonLabelKey", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabel: { classPropertyName: "cancelButtonAriaLabel", publicName: "cancelButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabelKey: { classPropertyName: "cancelButtonAriaLabelKey", publicName: "cancelButtonAriaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, activeColumnsLabel: { classPropertyName: "activeColumnsLabel", publicName: "activeColumnsLabel", isSignal: true, isRequired: false, transformFunction: null }, activeColumnsLabelKey: { classPropertyName: "activeColumnsLabelKey", publicName: "activeColumnsLabelKey", isSignal: true, isRequired: false, transformFunction: null }, inactiveColumnsLabel: { classPropertyName: "inactiveColumnsLabel", publicName: "inactiveColumnsLabel", isSignal: true, isRequired: false, transformFunction: null }, inactiveColumnsLabelKey: { classPropertyName: "inactiveColumnsLabelKey", publicName: "inactiveColumnsLabelKey", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: true, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { displayedColumns: "displayedColumnsChange", columnSelectionChanged: "columnSelectionChanged", actionColumnConfigChanged: "actionColumnConfigChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-button\n id=\"customGroupColumnSelectorButton\"\n type=\"button\"\n (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n [ocxTooltip]=\"openButtonTitle() || (openButtonTitleKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n tooltipPosition=\"top\"\n icon=\"pi pi-cog\"\n styleClass=\"p-button\"\n [ariaLabel]=\"(openButtonAriaLabelKey() ? (openButtonAriaLabelKey() | translate) : openButtonAriaLabel()) || openButtonTitle() || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n [attr.aria-controls]=\"visible() ? 'customGroupColumnSelectorDialog' : null\"\n [attr.aria-expanded]=\"visible() ? true : false\"\n></p-button>\n\n<p-dialog\n #dialog\n id=\"customGroupColumnSelectorDialog\"\n [(visible)]=\"visible\"\n [style]=\"{ width: '70%' }\"\n [modal]=\"true\"\n [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n <ng-template pTemplate=\"header\">\n <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n >{{ dialogTitle() || (dialogTitleKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' |\n translate) }}</span\n >\n </ng-template>\n\n @let resolvedActiveColumnsLabel = activeColumnsLabel() || (activeColumnsLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate);\n @let resolvedInactiveColumnsLabel = inactiveColumnsLabel() || (inactiveColumnsLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate);\n <p-pickList\n [source]=\"displayedColumnsModel()\"\n [target]=\"hiddenColumnsModel()\"\n [sourceHeader]=\"resolvedActiveColumnsLabel\"\n [targetHeader]=\"resolvedInactiveColumnsLabel\"\n [sourceAriaLabel]=\"resolvedActiveColumnsLabel\"\n [targetAriaLabel]=\"resolvedInactiveColumnsLabel\"\n [dragdrop]=\"true\"\n [responsive]=\"false\" [sourceStyle]=\"{ height: '300px' }\"\n [targetStyle]=\"{ height: '300px' }\"\n [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\">\n <ng-template let-item #item>\n <div>{{ item.nameKey | translate }}</div>\n </ng-template>\n </p-pickList>\n\n <div class=\"pt-4\">\n <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n <div class=\"flex gap-6 px-3\">\n <div>\n <p id=\"frozenActionColumnLabel\" class=\"mb-1\">\n {{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}\n </p>\n <p-selectbutton\n [options]=\"frozenOptions()\"\n [(ngModel)]=\"frozenActionColumnModel\"\n optionLabel=\"label\"\n optionValue=\"value\"\n id=\"frozenActionColumn\"\n name=\"frozen-action-column-select-button\"\n [allowEmpty]=\"false\"\n ariaLabelledBy=\"frozenActionColumnLabel\"\n >\n <ng-template #item let-option> {{option.label | translate}} </ng-template>\n </p-selectbutton>\n </div>\n <div>\n <p id=\"actionColumnPositionLabel\" class=\"mb-1\">\n {{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}\n </p>\n <p-selectbutton\n [options]=\"alignmentOptions()\"\n [(ngModel)]=\"actionColumnPositionModel\"\n optionLabel=\"label\"\n optionValue=\"value\"\n id=\"actionColumnPosition\"\n name=\"action-column-position-select-button\"\n [allowEmpty]=\"false\"\n ariaLabelledBy=\"actionColumnPositionLabel\"\n >\n <ng-template #item let-option> {{option.label | translate}} </ng-template>\n </p-selectbutton>\n </div>\n </div>\n </div>\n\n <ng-template pTemplate=\"footer\">\n <p-button\n id=\"cancelButton\"\n (onClick)=\"onCancelClick()\"\n [label]=\"cancelButtonLabel() || (cancelButtonLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n styleClass=\"p-button\"\n [ariaLabel]=\"cancelButtonLabel() || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n ></p-button>\n <p-button\n id=\"saveButton\"\n (onClick)=\"onSaveClick()\"\n [label]=\"saveButtonLabel() || (saveButtonLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n [ariaLabel]=\"saveButtonAriaLabelKey() || (saveButtonAriaLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n ></p-button>\n </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary{background-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary:not(:disabled):hover{background-color:var(--p-primary-hover-color)}.p-button{height:100%}\n"], dependencies: [{ kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: i3$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i4$2.PickList, selector: "p-pickList, p-picklist, p-pick-list", inputs: ["hostName", "source", "target", "dataKey", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "sourceAriaLabel", "targetAriaLabel", "targetHeader", "responsive", "filterBy", "filterLocale", "trackBy", "sourceTrackBy", "targetTrackBy", "showSourceFilter", "showTargetFilter", "metaKeySelection", "dragdrop", "style", "styleClass", "sourceStyle", "targetStyle", "showSourceControls", "showTargetControls", "sourceFilterPlaceholder", "targetFilterPlaceholder", "disabled", "sourceOptionDisabled", "targetOptionDisabled", "ariaSourceFilterLabel", "ariaTargetFilterLabel", "filterMatchMode", "stripedRows", "keepSelection", "scrollHeight", "autoOptionFocus", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps", "moveToTargetProps", "moveAllToTargetProps", "moveToSourceProps", "moveAllToSourceProps", "breakpoint"], outputs: ["sourceChange", "targetChange", "onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "component", type: i5$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { 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: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
1561
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: CustomGroupColumnSelectorComponent, isStandalone: false, selector: "ocx-custom-group-column-selector", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, customGroupKey: { classPropertyName: "customGroupKey", publicName: "customGroupKey", isSignal: true, isRequired: false, transformFunction: null }, dialogTitle: { classPropertyName: "dialogTitle", publicName: "dialogTitle", isSignal: true, isRequired: false, transformFunction: null }, dialogTitleKey: { classPropertyName: "dialogTitleKey", publicName: "dialogTitleKey", isSignal: true, isRequired: false, transformFunction: null }, openButtonTitle: { classPropertyName: "openButtonTitle", publicName: "openButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, openButtonTitleKey: { classPropertyName: "openButtonTitleKey", publicName: "openButtonTitleKey", isSignal: true, isRequired: false, transformFunction: null }, openButtonAriaLabel: { classPropertyName: "openButtonAriaLabel", publicName: "openButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, openButtonAriaLabelKey: { classPropertyName: "openButtonAriaLabelKey", publicName: "openButtonAriaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, saveButtonLabel: { classPropertyName: "saveButtonLabel", publicName: "saveButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, saveButtonLabelKey: { classPropertyName: "saveButtonLabelKey", publicName: "saveButtonLabelKey", isSignal: true, isRequired: false, transformFunction: null }, saveButtonAriaLabel: { classPropertyName: "saveButtonAriaLabel", publicName: "saveButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, saveButtonAriaLabelKey: { classPropertyName: "saveButtonAriaLabelKey", publicName: "saveButtonAriaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabelKey: { classPropertyName: "cancelButtonLabelKey", publicName: "cancelButtonLabelKey", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabel: { classPropertyName: "cancelButtonAriaLabel", publicName: "cancelButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabelKey: { classPropertyName: "cancelButtonAriaLabelKey", publicName: "cancelButtonAriaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, activeColumnsLabel: { classPropertyName: "activeColumnsLabel", publicName: "activeColumnsLabel", isSignal: true, isRequired: false, transformFunction: null }, activeColumnsLabelKey: { classPropertyName: "activeColumnsLabelKey", publicName: "activeColumnsLabelKey", isSignal: true, isRequired: false, transformFunction: null }, inactiveColumnsLabel: { classPropertyName: "inactiveColumnsLabel", publicName: "inactiveColumnsLabel", isSignal: true, isRequired: false, transformFunction: null }, inactiveColumnsLabelKey: { classPropertyName: "inactiveColumnsLabelKey", publicName: "inactiveColumnsLabelKey", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: true, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { displayedColumns: "displayedColumnsChange", columnSelectionChanged: "columnSelectionChanged", actionColumnConfigChanged: "actionColumnConfigChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-button\n id=\"customGroupColumnSelectorButton\"\n type=\"button\"\n (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n [ocxTooltip]=\"openButtonTitle() || (openButtonTitleKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n tooltipPosition=\"top\"\n icon=\"pi pi-cog\"\n styleClass=\"p-button\"\n [ariaLabel]=\"(openButtonAriaLabelKey() ? (openButtonAriaLabelKey() | translate) : openButtonAriaLabel()) || openButtonTitle() || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n [attr.aria-controls]=\"visible() ? 'customGroupColumnSelectorDialog' : null\"\n [attr.aria-expanded]=\"visible() ? true : false\"\n></p-button>\n\n<p-dialog\n #dialog\n id=\"customGroupColumnSelectorDialog\"\n [(visible)]=\"visible\"\n [style]=\"{ width: '70%' }\"\n [modal]=\"true\"\n [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n <ng-template pTemplate=\"header\">\n <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n >{{ dialogTitle() || (dialogTitleKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' |\n translate) }}</span\n >\n </ng-template>\n\n @let resolvedActiveColumnsLabel = activeColumnsLabel() || (activeColumnsLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate);\n @let resolvedInactiveColumnsLabel = inactiveColumnsLabel() || (inactiveColumnsLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate);\n <p-pickList\n [source]=\"displayedColumnsModel()\"\n [target]=\"hiddenColumnsModel()\"\n [sourceHeader]=\"resolvedActiveColumnsLabel\"\n [targetHeader]=\"resolvedInactiveColumnsLabel\"\n [sourceAriaLabel]=\"resolvedActiveColumnsLabel\"\n [targetAriaLabel]=\"resolvedInactiveColumnsLabel\"\n [dragdrop]=\"true\"\n [responsive]=\"false\" [sourceStyle]=\"{ height: '300px' }\"\n [targetStyle]=\"{ height: '300px' }\"\n [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\">\n <ng-template let-item #item>\n <div>{{ item.nameKey | translate }}</div>\n </ng-template>\n </p-pickList>\n\n <div class=\"pt-4\">\n <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n <div class=\"flex gap-6 px-3\">\n <div>\n <p id=\"frozenActionColumnLabel\" class=\"mb-1\">\n {{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}\n </p>\n <p-selectbutton\n [options]=\"frozenOptions()\"\n [(ngModel)]=\"frozenActionColumnModel\"\n optionLabel=\"label\"\n optionValue=\"value\"\n id=\"frozenActionColumn\"\n name=\"frozen-action-column-select-button\"\n [allowEmpty]=\"false\"\n ariaLabelledBy=\"frozenActionColumnLabel\"\n >\n <ng-template #item let-option> {{option.label | translate}} </ng-template>\n </p-selectbutton>\n </div>\n <div>\n <p id=\"actionColumnPositionLabel\" class=\"mb-1\">\n {{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}\n </p>\n <p-selectbutton\n [options]=\"alignmentOptions()\"\n [(ngModel)]=\"actionColumnPositionModel\"\n optionLabel=\"label\"\n optionValue=\"value\"\n id=\"actionColumnPosition\"\n name=\"action-column-position-select-button\"\n [allowEmpty]=\"false\"\n ariaLabelledBy=\"actionColumnPositionLabel\"\n >\n <ng-template #item let-option> {{option.label | translate}} </ng-template>\n </p-selectbutton>\n </div>\n </div>\n </div>\n\n <ng-template pTemplate=\"footer\">\n <p-button\n id=\"cancelButton\"\n (onClick)=\"onCancelClick()\"\n [label]=\"cancelButtonLabel() || (cancelButtonLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n styleClass=\"p-button\"\n [ariaLabel]=\"cancelButtonLabel() || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n ></p-button>\n <p-button\n id=\"saveButton\"\n (onClick)=\"onSaveClick()\"\n [label]=\"saveButtonLabel() || (saveButtonLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n [ariaLabel]=\"saveButtonAriaLabelKey() || (saveButtonAriaLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n ></p-button>\n </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary{background-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary:not(:disabled):hover{background-color:var(--p-primary-hover-color)}.p-button{height:100%}\n"], dependencies: [{ kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: i3$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i4$3.PickList, selector: "p-pickList, p-picklist, p-pick-list", inputs: ["hostName", "source", "target", "dataKey", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "sourceAriaLabel", "targetAriaLabel", "targetHeader", "responsive", "filterBy", "filterLocale", "trackBy", "sourceTrackBy", "targetTrackBy", "showSourceFilter", "showTargetFilter", "metaKeySelection", "dragdrop", "style", "styleClass", "sourceStyle", "targetStyle", "showSourceControls", "showTargetControls", "sourceFilterPlaceholder", "targetFilterPlaceholder", "disabled", "sourceOptionDisabled", "targetOptionDisabled", "ariaSourceFilterLabel", "ariaTargetFilterLabel", "filterMatchMode", "stripedRows", "keepSelection", "scrollHeight", "autoOptionFocus", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps", "moveToTargetProps", "moveAllToTargetProps", "moveToSourceProps", "moveAllToSourceProps", "breakpoint"], outputs: ["sourceChange", "targetChange", "onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "component", type: i5$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { 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: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] }); }
|
|
1561
1562
|
}
|
|
1562
1563
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CustomGroupColumnSelectorComponent, decorators: [{
|
|
1563
1564
|
type: Component,
|
|
@@ -1609,7 +1610,7 @@ class DataLayoutSelectionComponent {
|
|
|
1609
1610
|
});
|
|
1610
1611
|
}
|
|
1611
1612
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataLayoutSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1612
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DataLayoutSelectionComponent, isStandalone: false, selector: "ocx-data-layout-selection", inputs: { supportedViewLayouts: { classPropertyName: "supportedViewLayouts", publicName: "supportedViewLayouts", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layout: "layoutChange", dataViewLayoutChange: "dataViewLayoutChange", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n @if (viewingLayouts().length > 1) {\n <p-selectbutton\n [options]=\"viewingLayouts()\"\n [ngModel]=\"selectedViewLayout()\"\n optionLabel=\"id\"\n (onChange)=\"onDataViewLayoutChange($event.value)\"\n [ariaLabel]=\"'OCX_DATA_LAYOUT_SELECTION.SELECT_BUTTON.ARIA_LABEL' | translate\"\n >\n <ng-template #item let-item>\n <i [class]=\"item.icon\" [ocxTooltip]=\"item.tooltipKey | translate\" tooltipPosition=\"top\" aria-hidden=\"true\"></i>\n <span class=\"sr-only\" [attr.id]=\"item.id\">{{ item.labelKey | translate }}</span>\n </ng-template>\n </p-selectbutton>\n }\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"], dependencies: [{ kind: "component", type: i5$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { 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: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type:
|
|
1613
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DataLayoutSelectionComponent, isStandalone: false, selector: "ocx-data-layout-selection", inputs: { supportedViewLayouts: { classPropertyName: "supportedViewLayouts", publicName: "supportedViewLayouts", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layout: "layoutChange", dataViewLayoutChange: "dataViewLayoutChange", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n @if (viewingLayouts().length > 1) {\n <p-selectbutton\n [options]=\"viewingLayouts()\"\n [ngModel]=\"selectedViewLayout()\"\n optionLabel=\"id\"\n (onChange)=\"onDataViewLayoutChange($event.value)\"\n [ariaLabel]=\"'OCX_DATA_LAYOUT_SELECTION.SELECT_BUTTON.ARIA_LABEL' | translate\"\n >\n <ng-template #item let-item>\n <i [class]=\"item.icon\" [ocxTooltip]=\"item.tooltipKey | translate\" tooltipPosition=\"top\" aria-hidden=\"true\"></i>\n <span class=\"sr-only\" [attr.id]=\"item.id\">{{ item.labelKey | translate }}</span>\n </ng-template>\n </p-selectbutton>\n }\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"], dependencies: [{ kind: "component", type: i5$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { 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: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] }); }
|
|
1613
1614
|
}
|
|
1614
1615
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataLayoutSelectionComponent, decorators: [{
|
|
1615
1616
|
type: Component,
|
|
@@ -2083,7 +2084,8 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2083
2084
|
styleClass: (a.classes || []).join(' '),
|
|
2084
2085
|
disabled: a.disabled || (!!a.actionEnabledField && !this.fieldIsTruthy(row, a.actionEnabledField)),
|
|
2085
2086
|
visible: !a.actionVisibleField || this.fieldIsTruthy(row, a.actionVisibleField),
|
|
2086
|
-
|
|
2087
|
+
routerLink: typeof a.routerLink === 'string' ? a.routerLink : undefined,
|
|
2088
|
+
command: typeof a.routerLink === 'string' ? undefined : this.createMenuItemCommand(a, row),
|
|
2087
2089
|
}));
|
|
2088
2090
|
}));
|
|
2089
2091
|
}));
|
|
@@ -2399,7 +2401,8 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2399
2401
|
styleClass: (a.classes || []).join(' '),
|
|
2400
2402
|
disabled: a.disabled || (!!a.actionEnabledField && !this.fieldIsTruthy(selectedItem, a.actionEnabledField)),
|
|
2401
2403
|
visible: isVisible,
|
|
2402
|
-
|
|
2404
|
+
routerLink: typeof a.routerLink === 'string' ? a.routerLink : undefined,
|
|
2405
|
+
command: typeof a.routerLink === 'string' ? undefined : () => handleActionSync(this.router, a, selectedItem),
|
|
2403
2406
|
automationId: isVisible ? automationId : automationIdHidden,
|
|
2404
2407
|
};
|
|
2405
2408
|
}));
|
|
@@ -2436,11 +2439,11 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2436
2439
|
return () => handleActionSync(this.router, action, row);
|
|
2437
2440
|
}
|
|
2438
2441
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataListGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2439
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DataListGridComponent, isStandalone: false, selector: "ocx-data-list-grid", inputs: { titleLineId: { classPropertyName: "titleLineId", publicName: "titleLineId", isSignal: true, isRequired: false, transformFunction: null }, subtitleLineIds: { classPropertyName: "subtitleLineIds", publicName: "subtitleLineIds", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, fallbackImage: { classPropertyName: "fallbackImage", publicName: "fallbackImage", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewMenuItemKey: { classPropertyName: "viewMenuItemKey", publicName: "viewMenuItemKey", isSignal: true, isRequired: false, transformFunction: null }, editMenuItemKey: { classPropertyName: "editMenuItemKey", publicName: "editMenuItemKey", isSignal: true, isRequired: false, transformFunction: null }, deleteMenuItemKey: { classPropertyName: "deleteMenuItemKey", publicName: "deleteMenuItemKey", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, gridItemSubtitleLinesTemplate: { classPropertyName: "gridItemSubtitleLinesTemplate", publicName: "gridItemSubtitleLinesTemplate", isSignal: true, isRequired: false, transformFunction: null }, listItemSubtitleLinesTemplate: { classPropertyName: "listItemSubtitleLinesTemplate", publicName: "listItemSubtitleLinesTemplate", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, gridItemTemplate: { classPropertyName: "gridItemTemplate", publicName: "gridItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, listValueTemplate: { classPropertyName: "listValueTemplate", publicName: "listValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyListValueTemplate: { classPropertyName: "translationKeyListValueTemplate", publicName: "translationKeyListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberListValueTemplate: { classPropertyName: "numberListValueTemplate", publicName: "numberListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateListValueTemplate: { classPropertyName: "relativeDateListValueTemplate", publicName: "relativeDateListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringListValueTemplate: { classPropertyName: "stringListValueTemplate", publicName: "stringListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateListValueTemplate: { classPropertyName: "dateListValueTemplate", publicName: "dateListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: true, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", page: "pageChange", name: "nameChange", viewItem: "viewItem", editItem: "editItem", deleteItem: "deleteItem", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", parentTemplates: "parentTemplatesChange" }, queries: [{ propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true, isSignal: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true, isSignal: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true, isSignal: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true, isSignal: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true, isSignal: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true, isSignal: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true, isSignal: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-dataView\n [value]=\"(displayedItems$ | async) ?? []\"\n [paginator]=\"paginator()\"\n [first]=\"page() * displayedPageSize()\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize()\"\n [layout]=\"layout()\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"(totalRecordsOnServer() !== undefined ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey()) | translate:params()\"\n [rowsPerPageOptions]=\"pageSizes() ?? []\"\n [id]=\"'dataListGrid_' + name()\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #grid let-rows>\n <div class=\"grid grid-cols-12 grid-nogutter gap-4 w-full\" role=\"list\">\n @for (item of rows; track item) {\n <ng-container\n [ngTemplateOutlet]=\"gridItem ?? defaultGridItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n }\n </div>\n </ng-template>\n <ng-template #list let-rows>\n <div class=\"p-grid p-nogutter grid grid-nogutter\" role=\"list\">\n @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n <ng-container\n [ngTemplateOutlet]=\"listItem ?? defaultListItem\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n item:item,\n first:first,\n columnTemplates: columnTemplates\n }\"\n ></ng-container>\n } @placeholder {\n <div style=\"width: 100%; height: 80px\"></div>\n } }\n </div>\n </ng-template>\n <ng-template pTemplate=\"empty\">\n <span>{{ emptyResultsMessage() || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n </ng-template>\n</p-dataView>\n}\n\n<ng-template #defaultGridItem let-item>\n <div class=\"col-12 lg:col-6 xl:col-4 p-1 flex justify-content-center grid-border-divider\" role=\"listitem\">\n <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n <div class=\"flex justify-content-center mb-3\">\n <img\n class=\"image\"\n src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n (error)=\"imgError(item)\"\n alt=\"{{ resolveFieldData(item, titleLineId()) || '' }}\"\n />\n </div>\n <div class=\"flex flex-row justify-content-between align-items-center\">\n <div class=\"data-grid-items flex-row\">\n <div class=\"item-name font-medium mr-3 text-2xl\">\n @if (hasViewPermission$ | async; as hasViewPermission) {\n <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId()) || '' }}</a>\n } @else {\n <a [routerLink]=\"\">{{ resolveFieldData(item, titleLineId()) || '' }}</a>\n }\n </div>\n <ng-container\n [ngTemplateOutlet]=\"gridItemSubtitleLines ?? defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n @if ((gridMenuItems$ | async); as gridMenuItems) {\n <div>\n <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n (click)=\"setSelectedItem(item); menu.toggle($event)\"\n icon=\"pi pi-ellipsis-v\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n class=\"more-actions-menu-button menu-btn\"\n [attr.name]=\"'data-grid-item-menu-button'\"\n [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n </div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n @for (subtitleLineId of subtitleLineIds() ?? []; track subtitleLineId) {\n <div class=\"subtitleLine edit-time text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n }\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-first=\"first\" let-columnTemplates=\"columnTemplates\">\n @if (columnTemplates) {\n <div class=\"col-12\" role=\"listitem\">\n <div class=\"data-list-items p-1\" [ngClass]=\"{ 'list-border-divider': !first }\">\n <div class=\"item-name-row flex flex-row justify-content-between\">\n <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n @if (titleLineId()) {\n <span>{{ resolveFieldData(item, titleLineId()) || '' }}</span>\n }\n </div>\n <div class=\"flex flex-row\">\n @if (viewItemObserved && (!viewActionVisibleField() || fieldIsTruthy(item, viewActionVisibleField()))) {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-viewButton\"\n type=\"button\"\n icon=\"pi pi-eye\"\n pButton\n class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n [ocxTooltip]=\"(viewMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!viewActionEnabledField() && !fieldIsTruthy(item, viewActionEnabledField())\n }\"\n [attr.aria-label]=\"(viewMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n (click)=\"onViewRow(item)\"\n *ocxIfPermission=\"viewPermission()\"\n [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(item, viewActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @if (editItemObserved && (!editActionVisibleField() || fieldIsTruthy(item, editActionVisibleField()))) {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-editButton\"\n type=\"button\"\n class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n icon=\"pi pi-pencil\"\n pButton\n [ocxTooltip]=\"(editMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!editActionEnabledField() && !fieldIsTruthy(item, editActionEnabledField())\n }\"\n [attr.aria-label]=\"(editMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n (click)=\"onEditRow(item)\"\n *ocxIfPermission=\"editPermission()\"\n [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(item, editActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @if (deleteItemObserved && (!deleteActionVisibleField() || fieldIsTruthy(item, deleteActionVisibleField())))\n {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-deleteButton\"\n type=\"button\"\n icon=\"pi pi-trash\"\n class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n pButton\n [ocxTooltip]=\"(deleteMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!deleteActionEnabledField() && !fieldIsTruthy(item, deleteActionEnabledField())\n }\"\n [attr.aria-label]=\"(deleteMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n (click)=\"onDeleteRow(item)\"\n *ocxIfPermission=\"deletePermission()\"\n [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(item, deleteActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @for (action of inlineListActions(); track action) { @if ((!action.actionVisibleField || fieldIsTruthy(item,\n action.actionVisibleField))) {\n <button\n [id]=\"resolveFieldData(item, 'id') + '-' + (action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n (click)=\"onActionClick(action, item)\"\n [ocxTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\n }\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } } @if (hasVisibleOverflowMenuItems(item) | async) {\n <p-menu #menu [model]=\"(overflowListMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n class=\"p-button-rounded p-button-text\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (click)=\"toggleOverflowMenu($event, menu, item)\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n [attr.name]=\"'data-list-overflow-item-menu-button'\"\n ></button>\n }\n </div>\n </div>\n <div class=\"text-base font-light my-1\">\n <ng-container\n [ngTemplateOutlet]=\"listItemSubtitleLines ?? defaultListItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div class=\"flex flex-wrap\">\n @for (col of filteredColumns(); track col) {\n <div class=\"w-12rem my-2 mr-2\">\n <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n {{ col.nameKey | translate }}\n </div>\n <div\n [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n tooltipPosition=\"top\"\n >\n @defer(on viewport;){\n <ng-container\n [ngTemplateOutlet]=\"listValue ?? defaultListValue\"\n [ngTemplateOutletContext]=\"{\n rowObject: item,\n column: col,\n columnTemplates: columnTemplates\n }\"\n >\n </ng-container>\n } @placeholder {\n <p-skeleton width=\"5rem\" />\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n @for (subtitleLineId of subtitleLineIds() ?? []; track subtitleLineId) {\n <div class=\"subtitleLine text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n }\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n @if (columnTemplates[column.id]) {\n <ng-container\n [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{cursor:pointer;min-width:4rem}.list-border-divider{border-top:.0625rem;border-top-style:solid;border-color:var(--p-surface-200)}.grid-border-divider{border:.0625rem;border-style:solid;border-color:var(--p-surface-200)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i4$3.DataView, selector: "p-dataView, p-dataview, p-data-view", inputs: ["paginator", "rows", "totalRecords", "pageLinks", "rowsPerPageOptions", "paginatorPosition", "paginatorStyleClass", "alwaysShowPaginator", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "lazy", "lazyLoadOnInit", "emptyMessage", "styleClass", "gridStyleClass", "trackBy", "filterBy", "filterLocale", "loading", "loadingIcon", "first", "sortField", "sortOrder", "value", "layout"], outputs: ["onLazyLoad", "onPage", "onSort", "onChangeLayout"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "directive", type: TooltipOnOverflowDirective, selector: "[ocxTooltipOnOverflow]", inputs: ["ocxTooltipOnOverflow"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet], () => [i1.NgTemplateOutlet]] }); }
|
|
2442
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DataListGridComponent, isStandalone: false, selector: "ocx-data-list-grid", inputs: { titleLineId: { classPropertyName: "titleLineId", publicName: "titleLineId", isSignal: true, isRequired: false, transformFunction: null }, subtitleLineIds: { classPropertyName: "subtitleLineIds", publicName: "subtitleLineIds", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, fallbackImage: { classPropertyName: "fallbackImage", publicName: "fallbackImage", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewMenuItemKey: { classPropertyName: "viewMenuItemKey", publicName: "viewMenuItemKey", isSignal: true, isRequired: false, transformFunction: null }, editMenuItemKey: { classPropertyName: "editMenuItemKey", publicName: "editMenuItemKey", isSignal: true, isRequired: false, transformFunction: null }, deleteMenuItemKey: { classPropertyName: "deleteMenuItemKey", publicName: "deleteMenuItemKey", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, gridItemSubtitleLinesTemplate: { classPropertyName: "gridItemSubtitleLinesTemplate", publicName: "gridItemSubtitleLinesTemplate", isSignal: true, isRequired: false, transformFunction: null }, listItemSubtitleLinesTemplate: { classPropertyName: "listItemSubtitleLinesTemplate", publicName: "listItemSubtitleLinesTemplate", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, gridItemTemplate: { classPropertyName: "gridItemTemplate", publicName: "gridItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, listValueTemplate: { classPropertyName: "listValueTemplate", publicName: "listValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyListValueTemplate: { classPropertyName: "translationKeyListValueTemplate", publicName: "translationKeyListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberListValueTemplate: { classPropertyName: "numberListValueTemplate", publicName: "numberListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateListValueTemplate: { classPropertyName: "relativeDateListValueTemplate", publicName: "relativeDateListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringListValueTemplate: { classPropertyName: "stringListValueTemplate", publicName: "stringListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateListValueTemplate: { classPropertyName: "dateListValueTemplate", publicName: "dateListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: true, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", page: "pageChange", name: "nameChange", viewItem: "viewItem", editItem: "editItem", deleteItem: "deleteItem", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", parentTemplates: "parentTemplatesChange" }, queries: [{ propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true, isSignal: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true, isSignal: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true, isSignal: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true, isSignal: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true, isSignal: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true, isSignal: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true, isSignal: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-dataView\n [value]=\"(displayedItems$ | async) ?? []\"\n [paginator]=\"paginator()\"\n [first]=\"page() * displayedPageSize()\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize()\"\n [layout]=\"layout()\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"(totalRecordsOnServer() !== undefined ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey()) | translate:params()\"\n [rowsPerPageOptions]=\"pageSizes() ?? []\"\n [id]=\"'dataListGrid_' + name()\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #grid let-rows>\n <div class=\"grid grid-cols-12 grid-nogutter gap-4 w-full\" role=\"list\">\n @for (item of rows; track item) {\n <ng-container\n [ngTemplateOutlet]=\"gridItem ?? defaultGridItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n }\n </div>\n </ng-template>\n <ng-template #list let-rows>\n <div class=\"p-grid p-nogutter grid grid-nogutter\" role=\"list\">\n @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n <ng-container\n [ngTemplateOutlet]=\"listItem ?? defaultListItem\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n item:item,\n first:first,\n columnTemplates: columnTemplates\n }\"\n ></ng-container>\n } @placeholder {\n <div style=\"width: 100%; height: 80px\"></div>\n } }\n </div>\n </ng-template>\n <ng-template pTemplate=\"empty\">\n <span>{{ emptyResultsMessage() || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n </ng-template>\n</p-dataView>\n}\n\n<ng-template #defaultGridItem let-item>\n <div class=\"col-12 lg:col-6 xl:col-4 p-1 flex justify-content-center grid-border-divider\" role=\"listitem\">\n <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n <div class=\"flex justify-content-center mb-3\">\n <img\n class=\"image\"\n src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n (error)=\"imgError(item)\"\n alt=\"{{ resolveFieldData(item, titleLineId()) || '' }}\"\n />\n </div>\n <div class=\"flex flex-row justify-content-between align-items-center\">\n <div class=\"data-grid-items flex-row\">\n <div class=\"item-name font-medium mr-3 text-2xl\">\n @if (hasViewPermission$ | async; as hasViewPermission) {\n <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId()) || '' }}</a>\n } @else {\n <a [routerLink]=\"\">{{ resolveFieldData(item, titleLineId()) || '' }}</a>\n }\n </div>\n <ng-container\n [ngTemplateOutlet]=\"gridItemSubtitleLines ?? defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n @if ((gridMenuItems$ | async); as gridMenuItems) {\n <div>\n <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n (click)=\"setSelectedItem(item); menu.toggle($event)\"\n icon=\"pi pi-ellipsis-v\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n class=\"more-actions-menu-button menu-btn\"\n [attr.name]=\"'data-grid-item-menu-button'\"\n [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n </div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n @for (subtitleLineId of subtitleLineIds() ?? []; track subtitleLineId) {\n <div class=\"subtitleLine edit-time text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n }\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-first=\"first\" let-columnTemplates=\"columnTemplates\">\n @if (columnTemplates) {\n <div class=\"col-12\" role=\"listitem\">\n <div class=\"data-list-items p-1\" [ngClass]=\"{ 'list-border-divider': !first }\">\n <div class=\"item-name-row flex flex-row justify-content-between\">\n <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n @if (titleLineId()) {\n <span>{{ resolveFieldData(item, titleLineId()) || '' }}</span>\n }\n </div>\n <div class=\"flex flex-row\">\n @if (viewItemObserved && (!viewActionVisibleField() || fieldIsTruthy(item, viewActionVisibleField()))) {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-viewButton\"\n type=\"button\"\n icon=\"pi pi-eye\"\n pButton\n class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n [ocxTooltip]=\"(viewMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!viewActionEnabledField() && !fieldIsTruthy(item, viewActionEnabledField())\n }\"\n [attr.aria-label]=\"(viewMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n (click)=\"onViewRow(item)\"\n *ocxIfPermission=\"viewPermission()\"\n [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(item, viewActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @if (editItemObserved && (!editActionVisibleField() || fieldIsTruthy(item, editActionVisibleField()))) {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-editButton\"\n type=\"button\"\n class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n icon=\"pi pi-pencil\"\n pButton\n [ocxTooltip]=\"(editMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!editActionEnabledField() && !fieldIsTruthy(item, editActionEnabledField())\n }\"\n [attr.aria-label]=\"(editMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n (click)=\"onEditRow(item)\"\n *ocxIfPermission=\"editPermission()\"\n [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(item, editActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @if (deleteItemObserved && (!deleteActionVisibleField() || fieldIsTruthy(item, deleteActionVisibleField())))\n {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-deleteButton\"\n type=\"button\"\n icon=\"pi pi-trash\"\n class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n pButton\n [ocxTooltip]=\"(deleteMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!deleteActionEnabledField() && !fieldIsTruthy(item, deleteActionEnabledField())\n }\"\n [attr.aria-label]=\"(deleteMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n (click)=\"onDeleteRow(item)\"\n *ocxIfPermission=\"deletePermission()\"\n [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(item, deleteActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @for (action of inlineListActions(); track action) { @if ((!action.actionVisibleField || fieldIsTruthy(item,\n action.actionVisibleField))) {\n @if (typeof action.routerLink === 'string' && !(action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField)))) {\n <a\n [id]=\"resolveFieldData(item, 'id') + '-' + (action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text no-underline\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n [routerLink]=\"action.routerLink\"\n [ocxTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n tooltipPosition=\"top\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.data-testid]=\"'data-list-action-button'\"\n ></a>\n } @else {\n <button\n [id]=\"resolveFieldData(item, 'id') + '-' + (action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n (click)=\"onActionClick(action, item)\"\n [ocxTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\n }\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n }\n } } @if (hasVisibleOverflowMenuItems(item) | async) {\n <p-menu #menu [model]=\"(overflowListMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n class=\"p-button-rounded p-button-text\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (click)=\"toggleOverflowMenu($event, menu, item)\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n [attr.name]=\"'data-list-overflow-item-menu-button'\"\n ></button>\n }\n </div>\n </div>\n <div class=\"text-base font-light my-1\">\n <ng-container\n [ngTemplateOutlet]=\"listItemSubtitleLines ?? defaultListItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div class=\"flex flex-wrap\">\n @for (col of filteredColumns(); track col) {\n <div class=\"w-12rem my-2 mr-2\">\n <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n {{ col.nameKey | translate }}\n </div>\n <div\n [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n tooltipPosition=\"top\"\n >\n @defer(on viewport;){\n <ng-container\n [ngTemplateOutlet]=\"listValue ?? defaultListValue\"\n [ngTemplateOutletContext]=\"{\n rowObject: item,\n column: col,\n columnTemplates: columnTemplates\n }\"\n >\n </ng-container>\n } @placeholder {\n <p-skeleton width=\"5rem\" />\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n @for (subtitleLineId of subtitleLineIds() ?? []; track subtitleLineId) {\n <div class=\"subtitleLine text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n }\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n @if (columnTemplates[column.id]) {\n <ng-container\n [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{cursor:pointer;min-width:4rem}.list-border-divider{border-top:.0625rem;border-top-style:solid;border-color:var(--p-surface-200)}.grid-border-divider{border:.0625rem;border-style:solid;border-color:var(--p-surface-200)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i4$4.DataView, selector: "p-dataView, p-dataview, p-data-view", inputs: ["paginator", "rows", "totalRecords", "pageLinks", "rowsPerPageOptions", "paginatorPosition", "paginatorStyleClass", "alwaysShowPaginator", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "lazy", "lazyLoadOnInit", "emptyMessage", "styleClass", "gridStyleClass", "trackBy", "filterBy", "filterLocale", "loading", "loadingIcon", "first", "sortField", "sortOrder", "value", "layout"], outputs: ["onLazyLoad", "onPage", "onSort", "onChangeLayout"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "directive", type: TooltipOnOverflowDirective, selector: "[ocxTooltipOnOverflow]", inputs: ["ocxTooltipOnOverflow"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet], () => [i1.NgTemplateOutlet]] }); }
|
|
2440
2443
|
}
|
|
2441
2444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataListGridComponent, decorators: [{
|
|
2442
2445
|
type: Component,
|
|
2443
|
-
args: [{ standalone: false, selector: 'ocx-data-list-grid', template: "@if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-dataView\n [value]=\"(displayedItems$ | async) ?? []\"\n [paginator]=\"paginator()\"\n [first]=\"page() * displayedPageSize()\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize()\"\n [layout]=\"layout()\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"(totalRecordsOnServer() !== undefined ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey()) | translate:params()\"\n [rowsPerPageOptions]=\"pageSizes() ?? []\"\n [id]=\"'dataListGrid_' + name()\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #grid let-rows>\n <div class=\"grid grid-cols-12 grid-nogutter gap-4 w-full\" role=\"list\">\n @for (item of rows; track item) {\n <ng-container\n [ngTemplateOutlet]=\"gridItem ?? defaultGridItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n }\n </div>\n </ng-template>\n <ng-template #list let-rows>\n <div class=\"p-grid p-nogutter grid grid-nogutter\" role=\"list\">\n @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n <ng-container\n [ngTemplateOutlet]=\"listItem ?? defaultListItem\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n item:item,\n first:first,\n columnTemplates: columnTemplates\n }\"\n ></ng-container>\n } @placeholder {\n <div style=\"width: 100%; height: 80px\"></div>\n } }\n </div>\n </ng-template>\n <ng-template pTemplate=\"empty\">\n <span>{{ emptyResultsMessage() || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n </ng-template>\n</p-dataView>\n}\n\n<ng-template #defaultGridItem let-item>\n <div class=\"col-12 lg:col-6 xl:col-4 p-1 flex justify-content-center grid-border-divider\" role=\"listitem\">\n <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n <div class=\"flex justify-content-center mb-3\">\n <img\n class=\"image\"\n src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n (error)=\"imgError(item)\"\n alt=\"{{ resolveFieldData(item, titleLineId()) || '' }}\"\n />\n </div>\n <div class=\"flex flex-row justify-content-between align-items-center\">\n <div class=\"data-grid-items flex-row\">\n <div class=\"item-name font-medium mr-3 text-2xl\">\n @if (hasViewPermission$ | async; as hasViewPermission) {\n <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId()) || '' }}</a>\n } @else {\n <a [routerLink]=\"\">{{ resolveFieldData(item, titleLineId()) || '' }}</a>\n }\n </div>\n <ng-container\n [ngTemplateOutlet]=\"gridItemSubtitleLines ?? defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n @if ((gridMenuItems$ | async); as gridMenuItems) {\n <div>\n <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n (click)=\"setSelectedItem(item); menu.toggle($event)\"\n icon=\"pi pi-ellipsis-v\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n class=\"more-actions-menu-button menu-btn\"\n [attr.name]=\"'data-grid-item-menu-button'\"\n [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n </div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n @for (subtitleLineId of subtitleLineIds() ?? []; track subtitleLineId) {\n <div class=\"subtitleLine edit-time text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n }\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-first=\"first\" let-columnTemplates=\"columnTemplates\">\n @if (columnTemplates) {\n <div class=\"col-12\" role=\"listitem\">\n <div class=\"data-list-items p-1\" [ngClass]=\"{ 'list-border-divider': !first }\">\n <div class=\"item-name-row flex flex-row justify-content-between\">\n <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n @if (titleLineId()) {\n <span>{{ resolveFieldData(item, titleLineId()) || '' }}</span>\n }\n </div>\n <div class=\"flex flex-row\">\n @if (viewItemObserved && (!viewActionVisibleField() || fieldIsTruthy(item, viewActionVisibleField()))) {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-viewButton\"\n type=\"button\"\n icon=\"pi pi-eye\"\n pButton\n class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n [ocxTooltip]=\"(viewMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!viewActionEnabledField() && !fieldIsTruthy(item, viewActionEnabledField())\n }\"\n [attr.aria-label]=\"(viewMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n (click)=\"onViewRow(item)\"\n *ocxIfPermission=\"viewPermission()\"\n [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(item, viewActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @if (editItemObserved && (!editActionVisibleField() || fieldIsTruthy(item, editActionVisibleField()))) {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-editButton\"\n type=\"button\"\n class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n icon=\"pi pi-pencil\"\n pButton\n [ocxTooltip]=\"(editMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!editActionEnabledField() && !fieldIsTruthy(item, editActionEnabledField())\n }\"\n [attr.aria-label]=\"(editMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n (click)=\"onEditRow(item)\"\n *ocxIfPermission=\"editPermission()\"\n [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(item, editActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @if (deleteItemObserved && (!deleteActionVisibleField() || fieldIsTruthy(item, deleteActionVisibleField())))\n {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-deleteButton\"\n type=\"button\"\n icon=\"pi pi-trash\"\n class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n pButton\n [ocxTooltip]=\"(deleteMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!deleteActionEnabledField() && !fieldIsTruthy(item, deleteActionEnabledField())\n }\"\n [attr.aria-label]=\"(deleteMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n (click)=\"onDeleteRow(item)\"\n *ocxIfPermission=\"deletePermission()\"\n [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(item, deleteActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @for (action of inlineListActions(); track action) { @if ((!action.actionVisibleField || fieldIsTruthy(item,\n action.actionVisibleField))) {\n <button\n [id]=\"resolveFieldData(item, 'id') + '-' + (action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n (click)=\"onActionClick(action, item)\"\n [ocxTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\n }\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } } @if (hasVisibleOverflowMenuItems(item) | async) {\n <p-menu #menu [model]=\"(overflowListMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n class=\"p-button-rounded p-button-text\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (click)=\"toggleOverflowMenu($event, menu, item)\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n [attr.name]=\"'data-list-overflow-item-menu-button'\"\n ></button>\n }\n </div>\n </div>\n <div class=\"text-base font-light my-1\">\n <ng-container\n [ngTemplateOutlet]=\"listItemSubtitleLines ?? defaultListItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div class=\"flex flex-wrap\">\n @for (col of filteredColumns(); track col) {\n <div class=\"w-12rem my-2 mr-2\">\n <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n {{ col.nameKey | translate }}\n </div>\n <div\n [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n tooltipPosition=\"top\"\n >\n @defer(on viewport;){\n <ng-container\n [ngTemplateOutlet]=\"listValue ?? defaultListValue\"\n [ngTemplateOutletContext]=\"{\n rowObject: item,\n column: col,\n columnTemplates: columnTemplates\n }\"\n >\n </ng-container>\n } @placeholder {\n <p-skeleton width=\"5rem\" />\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n @for (subtitleLineId of subtitleLineIds() ?? []; track subtitleLineId) {\n <div class=\"subtitleLine text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n }\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n @if (columnTemplates[column.id]) {\n <ng-container\n [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{cursor:pointer;min-width:4rem}.list-border-divider{border-top:.0625rem;border-top-style:solid;border-color:var(--p-surface-200)}.grid-border-divider{border:.0625rem;border-style:solid;border-color:var(--p-surface-200)}\n"] }]
|
|
2446
|
+
args: [{ standalone: false, selector: 'ocx-data-list-grid', template: "@if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-dataView\n [value]=\"(displayedItems$ | async) ?? []\"\n [paginator]=\"paginator()\"\n [first]=\"page() * displayedPageSize()\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize()\"\n [layout]=\"layout()\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"(totalRecordsOnServer() !== undefined ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey()) | translate:params()\"\n [rowsPerPageOptions]=\"pageSizes() ?? []\"\n [id]=\"'dataListGrid_' + name()\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #grid let-rows>\n <div class=\"grid grid-cols-12 grid-nogutter gap-4 w-full\" role=\"list\">\n @for (item of rows; track item) {\n <ng-container\n [ngTemplateOutlet]=\"gridItem ?? defaultGridItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n }\n </div>\n </ng-template>\n <ng-template #list let-rows>\n <div class=\"p-grid p-nogutter grid grid-nogutter\" role=\"list\">\n @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n <ng-container\n [ngTemplateOutlet]=\"listItem ?? defaultListItem\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n item:item,\n first:first,\n columnTemplates: columnTemplates\n }\"\n ></ng-container>\n } @placeholder {\n <div style=\"width: 100%; height: 80px\"></div>\n } }\n </div>\n </ng-template>\n <ng-template pTemplate=\"empty\">\n <span>{{ emptyResultsMessage() || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n </ng-template>\n</p-dataView>\n}\n\n<ng-template #defaultGridItem let-item>\n <div class=\"col-12 lg:col-6 xl:col-4 p-1 flex justify-content-center grid-border-divider\" role=\"listitem\">\n <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n <div class=\"flex justify-content-center mb-3\">\n <img\n class=\"image\"\n src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n (error)=\"imgError(item)\"\n alt=\"{{ resolveFieldData(item, titleLineId()) || '' }}\"\n />\n </div>\n <div class=\"flex flex-row justify-content-between align-items-center\">\n <div class=\"data-grid-items flex-row\">\n <div class=\"item-name font-medium mr-3 text-2xl\">\n @if (hasViewPermission$ | async; as hasViewPermission) {\n <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId()) || '' }}</a>\n } @else {\n <a [routerLink]=\"\">{{ resolveFieldData(item, titleLineId()) || '' }}</a>\n }\n </div>\n <ng-container\n [ngTemplateOutlet]=\"gridItemSubtitleLines ?? defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n @if ((gridMenuItems$ | async); as gridMenuItems) {\n <div>\n <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n (click)=\"setSelectedItem(item); menu.toggle($event)\"\n icon=\"pi pi-ellipsis-v\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n class=\"more-actions-menu-button menu-btn\"\n [attr.name]=\"'data-grid-item-menu-button'\"\n [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n </div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n @for (subtitleLineId of subtitleLineIds() ?? []; track subtitleLineId) {\n <div class=\"subtitleLine edit-time text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n }\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-first=\"first\" let-columnTemplates=\"columnTemplates\">\n @if (columnTemplates) {\n <div class=\"col-12\" role=\"listitem\">\n <div class=\"data-list-items p-1\" [ngClass]=\"{ 'list-border-divider': !first }\">\n <div class=\"item-name-row flex flex-row justify-content-between\">\n <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n @if (titleLineId()) {\n <span>{{ resolveFieldData(item, titleLineId()) || '' }}</span>\n }\n </div>\n <div class=\"flex flex-row\">\n @if (viewItemObserved && (!viewActionVisibleField() || fieldIsTruthy(item, viewActionVisibleField()))) {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-viewButton\"\n type=\"button\"\n icon=\"pi pi-eye\"\n pButton\n class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n [ocxTooltip]=\"(viewMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!viewActionEnabledField() && !fieldIsTruthy(item, viewActionEnabledField())\n }\"\n [attr.aria-label]=\"(viewMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n (click)=\"onViewRow(item)\"\n *ocxIfPermission=\"viewPermission()\"\n [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(item, viewActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @if (editItemObserved && (!editActionVisibleField() || fieldIsTruthy(item, editActionVisibleField()))) {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-editButton\"\n type=\"button\"\n class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n icon=\"pi pi-pencil\"\n pButton\n [ocxTooltip]=\"(editMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!editActionEnabledField() && !fieldIsTruthy(item, editActionEnabledField())\n }\"\n [attr.aria-label]=\"(editMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n (click)=\"onEditRow(item)\"\n *ocxIfPermission=\"editPermission()\"\n [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(item, editActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @if (deleteItemObserved && (!deleteActionVisibleField() || fieldIsTruthy(item, deleteActionVisibleField())))\n {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-deleteButton\"\n type=\"button\"\n icon=\"pi pi-trash\"\n class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n pButton\n [ocxTooltip]=\"(deleteMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!deleteActionEnabledField() && !fieldIsTruthy(item, deleteActionEnabledField())\n }\"\n [attr.aria-label]=\"(deleteMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n (click)=\"onDeleteRow(item)\"\n *ocxIfPermission=\"deletePermission()\"\n [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(item, deleteActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @for (action of inlineListActions(); track action) { @if ((!action.actionVisibleField || fieldIsTruthy(item,\n action.actionVisibleField))) {\n @if (typeof action.routerLink === 'string' && !(action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField)))) {\n <a\n [id]=\"resolveFieldData(item, 'id') + '-' + (action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text no-underline\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n [routerLink]=\"action.routerLink\"\n [ocxTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n tooltipPosition=\"top\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.data-testid]=\"'data-list-action-button'\"\n ></a>\n } @else {\n <button\n [id]=\"resolveFieldData(item, 'id') + '-' + (action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n (click)=\"onActionClick(action, item)\"\n [ocxTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\n }\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n }\n } } @if (hasVisibleOverflowMenuItems(item) | async) {\n <p-menu #menu [model]=\"(overflowListMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n class=\"p-button-rounded p-button-text\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (click)=\"toggleOverflowMenu($event, menu, item)\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n [attr.name]=\"'data-list-overflow-item-menu-button'\"\n ></button>\n }\n </div>\n </div>\n <div class=\"text-base font-light my-1\">\n <ng-container\n [ngTemplateOutlet]=\"listItemSubtitleLines ?? defaultListItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div class=\"flex flex-wrap\">\n @for (col of filteredColumns(); track col) {\n <div class=\"w-12rem my-2 mr-2\">\n <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n {{ col.nameKey | translate }}\n </div>\n <div\n [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n tooltipPosition=\"top\"\n >\n @defer(on viewport;){\n <ng-container\n [ngTemplateOutlet]=\"listValue ?? defaultListValue\"\n [ngTemplateOutletContext]=\"{\n rowObject: item,\n column: col,\n columnTemplates: columnTemplates\n }\"\n >\n </ng-container>\n } @placeholder {\n <p-skeleton width=\"5rem\" />\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n @for (subtitleLineId of subtitleLineIds() ?? []; track subtitleLineId) {\n <div class=\"subtitleLine text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n }\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n @if (columnTemplates[column.id]) {\n <ng-container\n [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{cursor:pointer;min-width:4rem}.list-border-divider{border-top:.0625rem;border-top-style:solid;border-color:var(--p-surface-200)}.grid-border-divider{border:.0625rem;border-style:solid;border-color:var(--p-surface-200)}\n"] }]
|
|
2444
2447
|
}], ctorParameters: () => [], propDecorators: { titleLineId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleLineId", required: false }] }], subtitleLineIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitleLineIds", required: false }] }], clientSideSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideSorting", required: false }] }], clientSideFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideFiltering", required: false }] }], sortStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortStates", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }], emptyResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyResultsMessage", required: false }] }], fallbackImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackImage", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], viewPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewPermission", required: false }] }], editPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "editPermission", required: false }] }], deletePermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletePermission", required: false }] }], deleteActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionVisibleField", required: false }] }], deleteActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionEnabledField", required: false }] }], viewActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionVisibleField", required: false }] }], viewActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionEnabledField", required: false }] }], editActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionVisibleField", required: false }] }], editActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionEnabledField", required: false }] }], viewMenuItemKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMenuItemKey", required: false }] }], editMenuItemKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMenuItemKey", required: false }] }], deleteMenuItemKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteMenuItemKey", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }, { type: i0.Output, args: ["nameChange"] }], totalRecordsOnServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecordsOnServer", required: false }] }], currentPageShowingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingKey", required: false }] }], currentPageShowingWithTotalOnServerKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingWithTotalOnServerKey", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }], sortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortField", required: false }] }], gridItemSubtitleLinesTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridItemSubtitleLinesTemplate", required: false }] }], gridItemSubtitleLinesChildTemplate: [{ type: i0.ContentChild, args: ['gridItemSubtitleLines', { isSignal: true }] }], listItemSubtitleLinesTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemSubtitleLinesTemplate", required: false }] }], listItemSubtitleLinesChildTemplate: [{ type: i0.ContentChild, args: ['listItemSubtitleLines', { isSignal: true }] }], listItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemTemplate", required: false }] }], listItemChildTemplate: [{ type: i0.ContentChild, args: ['listItem', { isSignal: true }] }], gridItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridItemTemplate", required: false }] }], gridItemChildTemplate: [{ type: i0.ContentChild, args: ['gridItem', { isSignal: true }] }], listValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listValueTemplate", required: false }] }], listValueChildTemplate: [{ type: i0.ContentChild, args: ['listValue', { isSignal: true }] }], translationKeyListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyListValueTemplate", required: false }] }], translationKeyListValueChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyListValue', { isSignal: true }] }], numberListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberListValueTemplate", required: false }] }], numberListValueChildTemplate: [{ type: i0.ContentChild, args: ['numberListValue', { isSignal: true }] }], relativeDateListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateListValueTemplate", required: false }] }], relativeDateListValueChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateListValue', { isSignal: true }] }], stringListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringListValueTemplate", required: false }] }], stringListValueChildTemplate: [{ type: i0.ContentChild, args: ['stringListValue', { isSignal: true }] }], dateListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateListValueTemplate", required: false }] }], dateListValueChildTemplate: [{ type: i0.ContentChild, args: ['dateListValue', { isSignal: true }] }], additionalActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalActions", required: false }] }], viewItem: [{
|
|
2445
2448
|
type: Output
|
|
2446
2449
|
}], editItem: [{
|
|
@@ -2514,7 +2517,7 @@ class DataListGridSortingComponent {
|
|
|
2514
2517
|
}
|
|
2515
2518
|
}
|
|
2516
2519
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataListGridSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2517
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: DataListGridSortingComponent, isStandalone: false, selector: "ocx-data-list-grid-sorting", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortDirection: "sortDirectionChange", sortField: "sortFieldChange", sortChange: "sortChange", sortDirectionChange: "sortDirectionChange", componentStateChanged: "componentStateChanged", columnsChange: "columnsChange" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n <p-floatLabel variant=\"on\">\n <p-select\n id=\"dataListGridSortingDropdown\"\n inputId=\"dataListGridSortingDropdownInput\"\n [ngModel]=\"selectedSortingOption()\"\n [options]=\"dropdownOptions()\"\n (onChange)=\"selectSorting($event)\"\n [ariaLabel]=\"('OCX_LIST_GRID_SORT.DROPDOWN.ARIA_LABEL' | translate)\"\n optionLabel=\"columnName\"\n >\n <ng-template let-item #item> \n <span [attr.aria-label]=\"item?.columnName ? (item.columnName | translate) : ''\">{{ item?.columnName ? (item.columnName | translate) : ''}}</span> \n </ng-template>\n <ng-template let-item #selectedItem>\n <span [attr.aria-label]=\"item?.columnName ? (item.columnName | translate) : ''\">{{ item?.columnName ? (item.columnName | translate) : ''}}</span>\n </ng-template></p-select\n >\n <label for=\"dataListGridSortingDropdownInput\">{{ (\"OCX_LIST_GRID_SORT.DROPDOWN.LABEL\" | translate) }}</label>\n </p-floatLabel>\n <p-button\n id=\"dataListGridSortingButton\"\n type=\"button\"\n icon=\"pi {{sortIcon()}}\"\n styleClass=\"p-button-outlined\"\n (onClick)=\"sortDirectionChanged()\"\n (keydown.enter)=\"sortDirectionChanged()\"\n (keydown.space)=\"sortDirectionChanged()\"\n [ocxTooltip]=\"(sortIconTitle() | translate)\"\n tooltipPosition=\"top\"\n [ariaLabel]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{currentDirection: sortDirection(), nextDirection: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n ></p-button>\n</div>", styles: [".pi{border-radius:var(--border-radius);border-width:thin;background:none;cursor:pointer}: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", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { 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: 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: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type:
|
|
2520
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: DataListGridSortingComponent, isStandalone: false, selector: "ocx-data-list-grid-sorting", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortDirection: "sortDirectionChange", sortField: "sortFieldChange", sortChange: "sortChange", sortDirectionChange: "sortDirectionChange", componentStateChanged: "componentStateChanged", columnsChange: "columnsChange" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n <p-floatLabel variant=\"on\">\n <p-select\n id=\"dataListGridSortingDropdown\"\n inputId=\"dataListGridSortingDropdownInput\"\n [ngModel]=\"selectedSortingOption()\"\n [options]=\"dropdownOptions()\"\n (onChange)=\"selectSorting($event)\"\n [ariaLabel]=\"('OCX_LIST_GRID_SORT.DROPDOWN.ARIA_LABEL' | translate)\"\n optionLabel=\"columnName\"\n >\n <ng-template let-item #item> \n <span [attr.aria-label]=\"item?.columnName ? (item.columnName | translate) : ''\">{{ item?.columnName ? (item.columnName | translate) : ''}}</span> \n </ng-template>\n <ng-template let-item #selectedItem>\n <span [attr.aria-label]=\"item?.columnName ? (item.columnName | translate) : ''\">{{ item?.columnName ? (item.columnName | translate) : ''}}</span>\n </ng-template></p-select\n >\n <label for=\"dataListGridSortingDropdownInput\">{{ (\"OCX_LIST_GRID_SORT.DROPDOWN.LABEL\" | translate) }}</label>\n </p-floatLabel>\n <p-button\n id=\"dataListGridSortingButton\"\n type=\"button\"\n icon=\"pi {{sortIcon()}}\"\n styleClass=\"p-button-outlined\"\n (onClick)=\"sortDirectionChanged()\"\n (keydown.enter)=\"sortDirectionChanged()\"\n (keydown.space)=\"sortDirectionChanged()\"\n [ocxTooltip]=\"(sortIconTitle() | translate)\"\n tooltipPosition=\"top\"\n [ariaLabel]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{currentDirection: sortDirection(), nextDirection: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n ></p-button>\n</div>", styles: [".pi{border-radius:var(--border-radius);border-width:thin;background:none;cursor:pointer}: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", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { 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: 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: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] }); }
|
|
2518
2521
|
}
|
|
2519
2522
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataListGridSortingComponent, decorators: [{
|
|
2520
2523
|
type: Component,
|
|
@@ -2827,7 +2830,8 @@ class DataTableComponent extends DataSortBase {
|
|
|
2827
2830
|
styleClass: (a.classes || []).join(' '),
|
|
2828
2831
|
disabled: a.disabled || (!!a.actionEnabledField && !this.fieldIsTruthy(row, a.actionEnabledField)),
|
|
2829
2832
|
visible: !a.actionVisibleField || this.fieldIsTruthy(row, a.actionVisibleField),
|
|
2830
|
-
|
|
2833
|
+
routerLink: typeof a.routerLink === 'string' ? a.routerLink : undefined,
|
|
2834
|
+
command: typeof a.routerLink === 'string' ? undefined : this.createMenuItemCommand(a, row),
|
|
2831
2835
|
}));
|
|
2832
2836
|
}));
|
|
2833
2837
|
}));
|
|
@@ -3219,11 +3223,11 @@ class DataTableComponent extends DataSortBase {
|
|
|
3219
3223
|
return summary.trim();
|
|
3220
3224
|
}
|
|
3221
3225
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3222
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DataTableComponent, isStandalone: false, selector: "ocx-data-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, selectionEnabledField: { classPropertyName: "selectionEnabledField", publicName: "selectionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, captionTemplate: { classPropertyName: "captionTemplate", publicName: "captionTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringCellTemplate: { classPropertyName: "stringCellTemplate", publicName: "stringCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberCellTemplate: { classPropertyName: "numberCellTemplate", publicName: "numberCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateCellTemplate: { classPropertyName: "dateCellTemplate", publicName: "dateCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateCellTemplate: { classPropertyName: "relativeDateCellTemplate", publicName: "relativeDateCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyCellTemplate: { classPropertyName: "translationKeyCellTemplate", publicName: "translationKeyCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringFilterCellTemplate: { classPropertyName: "stringFilterCellTemplate", publicName: "stringFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberFilterCellTemplate: { classPropertyName: "numberFilterCellTemplate", publicName: "numberFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateFilterCellTemplate: { classPropertyName: "dateFilterCellTemplate", publicName: "dateFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateFilterCellTemplate: { classPropertyName: "relativeDateFilterCellTemplate", publicName: "relativeDateFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, filterCellTemplate: { classPropertyName: "filterCellTemplate", publicName: "filterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyFilterCellTemplate: { classPropertyName: "translationKeyFilterCellTemplate", publicName: "translationKeyFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, columnHeaderTemplate: { classPropertyName: "columnHeaderTemplate", publicName: "columnHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: true, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rows: "rowsChange", selectedRows: "selectedRowsChange", filters: "filtersChange", sortDirection: "sortDirectionChange", sortColumn: "sortColumnChange", columns: "columnsChange", sortStates: "sortStatesChange", pageSizes: "pageSizesChange", pageSize: "pageSizeChange", name: "nameChange", page: "pageChange", additionalActions: "additionalActionsChange", expandedRows: "expandedRowsChange", filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed", parentTemplates: "parentTemplatesChange" }, queries: [{ propertyName: "stringCellChildTemplate", first: true, predicate: ["stringCell"], descendants: true, isSignal: true }, { propertyName: "numberCellChildTemplate", first: true, predicate: ["numberCell"], descendants: true, isSignal: true }, { propertyName: "dateCellChildTemplate", first: true, predicate: ["dateCell"], descendants: true, isSignal: true }, { propertyName: "relativeDateCellChildTemplate", first: true, predicate: ["relativeDateCell"], descendants: true, isSignal: true }, { propertyName: "cellChildTemplate", first: true, predicate: ["cell"], descendants: true, isSignal: true }, { propertyName: "translationKeyCellChildTemplate", first: true, predicate: ["translationKeyCell"], descendants: true, isSignal: true }, { propertyName: "stringFilterCellChildTemplate", first: true, predicate: ["stringFilterCell"], descendants: true, isSignal: true }, { propertyName: "numberFilterCellChildTemplate", first: true, predicate: ["numberFilterCell"], descendants: true, isSignal: true }, { propertyName: "dateFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true, isSignal: true }, { propertyName: "relativeDateFilterCellChildTemplate", first: true, predicate: ["relativeDateFilterCell"], descendants: true, isSignal: true }, { propertyName: "filterCellChildTemplate", first: true, predicate: ["filterCell"], descendants: true, isSignal: true }, { propertyName: "translationKeyFilterCellChildTemplate", first: true, predicate: ["translationKeyFilterCell"], descendants: true, isSignal: true }, { propertyName: "columnHeaderChildTemplate", first: true, predicate: ["columnHeaderTemplate"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n @if (actionColumnVisible) {\n <td\n class=\"actions\"\n pFrozenColumn\n [frozen]=\"frozenActionColumn()\"\n [alignFrozen]=\"actionColumnPosition()\"\n [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-left' : 'action-column-right'\"\n [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n >\n <div class=\"icon-button-row-wrapper\">\n @if (viewTableRowObserved && (!viewActionVisibleField() || fieldIsTruthy(rowObject, viewActionVisibleField()))) {\n <button\n id=\"{{ resolveFieldData(rowObject, 'id') }}-viewButton\"\n *ocxIfPermission=\"viewPermission()\"\n [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(rowObject, viewActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text viewTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n icon=\"pi pi-eye\"\n (click)=\"onViewRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @if (editTableRowObserved && (!editActionVisibleField() || fieldIsTruthy(rowObject, editActionVisibleField())))\n {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-editButton'\"\n *ocxIfPermission=\"editPermission()\"\n [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(rowObject, editActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text editTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n icon=\"pi pi-pencil\"\n (click)=\"onEditRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @if ( deleteTableRowObserved && (!deleteActionVisibleField() || fieldIsTruthy(rowObject,\n deleteActionVisibleField())) ) {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-deleteButton'\"\n *ocxIfPermission=\"deletePermission()\"\n [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(rowObject, deleteActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n icon=\"pi pi-trash\"\n (click)=\"onDeleteRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @for (action of inlineActions(); track action) { @if (!action.actionVisibleField || fieldIsTruthy(rowObject,\n action.actionVisibleField)) {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-'+(action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n (click)=\"onActionClick(action, rowObject)\"\n [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"\n action.disabled ||\n (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\n \"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } } @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n class=\"p-button-rounded p-button-text\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [name]=\"'data-table-overflow-action-button'\"\n ></button>\n }\n </div>\n </td>\n }\n</ng-template>\n\n<ng-template #expansionColumnHeader>\n @if (expandable() && expansionTemplate()) {\n <th\n pFrozenColumn\n [frozen]=\"frozenExpandColumn()\"\n alignFrozen=\"left\"\n [attr.name]=\"'expansion-column-header'\"\n style=\"width: 4rem\"\n scope=\"col\"\n >\n <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.EXPAND_COLLAPSE_COLUMN' | translate }}</span>\n</th>\n }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n @if (actionColumnVisible) {\n <th\n pFrozenColumn\n [frozen]=\"frozenActionColumn()\"\n [alignFrozen]=\"actionColumnPosition()\"\n [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n scope=\"col\"\n >\n {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n </th>\n }\n</ng-template>\n\n@if (displayedPageSize(); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n@if ((columnHeaderTemplates$ | async) ?? {}; as columnHeaderTemplates) {\n<p-table\n [value]=\"(displayedRows$ | async) ?? []\"\n [paginator]=\"paginator()\"\n [first]=\"page() * displayedPageSize\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"\n (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey())\n | translate : params()\n \"\n [rowsPerPageOptions]=\"pageSizes()\"\n [id]=\"'dataTable_' + name()\"\n (selectionChange)=\"onSelectionChange($event)\"\n dataKey=\"id\"\n [rowTrackBy]=\"rowTrackByFunction\"\n [selection]=\"selectedFilteredRows()\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [style]=\"tableStyle()\"\n paginatorDropdownAppendTo=\"body\"\n [rowSelectable]=\"rowSelectable\"\n tableStyleClass=\"h-full\"\n [expandedRowKeys]=\"expandedRowKeys()\"\n (onRowExpand)=\"onRowExpand($event)\"\n (onRowCollapse)=\"onRowCollapse($event)\"\n>\n <ng-template #header>\n <tr style=\"vertical-align: top\">\n <ng-container *ngTemplateOutlet=\"expansionColumnHeader\"></ng-container>\n @if (selectionChangedObserved) {\n <th style=\"width: 4rem\" scope=\"col\">\n @if (allowSelectAll()) {\n <p-tableHeaderCheckbox\n [ocxTooltip]=\"'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate\"\n ></p-tableHeaderCheckbox>\n }\n <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.SELECTION_COLUMN' | translate }}</span>\n </th>\n } @if (actionColumnPosition() === 'left') {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n } \n @for (column of columns(); track column) { \n @if (columnHeaderTemplates[column.id]; as columnHeaderTemplate){\n <th scope=\"col\" [pSortableColumn]=\"column.sortable ? column.id : undefined\">\n <ng-container\n [ngTemplateOutlet]=\"columnHeaderTemplate\"\n [ngTemplateOutletContext]=\"{ column: column, labelTemplate: columnHeaderLabel, sortTemplate: columnHeaderSortButton, filterTemplate: columnHeaderFilter }\"\n ></ng-container>\n </th>\n } @else {\n @if (column.sortable || column.filterable) {\n <th scope=\"col\" [pSortableColumn]=\"column.sortable ? column.nameKey : undefined\">\n <div\n class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n style=\"height: 100%\"\n >\n <span class=\"flex\" [id]=\"column.id + '-header-name'\">\n <ng-container [ngTemplateOutlet]=\"columnHeaderLabel\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n </span>\n <span class=\"flex icon-button-header-wrapper\"> \n <ng-container [ngTemplateOutlet]=\"columnHeaderSortButton\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"columnHeaderFilter\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n </span>\n </div>\n </th>\n } @else {\n <th scope=\"col\">\n <ng-container [ngTemplateOutlet]=\"columnHeaderLabel\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n </th> \n } \n }\n } \n @if (actionColumnPosition() === 'right') {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n }\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"caption\">\n @if (captionTemplate()) {\n <ng-container>\n <ng-container [ngTemplateOutlet]=\"captionTemplate()\"></ng-container>\n </ng-container>\n }\n </ng-template>\n\n <ng-template #body let-rowObject>\n @if (columnTemplates) {\n <tr [attr.id]=\"'ocx-expanded-row-' + rowObject.id\">\n <ng-container *ngTemplateOutlet=\"expansionColumn; context: {localRowObject: rowObject}\"></ng-container>\n @if (selectionChangedObserved) {\n <td>\n @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n <p-checkbox\n [value]=\"true\"\n [binary]=\"true\"\n [disabled]=\"true\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n ></p-checkbox>\n } @else {\n <p-tableCheckbox\n [value]=\"rowObject\"\n [disabled]=\"isRowSelectionDisabled(rowObject)\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n ></p-tableCheckbox>\n }\n </td>\n } @if (actionColumnPosition() === 'left') {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n } @for (column of columns(); track column) {\n <td>\n @defer (on viewport) { @if (columnTemplates[column.id]) {\n <ng-container\n [ngTemplateOutlet]=\"cell() ?? columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{ rowObject: rowObject, column: column }\"\n >\n </ng-container>\n } } @placeholder {\n <p-skeleton width=\"3rem\" />\n }\n </td>\n } @if (actionColumnPosition() === 'right') {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n }\n </tr>\n }\n </ng-template>\n\n <ng-template #expandedrow let-rowObject>\n @if (expansionTemplate(); as expansionTemplate) {\n <tr>\n <td [attr.colspan]=\"getRowColspan(!!expansionTemplate)\">\n <ng-container\n [ngTemplateOutlet]=\"expansionTemplate.template\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject\n }\"\n >\n </ng-container>\n </td>\n </tr>\n }\n </ng-template>\n\n <ng-template #emptymessage>\n <tr>\n <td\n [colSpan]=\"\n getRowColspan(!!expansionTemplate())\n \"\n >\n {{ emptyResultsMessage() || ('OCX_DATA_TABLE.EMPTY_RESULT' | translate) }}\n </td>\n </tr>\n </ng-template>\n</p-table>\n} } }\n\n<ng-template #expansionColumn let-rowObject=\"localRowObject\">\n @if (expandable() && expansionTemplate()) {\n <td pFrozenColumn [frozen]=\"frozenExpandColumn()\" alignFrozen=\"left\" [attr.name]=\"'expansion-column'\">\n <button\n type=\"button\"\n pButton\n pRipple\n [icon]=\"isRowExpanded(rowObject) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n class=\"p-button-rounded p-button-text\"\n (click)=\"toggleRowExpansion(rowObject)\"\n [attr.aria-expanded]=\"isRowExpanded(rowObject)\"\n [attr.aria-controls]=\"'ocx-expanded-row-' + rowObject.id\"\n [attr.aria-label]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n [title]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n ></button>\n </td>\n }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n\n<ng-template #columnHeaderLabel let-column=\"column\">{{ column.nameKey | translate }}</ng-template>\n\n<ng-template #columnHeaderSortButton let-column=\"column\">\n @if (column.sortable) {\n <button\n class=\"pi sortButton pl-0\"\n [class.pi-sort-alt]=\"(column?.id === sortColumn() && sortDirection() === 'NONE') || column?.id !== sortColumn()\"\n [class.pi-sort-amount-up]=\"column?.id === sortColumn() && sortDirection() === 'ASCENDING'\"\n [class.pi-sort-amount-down]=\"column?.id === sortColumn() && sortDirection() === 'DESCENDING'\"\n (click)=\"onSortColumnClick(column.id)\"\n [ocxTooltip]=\"sortIconTitle(column.id) | translate\"\n tooltipPosition=\"bottom\"\n [attr.aria-label]=\"\n 'OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL'\n | translate : {\n column: (column.nameKey | translate),\n direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)\n }\n \"\n ></button>\n } \n</ng-template>\n\n<ng-template #columnHeaderFilter let-column=\"column\">\n @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { \n @if (columnFilterTemplates$ | async; as columnFilterTemplates) { \n @if (column.filterable && (!column.filterType || column.filterType === FilterType.EQUALS)) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n [ngModel]=\"currentEqualSelectedFilters() || []\"\n [showToggleAll]=\"true\"\n [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onMultiselectFilterChange(column, $event)\"\n placeholder=\" \"\n appendTo=\"body\"\n filterBy=\"toFilterBy\"\n (onFocus)=\"onFilterChosen(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n [filterPlaceHolder]=\"'OCX_DATA_TABLE.COLUMN_FILTER_PLACEHOLDER' | translate\"\n [ariaFilterLabel]=\"\n 'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n \"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!filterAmounts()[column.id]\"\n [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value>\n @if (columnFilterTemplates[column.id]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromMultiselectItem(value, column),\n column: column\n }\"\n >\n </ng-container>\n }\n </ng-template>\n </p-multiselect>\n } \n } \n } \n @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"[\n { key: 'OCX_DATA_TABLE.FILTER_YES', value: true },\n { key: 'OCX_DATA_TABLE.FILTER_NO', value: false }\n ]\"\n [ngModel]=\"currentTruthySelectedFilters() || []\"\n [showToggleAll]=\"true\"\n [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onMultiselectFilterChange(column, $event)\"\n placeholder=\" \"\n appendTo=\"body\"\n (onFocus)=\"onFilterChosen(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n [ariaFilterLabel]=\"\n 'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n \"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!filterAmounts()[column.id]\"\n [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value> {{ value.key | translate }} </ng-template>\n </p-multiselect>\n }\n</ng-template>", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i5$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i5$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i5$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i7$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i2$4.Ripple, selector: "[pRipple]" }, { 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: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet]] }); }
|
|
3226
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DataTableComponent, isStandalone: false, selector: "ocx-data-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, selectionEnabledField: { classPropertyName: "selectionEnabledField", publicName: "selectionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, captionTemplate: { classPropertyName: "captionTemplate", publicName: "captionTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringCellTemplate: { classPropertyName: "stringCellTemplate", publicName: "stringCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberCellTemplate: { classPropertyName: "numberCellTemplate", publicName: "numberCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateCellTemplate: { classPropertyName: "dateCellTemplate", publicName: "dateCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateCellTemplate: { classPropertyName: "relativeDateCellTemplate", publicName: "relativeDateCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyCellTemplate: { classPropertyName: "translationKeyCellTemplate", publicName: "translationKeyCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringFilterCellTemplate: { classPropertyName: "stringFilterCellTemplate", publicName: "stringFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberFilterCellTemplate: { classPropertyName: "numberFilterCellTemplate", publicName: "numberFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateFilterCellTemplate: { classPropertyName: "dateFilterCellTemplate", publicName: "dateFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateFilterCellTemplate: { classPropertyName: "relativeDateFilterCellTemplate", publicName: "relativeDateFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, filterCellTemplate: { classPropertyName: "filterCellTemplate", publicName: "filterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyFilterCellTemplate: { classPropertyName: "translationKeyFilterCellTemplate", publicName: "translationKeyFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, columnHeaderTemplate: { classPropertyName: "columnHeaderTemplate", publicName: "columnHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: true, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rows: "rowsChange", selectedRows: "selectedRowsChange", filters: "filtersChange", sortDirection: "sortDirectionChange", sortColumn: "sortColumnChange", columns: "columnsChange", sortStates: "sortStatesChange", pageSizes: "pageSizesChange", pageSize: "pageSizeChange", name: "nameChange", page: "pageChange", additionalActions: "additionalActionsChange", expandedRows: "expandedRowsChange", filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed", parentTemplates: "parentTemplatesChange" }, queries: [{ propertyName: "stringCellChildTemplate", first: true, predicate: ["stringCell"], descendants: true, isSignal: true }, { propertyName: "numberCellChildTemplate", first: true, predicate: ["numberCell"], descendants: true, isSignal: true }, { propertyName: "dateCellChildTemplate", first: true, predicate: ["dateCell"], descendants: true, isSignal: true }, { propertyName: "relativeDateCellChildTemplate", first: true, predicate: ["relativeDateCell"], descendants: true, isSignal: true }, { propertyName: "cellChildTemplate", first: true, predicate: ["cell"], descendants: true, isSignal: true }, { propertyName: "translationKeyCellChildTemplate", first: true, predicate: ["translationKeyCell"], descendants: true, isSignal: true }, { propertyName: "stringFilterCellChildTemplate", first: true, predicate: ["stringFilterCell"], descendants: true, isSignal: true }, { propertyName: "numberFilterCellChildTemplate", first: true, predicate: ["numberFilterCell"], descendants: true, isSignal: true }, { propertyName: "dateFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true, isSignal: true }, { propertyName: "relativeDateFilterCellChildTemplate", first: true, predicate: ["relativeDateFilterCell"], descendants: true, isSignal: true }, { propertyName: "filterCellChildTemplate", first: true, predicate: ["filterCell"], descendants: true, isSignal: true }, { propertyName: "translationKeyFilterCellChildTemplate", first: true, predicate: ["translationKeyFilterCell"], descendants: true, isSignal: true }, { propertyName: "columnHeaderChildTemplate", first: true, predicate: ["columnHeaderTemplate"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n @if (actionColumnVisible) {\n <td\n class=\"actions\"\n pFrozenColumn\n [frozen]=\"frozenActionColumn()\"\n [alignFrozen]=\"actionColumnPosition()\"\n [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-left' : 'action-column-right'\"\n [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n >\n <div class=\"icon-button-row-wrapper\">\n @if (viewTableRowObserved && (!viewActionVisibleField() || fieldIsTruthy(rowObject, viewActionVisibleField()))) {\n <button\n id=\"{{ resolveFieldData(rowObject, 'id') }}-viewButton\"\n *ocxIfPermission=\"viewPermission()\"\n [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(rowObject, viewActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text viewTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n icon=\"pi pi-eye\"\n (click)=\"onViewRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @if (editTableRowObserved && (!editActionVisibleField() || fieldIsTruthy(rowObject, editActionVisibleField())))\n {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-editButton'\"\n *ocxIfPermission=\"editPermission()\"\n [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(rowObject, editActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text editTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n icon=\"pi pi-pencil\"\n (click)=\"onEditRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @if ( deleteTableRowObserved && (!deleteActionVisibleField() || fieldIsTruthy(rowObject,\n deleteActionVisibleField())) ) {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-deleteButton'\"\n *ocxIfPermission=\"deletePermission()\"\n [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(rowObject, deleteActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n icon=\"pi pi-trash\"\n (click)=\"onDeleteRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @for (action of inlineActions(); track action) { @if (!action.actionVisibleField || fieldIsTruthy(rowObject,\n action.actionVisibleField)) {\n @if (typeof action.routerLink === 'string' && !(action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField)))) {\n <a\n [id]=\"resolveFieldData(rowObject, 'id')+'-'+(action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text no-underline\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n [routerLink]=\"action.routerLink\"\n [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.data-testid]=\"'data-table-action-button'\"\n ></a>\n } @else {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-'+(action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n (click)=\"onActionClick(action, rowObject)\"\n [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"\n action.disabled ||\n (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\n \"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n }\n } } @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n class=\"p-button-rounded p-button-text\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [name]=\"'data-table-overflow-action-button'\"\n ></button>\n }\n </div>\n </td>\n }\n</ng-template>\n\n<ng-template #expansionColumnHeader>\n @if (expandable() && expansionTemplate()) {\n <th\n pFrozenColumn\n [frozen]=\"frozenExpandColumn()\"\n alignFrozen=\"left\"\n [attr.name]=\"'expansion-column-header'\"\n style=\"width: 4rem\"\n scope=\"col\"\n >\n <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.EXPAND_COLLAPSE_COLUMN' | translate }}</span>\n</th>\n }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n @if (actionColumnVisible) {\n <th\n pFrozenColumn\n [frozen]=\"frozenActionColumn()\"\n [alignFrozen]=\"actionColumnPosition()\"\n [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n scope=\"col\"\n >\n {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n </th>\n }\n</ng-template>\n\n@if (displayedPageSize(); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n@if ((columnHeaderTemplates$ | async) ?? {}; as columnHeaderTemplates) {\n<p-table\n [value]=\"(displayedRows$ | async) ?? []\"\n [paginator]=\"paginator()\"\n [first]=\"page() * displayedPageSize\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"\n (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey())\n | translate : params()\n \"\n [rowsPerPageOptions]=\"pageSizes()\"\n [id]=\"'dataTable_' + name()\"\n (selectionChange)=\"onSelectionChange($event)\"\n dataKey=\"id\"\n [rowTrackBy]=\"rowTrackByFunction\"\n [selection]=\"selectedFilteredRows()\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [style]=\"tableStyle()\"\n paginatorDropdownAppendTo=\"body\"\n [rowSelectable]=\"rowSelectable\"\n tableStyleClass=\"h-full\"\n [expandedRowKeys]=\"expandedRowKeys()\"\n (onRowExpand)=\"onRowExpand($event)\"\n (onRowCollapse)=\"onRowCollapse($event)\"\n>\n <ng-template #header>\n <tr style=\"vertical-align: top\">\n <ng-container *ngTemplateOutlet=\"expansionColumnHeader\"></ng-container>\n @if (selectionChangedObserved) {\n <th style=\"width: 4rem\" scope=\"col\">\n @if (allowSelectAll()) {\n <p-tableHeaderCheckbox\n [ocxTooltip]=\"'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate\"\n ></p-tableHeaderCheckbox>\n }\n <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.SELECTION_COLUMN' | translate }}</span>\n </th>\n } @if (actionColumnPosition() === 'left') {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n } \n @for (column of columns(); track column) { \n @if (columnHeaderTemplates[column.id]; as columnHeaderTemplate){\n <th scope=\"col\" [pSortableColumn]=\"column.sortable ? column.id : undefined\">\n <ng-container\n [ngTemplateOutlet]=\"columnHeaderTemplate\"\n [ngTemplateOutletContext]=\"{ column: column, labelTemplate: columnHeaderLabel, sortTemplate: columnHeaderSortButton, filterTemplate: columnHeaderFilter }\"\n ></ng-container>\n </th>\n } @else {\n @if (column.sortable || column.filterable) {\n <th scope=\"col\" [pSortableColumn]=\"column.sortable ? column.nameKey : undefined\">\n <div\n class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n style=\"height: 100%\"\n >\n <span class=\"flex\" [id]=\"column.id + '-header-name'\">\n <ng-container [ngTemplateOutlet]=\"columnHeaderLabel\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n </span>\n <span class=\"flex icon-button-header-wrapper\"> \n <ng-container [ngTemplateOutlet]=\"columnHeaderSortButton\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"columnHeaderFilter\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n </span>\n </div>\n </th>\n } @else {\n <th scope=\"col\">\n <ng-container [ngTemplateOutlet]=\"columnHeaderLabel\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n </th> \n } \n }\n } \n @if (actionColumnPosition() === 'right') {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n }\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"caption\">\n @if (captionTemplate()) {\n <ng-container>\n <ng-container [ngTemplateOutlet]=\"captionTemplate()\"></ng-container>\n </ng-container>\n }\n </ng-template>\n\n <ng-template #body let-rowObject>\n @if (columnTemplates) {\n <tr [attr.id]=\"'ocx-expanded-row-' + rowObject.id\">\n <ng-container *ngTemplateOutlet=\"expansionColumn; context: {localRowObject: rowObject}\"></ng-container>\n @if (selectionChangedObserved) {\n <td>\n @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n <p-checkbox\n [value]=\"true\"\n [binary]=\"true\"\n [disabled]=\"true\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n ></p-checkbox>\n } @else {\n <p-tableCheckbox\n [value]=\"rowObject\"\n [disabled]=\"isRowSelectionDisabled(rowObject)\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n ></p-tableCheckbox>\n }\n </td>\n } @if (actionColumnPosition() === 'left') {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n } @for (column of columns(); track column) {\n <td>\n @defer (on viewport) { @if (columnTemplates[column.id]) {\n <ng-container\n [ngTemplateOutlet]=\"cell() ?? columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{ rowObject: rowObject, column: column }\"\n >\n </ng-container>\n } } @placeholder {\n <p-skeleton width=\"3rem\" />\n }\n </td>\n } @if (actionColumnPosition() === 'right') {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n }\n </tr>\n }\n </ng-template>\n\n <ng-template #expandedrow let-rowObject>\n @if (expansionTemplate(); as expansionTemplate) {\n <tr>\n <td [attr.colspan]=\"getRowColspan(!!expansionTemplate)\">\n <ng-container\n [ngTemplateOutlet]=\"expansionTemplate.template\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject\n }\"\n >\n </ng-container>\n </td>\n </tr>\n }\n </ng-template>\n\n <ng-template #emptymessage>\n <tr>\n <td\n [colSpan]=\"\n getRowColspan(!!expansionTemplate())\n \"\n >\n {{ emptyResultsMessage() || ('OCX_DATA_TABLE.EMPTY_RESULT' | translate) }}\n </td>\n </tr>\n </ng-template>\n</p-table>\n} } }\n\n<ng-template #expansionColumn let-rowObject=\"localRowObject\">\n @if (expandable() && expansionTemplate()) {\n <td pFrozenColumn [frozen]=\"frozenExpandColumn()\" alignFrozen=\"left\" [attr.name]=\"'expansion-column'\">\n <button\n type=\"button\"\n pButton\n pRipple\n [icon]=\"isRowExpanded(rowObject) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n class=\"p-button-rounded p-button-text\"\n (click)=\"toggleRowExpansion(rowObject)\"\n [attr.aria-expanded]=\"isRowExpanded(rowObject)\"\n [attr.aria-controls]=\"'ocx-expanded-row-' + rowObject.id\"\n [attr.aria-label]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n [title]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n ></button>\n </td>\n }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n\n<ng-template #columnHeaderLabel let-column=\"column\">{{ column.nameKey | translate }}</ng-template>\n\n<ng-template #columnHeaderSortButton let-column=\"column\">\n @if (column.sortable) {\n <button\n class=\"pi sortButton pl-0\"\n [class.pi-sort-alt]=\"(column?.id === sortColumn() && sortDirection() === 'NONE') || column?.id !== sortColumn()\"\n [class.pi-sort-amount-up]=\"column?.id === sortColumn() && sortDirection() === 'ASCENDING'\"\n [class.pi-sort-amount-down]=\"column?.id === sortColumn() && sortDirection() === 'DESCENDING'\"\n (click)=\"onSortColumnClick(column.id)\"\n [ocxTooltip]=\"sortIconTitle(column.id) | translate\"\n tooltipPosition=\"bottom\"\n [attr.aria-label]=\"\n 'OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL'\n | translate : {\n column: (column.nameKey | translate),\n direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)\n }\n \"\n ></button>\n } \n</ng-template>\n\n<ng-template #columnHeaderFilter let-column=\"column\">\n @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { \n @if (columnFilterTemplates$ | async; as columnFilterTemplates) { \n @if (column.filterable && (!column.filterType || column.filterType === FilterType.EQUALS)) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n [ngModel]=\"currentEqualSelectedFilters() || []\"\n [showToggleAll]=\"true\"\n [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onMultiselectFilterChange(column, $event)\"\n placeholder=\" \"\n appendTo=\"body\"\n filterBy=\"toFilterBy\"\n (onFocus)=\"onFilterChosen(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n [filterPlaceHolder]=\"'OCX_DATA_TABLE.COLUMN_FILTER_PLACEHOLDER' | translate\"\n [ariaFilterLabel]=\"\n 'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n \"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!filterAmounts()[column.id]\"\n [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value>\n @if (columnFilterTemplates[column.id]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromMultiselectItem(value, column),\n column: column\n }\"\n >\n </ng-container>\n }\n </ng-template>\n </p-multiselect>\n } \n } \n } \n @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"[\n { key: 'OCX_DATA_TABLE.FILTER_YES', value: true },\n { key: 'OCX_DATA_TABLE.FILTER_NO', value: false }\n ]\"\n [ngModel]=\"currentTruthySelectedFilters() || []\"\n [showToggleAll]=\"true\"\n [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onMultiselectFilterChange(column, $event)\"\n placeholder=\" \"\n appendTo=\"body\"\n (onFocus)=\"onFilterChosen(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n [ariaFilterLabel]=\"\n 'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n \"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!filterAmounts()[column.id]\"\n [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value> {{ value.key | translate }} </ng-template>\n </p-multiselect>\n }\n</ng-template>", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i5$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i5$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i5$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i2$4.Ripple, selector: "[pRipple]" }, { 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: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet]] }); }
|
|
3223
3227
|
}
|
|
3224
3228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
3225
3229
|
type: Component,
|
|
3226
|
-
args: [{ standalone: false, selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n @if (actionColumnVisible) {\n <td\n class=\"actions\"\n pFrozenColumn\n [frozen]=\"frozenActionColumn()\"\n [alignFrozen]=\"actionColumnPosition()\"\n [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-left' : 'action-column-right'\"\n [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n >\n <div class=\"icon-button-row-wrapper\">\n @if (viewTableRowObserved && (!viewActionVisibleField() || fieldIsTruthy(rowObject, viewActionVisibleField()))) {\n <button\n id=\"{{ resolveFieldData(rowObject, 'id') }}-viewButton\"\n *ocxIfPermission=\"viewPermission()\"\n [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(rowObject, viewActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text viewTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n icon=\"pi pi-eye\"\n (click)=\"onViewRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @if (editTableRowObserved && (!editActionVisibleField() || fieldIsTruthy(rowObject, editActionVisibleField())))\n {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-editButton'\"\n *ocxIfPermission=\"editPermission()\"\n [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(rowObject, editActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text editTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n icon=\"pi pi-pencil\"\n (click)=\"onEditRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @if ( deleteTableRowObserved && (!deleteActionVisibleField() || fieldIsTruthy(rowObject,\n deleteActionVisibleField())) ) {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-deleteButton'\"\n *ocxIfPermission=\"deletePermission()\"\n [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(rowObject, deleteActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n icon=\"pi pi-trash\"\n (click)=\"onDeleteRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @for (action of inlineActions(); track action) { @if (!action.actionVisibleField || fieldIsTruthy(rowObject,\n action.actionVisibleField)) {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-'+(action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n (click)=\"onActionClick(action, rowObject)\"\n [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"\n action.disabled ||\n (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\n \"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } } @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n class=\"p-button-rounded p-button-text\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [name]=\"'data-table-overflow-action-button'\"\n ></button>\n }\n </div>\n </td>\n }\n</ng-template>\n\n<ng-template #expansionColumnHeader>\n @if (expandable() && expansionTemplate()) {\n <th\n pFrozenColumn\n [frozen]=\"frozenExpandColumn()\"\n alignFrozen=\"left\"\n [attr.name]=\"'expansion-column-header'\"\n style=\"width: 4rem\"\n scope=\"col\"\n >\n <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.EXPAND_COLLAPSE_COLUMN' | translate }}</span>\n</th>\n }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n @if (actionColumnVisible) {\n <th\n pFrozenColumn\n [frozen]=\"frozenActionColumn()\"\n [alignFrozen]=\"actionColumnPosition()\"\n [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n scope=\"col\"\n >\n {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n </th>\n }\n</ng-template>\n\n@if (displayedPageSize(); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n@if ((columnHeaderTemplates$ | async) ?? {}; as columnHeaderTemplates) {\n<p-table\n [value]=\"(displayedRows$ | async) ?? []\"\n [paginator]=\"paginator()\"\n [first]=\"page() * displayedPageSize\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"\n (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey())\n | translate : params()\n \"\n [rowsPerPageOptions]=\"pageSizes()\"\n [id]=\"'dataTable_' + name()\"\n (selectionChange)=\"onSelectionChange($event)\"\n dataKey=\"id\"\n [rowTrackBy]=\"rowTrackByFunction\"\n [selection]=\"selectedFilteredRows()\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [style]=\"tableStyle()\"\n paginatorDropdownAppendTo=\"body\"\n [rowSelectable]=\"rowSelectable\"\n tableStyleClass=\"h-full\"\n [expandedRowKeys]=\"expandedRowKeys()\"\n (onRowExpand)=\"onRowExpand($event)\"\n (onRowCollapse)=\"onRowCollapse($event)\"\n>\n <ng-template #header>\n <tr style=\"vertical-align: top\">\n <ng-container *ngTemplateOutlet=\"expansionColumnHeader\"></ng-container>\n @if (selectionChangedObserved) {\n <th style=\"width: 4rem\" scope=\"col\">\n @if (allowSelectAll()) {\n <p-tableHeaderCheckbox\n [ocxTooltip]=\"'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate\"\n ></p-tableHeaderCheckbox>\n }\n <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.SELECTION_COLUMN' | translate }}</span>\n </th>\n } @if (actionColumnPosition() === 'left') {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n } \n @for (column of columns(); track column) { \n @if (columnHeaderTemplates[column.id]; as columnHeaderTemplate){\n <th scope=\"col\" [pSortableColumn]=\"column.sortable ? column.id : undefined\">\n <ng-container\n [ngTemplateOutlet]=\"columnHeaderTemplate\"\n [ngTemplateOutletContext]=\"{ column: column, labelTemplate: columnHeaderLabel, sortTemplate: columnHeaderSortButton, filterTemplate: columnHeaderFilter }\"\n ></ng-container>\n </th>\n } @else {\n @if (column.sortable || column.filterable) {\n <th scope=\"col\" [pSortableColumn]=\"column.sortable ? column.nameKey : undefined\">\n <div\n class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n style=\"height: 100%\"\n >\n <span class=\"flex\" [id]=\"column.id + '-header-name'\">\n <ng-container [ngTemplateOutlet]=\"columnHeaderLabel\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n </span>\n <span class=\"flex icon-button-header-wrapper\"> \n <ng-container [ngTemplateOutlet]=\"columnHeaderSortButton\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"columnHeaderFilter\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n </span>\n </div>\n </th>\n } @else {\n <th scope=\"col\">\n <ng-container [ngTemplateOutlet]=\"columnHeaderLabel\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n </th> \n } \n }\n } \n @if (actionColumnPosition() === 'right') {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n }\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"caption\">\n @if (captionTemplate()) {\n <ng-container>\n <ng-container [ngTemplateOutlet]=\"captionTemplate()\"></ng-container>\n </ng-container>\n }\n </ng-template>\n\n <ng-template #body let-rowObject>\n @if (columnTemplates) {\n <tr [attr.id]=\"'ocx-expanded-row-' + rowObject.id\">\n <ng-container *ngTemplateOutlet=\"expansionColumn; context: {localRowObject: rowObject}\"></ng-container>\n @if (selectionChangedObserved) {\n <td>\n @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n <p-checkbox\n [value]=\"true\"\n [binary]=\"true\"\n [disabled]=\"true\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n ></p-checkbox>\n } @else {\n <p-tableCheckbox\n [value]=\"rowObject\"\n [disabled]=\"isRowSelectionDisabled(rowObject)\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n ></p-tableCheckbox>\n }\n </td>\n } @if (actionColumnPosition() === 'left') {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n } @for (column of columns(); track column) {\n <td>\n @defer (on viewport) { @if (columnTemplates[column.id]) {\n <ng-container\n [ngTemplateOutlet]=\"cell() ?? columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{ rowObject: rowObject, column: column }\"\n >\n </ng-container>\n } } @placeholder {\n <p-skeleton width=\"3rem\" />\n }\n </td>\n } @if (actionColumnPosition() === 'right') {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n }\n </tr>\n }\n </ng-template>\n\n <ng-template #expandedrow let-rowObject>\n @if (expansionTemplate(); as expansionTemplate) {\n <tr>\n <td [attr.colspan]=\"getRowColspan(!!expansionTemplate)\">\n <ng-container\n [ngTemplateOutlet]=\"expansionTemplate.template\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject\n }\"\n >\n </ng-container>\n </td>\n </tr>\n }\n </ng-template>\n\n <ng-template #emptymessage>\n <tr>\n <td\n [colSpan]=\"\n getRowColspan(!!expansionTemplate())\n \"\n >\n {{ emptyResultsMessage() || ('OCX_DATA_TABLE.EMPTY_RESULT' | translate) }}\n </td>\n </tr>\n </ng-template>\n</p-table>\n} } }\n\n<ng-template #expansionColumn let-rowObject=\"localRowObject\">\n @if (expandable() && expansionTemplate()) {\n <td pFrozenColumn [frozen]=\"frozenExpandColumn()\" alignFrozen=\"left\" [attr.name]=\"'expansion-column'\">\n <button\n type=\"button\"\n pButton\n pRipple\n [icon]=\"isRowExpanded(rowObject) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n class=\"p-button-rounded p-button-text\"\n (click)=\"toggleRowExpansion(rowObject)\"\n [attr.aria-expanded]=\"isRowExpanded(rowObject)\"\n [attr.aria-controls]=\"'ocx-expanded-row-' + rowObject.id\"\n [attr.aria-label]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n [title]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n ></button>\n </td>\n }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n\n<ng-template #columnHeaderLabel let-column=\"column\">{{ column.nameKey | translate }}</ng-template>\n\n<ng-template #columnHeaderSortButton let-column=\"column\">\n @if (column.sortable) {\n <button\n class=\"pi sortButton pl-0\"\n [class.pi-sort-alt]=\"(column?.id === sortColumn() && sortDirection() === 'NONE') || column?.id !== sortColumn()\"\n [class.pi-sort-amount-up]=\"column?.id === sortColumn() && sortDirection() === 'ASCENDING'\"\n [class.pi-sort-amount-down]=\"column?.id === sortColumn() && sortDirection() === 'DESCENDING'\"\n (click)=\"onSortColumnClick(column.id)\"\n [ocxTooltip]=\"sortIconTitle(column.id) | translate\"\n tooltipPosition=\"bottom\"\n [attr.aria-label]=\"\n 'OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL'\n | translate : {\n column: (column.nameKey | translate),\n direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)\n }\n \"\n ></button>\n } \n</ng-template>\n\n<ng-template #columnHeaderFilter let-column=\"column\">\n @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { \n @if (columnFilterTemplates$ | async; as columnFilterTemplates) { \n @if (column.filterable && (!column.filterType || column.filterType === FilterType.EQUALS)) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n [ngModel]=\"currentEqualSelectedFilters() || []\"\n [showToggleAll]=\"true\"\n [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onMultiselectFilterChange(column, $event)\"\n placeholder=\" \"\n appendTo=\"body\"\n filterBy=\"toFilterBy\"\n (onFocus)=\"onFilterChosen(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n [filterPlaceHolder]=\"'OCX_DATA_TABLE.COLUMN_FILTER_PLACEHOLDER' | translate\"\n [ariaFilterLabel]=\"\n 'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n \"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!filterAmounts()[column.id]\"\n [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value>\n @if (columnFilterTemplates[column.id]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromMultiselectItem(value, column),\n column: column\n }\"\n >\n </ng-container>\n }\n </ng-template>\n </p-multiselect>\n } \n } \n } \n @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"[\n { key: 'OCX_DATA_TABLE.FILTER_YES', value: true },\n { key: 'OCX_DATA_TABLE.FILTER_NO', value: false }\n ]\"\n [ngModel]=\"currentTruthySelectedFilters() || []\"\n [showToggleAll]=\"true\"\n [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onMultiselectFilterChange(column, $event)\"\n placeholder=\" \"\n appendTo=\"body\"\n (onFocus)=\"onFilterChosen(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n [ariaFilterLabel]=\"\n 'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n \"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!filterAmounts()[column.id]\"\n [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value> {{ value.key | translate }} </ng-template>\n </p-multiselect>\n }\n</ng-template>", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"] }]
|
|
3230
|
+
args: [{ standalone: false, selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n @if (actionColumnVisible) {\n <td\n class=\"actions\"\n pFrozenColumn\n [frozen]=\"frozenActionColumn()\"\n [alignFrozen]=\"actionColumnPosition()\"\n [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-left' : 'action-column-right'\"\n [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n >\n <div class=\"icon-button-row-wrapper\">\n @if (viewTableRowObserved && (!viewActionVisibleField() || fieldIsTruthy(rowObject, viewActionVisibleField()))) {\n <button\n id=\"{{ resolveFieldData(rowObject, 'id') }}-viewButton\"\n *ocxIfPermission=\"viewPermission()\"\n [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(rowObject, viewActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text viewTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n icon=\"pi pi-eye\"\n (click)=\"onViewRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @if (editTableRowObserved && (!editActionVisibleField() || fieldIsTruthy(rowObject, editActionVisibleField())))\n {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-editButton'\"\n *ocxIfPermission=\"editPermission()\"\n [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(rowObject, editActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text editTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n icon=\"pi pi-pencil\"\n (click)=\"onEditRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @if ( deleteTableRowObserved && (!deleteActionVisibleField() || fieldIsTruthy(rowObject,\n deleteActionVisibleField())) ) {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-deleteButton'\"\n *ocxIfPermission=\"deletePermission()\"\n [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(rowObject, deleteActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n icon=\"pi pi-trash\"\n (click)=\"onDeleteRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @for (action of inlineActions(); track action) { @if (!action.actionVisibleField || fieldIsTruthy(rowObject,\n action.actionVisibleField)) {\n @if (typeof action.routerLink === 'string' && !(action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField)))) {\n <a\n [id]=\"resolveFieldData(rowObject, 'id')+'-'+(action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text no-underline\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n [routerLink]=\"action.routerLink\"\n [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.data-testid]=\"'data-table-action-button'\"\n ></a>\n } @else {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-'+(action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n (click)=\"onActionClick(action, rowObject)\"\n [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"\n action.disabled ||\n (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\n \"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n }\n } } @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n class=\"p-button-rounded p-button-text\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [name]=\"'data-table-overflow-action-button'\"\n ></button>\n }\n </div>\n </td>\n }\n</ng-template>\n\n<ng-template #expansionColumnHeader>\n @if (expandable() && expansionTemplate()) {\n <th\n pFrozenColumn\n [frozen]=\"frozenExpandColumn()\"\n alignFrozen=\"left\"\n [attr.name]=\"'expansion-column-header'\"\n style=\"width: 4rem\"\n scope=\"col\"\n >\n <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.EXPAND_COLLAPSE_COLUMN' | translate }}</span>\n</th>\n }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n @if (actionColumnVisible) {\n <th\n pFrozenColumn\n [frozen]=\"frozenActionColumn()\"\n [alignFrozen]=\"actionColumnPosition()\"\n [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n scope=\"col\"\n >\n {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n </th>\n }\n</ng-template>\n\n@if (displayedPageSize(); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n@if ((columnHeaderTemplates$ | async) ?? {}; as columnHeaderTemplates) {\n<p-table\n [value]=\"(displayedRows$ | async) ?? []\"\n [paginator]=\"paginator()\"\n [first]=\"page() * displayedPageSize\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"\n (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey())\n | translate : params()\n \"\n [rowsPerPageOptions]=\"pageSizes()\"\n [id]=\"'dataTable_' + name()\"\n (selectionChange)=\"onSelectionChange($event)\"\n dataKey=\"id\"\n [rowTrackBy]=\"rowTrackByFunction\"\n [selection]=\"selectedFilteredRows()\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [style]=\"tableStyle()\"\n paginatorDropdownAppendTo=\"body\"\n [rowSelectable]=\"rowSelectable\"\n tableStyleClass=\"h-full\"\n [expandedRowKeys]=\"expandedRowKeys()\"\n (onRowExpand)=\"onRowExpand($event)\"\n (onRowCollapse)=\"onRowCollapse($event)\"\n>\n <ng-template #header>\n <tr style=\"vertical-align: top\">\n <ng-container *ngTemplateOutlet=\"expansionColumnHeader\"></ng-container>\n @if (selectionChangedObserved) {\n <th style=\"width: 4rem\" scope=\"col\">\n @if (allowSelectAll()) {\n <p-tableHeaderCheckbox\n [ocxTooltip]=\"'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate\"\n ></p-tableHeaderCheckbox>\n }\n <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.SELECTION_COLUMN' | translate }}</span>\n </th>\n } @if (actionColumnPosition() === 'left') {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n } \n @for (column of columns(); track column) { \n @if (columnHeaderTemplates[column.id]; as columnHeaderTemplate){\n <th scope=\"col\" [pSortableColumn]=\"column.sortable ? column.id : undefined\">\n <ng-container\n [ngTemplateOutlet]=\"columnHeaderTemplate\"\n [ngTemplateOutletContext]=\"{ column: column, labelTemplate: columnHeaderLabel, sortTemplate: columnHeaderSortButton, filterTemplate: columnHeaderFilter }\"\n ></ng-container>\n </th>\n } @else {\n @if (column.sortable || column.filterable) {\n <th scope=\"col\" [pSortableColumn]=\"column.sortable ? column.nameKey : undefined\">\n <div\n class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n style=\"height: 100%\"\n >\n <span class=\"flex\" [id]=\"column.id + '-header-name'\">\n <ng-container [ngTemplateOutlet]=\"columnHeaderLabel\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n </span>\n <span class=\"flex icon-button-header-wrapper\"> \n <ng-container [ngTemplateOutlet]=\"columnHeaderSortButton\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"columnHeaderFilter\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n </span>\n </div>\n </th>\n } @else {\n <th scope=\"col\">\n <ng-container [ngTemplateOutlet]=\"columnHeaderLabel\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n </th> \n } \n }\n } \n @if (actionColumnPosition() === 'right') {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n }\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"caption\">\n @if (captionTemplate()) {\n <ng-container>\n <ng-container [ngTemplateOutlet]=\"captionTemplate()\"></ng-container>\n </ng-container>\n }\n </ng-template>\n\n <ng-template #body let-rowObject>\n @if (columnTemplates) {\n <tr [attr.id]=\"'ocx-expanded-row-' + rowObject.id\">\n <ng-container *ngTemplateOutlet=\"expansionColumn; context: {localRowObject: rowObject}\"></ng-container>\n @if (selectionChangedObserved) {\n <td>\n @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n <p-checkbox\n [value]=\"true\"\n [binary]=\"true\"\n [disabled]=\"true\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n ></p-checkbox>\n } @else {\n <p-tableCheckbox\n [value]=\"rowObject\"\n [disabled]=\"isRowSelectionDisabled(rowObject)\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n ></p-tableCheckbox>\n }\n </td>\n } @if (actionColumnPosition() === 'left') {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n } @for (column of columns(); track column) {\n <td>\n @defer (on viewport) { @if (columnTemplates[column.id]) {\n <ng-container\n [ngTemplateOutlet]=\"cell() ?? columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{ rowObject: rowObject, column: column }\"\n >\n </ng-container>\n } } @placeholder {\n <p-skeleton width=\"3rem\" />\n }\n </td>\n } @if (actionColumnPosition() === 'right') {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n }\n </tr>\n }\n </ng-template>\n\n <ng-template #expandedrow let-rowObject>\n @if (expansionTemplate(); as expansionTemplate) {\n <tr>\n <td [attr.colspan]=\"getRowColspan(!!expansionTemplate)\">\n <ng-container\n [ngTemplateOutlet]=\"expansionTemplate.template\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject\n }\"\n >\n </ng-container>\n </td>\n </tr>\n }\n </ng-template>\n\n <ng-template #emptymessage>\n <tr>\n <td\n [colSpan]=\"\n getRowColspan(!!expansionTemplate())\n \"\n >\n {{ emptyResultsMessage() || ('OCX_DATA_TABLE.EMPTY_RESULT' | translate) }}\n </td>\n </tr>\n </ng-template>\n</p-table>\n} } }\n\n<ng-template #expansionColumn let-rowObject=\"localRowObject\">\n @if (expandable() && expansionTemplate()) {\n <td pFrozenColumn [frozen]=\"frozenExpandColumn()\" alignFrozen=\"left\" [attr.name]=\"'expansion-column'\">\n <button\n type=\"button\"\n pButton\n pRipple\n [icon]=\"isRowExpanded(rowObject) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n class=\"p-button-rounded p-button-text\"\n (click)=\"toggleRowExpansion(rowObject)\"\n [attr.aria-expanded]=\"isRowExpanded(rowObject)\"\n [attr.aria-controls]=\"'ocx-expanded-row-' + rowObject.id\"\n [attr.aria-label]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n [title]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n ></button>\n </td>\n }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n\n<ng-template #columnHeaderLabel let-column=\"column\">{{ column.nameKey | translate }}</ng-template>\n\n<ng-template #columnHeaderSortButton let-column=\"column\">\n @if (column.sortable) {\n <button\n class=\"pi sortButton pl-0\"\n [class.pi-sort-alt]=\"(column?.id === sortColumn() && sortDirection() === 'NONE') || column?.id !== sortColumn()\"\n [class.pi-sort-amount-up]=\"column?.id === sortColumn() && sortDirection() === 'ASCENDING'\"\n [class.pi-sort-amount-down]=\"column?.id === sortColumn() && sortDirection() === 'DESCENDING'\"\n (click)=\"onSortColumnClick(column.id)\"\n [ocxTooltip]=\"sortIconTitle(column.id) | translate\"\n tooltipPosition=\"bottom\"\n [attr.aria-label]=\"\n 'OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL'\n | translate : {\n column: (column.nameKey | translate),\n direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)\n }\n \"\n ></button>\n } \n</ng-template>\n\n<ng-template #columnHeaderFilter let-column=\"column\">\n @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { \n @if (columnFilterTemplates$ | async; as columnFilterTemplates) { \n @if (column.filterable && (!column.filterType || column.filterType === FilterType.EQUALS)) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n [ngModel]=\"currentEqualSelectedFilters() || []\"\n [showToggleAll]=\"true\"\n [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onMultiselectFilterChange(column, $event)\"\n placeholder=\" \"\n appendTo=\"body\"\n filterBy=\"toFilterBy\"\n (onFocus)=\"onFilterChosen(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n [filterPlaceHolder]=\"'OCX_DATA_TABLE.COLUMN_FILTER_PLACEHOLDER' | translate\"\n [ariaFilterLabel]=\"\n 'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n \"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!filterAmounts()[column.id]\"\n [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value>\n @if (columnFilterTemplates[column.id]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromMultiselectItem(value, column),\n column: column\n }\"\n >\n </ng-container>\n }\n </ng-template>\n </p-multiselect>\n } \n } \n } \n @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"[\n { key: 'OCX_DATA_TABLE.FILTER_YES', value: true },\n { key: 'OCX_DATA_TABLE.FILTER_NO', value: false }\n ]\"\n [ngModel]=\"currentTruthySelectedFilters() || []\"\n [showToggleAll]=\"true\"\n [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onMultiselectFilterChange(column, $event)\"\n placeholder=\" \"\n appendTo=\"body\"\n (onFocus)=\"onFilterChosen(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n [ariaFilterLabel]=\"\n 'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n \"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!filterAmounts()[column.id]\"\n [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value> {{ value.key | translate }} </ng-template>\n </p-multiselect>\n }\n</ng-template>", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"] }]
|
|
3227
3231
|
}], ctorParameters: () => [], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], selectedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRows", required: false }] }, { type: i0.Output, args: ["selectedRowsChange"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }, { type: i0.Output, args: ["sortDirectionChange"] }], sortColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortColumn", required: false }] }, { type: i0.Output, args: ["sortColumnChange"] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }, { type: i0.Output, args: ["columnsChange"] }], clientSideFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideFiltering", required: false }] }], clientSideSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideSorting", required: false }] }], sortStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortStates", required: false }] }, { type: i0.Output, args: ["sortStatesChange"] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }, { type: i0.Output, args: ["pageSizesChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], emptyResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyResultsMessage", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }, { type: i0.Output, args: ["nameChange"] }], deletePermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletePermission", required: false }] }], viewPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewPermission", required: false }] }], editPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "editPermission", required: false }] }], deleteActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionVisibleField", required: false }] }], deleteActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionEnabledField", required: false }] }], viewActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionVisibleField", required: false }] }], viewActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionEnabledField", required: false }] }], editActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionVisibleField", required: false }] }], editActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionEnabledField", required: false }] }], selectionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionEnabledField", required: false }] }], allowSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSelectAll", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], tableStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableStyle", required: false }] }], totalRecordsOnServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecordsOnServer", required: false }] }], currentPageShowingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingKey", required: false }] }], currentPageShowingWithTotalOnServerKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingWithTotalOnServerKey", required: false }] }], captionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionTemplate", required: false }] }], stringCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringCellTemplate", required: false }] }], stringCellChildTemplate: [{ type: i0.ContentChild, args: ['stringCell', { isSignal: true }] }], numberCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberCellTemplate", required: false }] }], numberCellChildTemplate: [{ type: i0.ContentChild, args: ['numberCell', { isSignal: true }] }], dateCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateCellTemplate", required: false }] }], dateCellChildTemplate: [{ type: i0.ContentChild, args: ['dateCell', { isSignal: true }] }], relativeDateCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateCellTemplate", required: false }] }], relativeDateCellChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateCell', { isSignal: true }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], cellChildTemplate: [{ type: i0.ContentChild, args: ['cell', { isSignal: true }] }], translationKeyCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyCellTemplate", required: false }] }], translationKeyCellChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyCell', { isSignal: true }] }], stringFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringFilterCellTemplate", required: false }] }], stringFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['stringFilterCell', { isSignal: true }] }], numberFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberFilterCellTemplate", required: false }] }], numberFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['numberFilterCell', { isSignal: true }] }], dateFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilterCellTemplate", required: false }] }], dateFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['dateFilterCell', { isSignal: true }] }], relativeDateFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateFilterCellTemplate", required: false }] }], relativeDateFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateFilterCell', { isSignal: true }] }], filterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCellTemplate", required: false }] }], filterCellChildTemplate: [{ type: i0.ContentChild, args: ['filterCell', { isSignal: true }] }], translationKeyFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyFilterCellTemplate", required: false }] }], translationKeyFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyFilterCell', { isSignal: true }] }], columnHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnHeaderTemplate", required: false }] }], columnHeaderChildTemplate: [{ type: i0.ContentChild, args: ['columnHeaderTemplate', { isSignal: true }] }], additionalActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalActions", required: false }] }, { type: i0.Output, args: ["additionalActionsChange"] }], frozenActionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenActionColumn", required: false }] }], actionColumnPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionColumnPosition", required: false }] }], expandedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRows", required: false }] }, { type: i0.Output, args: ["expandedRowsChange"] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], frozenExpandColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenExpandColumn", required: false }] }], filtered: [{ type: i0.Output, args: ["filtered"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], viewTableRow: [{
|
|
3228
3232
|
type: Output
|
|
3229
3233
|
}], editTableRow: [{
|
|
@@ -3773,7 +3777,7 @@ class DiagramComponent {
|
|
|
3773
3777
|
});
|
|
3774
3778
|
}
|
|
3775
3779
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3776
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DiagramComponent, isStandalone: false, selector: "ocx-diagram", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sumKey: { classPropertyName: "sumKey", publicName: "sumKey", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, chartTitleKey: { classPropertyName: "chartTitleKey", publicName: "chartTitleKey", isSignal: true, isRequired: false, transformFunction: null }, chartDescriptionKey: { classPropertyName: "chartDescriptionKey", publicName: "chartDescriptionKey", isSignal: true, isRequired: false, transformFunction: null }, fillMissingColors: { classPropertyName: "fillMissingColors", publicName: "fillMissingColors", isSignal: true, isRequired: false, transformFunction: null }, diagramType: { classPropertyName: "diagramType", publicName: "diagramType", isSignal: true, isRequired: false, transformFunction: null }, supportedDiagramTypes: { classPropertyName: "supportedDiagramTypes", publicName: "supportedDiagramTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { diagramType: "diagramTypeChange", dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "@if (chartTitleKey() || chartDescriptionKey()) {\n @if (chartTitleKey()) {\n <header class=\"diagram-title w-full flex justify-content-center\" [attr.id]=\"'ocx-' + uniqueInstanceId + '-title'\">\n {{ chartTitleKey() | translate }}\n </header>\n }\n @if (chartDescriptionKey()) {\n <p class=\"diagram-description w-full flex justify-content-center\" [attr.id]=\"'ocx-' + uniqueInstanceId + '-description'\">\n {{chartDescriptionKey() | translate }}</p>\n }\n}\n@if (data()) { @if (shownDiagramTypes().length > 1) {\n<div class=\"flex justify-content-center pb-2\">\n <p-selectbutton [options]=\"shownDiagramTypes()\" [ngModel]=\"selectedDiagramType()\" optionLabel=\"id\"\n (onChange)=\"onDiagramTypeChanged($event)\" name=\"diagram-type-select-button\" [allowEmpty]=\"false\"\n [ariaLabel]=\"'OCX_DIAGRAM.SELECT_BUTTON.ARIA_LABEL' | translate\">\n <ng-template #item let-item>\n <i [class]=\"item.icon\" [ocxTooltip]=\"item.tooltipKey | translate\" tooltipPosition=\"top\" tooltipEvent=\"hover\"></i>\n <span class=\"sr-only\" [attr.id]=\"'ocx-' + uniqueInstanceId + '-' + item.id\">{{item.label ? item.label : item.labelKey | translate}}</span>\n </ng-template>\n </p-selectbutton>\n</div>\n}\n<div class=\"w-full flex justify-content-center\" [ngClass]=\"{'h-full': useFullHeight()}\">\n <p-chart tabindex=\"0\" \n [attr.aria-describedby]=\"'ocx-' + uniqueInstanceId + '-sr-only-table'\" \n [attr.id]=\"'ocx-' + uniqueInstanceId + '-chart'\"\n [attr.data-automation-type]=\"chartType()\"\n [type]=\"chartType()\"\n [data]=\"chartData()\"\n [responsive]=\"useFullHeight()\"\n [attr.data-automation-options]=\"chartOptions()\" [options]=\"chartOptions()\" (onDataSelect)=\"dataClicked($event)\"\n [ariaLabel]=\"(data() ? 'OCX_DIAGRAM.ARIA_LABEL' : 'OCX_DIAGRAM.EMPTY_ARIA_LABEL') | translate: {total: generateTotal(data() ?? []), valueString: generateDiagramValueString(data() ?? [])}\"></p-chart>\n <ng-container [ngTemplateOutlet]=\"chartDetailsForSr\"></ng-container>\n</div>\n<div class=\"w-full flex justify-content-center mt-2 sumKey\" aria-hidden=\"true\">\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} @if (!data()) {\n<div class=\"w-full flex justify-content-center\">\n <p-message severity=\"info\" text=\"{{ 'OCX_DIAGRAM.NO_DATA' | translate }}\"></p-message>\n</div>\n}\n\n\n<!-- Table for screen readers -->\n<ng-template #chartDetailsForSr>\n @if (data()) {\n <div class=\"w-full flex justify-content-center sr-only\" [attr.id]=\"'ocx-' + uniqueInstanceId + '-sr-only-diagram-details'\">\n <table [attr.id]=\"'ocx-' + uniqueInstanceId + '-sr-only-table'\">\n <caption [attr.id]=\"'ocx-' + uniqueInstanceId + '-table-caption'\"> {{ chartTitleKey() | translate }} </caption>\n <thead>\n <tr>\n <th scope=\"col\">{{ 'OCX_DIAGRAM.TABLE.COLOR' | translate }}</th>\n <th scope=\"col\">{{ 'OCX_DIAGRAM.TABLE.LABEL' | translate }}</th>\n <th scope=\"col\">{{ 'OCX_DIAGRAM.TABLE.COUNT' | translate }}</th>\n </tr>\n </thead>\n <tbody>\n @for (item of data(); track item) {\n <tr>\n <td>\n <span>{{ item.backgroundColor || ' ' }}</span>\n </td>\n <td>{{ item.label }}</td>\n <td>{{ item.value }}</td>\n </tr>\n }\n <tr>\n <td colspan=\"2\">{{ sumKey() | translate }}</td>\n <td>{{ amountOfData() }}</td>\n </tr>\n </tbody>\n </table>\n </div>\n}\n</ng-template>", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.diagram-title,.diagram-description{text-align:center}\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: i5$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: i3$3.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "ariaLabel", "ariaLabelledBy", "data", "options"], outputs: ["onDataSelect"] }, { kind: "component", type: i4$
|
|
3780
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DiagramComponent, isStandalone: false, selector: "ocx-diagram", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sumKey: { classPropertyName: "sumKey", publicName: "sumKey", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, chartTitleKey: { classPropertyName: "chartTitleKey", publicName: "chartTitleKey", isSignal: true, isRequired: false, transformFunction: null }, chartDescriptionKey: { classPropertyName: "chartDescriptionKey", publicName: "chartDescriptionKey", isSignal: true, isRequired: false, transformFunction: null }, fillMissingColors: { classPropertyName: "fillMissingColors", publicName: "fillMissingColors", isSignal: true, isRequired: false, transformFunction: null }, diagramType: { classPropertyName: "diagramType", publicName: "diagramType", isSignal: true, isRequired: false, transformFunction: null }, supportedDiagramTypes: { classPropertyName: "supportedDiagramTypes", publicName: "supportedDiagramTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { diagramType: "diagramTypeChange", dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "@if (chartTitleKey() || chartDescriptionKey()) {\n @if (chartTitleKey()) {\n <header class=\"diagram-title w-full flex justify-content-center\" [attr.id]=\"'ocx-' + uniqueInstanceId + '-title'\">\n {{ chartTitleKey() | translate }}\n </header>\n }\n @if (chartDescriptionKey()) {\n <p class=\"diagram-description w-full flex justify-content-center\" [attr.id]=\"'ocx-' + uniqueInstanceId + '-description'\">\n {{chartDescriptionKey() | translate }}</p>\n }\n}\n@if (data()) { @if (shownDiagramTypes().length > 1) {\n<div class=\"flex justify-content-center pb-2\">\n <p-selectbutton [options]=\"shownDiagramTypes()\" [ngModel]=\"selectedDiagramType()\" optionLabel=\"id\"\n (onChange)=\"onDiagramTypeChanged($event)\" name=\"diagram-type-select-button\" [allowEmpty]=\"false\"\n [ariaLabel]=\"'OCX_DIAGRAM.SELECT_BUTTON.ARIA_LABEL' | translate\">\n <ng-template #item let-item>\n <i [class]=\"item.icon\" [ocxTooltip]=\"item.tooltipKey | translate\" tooltipPosition=\"top\" tooltipEvent=\"hover\"></i>\n <span class=\"sr-only\" [attr.id]=\"'ocx-' + uniqueInstanceId + '-' + item.id\">{{item.label ? item.label : item.labelKey | translate}}</span>\n </ng-template>\n </p-selectbutton>\n</div>\n}\n<div class=\"w-full flex justify-content-center\" [ngClass]=\"{'h-full': useFullHeight()}\">\n <p-chart tabindex=\"0\" \n [attr.aria-describedby]=\"'ocx-' + uniqueInstanceId + '-sr-only-table'\" \n [attr.id]=\"'ocx-' + uniqueInstanceId + '-chart'\"\n [attr.data-automation-type]=\"chartType()\"\n [type]=\"chartType()\"\n [data]=\"chartData()\"\n [responsive]=\"useFullHeight()\"\n [attr.data-automation-options]=\"chartOptions()\" [options]=\"chartOptions()\" (onDataSelect)=\"dataClicked($event)\"\n [ariaLabel]=\"(data() ? 'OCX_DIAGRAM.ARIA_LABEL' : 'OCX_DIAGRAM.EMPTY_ARIA_LABEL') | translate: {total: generateTotal(data() ?? []), valueString: generateDiagramValueString(data() ?? [])}\"></p-chart>\n <ng-container [ngTemplateOutlet]=\"chartDetailsForSr\"></ng-container>\n</div>\n<div class=\"w-full flex justify-content-center mt-2 sumKey\" aria-hidden=\"true\">\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} @if (!data()) {\n<div class=\"w-full flex justify-content-center\">\n <p-message severity=\"info\" text=\"{{ 'OCX_DIAGRAM.NO_DATA' | translate }}\"></p-message>\n</div>\n}\n\n\n<!-- Table for screen readers -->\n<ng-template #chartDetailsForSr>\n @if (data()) {\n <div class=\"w-full flex justify-content-center sr-only\" [attr.id]=\"'ocx-' + uniqueInstanceId + '-sr-only-diagram-details'\">\n <table [attr.id]=\"'ocx-' + uniqueInstanceId + '-sr-only-table'\">\n <caption [attr.id]=\"'ocx-' + uniqueInstanceId + '-table-caption'\"> {{ chartTitleKey() | translate }} </caption>\n <thead>\n <tr>\n <th scope=\"col\">{{ 'OCX_DIAGRAM.TABLE.COLOR' | translate }}</th>\n <th scope=\"col\">{{ 'OCX_DIAGRAM.TABLE.LABEL' | translate }}</th>\n <th scope=\"col\">{{ 'OCX_DIAGRAM.TABLE.COUNT' | translate }}</th>\n </tr>\n </thead>\n <tbody>\n @for (item of data(); track item) {\n <tr>\n <td>\n <span>{{ item.backgroundColor || ' ' }}</span>\n </td>\n <td>{{ item.label }}</td>\n <td>{{ item.value }}</td>\n </tr>\n }\n <tr>\n <td colspan=\"2\">{{ sumKey() | translate }}</td>\n <td>{{ amountOfData() }}</td>\n </tr>\n </tbody>\n </table>\n </div>\n}\n</ng-template>", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.diagram-title,.diagram-description{text-align:center}\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: i5$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: i3$3.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "ariaLabel", "ariaLabelledBy", "data", "options"], outputs: ["onDataSelect"] }, { kind: "component", type: i4$5.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { 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: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] }); }
|
|
3777
3781
|
}
|
|
3778
3782
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DiagramComponent, decorators: [{
|
|
3779
3783
|
type: Component,
|
|
@@ -3991,7 +3995,7 @@ class FilterViewComponent {
|
|
|
3991
3995
|
});
|
|
3992
3996
|
}
|
|
3993
3997
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3994
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterViewComponent, isStandalone: false, selector: "ocx-filter-view", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, selectDisplayedChips: { classPropertyName: "selectDisplayedChips", publicName: "selectDisplayedChips", isSignal: true, isRequired: false, transformFunction: null }, chipStyleClass: { classPropertyName: "chipStyleClass", publicName: "chipStyleClass", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", columns: "columnsChange", filtered: "filtered", componentStateChanged: "componentStateChanged" }, viewQueries: [{ propertyName: "panel", first: true, predicate: Popover, descendants: true, isSignal: true }, { propertyName: "manageButton", first: true, predicate: ["manageButton"], descendants: true, isSignal: true }, { propertyName: "defaultTemplates", predicate: PrimeTemplate, descendants: true, isSignal: true }], ngImport: i0, template: "@if (columns(); as columns) { @if (filters(); as filters) {\n<div class=\"flex flex-wrap align-items-center gap-2\">\n @if (displayMode() === 'chips') {\n <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n @if (selectDisplayedChips()(filters, columns); as selectedFilters) {\n <p-button\n #chipFilterResetButton\n id=\"ocxFilterViewReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n @if (filters.length <= 0) { @if (filterViewNoSelection()) {\n <ng-container [ngTemplateOutlet]=\"filterViewNoSelection()\"> </ng-container>\n } @else {\n <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n } } @if ((chipTemplates$ | async) ?? {}; as templates) { @for (filter of selectedFilters; track filter) { @if\n (getColumnForFilter(filter, columns); as column) {\n <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass()\">\n @if (filterViewChipContent()) {\n <ng-container\n [ngTemplateOutlet]=\"filterViewChipContent()\"\n [ngTemplateOutletContext]=\"{\n filter: filter,\n column: column,\n filterValueTemplates: templates,\n truthyTemplate: truthyTemplate,\n filterValueTemplate: chipTemplate\n }\"\n >\n </ng-container>\n } @else {\n <span style=\"white-space: nowrap\" class=\"p-chip-text flex flex-nowrap\"\n >{{column?.nameKey ?? '' | translate }}:@if (filter.filterType === FilterType.EQUALS || !filter.filterType) {\n <ng-container\n [ngTemplateOutlet]=\"chipTemplate\"\n [ngTemplateOutletContext]=\"{\n templates: templates,\n filter: filter,\n column: column\n }\"\n ></ng-container>\n } @if (filter.filterType === FilterType.IS_NOT_EMPTY) {\n <ng-container\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: filter.value\n }\"\n ></ng-container>\n }\n </span>\n }\n </p-chip>\n } } @if (selectedFilters.length < filters.length) {\n <p-chip\n #showMoreChip\n id=\"ocxFilterViewShowMore\"\n tabindex=\"0\"\n role=\"button\"\n (click)=\"showPanel($event)\"\n class=\"cursor-pointer filter-view-focusable\"\n (keydown.enter)=\"showPanel($event)\"\n (keydown.space)=\"showPanel($event)\"\n >\n @if (filterViewShowMoreChip()) {\n <ng-container\n [ngTemplateOutlet]=\"filterViewShowMoreChip()\"\n [ngTemplateOutletContext]=\"{\n $implicit: filters.length - selectedFilters.length\n }\"\n >\n </ng-container>\n } @else {\n <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n }\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </p-chip>\n } } }\n </ng-container>\n } @else {\n <ng-container [ngTemplateOutlet]=\"noChipsContent\"></ng-container>\n }\n <ng-template #noChipsContent>\n <p-button\n tabindex=\"0\"\n #manageButton\n id=\"ocxFilterViewManage\"\n (onClick)=\"showPanel($event)\"\n [disabled]=\"filters.length === 0\"\n icon=\"pi pi-sliders-h\"\n label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n [ocxTooltip]=\"\n filters.length === 0\n ? ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DISABLED_DETAIL' | translate)\n : ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate)\n \"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [badge]=\"filters.length.toString()\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </ng-template>\n <ng-template #filterTablePanel>\n @if (tableTemplates$ | async; as templates) {\n <p-popover #op [style]=\"panelStyle()\" (onHide)=\"focusTrigger()\">\n <ng-template pTemplate=\"content\">\n <div pFocusTrap>\n <div class=\"flex justify-content-between align-items-center mb-2\">\n <span class=\"text-2xl font-medium\">{{'OCX_FILTER_VIEW.PANEL_TITLE' | translate}}</span>\n <div>\n <p-button\n pAutoFocus\n [autofocus]=\"true\"\n id=\"ocxFilterViewOverlayReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n </div>\n </div>\n <ocx-data-table\n id=\"ocxFilterViewDataTable\"\n [rows]=\"columnFilterDataRows()\"\n [columns]=\"columnFilterTableColumns()\"\n [emptyResultsMessage]=\"'OCX_FILTER_VIEW.NO_FILTERS' | translate\"\n [paginator]=\"false\"\n [tableStyle]=\"tableStyle()\"\n >\n <ng-template pTemplate=\"columnIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n [ngTemplateOutlet]=\"templates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\n >\n </ng-container>\n </ng-template>\n <ng-template pTemplate=\"valueIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n @if (getColumn(rowObject['valueColumnId'], columns); as valueColumn) { @if (!valueColumn.filterType ||\n valueColumn.filterType === FilterType.EQUALS) {\n <ng-container\n [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowForValueColumn(rowObject),\n column: valueColumn\n }\"\n >\n </ng-container>\n } @if (valueColumn.filterType === FilterType.IS_NOT_EMPTY) {\n <ng-container\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: resolveFieldData(rowObject, column.id)\n }\"\n >\n </ng-container>\n } }\n </ng-template>\n <ng-template pTemplate=\"actionsIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <div>\n <button\n pButton\n class=\"p-button-rounded p-button-danger p-button-text\"\n title=\"{{ 'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_TITLE' | translate }}\"\n [attr.aria-label]=\"'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_ARIA_LABEL' | translate\"\n icon=\"pi pi-trash\"\n (click)=\"onFilterDelete(rowObject)\"\n ></button>\n </div>\n </ng-template>\n </ocx-data-table>\n </div>\n </ng-template>\n </p-popover>\n }\n </ng-template>\n</div>\n} }\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n @if (templates[column.id]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromFiterData(filter),\n column: column\n }\"\n >\n </ng-container>\n }\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n @if (value) { {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} } @if (!value) { {{'OCX_FILTER_VIEW.FILTER_NO' |\n translate}} }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }}</ng-container>\n</ng-template>\n", styles: [".filter-view-focusable:focus{outline:1px solid var(--primary-color);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$4.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "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: i5$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i6.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "captionTemplate", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "columnHeaderTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "expandedRows", "expandable", "frozenExpandColumn", "parentTemplates"], outputs: ["rowsChange", "selectedRowsChange", "filtersChange", "sortDirectionChange", "sortColumnChange", "columnsChange", "sortStatesChange", "pageSizesChange", "pageSizeChange", "nameChange", "pageChange", "additionalActionsChange", "expandedRowsChange", "filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed", "parentTemplatesChange"] }, { kind: "directive", type: IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: ["ocxIfBreakpoint", "ocxIfBreakpointElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
|
|
3998
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterViewComponent, isStandalone: false, selector: "ocx-filter-view", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, selectDisplayedChips: { classPropertyName: "selectDisplayedChips", publicName: "selectDisplayedChips", isSignal: true, isRequired: false, transformFunction: null }, chipStyleClass: { classPropertyName: "chipStyleClass", publicName: "chipStyleClass", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", columns: "columnsChange", filtered: "filtered", componentStateChanged: "componentStateChanged" }, viewQueries: [{ propertyName: "panel", first: true, predicate: Popover, descendants: true, isSignal: true }, { propertyName: "manageButton", first: true, predicate: ["manageButton"], descendants: true, isSignal: true }, { propertyName: "defaultTemplates", predicate: PrimeTemplate, descendants: true, isSignal: true }], ngImport: i0, template: "@if (columns(); as columns) { @if (filters(); as filters) {\n<div class=\"flex flex-wrap align-items-center gap-2\">\n @if (displayMode() === 'chips') {\n <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n @if (selectDisplayedChips()(filters, columns); as selectedFilters) {\n <p-button\n #chipFilterResetButton\n id=\"ocxFilterViewReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n @if (filters.length <= 0) { @if (filterViewNoSelection()) {\n <ng-container [ngTemplateOutlet]=\"filterViewNoSelection()\"> </ng-container>\n } @else {\n <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n } } @if ((chipTemplates$ | async) ?? {}; as templates) { @for (filter of selectedFilters; track filter) { @if\n (getColumnForFilter(filter, columns); as column) {\n <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass()\">\n @if (filterViewChipContent()) {\n <ng-container\n [ngTemplateOutlet]=\"filterViewChipContent()\"\n [ngTemplateOutletContext]=\"{\n filter: filter,\n column: column,\n filterValueTemplates: templates,\n truthyTemplate: truthyTemplate,\n filterValueTemplate: chipTemplate\n }\"\n >\n </ng-container>\n } @else {\n <span style=\"white-space: nowrap\" class=\"p-chip-text flex flex-nowrap\"\n >{{column?.nameKey ?? '' | translate }}:@if (filter.filterType === FilterType.EQUALS || !filter.filterType) {\n <ng-container\n [ngTemplateOutlet]=\"chipTemplate\"\n [ngTemplateOutletContext]=\"{\n templates: templates,\n filter: filter,\n column: column\n }\"\n ></ng-container>\n } @if (filter.filterType === FilterType.IS_NOT_EMPTY) {\n <ng-container\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: filter.value\n }\"\n ></ng-container>\n }\n </span>\n }\n </p-chip>\n } } @if (selectedFilters.length < filters.length) {\n <p-chip\n #showMoreChip\n id=\"ocxFilterViewShowMore\"\n tabindex=\"0\"\n role=\"button\"\n (click)=\"showPanel($event)\"\n class=\"cursor-pointer filter-view-focusable\"\n (keydown.enter)=\"showPanel($event)\"\n (keydown.space)=\"showPanel($event)\"\n >\n @if (filterViewShowMoreChip()) {\n <ng-container\n [ngTemplateOutlet]=\"filterViewShowMoreChip()\"\n [ngTemplateOutletContext]=\"{\n $implicit: filters.length - selectedFilters.length\n }\"\n >\n </ng-container>\n } @else {\n <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n }\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </p-chip>\n } } }\n </ng-container>\n } @else {\n <ng-container [ngTemplateOutlet]=\"noChipsContent\"></ng-container>\n }\n <ng-template #noChipsContent>\n <p-button\n tabindex=\"0\"\n #manageButton\n id=\"ocxFilterViewManage\"\n (onClick)=\"showPanel($event)\"\n [disabled]=\"filters.length === 0\"\n icon=\"pi pi-sliders-h\"\n label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n [ocxTooltip]=\"\n filters.length === 0\n ? ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DISABLED_DETAIL' | translate)\n : ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate)\n \"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [badge]=\"filters.length.toString()\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </ng-template>\n <ng-template #filterTablePanel>\n @if (tableTemplates$ | async; as templates) {\n <p-popover #op [style]=\"panelStyle()\" (onHide)=\"focusTrigger()\">\n <ng-template pTemplate=\"content\">\n <div pFocusTrap>\n <div class=\"flex justify-content-between align-items-center mb-2\">\n <span class=\"text-2xl font-medium\">{{'OCX_FILTER_VIEW.PANEL_TITLE' | translate}}</span>\n <div>\n <p-button\n pAutoFocus\n [autofocus]=\"true\"\n id=\"ocxFilterViewOverlayReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n </div>\n </div>\n <ocx-data-table\n id=\"ocxFilterViewDataTable\"\n [rows]=\"columnFilterDataRows()\"\n [columns]=\"columnFilterTableColumns()\"\n [emptyResultsMessage]=\"'OCX_FILTER_VIEW.NO_FILTERS' | translate\"\n [paginator]=\"false\"\n [tableStyle]=\"tableStyle()\"\n >\n <ng-template pTemplate=\"columnIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n [ngTemplateOutlet]=\"templates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\n >\n </ng-container>\n </ng-template>\n <ng-template pTemplate=\"valueIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n @if (getColumn(rowObject['valueColumnId'], columns); as valueColumn) { @if (!valueColumn.filterType ||\n valueColumn.filterType === FilterType.EQUALS) {\n <ng-container\n [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowForValueColumn(rowObject),\n column: valueColumn\n }\"\n >\n </ng-container>\n } @if (valueColumn.filterType === FilterType.IS_NOT_EMPTY) {\n <ng-container\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: resolveFieldData(rowObject, column.id)\n }\"\n >\n </ng-container>\n } }\n </ng-template>\n <ng-template pTemplate=\"actionsIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <div>\n <button\n pButton\n class=\"p-button-rounded p-button-danger p-button-text\"\n title=\"{{ 'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_TITLE' | translate }}\"\n [attr.aria-label]=\"'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_ARIA_LABEL' | translate\"\n icon=\"pi pi-trash\"\n (click)=\"onFilterDelete(rowObject)\"\n ></button>\n </div>\n </ng-template>\n </ocx-data-table>\n </div>\n </ng-template>\n </p-popover>\n }\n </ng-template>\n</div>\n} }\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n @if (templates[column.id]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromFiterData(filter),\n column: column\n }\"\n >\n </ng-container>\n }\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n @if (value) { {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} } @if (!value) { {{'OCX_FILTER_VIEW.FILTER_NO' |\n translate}} }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }}</ng-container>\n</ng-template>\n", styles: [".filter-view-focusable:focus{outline:1px solid var(--primary-color);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$4.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "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: i5$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i6$1.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "captionTemplate", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "columnHeaderTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "expandedRows", "expandable", "frozenExpandColumn", "parentTemplates"], outputs: ["rowsChange", "selectedRowsChange", "filtersChange", "sortDirectionChange", "sortColumnChange", "columnsChange", "sortStatesChange", "pageSizesChange", "pageSizeChange", "nameChange", "pageChange", "additionalActionsChange", "expandedRowsChange", "filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed", "parentTemplatesChange"] }, { kind: "directive", type: IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: ["ocxIfBreakpoint", "ocxIfBreakpointElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
|
|
3995
3999
|
}
|
|
3996
4000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterViewComponent, decorators: [{
|
|
3997
4001
|
type: Component,
|
|
@@ -4665,7 +4669,7 @@ class InteractiveDataViewComponent {
|
|
|
4665
4669
|
this.pageSize.set(event);
|
|
4666
4670
|
}
|
|
4667
4671
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InteractiveDataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4668
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: InteractiveDataViewComponent, isStandalone: false, selector: "ocx-interactive-data-view", inputs: { searchConfigPermission: { classPropertyName: "searchConfigPermission", publicName: "searchConfigPermission", isSignal: true, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableSelectionEnabledField: { classPropertyName: "tableSelectionEnabledField", publicName: "tableSelectionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableAllowSelectAll: { classPropertyName: "tableAllowSelectAll", publicName: "tableAllowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, titleLineId: { classPropertyName: "titleLineId", publicName: "titleLineId", isSignal: true, isRequired: false, transformFunction: null }, subtitleLineIds: { classPropertyName: "subtitleLineIds", publicName: "subtitleLineIds", isSignal: true, isRequired: false, transformFunction: null }, supportedViewLayouts: { classPropertyName: "supportedViewLayouts", publicName: "supportedViewLayouts", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, fallbackImage: { classPropertyName: "fallbackImage", publicName: "fallbackImage", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, defaultGroupKey: { classPropertyName: "defaultGroupKey", publicName: "defaultGroupKey", isSignal: true, isRequired: false, transformFunction: null }, customGroupKey: { classPropertyName: "customGroupKey", publicName: "customGroupKey", isSignal: true, isRequired: false, transformFunction: null }, groupSelectionNoGroupSelectedKey: { classPropertyName: "groupSelectionNoGroupSelectedKey", publicName: "groupSelectionNoGroupSelectedKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: true, isRequired: false, transformFunction: null }, listGridPaginator: { classPropertyName: "listGridPaginator", publicName: "listGridPaginator", isSignal: true, isRequired: false, transformFunction: null }, tablePaginator: { classPropertyName: "tablePaginator", publicName: "tablePaginator", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, disableFilterView: { classPropertyName: "disableFilterView", publicName: "disableFilterView", isSignal: true, isRequired: false, transformFunction: null }, filterViewDisplayMode: { classPropertyName: "filterViewDisplayMode", publicName: "filterViewDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, filterViewChipStyleClass: { classPropertyName: "filterViewChipStyleClass", publicName: "filterViewChipStyleClass", isSignal: true, isRequired: false, transformFunction: null }, filterViewTableStyle: { classPropertyName: "filterViewTableStyle", publicName: "filterViewTableStyle", isSignal: true, isRequired: false, transformFunction: null }, filterViewPanelStyle: { classPropertyName: "filterViewPanelStyle", publicName: "filterViewPanelStyle", isSignal: true, isRequired: false, transformFunction: null }, selectDisplayedChips: { classPropertyName: "selectDisplayedChips", publicName: "selectDisplayedChips", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, displayedColumnKeys: { classPropertyName: "displayedColumnKeys", publicName: "displayedColumnKeys", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: true, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: true, isRequired: false, transformFunction: null }, headerStyleClass: { classPropertyName: "headerStyleClass", publicName: "headerStyleClass", isSignal: true, isRequired: false, transformFunction: null }, contentStyleClass: { classPropertyName: "contentStyleClass", publicName: "contentStyleClass", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", sortDirection: "sortDirectionChange", sortField: "sortFieldChange", pageSize: "pageSizeChange", layout: "layoutChange", listGridPaginator: "listGridPaginatorChange", tablePaginator: "tablePaginatorChange", page: "pageChange", displayedColumnKeys: "displayedColumnKeysChange", frozenActionColumn: "frozenActionColumnChange", actionColumnPosition: "actionColumnPositionChange", expandedRows: "expandedRowsChange", filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnKeysChange: "displayedColumnKeysChange", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed", componentStateChanged: "componentStateChanged", groupSelectionChangedSlotEmitter: "groupSelectionChangedSlotEmitter" }, providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], queries: [{ propertyName: "childTableCell", first: true, predicate: ["tableCell"], descendants: true, isSignal: true }, { propertyName: "childDateTableCell", first: true, predicate: ["dateTableCell"], descendants: true, isSignal: true }, { propertyName: "childRelativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], descendants: true, isSignal: true }, { propertyName: "childTranslationKeyTableCell", first: true, predicate: ["translationKeyTableCell"], descendants: true, isSignal: true }, { propertyName: "childGridItemSubtitleLines", first: true, predicate: ["gridItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "childListItemSubtitleLines", first: true, predicate: ["listItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "childStringTableCell", first: true, predicate: ["stringTableCell"], descendants: true, isSignal: true }, { propertyName: "childNumberTableCell", first: true, predicate: ["numberTableCell"], descendants: true, isSignal: true }, { propertyName: "childGridItem", first: true, predicate: ["gridItem"], descendants: true, isSignal: true }, { propertyName: "childListItem", first: true, predicate: ["listItem"], descendants: true, isSignal: true }, { propertyName: "childTopCenter", first: true, predicate: ["topCenter"], descendants: true, isSignal: true }, { propertyName: "childListValue", first: true, predicate: ["listValue"], descendants: true, isSignal: true }, { propertyName: "childTranslationKeyListValue", first: true, predicate: ["translationKeyListValue"], descendants: true, isSignal: true }, { propertyName: "childNumberListValue", first: true, predicate: ["numberListValue"], descendants: true, isSignal: true }, { propertyName: "childRelativeDateListValue", first: true, predicate: ["relativeDateListValue"], descendants: true, isSignal: true }, { propertyName: "childStringListValue", first: true, predicate: ["stringListValue"], descendants: true, isSignal: true }, { propertyName: "childDateListValue", first: true, predicate: ["dateListValue"], descendants: true, isSignal: true }, { propertyName: "childTableFilterCell", first: true, predicate: ["tableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childDateTableFilterCell", first: true, predicate: ["dateTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childRelativeDateTableFilterCell", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childTranslationKeyTableFilterCell", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childStringTableFilterCell", first: true, predicate: ["stringTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childNumberTableFilterCell", first: true, predicate: ["numberTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childColumnHeader", first: true, predicate: ["columnHeader"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "dataViewComponent", first: true, predicate: DataViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"p-3 border-bottom-1 surface-border\" [ngClass]=\"headerStyleClass()\" id=\"interactiveDataViewHeader\">\n <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n <ocx-data-layout-selection\n [supportedViewLayouts]=\"supportedViewLayouts()\"\n [layout]=\"layout()\"\n (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n ></ocx-data-layout-selection>\n @if (!disableFilterView()) {\n <ocx-filter-view\n [filters]=\"filters()\"\n [columns]=\"columns()\"\n [templates]=\"templates()\"\n [displayMode]=\"filterViewDisplayMode()\"\n [selectDisplayedChips]=\"selectDisplayedChips()\"\n [chipStyleClass]=\"filterViewChipStyleClass()\"\n [tableStyle]=\"filterViewTableStyle()\"\n (filtered)=\"filtering($event)\"\n (componentStateChanged)=\"filterViewComponentState$.next($event)\"\n ></ocx-filter-view>\n }\n </div>\n\n @if (_topCenter(); as topCenterTemplate) {\n <div>\n <ng-container [ngTemplateOutlet]=\"topCenterTemplate\"> </ng-container>\n </div>\n } @if (layout() !== 'table') {\n <div class=\"flex align-items-center gap-2\">\n <ocx-data-list-grid-sorting\n [sortDirection]=\"sortDirection()\"\n [sortField]=\"sortField()\"\n [columns]=\"displayedColumns()\"\n [sortStates]=\"sortStates()\"\n (sortChange)=\"onSortChange($event)\"\n (sortDirectionChange)=\"onSortDirectionChange($event)\"\n (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n ></ocx-data-list-grid-sorting>\n </div>\n }\n\n <div\n [ngStyle]=\"layout() !== 'table' ? {\n 'position': 'absolute'\n } : {}\"\n class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n >\n @if (isColumnGroupSelectionComponentDefined() ?? true) {\n <ocx-slot\n [ngStyle]=\"layout() !== 'table' ? {'display' : 'none'} : {}\"\n *ocxIfPermission=\"searchConfigPermission(); elseTemplate: defaultColumnGroupSelectionComponent\"\n name=\"{{columnGroupSlotName}}\"\n [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey(), defaultGroupKey: defaultGroupKey(), customGroupKey: customGroupKey(), columns: columns(), selectedGroupKey: selectedGroupKey(), layout: layout(), displayedColumnsIds: displayedColumnKeys() }\"\n [outputs]=\"{ groupSelectionChanged: slotGroupSelectionChangeListener }\"\n >\n <ng-template #skeleton>\n <div class=\"flex\">\n <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n </div>\n </ng-template>\n </ocx-slot>\n } @else {\n <ng-container [ngTemplateOutlet]=\"defaultColumnGroupSelectionComponent\"></ng-container>\n } @if (layout() === 'table') {\n <ocx-custom-group-column-selector\n [columns]=\"columns()\"\n [displayedColumns]=\"displayedColumns()\"\n [customGroupKey]=\"customGroupKey()\"\n (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n [frozenActionColumn]=\"frozenActionColumn()\"\n [actionColumnPosition]=\"actionColumnPosition()\"\n (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n ></ocx-custom-group-column-selector>\n }\n </div>\n </div>\n</div>\n<div class=\"p-3\" [ngClass]=\"contentStyleClass()\" id=\"interactiveDataViewContent\">\n <ocx-data-view\n [columns]=\"displayedColumns()\"\n [sortStates]=\"sortStates()\"\n [sortField]=\"sortField()\"\n [filters]=\"filters()\"\n [data]=\"data()\"\n [sortDirection]=\"sortDirection()\"\n [titleLineId]=\"titleLineId()\"\n [subtitleLineIds]=\"subtitleLineIds()\"\n [clientSideSorting]=\"clientSideSorting()\"\n [clientSideFiltering]=\"clientSideFiltering()\"\n [pageSizes]=\"pageSizes()\"\n [pageSize]=\"pageSize()\"\n [emptyResultsMessage]=\"emptyResultsMessage()\"\n [layout]=\"layout()\"\n [name]=\"name()\"\n [deletePermission]=\"deletePermission()\"\n [editPermission]=\"editPermission()\"\n [viewPermission]=\"viewPermission()\"\n [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n [editActionEnabledField]=\"editActionEnabledField()\"\n [editActionVisibleField]=\"editActionVisibleField()\"\n [viewActionEnabledField]=\"viewActionEnabledField()\"\n [viewActionVisibleField]=\"viewActionVisibleField()\"\n [additionalActions]=\"additionalActions()\"\n [listGridPaginator]=\"listGridPaginator()\"\n [tablePaginator]=\"tablePaginator()\"\n [page]=\"page()\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n [selectedRows]=\"selectedRows()\"\n [frozenActionColumn]=\"frozenActionColumn()\"\n [actionColumnPosition]=\"actionColumnPosition()\"\n [stringTableCellTemplate]=\"_stringTableCell()\"\n [numberTableCellTemplate]=\"_numberTableCell()\"\n [dateTableCellTemplate]=\"_dateTableCell()\"\n [relativeDateTableCellTemplate]=\"_relativeDateTableCell()\"\n [tableCellTemplate]=\"_tableCell()\"\n [translationKeyTableCellTemplate]=\"_translationKeyTableCell()\"\n [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines()\"\n [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines()\"\n [listItemTemplate]=\"_listItem()\"\n [listValueTemplate]=\"_listValue()\"\n [translationKeyListValueTemplate]=\"_translationKeyListValue()\"\n [numberListValueTemplate]=\"_numberListValue()\"\n [relativeDateListValueTemplate]=\"_relativeDateListValue()\"\n [stringListValueTemplate]=\"_stringListValue()\"\n [dateListValueTemplate]=\"_dateListValue()\"\n [gridItemTemplate]=\"_gridItem()\"\n [tableFilterCellTemplate]=\"_tableFilterCell()\"\n [dateTableFilterCellTemplate]=\"_dateTableFilterCell()\"\n [numberTableFilterCellTemplate]=\"_numberTableFilterCell()\"\n [stringTableFilterCellTemplate]=\"_stringTableFilterCell()\"\n [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell()\"\n [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell()\"\n [columnHeaderTemplate]=\"_columnHeader()\"\n (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n [currentPageShowingKey]=\"currentPageShowingKey()\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey()\"\n (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n [parentTemplates]=\"templates()\"\n [tableAllowSelectAll]=\"tableAllowSelectAll()\"\n [tableSelectionEnabledField]=\"tableSelectionEnabledField()\"\n [expandable]=\"expandable()\"\n [frozenExpandColumn]=\"frozenExpandColumn()\"\n [(expandedRows)]=\"expandedRows\"\n (rowExpanded)=\"rowExpanded.emit($event)\"\n (rowCollapsed)=\"rowCollapsed.emit($event)\"\n >\n </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n @if (layout() === 'table') {\n <ocx-column-group-selection\n [selectedGroupKey]=\"selectedGroupKey() ?? defaultGroupKey()\"\n [columns]=\"columns()\"\n [defaultGroupKey]=\"defaultGroupKey() !== customGroupKey() ? defaultGroupKey() : ''\"\n [customGroupKey]=\"customGroupKey()\"\n [placeholderKey]=\"groupSelectionNoGroupSelectedKey()\"\n (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n ></ocx-column-group-selection>\n }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i4$1.SlotComponent, selector: "ocx-slot", inputs: ["name", "inputs", "outputs"], outputs: ["inputsChange", "outputsChange"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["selectedGroupKeyChange", "groupSelectionChanged", "componentStateChanged"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "customGroupKey", "dialogTitle", "dialogTitleKey", "openButtonTitle", "openButtonTitleKey", "openButtonAriaLabel", "openButtonAriaLabelKey", "saveButtonLabel", "saveButtonLabelKey", "saveButtonAriaLabel", "saveButtonAriaLabelKey", "cancelButtonLabel", "cancelButtonLabelKey", "cancelButtonAriaLabel", "cancelButtonAriaLabelKey", "activeColumnsLabel", "activeColumnsLabelKey", "inactiveColumnsLabel", "inactiveColumnsLabelKey", "frozenActionColumn", "actionColumnPosition"], outputs: ["displayedColumnsChange", "columnSelectionChanged", "actionColumnConfigChanged", "componentStateChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["layoutChange", "dataViewLayoutChange", "componentStateChanged"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortDirectionChange", "sortFieldChange", "sortChange", "componentStateChanged", "columnsChange"] }, { kind: "component", type: DataViewComponent, selector: "ocx-data-view", inputs: ["deletePermission", "editPermission", "viewPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "tableSelectionEnabledField", "tableAllowSelectAll", "data", "name", "titleLineId", "subtitleLineIds", "layout", "columns", "emptyResultsMessage", "clientSideSorting", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "listGridPaginator", "tablePaginator", "paginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "expandable", "frozenExpandColumn", "expandedRows", "sortStates", "pageSizes", "pageSize", "stringTableCellTemplate", "numberTableCellTemplate", "dateTableCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "tableFilterCellTemplate", "dateTableFilterCellTemplate", "relativeDateTableFilterCellTemplate", "translationKeyTableFilterCellTemplate", "stringTableFilterCellTemplate", "numberTableFilterCellTemplate", "columnHeaderTemplate", "additionalActions", "parentTemplates"], outputs: ["filtersChange", "sortFieldChange", "sortDirectionChange", "listGridPaginatorChange", "tablePaginatorChange", "pageChange", "expandedRowsChange", "pageSizeChange", "filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "component", type: FilterViewComponent, selector: "ocx-filter-view", inputs: ["filters", "columns", "displayMode", "selectDisplayedChips", "chipStyleClass", "tableStyle", "panelStyle", "templates"], outputs: ["filtersChange", "columnsChange", "filtered", "componentStateChanged"] }] }); }
|
|
4672
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: InteractiveDataViewComponent, isStandalone: false, selector: "ocx-interactive-data-view", inputs: { searchConfigPermission: { classPropertyName: "searchConfigPermission", publicName: "searchConfigPermission", isSignal: true, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableSelectionEnabledField: { classPropertyName: "tableSelectionEnabledField", publicName: "tableSelectionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableAllowSelectAll: { classPropertyName: "tableAllowSelectAll", publicName: "tableAllowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, titleLineId: { classPropertyName: "titleLineId", publicName: "titleLineId", isSignal: true, isRequired: false, transformFunction: null }, subtitleLineIds: { classPropertyName: "subtitleLineIds", publicName: "subtitleLineIds", isSignal: true, isRequired: false, transformFunction: null }, supportedViewLayouts: { classPropertyName: "supportedViewLayouts", publicName: "supportedViewLayouts", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, fallbackImage: { classPropertyName: "fallbackImage", publicName: "fallbackImage", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, defaultGroupKey: { classPropertyName: "defaultGroupKey", publicName: "defaultGroupKey", isSignal: true, isRequired: false, transformFunction: null }, customGroupKey: { classPropertyName: "customGroupKey", publicName: "customGroupKey", isSignal: true, isRequired: false, transformFunction: null }, groupSelectionNoGroupSelectedKey: { classPropertyName: "groupSelectionNoGroupSelectedKey", publicName: "groupSelectionNoGroupSelectedKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: true, isRequired: false, transformFunction: null }, listGridPaginator: { classPropertyName: "listGridPaginator", publicName: "listGridPaginator", isSignal: true, isRequired: false, transformFunction: null }, tablePaginator: { classPropertyName: "tablePaginator", publicName: "tablePaginator", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, disableFilterView: { classPropertyName: "disableFilterView", publicName: "disableFilterView", isSignal: true, isRequired: false, transformFunction: null }, filterViewDisplayMode: { classPropertyName: "filterViewDisplayMode", publicName: "filterViewDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, filterViewChipStyleClass: { classPropertyName: "filterViewChipStyleClass", publicName: "filterViewChipStyleClass", isSignal: true, isRequired: false, transformFunction: null }, filterViewTableStyle: { classPropertyName: "filterViewTableStyle", publicName: "filterViewTableStyle", isSignal: true, isRequired: false, transformFunction: null }, filterViewPanelStyle: { classPropertyName: "filterViewPanelStyle", publicName: "filterViewPanelStyle", isSignal: true, isRequired: false, transformFunction: null }, selectDisplayedChips: { classPropertyName: "selectDisplayedChips", publicName: "selectDisplayedChips", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, displayedColumnKeys: { classPropertyName: "displayedColumnKeys", publicName: "displayedColumnKeys", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: true, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: true, isRequired: false, transformFunction: null }, headerStyleClass: { classPropertyName: "headerStyleClass", publicName: "headerStyleClass", isSignal: true, isRequired: false, transformFunction: null }, contentStyleClass: { classPropertyName: "contentStyleClass", publicName: "contentStyleClass", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", sortDirection: "sortDirectionChange", sortField: "sortFieldChange", pageSize: "pageSizeChange", layout: "layoutChange", listGridPaginator: "listGridPaginatorChange", tablePaginator: "tablePaginatorChange", page: "pageChange", displayedColumnKeys: "displayedColumnKeysChange", frozenActionColumn: "frozenActionColumnChange", actionColumnPosition: "actionColumnPositionChange", expandedRows: "expandedRowsChange", filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnKeysChange: "displayedColumnKeysChange", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed", componentStateChanged: "componentStateChanged", groupSelectionChangedSlotEmitter: "groupSelectionChangedSlotEmitter" }, providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], queries: [{ propertyName: "childTableCell", first: true, predicate: ["tableCell"], descendants: true, isSignal: true }, { propertyName: "childDateTableCell", first: true, predicate: ["dateTableCell"], descendants: true, isSignal: true }, { propertyName: "childRelativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], descendants: true, isSignal: true }, { propertyName: "childTranslationKeyTableCell", first: true, predicate: ["translationKeyTableCell"], descendants: true, isSignal: true }, { propertyName: "childGridItemSubtitleLines", first: true, predicate: ["gridItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "childListItemSubtitleLines", first: true, predicate: ["listItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "childStringTableCell", first: true, predicate: ["stringTableCell"], descendants: true, isSignal: true }, { propertyName: "childNumberTableCell", first: true, predicate: ["numberTableCell"], descendants: true, isSignal: true }, { propertyName: "childGridItem", first: true, predicate: ["gridItem"], descendants: true, isSignal: true }, { propertyName: "childListItem", first: true, predicate: ["listItem"], descendants: true, isSignal: true }, { propertyName: "childTopCenter", first: true, predicate: ["topCenter"], descendants: true, isSignal: true }, { propertyName: "childListValue", first: true, predicate: ["listValue"], descendants: true, isSignal: true }, { propertyName: "childTranslationKeyListValue", first: true, predicate: ["translationKeyListValue"], descendants: true, isSignal: true }, { propertyName: "childNumberListValue", first: true, predicate: ["numberListValue"], descendants: true, isSignal: true }, { propertyName: "childRelativeDateListValue", first: true, predicate: ["relativeDateListValue"], descendants: true, isSignal: true }, { propertyName: "childStringListValue", first: true, predicate: ["stringListValue"], descendants: true, isSignal: true }, { propertyName: "childDateListValue", first: true, predicate: ["dateListValue"], descendants: true, isSignal: true }, { propertyName: "childTableFilterCell", first: true, predicate: ["tableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childDateTableFilterCell", first: true, predicate: ["dateTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childRelativeDateTableFilterCell", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childTranslationKeyTableFilterCell", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childStringTableFilterCell", first: true, predicate: ["stringTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childNumberTableFilterCell", first: true, predicate: ["numberTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childColumnHeader", first: true, predicate: ["columnHeader"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "dataViewComponent", first: true, predicate: DataViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"p-3 border-bottom-1 surface-border\" [ngClass]=\"headerStyleClass()\" id=\"interactiveDataViewHeader\">\n <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n <ocx-data-layout-selection\n [supportedViewLayouts]=\"supportedViewLayouts()\"\n [layout]=\"layout()\"\n (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n ></ocx-data-layout-selection>\n @if (!disableFilterView()) {\n <ocx-filter-view\n [filters]=\"filters()\"\n [columns]=\"columns()\"\n [templates]=\"templates()\"\n [displayMode]=\"filterViewDisplayMode()\"\n [selectDisplayedChips]=\"selectDisplayedChips()\"\n [chipStyleClass]=\"filterViewChipStyleClass()\"\n [tableStyle]=\"filterViewTableStyle()\"\n (filtered)=\"filtering($event)\"\n (componentStateChanged)=\"filterViewComponentState$.next($event)\"\n ></ocx-filter-view>\n }\n </div>\n\n @if (_topCenter(); as topCenterTemplate) {\n <div>\n <ng-container [ngTemplateOutlet]=\"topCenterTemplate\"> </ng-container>\n </div>\n } @if (layout() !== 'table') {\n <div class=\"flex align-items-center gap-2\">\n <ocx-data-list-grid-sorting\n [sortDirection]=\"sortDirection()\"\n [sortField]=\"sortField()\"\n [columns]=\"displayedColumns()\"\n [sortStates]=\"sortStates()\"\n (sortChange)=\"onSortChange($event)\"\n (sortDirectionChange)=\"onSortDirectionChange($event)\"\n (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n ></ocx-data-list-grid-sorting>\n </div>\n }\n\n <div\n [ngStyle]=\"layout() !== 'table' ? {\n 'position': 'absolute'\n } : {}\"\n class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n >\n @if (isColumnGroupSelectionComponentDefined() ?? true) {\n <ocx-slot\n [ngStyle]=\"layout() !== 'table' ? {'display' : 'none'} : {}\"\n *ocxIfPermission=\"searchConfigPermission(); elseTemplate: defaultColumnGroupSelectionComponent\"\n name=\"{{columnGroupSlotName}}\"\n [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey(), defaultGroupKey: defaultGroupKey(), customGroupKey: customGroupKey(), columns: columns(), selectedGroupKey: selectedGroupKey(), layout: layout(), displayedColumnsIds: displayedColumnKeys() }\"\n [outputs]=\"{ groupSelectionChanged: slotGroupSelectionChangeListener }\"\n >\n <ng-template #skeleton>\n <div class=\"flex\">\n <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n </div>\n </ng-template>\n </ocx-slot>\n } @else {\n <ng-container [ngTemplateOutlet]=\"defaultColumnGroupSelectionComponent\"></ng-container>\n } @if (layout() === 'table') {\n <ocx-custom-group-column-selector\n [columns]=\"columns()\"\n [displayedColumns]=\"displayedColumns()\"\n [customGroupKey]=\"customGroupKey()\"\n (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n [frozenActionColumn]=\"frozenActionColumn()\"\n [actionColumnPosition]=\"actionColumnPosition()\"\n (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n ></ocx-custom-group-column-selector>\n }\n </div>\n </div>\n</div>\n<div class=\"p-3\" [ngClass]=\"contentStyleClass()\" id=\"interactiveDataViewContent\">\n <ocx-data-view\n [columns]=\"displayedColumns()\"\n [sortStates]=\"sortStates()\"\n [sortField]=\"sortField()\"\n [filters]=\"filters()\"\n [data]=\"data()\"\n [sortDirection]=\"sortDirection()\"\n [titleLineId]=\"titleLineId()\"\n [subtitleLineIds]=\"subtitleLineIds()\"\n [clientSideSorting]=\"clientSideSorting()\"\n [clientSideFiltering]=\"clientSideFiltering()\"\n [pageSizes]=\"pageSizes()\"\n [pageSize]=\"pageSize()\"\n [emptyResultsMessage]=\"emptyResultsMessage()\"\n [layout]=\"layout()\"\n [name]=\"name()\"\n [deletePermission]=\"deletePermission()\"\n [editPermission]=\"editPermission()\"\n [viewPermission]=\"viewPermission()\"\n [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n [editActionEnabledField]=\"editActionEnabledField()\"\n [editActionVisibleField]=\"editActionVisibleField()\"\n [viewActionEnabledField]=\"viewActionEnabledField()\"\n [viewActionVisibleField]=\"viewActionVisibleField()\"\n [additionalActions]=\"additionalActions()\"\n [listGridPaginator]=\"listGridPaginator()\"\n [tablePaginator]=\"tablePaginator()\"\n [page]=\"page()\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n [selectedRows]=\"selectedRows()\"\n [frozenActionColumn]=\"frozenActionColumn()\"\n [actionColumnPosition]=\"actionColumnPosition()\"\n [stringTableCellTemplate]=\"_stringTableCell()\"\n [numberTableCellTemplate]=\"_numberTableCell()\"\n [dateTableCellTemplate]=\"_dateTableCell()\"\n [relativeDateTableCellTemplate]=\"_relativeDateTableCell()\"\n [tableCellTemplate]=\"_tableCell()\"\n [translationKeyTableCellTemplate]=\"_translationKeyTableCell()\"\n [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines()\"\n [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines()\"\n [listItemTemplate]=\"_listItem()\"\n [listValueTemplate]=\"_listValue()\"\n [translationKeyListValueTemplate]=\"_translationKeyListValue()\"\n [numberListValueTemplate]=\"_numberListValue()\"\n [relativeDateListValueTemplate]=\"_relativeDateListValue()\"\n [stringListValueTemplate]=\"_stringListValue()\"\n [dateListValueTemplate]=\"_dateListValue()\"\n [gridItemTemplate]=\"_gridItem()\"\n [tableFilterCellTemplate]=\"_tableFilterCell()\"\n [dateTableFilterCellTemplate]=\"_dateTableFilterCell()\"\n [numberTableFilterCellTemplate]=\"_numberTableFilterCell()\"\n [stringTableFilterCellTemplate]=\"_stringTableFilterCell()\"\n [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell()\"\n [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell()\"\n [columnHeaderTemplate]=\"_columnHeader()\"\n (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n [currentPageShowingKey]=\"currentPageShowingKey()\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey()\"\n (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n [parentTemplates]=\"templates()\"\n [tableAllowSelectAll]=\"tableAllowSelectAll()\"\n [tableSelectionEnabledField]=\"tableSelectionEnabledField()\"\n [expandable]=\"expandable()\"\n [frozenExpandColumn]=\"frozenExpandColumn()\"\n [(expandedRows)]=\"expandedRows\"\n (rowExpanded)=\"rowExpanded.emit($event)\"\n (rowCollapsed)=\"rowCollapsed.emit($event)\"\n >\n </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n @if (layout() === 'table') {\n <ocx-column-group-selection\n [selectedGroupKey]=\"selectedGroupKey() ?? defaultGroupKey()\"\n [columns]=\"columns()\"\n [defaultGroupKey]=\"defaultGroupKey() !== customGroupKey() ? defaultGroupKey() : ''\"\n [customGroupKey]=\"customGroupKey()\"\n [placeholderKey]=\"groupSelectionNoGroupSelectedKey()\"\n (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n ></ocx-column-group-selection>\n }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i4$2.SlotComponent, selector: "ocx-slot", inputs: ["name", "inputs", "outputs"], outputs: ["inputsChange", "outputsChange"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["selectedGroupKeyChange", "groupSelectionChanged", "componentStateChanged"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "customGroupKey", "dialogTitle", "dialogTitleKey", "openButtonTitle", "openButtonTitleKey", "openButtonAriaLabel", "openButtonAriaLabelKey", "saveButtonLabel", "saveButtonLabelKey", "saveButtonAriaLabel", "saveButtonAriaLabelKey", "cancelButtonLabel", "cancelButtonLabelKey", "cancelButtonAriaLabel", "cancelButtonAriaLabelKey", "activeColumnsLabel", "activeColumnsLabelKey", "inactiveColumnsLabel", "inactiveColumnsLabelKey", "frozenActionColumn", "actionColumnPosition"], outputs: ["displayedColumnsChange", "columnSelectionChanged", "actionColumnConfigChanged", "componentStateChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["layoutChange", "dataViewLayoutChange", "componentStateChanged"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortDirectionChange", "sortFieldChange", "sortChange", "componentStateChanged", "columnsChange"] }, { kind: "component", type: DataViewComponent, selector: "ocx-data-view", inputs: ["deletePermission", "editPermission", "viewPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "tableSelectionEnabledField", "tableAllowSelectAll", "data", "name", "titleLineId", "subtitleLineIds", "layout", "columns", "emptyResultsMessage", "clientSideSorting", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "listGridPaginator", "tablePaginator", "paginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "expandable", "frozenExpandColumn", "expandedRows", "sortStates", "pageSizes", "pageSize", "stringTableCellTemplate", "numberTableCellTemplate", "dateTableCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "tableFilterCellTemplate", "dateTableFilterCellTemplate", "relativeDateTableFilterCellTemplate", "translationKeyTableFilterCellTemplate", "stringTableFilterCellTemplate", "numberTableFilterCellTemplate", "columnHeaderTemplate", "additionalActions", "parentTemplates"], outputs: ["filtersChange", "sortFieldChange", "sortDirectionChange", "listGridPaginatorChange", "tablePaginatorChange", "pageChange", "expandedRowsChange", "pageSizeChange", "filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "component", type: FilterViewComponent, selector: "ocx-filter-view", inputs: ["filters", "columns", "displayMode", "selectDisplayedChips", "chipStyleClass", "tableStyle", "panelStyle", "templates"], outputs: ["filtersChange", "columnsChange", "filtered", "componentStateChanged"] }] }); }
|
|
4669
4673
|
}
|
|
4670
4674
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InteractiveDataViewComponent, decorators: [{
|
|
4671
4675
|
type: Component,
|
|
@@ -4874,7 +4878,7 @@ class ConsentComponent {
|
|
|
4874
4878
|
}
|
|
4875
4879
|
}
|
|
4876
4880
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ConsentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4877
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ConsentComponent, isStandalone: false, selector: "ocx-consent", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: true, transformFunction: null }, purpose: { classPropertyName: "purpose", publicName: "purpose", isSignal: true, isRequired: false, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, messageKey: { classPropertyName: "messageKey", publicName: "messageKey", isSignal: true, isRequired: false, transformFunction: null }, agreeKey: { classPropertyName: "agreeKey", publicName: "agreeKey", isSignal: true, isRequired: false, transformFunction: null }, withdrawKey: { classPropertyName: "withdrawKey", publicName: "withdrawKey", isSignal: true, isRequired: false, transformFunction: null }, showWithdraw: { classPropertyName: "showWithdraw", publicName: "showWithdraw", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { consentChanged: "consentChanged" }, ngImport: i0, template: "@if (hasConsent()) {\n<ng-content />\n\n@if (showWithdraw()) {\n<div class=\"w-full flex justify-content-center mt-1\">\n <a\n (click)=\"resetConsent()\"\n class=\"cursor-pointer text-primary underline\"\n [attr.aria-label]=\"withdrawKey() | translate\"\n >\n {{ withdrawKey() | translate }}\n </a>\n</div>\n} } @else {\n<section\n class=\"flex w-full h-full align-items-center justify-content-center p-3 ocx-consent\"\n [attr.aria-labelledby]=\"titleId\"\n [attr.aria-describedby]=\"messageId\"\n>\n <div class=\"flex flex-column gap-4 align-items-center justify-content-center text-center ocx-consent__content\">\n <p class=\"m-0 text-xl font-semibold\" [id]=\"titleId\">{{ titleKey() | translate }}</p>\n <p class=\"m-0\" [id]=\"messageId\" aria-live=\"polite\">{{ messageKey() | translate : { url: normalizedUrl() } }}</p>\n\n <ng-content select=\"[ocx-consent-info]\" />\n\n <button pButton pRipple type=\"button\" (click)=\"giveConsent()\" [attr.aria-label]=\"agreeKey() | translate\">\n {{ agreeKey() | translate }}\n </button>\n </div>\n</section>\n}\n", styles: [".ocx-consent__content{max-width:48rem}\n"], dependencies: [{ kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: i2$4.Ripple, selector: "[pRipple]" }, { kind: "pipe", type:
|
|
4881
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ConsentComponent, isStandalone: false, selector: "ocx-consent", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: true, transformFunction: null }, purpose: { classPropertyName: "purpose", publicName: "purpose", isSignal: true, isRequired: false, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, messageKey: { classPropertyName: "messageKey", publicName: "messageKey", isSignal: true, isRequired: false, transformFunction: null }, agreeKey: { classPropertyName: "agreeKey", publicName: "agreeKey", isSignal: true, isRequired: false, transformFunction: null }, withdrawKey: { classPropertyName: "withdrawKey", publicName: "withdrawKey", isSignal: true, isRequired: false, transformFunction: null }, showWithdraw: { classPropertyName: "showWithdraw", publicName: "showWithdraw", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { consentChanged: "consentChanged" }, ngImport: i0, template: "@if (hasConsent()) {\n<ng-content />\n\n@if (showWithdraw()) {\n<div class=\"w-full flex justify-content-center mt-1\">\n <a\n (click)=\"resetConsent()\"\n class=\"cursor-pointer text-primary underline\"\n [attr.aria-label]=\"withdrawKey() | translate\"\n >\n {{ withdrawKey() | translate }}\n </a>\n</div>\n} } @else {\n<section\n class=\"flex w-full h-full align-items-center justify-content-center p-3 ocx-consent\"\n [attr.aria-labelledby]=\"titleId\"\n [attr.aria-describedby]=\"messageId\"\n>\n <div class=\"flex flex-column gap-4 align-items-center justify-content-center text-center ocx-consent__content\">\n <p class=\"m-0 text-xl font-semibold\" [id]=\"titleId\">{{ titleKey() | translate }}</p>\n <p class=\"m-0\" [id]=\"messageId\" aria-live=\"polite\">{{ messageKey() | translate : { url: normalizedUrl() } }}</p>\n\n <ng-content select=\"[ocx-consent-info]\" />\n\n <button pButton pRipple type=\"button\" (click)=\"giveConsent()\" [attr.aria-label]=\"agreeKey() | translate\">\n {{ agreeKey() | translate }}\n </button>\n </div>\n</section>\n}\n", styles: [".ocx-consent__content{max-width:48rem}\n"], dependencies: [{ kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: i2$4.Ripple, selector: "[pRipple]" }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4878
4882
|
}
|
|
4879
4883
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ConsentComponent, decorators: [{
|
|
4880
4884
|
type: Component,
|
|
@@ -4888,7 +4892,7 @@ class DialogMessageContentComponent {
|
|
|
4888
4892
|
this.icon = '';
|
|
4889
4893
|
}
|
|
4890
4894
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DialogMessageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4891
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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:
|
|
4895
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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: i4$1.TranslatePipe, name: "translate" }] }); }
|
|
4892
4896
|
}
|
|
4893
4897
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DialogMessageContentComponent, decorators: [{
|
|
4894
4898
|
type: Component,
|
|
@@ -5173,7 +5177,7 @@ class DialogFooterComponent {
|
|
|
5173
5177
|
return [leftButtons, rightButtons];
|
|
5174
5178
|
}
|
|
5175
5179
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5176
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DialogFooterComponent, isStandalone: false, selector: "ocx-dialog-footer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClickedEmitter: "buttonClickedEmitter" }, viewQueries: [{ propertyName: "primaryButton", first: true, predicate: ["primaryButton"], descendants: true, isSignal: true }, { propertyName: "secondaryButton", first: true, predicate: ["secondaryButton"], descendants: true, isSignal: true }, { propertyName: "customButtons", predicate: ["customButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"w-full flex-row justify-content-end flex flex-wrap gap-2\">\n @for (button of leftCustomButtons(); track button; let i = $index) {\n <div [ngStyle]=\"{'margin-right': (i === leftCustomButtons().length - 1) ? 'auto' : 0}\">\n <ng-container *ngTemplateOutlet=\"customButtonTemplate; context: {button: button}\"> </ng-container>\n </div>\n } @for (button of rightCustomButtons(); track button) {\n <div>\n <ng-container *ngTemplateOutlet=\"customButtonTemplate; context: {button: button}\"> </ng-container>\n </div>\n }\n <div>\n @if (dialogData().config.secondaryButtonIncluded) {\n <button\n #secondaryButton\n id=\"{{dialogData().config.secondaryButtonDetails?.id ?? 'buttonDialogSecondaryButton'}}\"\n pButton\n [icon]=\"dialogData().config.secondaryButtonDetails!.icon ?? ''\"\n (click)=\"secondaryButtonAction()\"\n [label]=\"dialogData().config.secondaryButtonDetails!.key | translate:dialogData().config.secondaryButtonDetails?.parameters\"\n [disabled]=\"secondaryButtonDisabled$ | async\"\n [ocxTooltip]=\"dialogData().config.secondaryButtonDetails!.tooltipKey ? (dialogData().config.secondaryButtonDetails!.tooltipKey | translate) : null\"\n [tooltipPosition]=\"dialogData().config.secondaryButtonDetails?.tooltipPosition ?? ''\"\n [attr.aria-label]=\"dialogData().config.secondaryButtonDetails!.key | translate:dialogData().config.secondaryButtonDetails?.parameters\"\n ></button>\n }\n </div>\n <div>\n <button\n #primaryButton\n id=\"{{dialogData().config.primaryButtonDetails?.id ?? 'buttonDialogPrimaryButton'}}\"\n pButton\n autofocus\n [icon]=\"dialogData().config.primaryButtonDetails!.icon ?? ''\"\n (click)=\"primaryButtonAction()\"\n [label]=\"dialogData().config.primaryButtonDetails!.key | translate:dialogData().config.primaryButtonDetails?.parameters\"\n [disabled]=\"primaryButtonDisabled$ | async\"\n [ocxTooltip]=\"dialogData().config.primaryButtonDetails!.tooltipKey ? (dialogData().config.primaryButtonDetails!.tooltipKey | translate) : null\"\n [tooltipPosition]=\"dialogData().config.primaryButtonDetails?.tooltipPosition ?? ''\"\n [attr.aria-label]=\"dialogData().config.primaryButtonDetails!.key | translate:dialogData().config.primaryButtonDetails?.parameters\"\n ></button>\n </div>\n</div>\n\n<ng-template #customButtonTemplate let-button=\"button\">\n <button\n #customButton\n id=\"{{button.id}}\"\n pButton\n [icon]=\"button.icon !== undefined ? button.icon : ''\"\n (click)=\"customButtonAction(button)\"\n [label]=\"button.key | translate:button.parameters\"\n [disabled]=\"resolveCustomButtonDisabled((customButtonsDisabled$ | async) ?? {}, button.id)\"\n [ocxTooltip]=\"button.tooltipKey ? (button.tooltipKey | translate) : null\"\n [tooltipPosition]=\"button.tooltipPosition ?? ''\"\n [attr.aria-label]=\"button.key | translate:button.parameters\"\n ></button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type:
|
|
5180
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DialogFooterComponent, isStandalone: false, selector: "ocx-dialog-footer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClickedEmitter: "buttonClickedEmitter" }, viewQueries: [{ propertyName: "primaryButton", first: true, predicate: ["primaryButton"], descendants: true, isSignal: true }, { propertyName: "secondaryButton", first: true, predicate: ["secondaryButton"], descendants: true, isSignal: true }, { propertyName: "customButtons", predicate: ["customButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"w-full flex-row justify-content-end flex flex-wrap gap-2\">\n @for (button of leftCustomButtons(); track button; let i = $index) {\n <div [ngStyle]=\"{'margin-right': (i === leftCustomButtons().length - 1) ? 'auto' : 0}\">\n <ng-container *ngTemplateOutlet=\"customButtonTemplate; context: {button: button}\"> </ng-container>\n </div>\n } @for (button of rightCustomButtons(); track button) {\n <div>\n <ng-container *ngTemplateOutlet=\"customButtonTemplate; context: {button: button}\"> </ng-container>\n </div>\n }\n <div>\n @if (dialogData().config.secondaryButtonIncluded) {\n <button\n #secondaryButton\n id=\"{{dialogData().config.secondaryButtonDetails?.id ?? 'buttonDialogSecondaryButton'}}\"\n pButton\n [icon]=\"dialogData().config.secondaryButtonDetails!.icon ?? ''\"\n (click)=\"secondaryButtonAction()\"\n [label]=\"dialogData().config.secondaryButtonDetails!.key | translate:dialogData().config.secondaryButtonDetails?.parameters\"\n [disabled]=\"secondaryButtonDisabled$ | async\"\n [ocxTooltip]=\"dialogData().config.secondaryButtonDetails!.tooltipKey ? (dialogData().config.secondaryButtonDetails!.tooltipKey | translate) : null\"\n [tooltipPosition]=\"dialogData().config.secondaryButtonDetails?.tooltipPosition ?? ''\"\n [attr.aria-label]=\"dialogData().config.secondaryButtonDetails!.key | translate:dialogData().config.secondaryButtonDetails?.parameters\"\n ></button>\n }\n </div>\n <div>\n <button\n #primaryButton\n id=\"{{dialogData().config.primaryButtonDetails?.id ?? 'buttonDialogPrimaryButton'}}\"\n pButton\n autofocus\n [icon]=\"dialogData().config.primaryButtonDetails!.icon ?? ''\"\n (click)=\"primaryButtonAction()\"\n [label]=\"dialogData().config.primaryButtonDetails!.key | translate:dialogData().config.primaryButtonDetails?.parameters\"\n [disabled]=\"primaryButtonDisabled$ | async\"\n [ocxTooltip]=\"dialogData().config.primaryButtonDetails!.tooltipKey ? (dialogData().config.primaryButtonDetails!.tooltipKey | translate) : null\"\n [tooltipPosition]=\"dialogData().config.primaryButtonDetails?.tooltipPosition ?? ''\"\n [attr.aria-label]=\"dialogData().config.primaryButtonDetails!.key | translate:dialogData().config.primaryButtonDetails?.parameters\"\n ></button>\n </div>\n</div>\n\n<ng-template #customButtonTemplate let-button=\"button\">\n <button\n #customButton\n id=\"{{button.id}}\"\n pButton\n [icon]=\"button.icon !== undefined ? button.icon : ''\"\n (click)=\"customButtonAction(button)\"\n [label]=\"button.key | translate:button.parameters\"\n [disabled]=\"resolveCustomButtonDisabled((customButtonsDisabled$ | async) ?? {}, button.id)\"\n [ocxTooltip]=\"button.tooltipKey ? (button.tooltipKey | translate) : null\"\n [tooltipPosition]=\"button.tooltipPosition ?? ''\"\n [attr.aria-label]=\"button.key | translate:button.parameters\"\n ></button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] }); }
|
|
5177
5181
|
}
|
|
5178
5182
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DialogFooterComponent, decorators: [{
|
|
5179
5183
|
type: Component,
|
|
@@ -5263,11 +5267,10 @@ class PortalDialogService {
|
|
|
5263
5267
|
this._eventsTopic$?.destroy();
|
|
5264
5268
|
}
|
|
5265
5269
|
openDialog(title, componentOrMessage, primaryButtonTranslationKeyOrDetails, secondaryButtonTranslationKeyOrDetails, extrasOrShowXButton = {}) {
|
|
5266
|
-
const
|
|
5270
|
+
const isObject = typeof extrasOrShowXButton === 'object';
|
|
5271
|
+
const dialogOptions = isObject
|
|
5267
5272
|
? extrasOrShowXButton
|
|
5268
|
-
: {
|
|
5269
|
-
showXButton: extrasOrShowXButton,
|
|
5270
|
-
};
|
|
5273
|
+
: { showXButton: extrasOrShowXButton || false };
|
|
5271
5274
|
const translateParams = this.prepareTitleForTranslation(title);
|
|
5272
5275
|
const componentToRender = this.getComponentToRender(componentOrMessage);
|
|
5273
5276
|
const dynamicDialogDataConfig = {
|
|
@@ -5294,7 +5297,7 @@ class PortalDialogService {
|
|
|
5294
5297
|
buttonClicked$: new Subject(),
|
|
5295
5298
|
},
|
|
5296
5299
|
},
|
|
5297
|
-
closable:
|
|
5300
|
+
closable: this.getShowXStatus(secondaryButtonTranslationKeyOrDetails !== undefined, dialogOptions),
|
|
5298
5301
|
modal: true,
|
|
5299
5302
|
...dialogOptions,
|
|
5300
5303
|
focusOnShow: false,
|
|
@@ -5315,9 +5318,24 @@ class PortalDialogService {
|
|
|
5315
5318
|
else {
|
|
5316
5319
|
this.logger.warn('Dialog component instance could not be found after creation. The displayed dialog may not function as expected.');
|
|
5317
5320
|
}
|
|
5318
|
-
return dialogRef.onClose
|
|
5321
|
+
return dialogRef.onClose.pipe(tap(() => {
|
|
5322
|
+
if (isObject) {
|
|
5323
|
+
this.setFocusOnInitiator(extrasOrShowXButton);
|
|
5324
|
+
}
|
|
5325
|
+
}));
|
|
5319
5326
|
}));
|
|
5320
5327
|
}
|
|
5328
|
+
setFocusOnInitiator(dialogOptions) {
|
|
5329
|
+
const hasOnCloseFocus = Object.hasOwn(dialogOptions, 'onCloseFocus') && dialogOptions.onCloseFocus !== 'initiator';
|
|
5330
|
+
if (hasOnCloseFocus)
|
|
5331
|
+
return;
|
|
5332
|
+
const initiator = dialogOptions.initiatorRef;
|
|
5333
|
+
if (!initiator || typeof document === 'undefined' || !document.contains(initiator) || dialogOptions.onCloseFocus !== 'initiator')
|
|
5334
|
+
return;
|
|
5335
|
+
else {
|
|
5336
|
+
initiator.focus();
|
|
5337
|
+
}
|
|
5338
|
+
}
|
|
5321
5339
|
cleanupAndCloseDialog() {
|
|
5322
5340
|
if (this.dialogService.dialogComponentRefMap.size > 0) {
|
|
5323
5341
|
this.dialogService.dialogComponentRefMap.forEach((_, dialogRef) => {
|
|
@@ -5422,6 +5440,16 @@ class PortalDialogService {
|
|
|
5422
5440
|
isType(obj) {
|
|
5423
5441
|
return obj instanceof Type;
|
|
5424
5442
|
}
|
|
5443
|
+
getShowXStatus(isSecondaryButtonPresent, configuration) {
|
|
5444
|
+
let showXButton;
|
|
5445
|
+
if (Object.hasOwn(configuration, 'closable')) {
|
|
5446
|
+
showXButton = configuration.closable;
|
|
5447
|
+
}
|
|
5448
|
+
else {
|
|
5449
|
+
showXButton = configuration.showXButton && isSecondaryButtonPresent;
|
|
5450
|
+
}
|
|
5451
|
+
return Boolean(showXButton);
|
|
5452
|
+
}
|
|
5425
5453
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PortalDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5426
5454
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PortalDialogService, providedIn: 'any' }); }
|
|
5427
5455
|
}
|
|
@@ -5826,7 +5854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
5826
5854
|
}] });
|
|
5827
5855
|
|
|
5828
5856
|
const LIB_NAME = '@onecx/angular-accelerator';
|
|
5829
|
-
const LIB_VERSION = '8.
|
|
5857
|
+
const LIB_VERSION = '8.8.0';
|
|
5830
5858
|
|
|
5831
5859
|
class AngularAcceleratorMissingTranslationHandler extends MultiLanguageMissingTranslationHandler {
|
|
5832
5860
|
}
|