@onecx/angular-accelerator 6.8.1 → 6.10.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.
|
@@ -123,10 +123,10 @@ class OcxContentContainerDirective {
|
|
|
123
123
|
removeResponsiveLayoutClasses();
|
|
124
124
|
addSharedClasses();
|
|
125
125
|
}
|
|
126
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
127
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
126
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OcxContentContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
127
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: OcxContentContainerDirective, isStandalone: false, selector: "[ocxContentContainer]", inputs: { layout: "layout", breakpoint: "breakpoint" }, usesOnChanges: true, ngImport: i0 }); }
|
|
128
128
|
}
|
|
129
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
129
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OcxContentContainerDirective, decorators: [{
|
|
130
130
|
type: Directive,
|
|
131
131
|
args: [{ selector: '[ocxContentContainer]', standalone: false }]
|
|
132
132
|
}], propDecorators: { layout: [{
|
|
@@ -198,10 +198,10 @@ class OcxContentDirective {
|
|
|
198
198
|
}
|
|
199
199
|
}
|
|
200
200
|
}
|
|
201
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
202
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
201
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OcxContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
202
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: OcxContentDirective, isStandalone: false, selector: "[ocxContent]", inputs: { ocxContent: "ocxContent" }, usesOnChanges: true, ngImport: i0 }); }
|
|
203
203
|
}
|
|
204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OcxContentDirective, decorators: [{
|
|
205
205
|
type: Directive,
|
|
206
206
|
args: [{ selector: '[ocxContent]', standalone: false }]
|
|
207
207
|
}], propDecorators: { ocxContent: [{
|
|
@@ -309,10 +309,10 @@ class IfPermissionDirective {
|
|
|
309
309
|
getElement() {
|
|
310
310
|
return this.directiveContentRef?.rootNodes[0];
|
|
311
311
|
}
|
|
312
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
313
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
312
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IfPermissionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
313
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: IfPermissionDirective, isStandalone: false, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: { permission: ["ocxIfPermission", "permission"], notPermission: ["ocxIfNotPermission", "notPermission"], ocxIfPermissionOnMissingPermission: "ocxIfPermissionOnMissingPermission", ocxIfNotPermissionOnMissingPermission: "ocxIfNotPermissionOnMissingPermission", onMissingPermission: "onMissingPermission", ocxIfPermissionPermissions: "ocxIfPermissionPermissions", ocxIfNotPermissionPermissions: "ocxIfNotPermissionPermissions", ocxIfPermissionElseTemplate: "ocxIfPermissionElseTemplate", ocxIfNotPermissionElseTemplate: "ocxIfNotPermissionElseTemplate" }, ngImport: i0 }); }
|
|
314
314
|
}
|
|
315
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
315
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IfPermissionDirective, decorators: [{
|
|
316
316
|
type: Directive,
|
|
317
317
|
args: [{ selector: '[ocxIfPermission], [ocxIfNotPermission]', standalone: false }]
|
|
318
318
|
}], ctorParameters: () => [], propDecorators: { permission: [{
|
|
@@ -364,10 +364,10 @@ class IfBreakpointDirective {
|
|
|
364
364
|
}
|
|
365
365
|
this.state = newState;
|
|
366
366
|
}
|
|
367
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
368
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
367
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IfBreakpointDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
368
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: IfBreakpointDirective, isStandalone: false, selector: "[ocxIfBreakpoint]", inputs: { breakpoint: ["ocxIfBreakpoint", "breakpoint"], ocxIfBreakpointElseTemplate: "ocxIfBreakpointElseTemplate" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0 }); }
|
|
369
369
|
}
|
|
370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
370
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IfBreakpointDirective, decorators: [{
|
|
371
371
|
type: Directive,
|
|
372
372
|
args: [{ selector: '[ocxIfBreakpoint]', standalone: false }]
|
|
373
373
|
}], propDecorators: { breakpoint: [{
|
|
@@ -429,10 +429,10 @@ class SrcDirective {
|
|
|
429
429
|
this.error = new EventEmitter();
|
|
430
430
|
this.el.nativeElement.style.visibility = 'hidden';
|
|
431
431
|
}
|
|
432
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
433
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
432
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SrcDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
433
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: SrcDirective, isStandalone: false, selector: "[ocxSrc]", inputs: { ocxSrc: "ocxSrc" }, outputs: { error: "error" }, ngImport: i0 }); }
|
|
434
434
|
}
|
|
435
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
435
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SrcDirective, decorators: [{
|
|
436
436
|
type: Directive,
|
|
437
437
|
args: [{ selector: '[ocxSrc]', standalone: false }]
|
|
438
438
|
}], ctorParameters: () => [], propDecorators: { error: [{
|
|
@@ -544,14 +544,14 @@ let BreadcrumbService = class BreadcrumbService {
|
|
|
544
544
|
});
|
|
545
545
|
}
|
|
546
546
|
}
|
|
547
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
548
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
547
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
548
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BreadcrumbService, providedIn: 'any' }); }
|
|
549
549
|
};
|
|
550
550
|
BreadcrumbService = __decorate([
|
|
551
551
|
UntilDestroy(),
|
|
552
552
|
__metadata("design:paramtypes", [])
|
|
553
553
|
], BreadcrumbService);
|
|
554
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
554
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BreadcrumbService, decorators: [{
|
|
555
555
|
type: Injectable,
|
|
556
556
|
args: [{ providedIn: 'any' }]
|
|
557
557
|
}], ctorParameters: () => [] });
|
|
@@ -599,10 +599,10 @@ class DynamicPipe {
|
|
|
599
599
|
}
|
|
600
600
|
}
|
|
601
601
|
}
|
|
602
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
603
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.
|
|
602
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
603
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: DynamicPipe, isStandalone: false, name: "dynamicPipe" }); }
|
|
604
604
|
}
|
|
605
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
605
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicPipe, decorators: [{
|
|
606
606
|
type: Pipe,
|
|
607
607
|
args: [{
|
|
608
608
|
name: 'dynamicPipe',
|
|
@@ -759,10 +759,10 @@ class PageHeaderComponent {
|
|
|
759
759
|
disabled: a.disabled,
|
|
760
760
|
}));
|
|
761
761
|
}
|
|
762
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
763
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: PageHeaderComponent, isStandalone: false, selector: "ocx-page-header", inputs: { header: "header", loading: "loading", figureBackground: "figureBackground", showFigure: "showFigure", figureImage: "figureImage", disableDefaultActions: "disableDefaultActions", subheader: "subheader", actions: "actions", objectDetails: "objectDetails", showBreadcrumbs: "showBreadcrumbs", manualBreadcrumbs: "manualBreadcrumbs", enableGridView: "enableGridView", gridLayoutDesktopColumns: "gridLayoutDesktopColumns" }, outputs: { save: "save" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }], ngImport: i0, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n <p-breadcrumb\n [model]=\"items\"\n [home]=\"(home$ | async)?.menuItem ?? {}\"\n [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n [attr.manual]=\"manualBreadcrumbs\"\n ></p-breadcrumb>\n } }\n <div class=\"title-bar flex flex-row md:justify-content-between align-items-center p-3\">\n <div class=\"title-wrap\">\n @if (showFigure) {\n <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n <ng-content select=\"[figureImage]\"></ng-content>\n @if (figureImage && !figureImageLoadError) {\n <img [ocxSrc]=\"figureImage\" alt=\"Figure Image\" class=\"w-full border-round-sm\" (error)=\"handleImageError()\" />\n }\n </div>\n @if (previewImage.children.length === 0 || figureImageLoadError) {\n <div class=\"colorblob flex-1 border-round\"></div>\n }\n </div>\n } @if (!loading) {\n <div class=\"header\">\n @if (!!header) {\n <h1 id=\"page-header\">{{ header }}</h1>\n } @if (!!subheader) {\n <div id=\"page-subheader\" role=\"note\" [attr.aria-label]=\"'OCX_PAGE_HEADER.SUBHEADER' | translate\">\n {{ subheader }}\n </div>\n }\n </div>\n } @else {\n <div class=\"header justify-content-evenly\">\n <p-skeleton width=\"10rem\"></p-skeleton>\n <p-skeleton width=\"10rem\"></p-skeleton>\n </div>\n }\n </div>\n\n <div class=\"action-items-wrap mt-2 md:mt-0\">\n @if (additionalToolbarContentLeft) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n } @if (!loading) { @if( inlineActions$ | async; as inlineActions) { @if (inlineActions && inlineActions.length >\n 0) {\n <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n @for (action of inlineActions; track action) {\n <span\n [pTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n >\n <p-button\n [id]=\"action.id\"\n [icon]=\"action.icon ?? ''\"\n [iconPos]=\"action.iconPos ?? 'left'\"\n type=\"button\"\n class=\"action-button\"\n (onClick)=\"action.actionCallback()\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </span>\n }\n </div>\n } }\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n @if(overflowActions$ | async; as overflowActions) {@if (overflowActions.length !== 0) {\n <div>\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n [pTooltip]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n } }\n </ng-container>\n } @else {\n <div class=\"flex\">\n <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n } @if (additionalToolbarContent) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n }\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n @if (objectDetails) { @for (item of objectDetails; track item) {\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n <span\n class=\"flex font-medium text-600 object-info-grid-label\"\n name=\"object-detail-label\"\n [pTooltip]=\"item.labelTooltip || ''\"\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 [pTooltip]=\"item.valueTooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n @if (item.icon) {\n <i [class]=\"item.icon + ' ' + (item.iconStyleClass ?? '')\" name=\"object-detail-icon\"></i>\n } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n @if (item.actionItemIcon && item.actionItemCallback) {\n <p-button\n [icon]=\"item.actionItemIcon\"\n styleClass=\"p-button-text p-0 w-full\"\n [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n [pTooltip]=\"item.actionItemTooltip || ''\"\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: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: 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 }); }
|
|
762
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
763
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PageHeaderComponent, isStandalone: false, selector: "ocx-page-header", inputs: { header: "header", loading: "loading", figureBackground: "figureBackground", showFigure: "showFigure", figureImage: "figureImage", disableDefaultActions: "disableDefaultActions", subheader: "subheader", actions: "actions", objectDetails: "objectDetails", showBreadcrumbs: "showBreadcrumbs", manualBreadcrumbs: "manualBreadcrumbs", enableGridView: "enableGridView", gridLayoutDesktopColumns: "gridLayoutDesktopColumns" }, outputs: { save: "save" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }], ngImport: i0, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n <p-breadcrumb\n [model]=\"items\"\n [home]=\"(home$ | async)?.menuItem ?? {}\"\n [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n [attr.manual]=\"manualBreadcrumbs\"\n ></p-breadcrumb>\n } }\n <div class=\"title-bar flex flex-row md:justify-content-between align-items-center p-3\">\n <div class=\"title-wrap\">\n @if (showFigure) {\n <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n <ng-content select=\"[figureImage]\"></ng-content>\n @if (figureImage && !figureImageLoadError) {\n <img [ocxSrc]=\"figureImage\" alt=\"Figure Image\" class=\"w-full border-round-sm\" (error)=\"handleImageError()\" />\n }\n </div>\n @if (previewImage.children.length === 0 || figureImageLoadError) {\n <div class=\"colorblob flex-1 border-round\"></div>\n }\n </div>\n } @if (!loading) {\n <div class=\"header\">\n @if (!!header) {\n <h1 id=\"page-header\">{{ header }}</h1>\n } @if (!!subheader) {\n <div id=\"page-subheader\" role=\"note\" [attr.aria-label]=\"'OCX_PAGE_HEADER.SUBHEADER' | translate\">\n {{ subheader }}\n </div>\n }\n </div>\n } @else {\n <div class=\"header justify-content-evenly\">\n <p-skeleton width=\"10rem\"></p-skeleton>\n <p-skeleton width=\"10rem\"></p-skeleton>\n </div>\n }\n </div>\n\n <div class=\"action-items-wrap mt-2 md:mt-0\">\n @if (additionalToolbarContentLeft) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n } @if (!loading) { @if( inlineActions$ | async; as inlineActions) { @if (inlineActions && inlineActions.length >\n 0) {\n <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n @for (action of inlineActions; track action) {\n <span\n [pTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n >\n <p-button\n [id]=\"action.id\"\n [icon]=\"action.icon ?? ''\"\n [iconPos]=\"action.iconPos ?? 'left'\"\n type=\"button\"\n class=\"action-button\"\n (onClick)=\"action.actionCallback()\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </span>\n }\n </div>\n } }\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n @if(overflowActions$ | async; as overflowActions) {@if (overflowActions.length !== 0) {\n <div>\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n [pTooltip]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n } }\n </ng-container>\n } @else {\n <div class=\"flex\">\n <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n } @if (additionalToolbarContent) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n }\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n @if (objectDetails) { @for (item of objectDetails; track item) {\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n <span\n class=\"flex font-medium text-600 object-info-grid-label\"\n name=\"object-detail-label\"\n [pTooltip]=\"item.labelTooltip || ''\"\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 [pTooltip]=\"item.valueTooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n @if (item.icon) {\n <i [class]=\"item.icon + ' ' + (item.iconStyleClass ?? '')\" name=\"object-detail-icon\"></i>\n } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n @if (item.actionItemIcon && item.actionItemCallback) {\n <p-button\n [icon]=\"item.actionItemIcon\"\n styleClass=\"p-button-text p-0 w-full\"\n [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n [pTooltip]=\"item.actionItemTooltip || ''\"\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: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: 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 }); }
|
|
764
764
|
}
|
|
765
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
765
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
766
766
|
type: Component,
|
|
767
767
|
args: [{ standalone: false, selector: 'ocx-page-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n <p-breadcrumb\n [model]=\"items\"\n [home]=\"(home$ | async)?.menuItem ?? {}\"\n [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n [attr.manual]=\"manualBreadcrumbs\"\n ></p-breadcrumb>\n } }\n <div class=\"title-bar flex flex-row md:justify-content-between align-items-center p-3\">\n <div class=\"title-wrap\">\n @if (showFigure) {\n <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n <ng-content select=\"[figureImage]\"></ng-content>\n @if (figureImage && !figureImageLoadError) {\n <img [ocxSrc]=\"figureImage\" alt=\"Figure Image\" class=\"w-full border-round-sm\" (error)=\"handleImageError()\" />\n }\n </div>\n @if (previewImage.children.length === 0 || figureImageLoadError) {\n <div class=\"colorblob flex-1 border-round\"></div>\n }\n </div>\n } @if (!loading) {\n <div class=\"header\">\n @if (!!header) {\n <h1 id=\"page-header\">{{ header }}</h1>\n } @if (!!subheader) {\n <div id=\"page-subheader\" role=\"note\" [attr.aria-label]=\"'OCX_PAGE_HEADER.SUBHEADER' | translate\">\n {{ subheader }}\n </div>\n }\n </div>\n } @else {\n <div class=\"header justify-content-evenly\">\n <p-skeleton width=\"10rem\"></p-skeleton>\n <p-skeleton width=\"10rem\"></p-skeleton>\n </div>\n }\n </div>\n\n <div class=\"action-items-wrap mt-2 md:mt-0\">\n @if (additionalToolbarContentLeft) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n } @if (!loading) { @if( inlineActions$ | async; as inlineActions) { @if (inlineActions && inlineActions.length >\n 0) {\n <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n @for (action of inlineActions; track action) {\n <span\n [pTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n >\n <p-button\n [id]=\"action.id\"\n [icon]=\"action.icon ?? ''\"\n [iconPos]=\"action.iconPos ?? 'left'\"\n type=\"button\"\n class=\"action-button\"\n (onClick)=\"action.actionCallback()\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </span>\n }\n </div>\n } }\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n @if(overflowActions$ | async; as overflowActions) {@if (overflowActions.length !== 0) {\n <div>\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n [pTooltip]=\"'OCX_PAGE_HEADER.MORE_ACTIONS' | translate\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n } }\n </ng-container>\n } @else {\n <div class=\"flex\">\n <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton shape=\"circle\" size=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n } @if (additionalToolbarContent) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n }\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n @if (objectDetails) { @for (item of objectDetails; track item) {\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n <span\n class=\"flex font-medium text-600 object-info-grid-label\"\n name=\"object-detail-label\"\n [pTooltip]=\"item.labelTooltip || ''\"\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 [pTooltip]=\"item.valueTooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n @if (item.icon) {\n <i [class]=\"item.icon + ' ' + (item.iconStyleClass ?? '')\" name=\"object-detail-icon\"></i>\n } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n @if (item.actionItemIcon && item.actionItemCallback) {\n <p-button\n [icon]=\"item.actionItemIcon\"\n styleClass=\"p-button-text p-0 w-full\"\n [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n [pTooltip]=\"item.actionItemTooltip || ''\"\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"] }]
|
|
768
768
|
}], ctorParameters: () => [], propDecorators: { header: [{
|
|
@@ -926,10 +926,10 @@ class SearchHeaderComponent {
|
|
|
926
926
|
isVisible(control) {
|
|
927
927
|
return this.visibleFormControls.some((formControl) => formControl.name !== null && String(formControl.name) === control);
|
|
928
928
|
}
|
|
929
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
930
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
929
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
930
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SearchHeaderComponent, isStandalone: false, selector: "ocx-search-header", inputs: { header: "header", subheader: "subheader", viewMode: "viewMode", manualBreadcrumbs: "manualBreadcrumbs", actions: "actions", searchConfigPermission: "searchConfigPermission", searchButtonDisabled: "searchButtonDisabled", resetButtonDisabled: "resetButtonDisabled", pageName: "pageName" }, outputs: { searched: "searched", resetted: "resetted", selectedSearchConfigChanged: "selectedSearchConfigChanged", viewModeChanged: "viewModeChanged", componentStateChanged: "componentStateChanged" }, providers: [], queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }, { propertyName: "formGroup", first: true, predicate: FormGroupDirective, descendants: true }, { propertyName: "visibleFormControls", predicate: FormControlName, descendants: true }], viewQueries: [{ propertyName: "searchParameterFields", first: true, predicate: ["searchParameterFields"], descendants: true }], ngImport: i0, template: "<ocx-page-header\n [header]=\"header || ('OCX_SEARCH_HEADER.HEADER' | translate)\"\n [subheader]=\"subheader\"\n [manualBreadcrumbs]=\"manualBreadcrumbs\"\n [actions]=\"headerActions\"\n>\n <ng-template #additionalToolbarContentLeft>\n @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]=\"(searchButtonsReversed$ | async) ? 'flex-row-reverse' : 'flex-row'\"\n [attr.aria-label]=\"'Search Controls'\"\n >\n @if (resetted.observed) {\n <p-button\n id=\"resetButton\"\n icon=\"pi pi-eraser\"\n (onClick)=\"onResetClicked()\"\n [disabled]=\"resetButtonDisabled\"\n [label]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate\"\n [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.ARIA_LABEL' | translate\"\n [pTooltip]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n >\n </p-button>\n }\n <p-button\n id=\"searchButton\"\n icon=\"pi pi-search\"\n (onClick)=\"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 [pTooltip]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n >\n </p-button>\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: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i5$1.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "slotStyles", "slotClasses", "inputs", "outputs"] }, { kind: "component", type: PageHeaderComponent, selector: "ocx-page-header", inputs: ["header", "loading", "figureBackground", "showFigure", "figureImage", "disableDefaultActions", "subheader", "actions", "objectDetails", "showBreadcrumbs", "manualBreadcrumbs", "enableGridView", "gridLayoutDesktopColumns"], outputs: ["save"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
931
931
|
}
|
|
932
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
932
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchHeaderComponent, decorators: [{
|
|
933
933
|
type: Component,
|
|
934
934
|
args: [{ standalone: false, selector: 'ocx-search-header', providers: [], template: "<ocx-page-header\n [header]=\"header || ('OCX_SEARCH_HEADER.HEADER' | translate)\"\n [subheader]=\"subheader\"\n [manualBreadcrumbs]=\"manualBreadcrumbs\"\n [actions]=\"headerActions\"\n>\n <ng-template #additionalToolbarContentLeft>\n @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]=\"(searchButtonsReversed$ | async) ? 'flex-row-reverse' : 'flex-row'\"\n [attr.aria-label]=\"'Search Controls'\"\n >\n @if (resetted.observed) {\n <p-button\n id=\"resetButton\"\n icon=\"pi pi-eraser\"\n (onClick)=\"onResetClicked()\"\n [disabled]=\"resetButtonDisabled\"\n [label]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate\"\n [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.ARIA_LABEL' | translate\"\n [pTooltip]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n >\n </p-button>\n }\n <p-button\n id=\"searchButton\"\n icon=\"pi pi-search\"\n (onClick)=\"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 [pTooltip]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n >\n </p-button>\n </section>\n </div>\n</ocx-page-header>\n" }]
|
|
935
935
|
}], ctorParameters: () => [], propDecorators: { header: [{
|
|
@@ -998,10 +998,10 @@ class AdvancedDirective {
|
|
|
998
998
|
this.viewContainer.clear();
|
|
999
999
|
}
|
|
1000
1000
|
}
|
|
1001
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1002
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
1001
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AdvancedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1002
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: AdvancedDirective, isStandalone: false, selector: "[ocxAdvanced]", ngImport: i0 }); }
|
|
1003
1003
|
}
|
|
1004
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1004
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AdvancedDirective, decorators: [{
|
|
1005
1005
|
type: Directive,
|
|
1006
1006
|
args: [{ selector: '[ocxAdvanced]', standalone: false }]
|
|
1007
1007
|
}], ctorParameters: () => [] });
|
|
@@ -1047,10 +1047,10 @@ class TooltipOnOverflowDirective extends Tooltip {
|
|
|
1047
1047
|
this.disabled = true;
|
|
1048
1048
|
this.setOption({ disabled: this.disabled });
|
|
1049
1049
|
}
|
|
1050
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1051
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
1050
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipOnOverflowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1051
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TooltipOnOverflowDirective, isStandalone: false, selector: "[ocxTooltipOnOverflow]", inputs: { ocxTooltipOnOverflow: "ocxTooltipOnOverflow" }, providers: [TooltipStyle], usesInheritance: true, ngImport: i0 }); }
|
|
1052
1052
|
}
|
|
1053
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1053
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipOnOverflowDirective, decorators: [{
|
|
1054
1054
|
type: Directive,
|
|
1055
1055
|
args: [{ selector: '[ocxTooltipOnOverflow]', standalone: false, providers: [TooltipStyle] }]
|
|
1056
1056
|
}], ctorParameters: () => [], propDecorators: { ocxTooltipOnOverflow: [{
|
|
@@ -1065,10 +1065,10 @@ class TemplateDirective {
|
|
|
1065
1065
|
getType() {
|
|
1066
1066
|
return this.name;
|
|
1067
1067
|
}
|
|
1068
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1069
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
1068
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1069
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TemplateDirective, isStandalone: false, selector: "[ocxTemplate]", inputs: { name: ["ocxTemplate", "name"] }, ngImport: i0 }); }
|
|
1070
1070
|
}
|
|
1071
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1071
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TemplateDirective, decorators: [{
|
|
1072
1072
|
type: Directive,
|
|
1073
1073
|
args: [{ selector: '[ocxTemplate]', standalone: false }]
|
|
1074
1074
|
}], propDecorators: { name: [{
|
|
@@ -1099,19 +1099,19 @@ class BasicDirective {
|
|
|
1099
1099
|
this.viewContainer.clear();
|
|
1100
1100
|
}
|
|
1101
1101
|
}
|
|
1102
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1103
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
1102
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1103
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: BasicDirective, isStandalone: false, selector: "[ocxBasic]", ngImport: i0 }); }
|
|
1104
1104
|
}
|
|
1105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1105
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicDirective, decorators: [{
|
|
1106
1106
|
type: Directive,
|
|
1107
1107
|
args: [{ selector: '[ocxBasic]', standalone: false }]
|
|
1108
1108
|
}], ctorParameters: () => [] });
|
|
1109
1109
|
|
|
1110
1110
|
class LoadingIndicatorComponent {
|
|
1111
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1112
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
1111
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1112
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: LoadingIndicatorComponent, isStandalone: false, selector: "ocx-loading-indicator", ngImport: i0, template: "<div class=\"full-overlay\">\n <div class=\"overlay\">\n <span class=\"loader\"></span>\n </div>\n</div>", styles: [".full-overlay{position:fixed;top:0;left:0;height:100%;width:100%;z-index:9999}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:99999}\n"] }); }
|
|
1113
1113
|
}
|
|
1114
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LoadingIndicatorComponent, decorators: [{
|
|
1115
1115
|
type: Component,
|
|
1116
1116
|
args: [{ standalone: false, selector: 'ocx-loading-indicator', template: "<div class=\"full-overlay\">\n <div class=\"overlay\">\n <span class=\"loader\"></span>\n </div>\n</div>", styles: [".full-overlay{position:fixed;top:0;left:0;height:100%;width:100%;z-index:9999}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:99999}\n"] }]
|
|
1117
1117
|
}] });
|
|
@@ -1155,10 +1155,10 @@ class LoadingIndicatorDirective {
|
|
|
1155
1155
|
}
|
|
1156
1156
|
}
|
|
1157
1157
|
}
|
|
1158
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1159
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
1158
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LoadingIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1159
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: LoadingIndicatorDirective, isStandalone: false, selector: "[ocxLoadingIndicator]", inputs: { ocxLoadingIndicator: "ocxLoadingIndicator", overlayFullPage: "overlayFullPage", isLoaderSmall: "isLoaderSmall" }, usesOnChanges: true, ngImport: i0 }); }
|
|
1160
1160
|
}
|
|
1161
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1161
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LoadingIndicatorDirective, decorators: [{
|
|
1162
1162
|
type: Directive,
|
|
1163
1163
|
args: [{
|
|
1164
1164
|
selector: '[ocxLoadingIndicator]',
|
|
@@ -1231,10 +1231,10 @@ class ColumnGroupSelectionComponent {
|
|
|
1231
1231
|
displayedColumns: activeColumns,
|
|
1232
1232
|
});
|
|
1233
1233
|
}
|
|
1234
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1235
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1234
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ColumnGroupSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1235
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ColumnGroupSelectionComponent, isStandalone: false, selector: "ocx-column-group-selection", inputs: { selectedGroupKey: "selectedGroupKey", columns: "columns", placeholderKey: "placeholderKey", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey" }, outputs: { groupSelectionChanged: "groupSelectionChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-floatlabel variant=\"on\">\n @if ((allGroupKeys$ | async)?.length) {\n <p-select\n inputId=\"columnGroupSelectionDropdown\"\n id=\"columnGroupSelectionDropdownElement\"\n (onChange)=\"changeGroupSelection($event)\"\n [options]=\"(allGroupKeys$ | async) || []\"\n [placeholder]=\"placeholderKey | translate\"\n [(ngModel)]=\"selectedGroupKey\"\n [ariaLabel]=\"'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABEL' | translate\"\n >\n <ng-template let-item #item> {{ item ? (item | translate) : ''}} </ng-template>\n <ng-template let-item #selectedItem> {{ item ? (item | translate) : ''}} </ng-template>\n </p-select>\n }\n @if ((allGroupKeys$ | async)?.length) {\n <label for=\"columnGroupSelectionDropdown\"\n >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n >\n }\n </p-floatlabel>\n", styles: [":host ::ng-deep .p-select{min-width:12rem}\n"], dependencies: [{ kind: "component", type: i1$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i2$2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
1236
1236
|
}
|
|
1237
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1237
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ColumnGroupSelectionComponent, decorators: [{
|
|
1238
1238
|
type: Component,
|
|
1239
1239
|
args: [{ standalone: false, selector: 'ocx-column-group-selection', template: "<p-floatlabel variant=\"on\">\n @if ((allGroupKeys$ | async)?.length) {\n <p-select\n inputId=\"columnGroupSelectionDropdown\"\n id=\"columnGroupSelectionDropdownElement\"\n (onChange)=\"changeGroupSelection($event)\"\n [options]=\"(allGroupKeys$ | async) || []\"\n [placeholder]=\"placeholderKey | translate\"\n [(ngModel)]=\"selectedGroupKey\"\n [ariaLabel]=\"'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABEL' | translate\"\n >\n <ng-template let-item #item> {{ item ? (item | translate) : ''}} </ng-template>\n <ng-template let-item #selectedItem> {{ item ? (item | translate) : ''}} </ng-template>\n </p-select>\n }\n @if ((allGroupKeys$ | async)?.length) {\n <label for=\"columnGroupSelectionDropdown\"\n >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n >\n }\n </p-floatlabel>\n", styles: [":host ::ng-deep .p-select{min-width:12rem}\n"] }]
|
|
1240
1240
|
}], propDecorators: { selectedGroupKey: [{
|
|
@@ -1260,10 +1260,10 @@ class OcxContentComponent {
|
|
|
1260
1260
|
*/
|
|
1261
1261
|
this.title = '';
|
|
1262
1262
|
}
|
|
1263
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1264
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
1263
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OcxContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1264
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: OcxContentComponent, isStandalone: false, selector: "ocx-content", inputs: { title: "title", styleClass: "styleClass" }, ngImport: i0, template: "<div [ocxContent]=\"title\" [ngClass]=\"styleClass\">\n <ng-content></ng-content>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OcxContentDirective, selector: "[ocxContent]", inputs: ["ocxContent"] }] }); }
|
|
1265
1265
|
}
|
|
1266
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1266
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OcxContentComponent, decorators: [{
|
|
1267
1267
|
type: Component,
|
|
1268
1268
|
args: [{ standalone: false, selector: 'ocx-content', template: "<div [ocxContent]=\"title\" [ngClass]=\"styleClass\">\n <ng-content></ng-content>\n</div>" }]
|
|
1269
1269
|
}], propDecorators: { title: [{
|
|
@@ -1285,10 +1285,10 @@ class OcxContentContainerComponent {
|
|
|
1285
1285
|
*/
|
|
1286
1286
|
this.breakpoint = 'md';
|
|
1287
1287
|
}
|
|
1288
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1289
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
1288
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OcxContentContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1289
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: OcxContentContainerComponent, isStandalone: false, selector: "ocx-content-container", inputs: { layout: "layout", breakpoint: "breakpoint", styleClass: "styleClass" }, ngImport: i0, template: "<div ocxContentContainer [layout]=\"layout\" [breakpoint]=\"breakpoint\" [ngClass]=\"styleClass\">\n <ng-content></ng-content>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OcxContentContainerDirective, selector: "[ocxContentContainer]", inputs: ["layout", "breakpoint"] }] }); }
|
|
1290
1290
|
}
|
|
1291
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1291
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OcxContentContainerComponent, decorators: [{
|
|
1292
1292
|
type: Component,
|
|
1293
1293
|
args: [{ standalone: false, selector: 'ocx-content-container', template: "<div ocxContentContainer [layout]=\"layout\" [breakpoint]=\"breakpoint\" [ngClass]=\"styleClass\">\n <ng-content></ng-content>\n</div>" }]
|
|
1294
1294
|
}], propDecorators: { layout: [{
|
|
@@ -1412,10 +1412,10 @@ class CustomGroupColumnSelectorComponent {
|
|
|
1412
1412
|
onCancelClick() {
|
|
1413
1413
|
this.visible = false;
|
|
1414
1414
|
}
|
|
1415
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1416
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CustomGroupColumnSelectorComponent, isStandalone: false, selector: "ocx-custom-group-column-selector", inputs: { columns: "columns", displayedColumns: "displayedColumns", customGroupKey: "customGroupKey", dialogTitle: "dialogTitle", dialogTitleKey: "dialogTitleKey", openButtonTitle: "openButtonTitle", openButtonTitleKey: "openButtonTitleKey", openButtonAriaLabel: "openButtonAriaLabel", openButtonAriaLabelKey: "openButtonAriaLabelKey", saveButtonLabel: "saveButtonLabel", saveButtonLabelKey: "saveButtonLabelKey", saveButtonAriaLabel: "saveButtonAriaLabel", saveButtonAriaLabelKey: "saveButtonAriaLabelKey", cancelButtonLabel: "cancelButtonLabel", cancelButtonLabelKey: "cancelButtonLabelKey", cancelButtonAriaLabel: "cancelButtonAriaLabel", cancelButtonAriaLabelKey: "cancelButtonAriaLabelKey", activeColumnsLabel: "activeColumnsLabel", activeColumnsLabelKey: "activeColumnsLabelKey", inactiveColumnsLabel: "inactiveColumnsLabel", inactiveColumnsLabelKey: "inactiveColumnsLabelKey", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition" }, outputs: { columnSelectionChanged: "columnSelectionChanged", actionColumnConfigChanged: "actionColumnConfigChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-button\n id=\"customGroupColumnSelectorButton\"\n type=\"button\"\n (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n [pTooltip]=\"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' | translate)\n }}</span\n >\n </ng-template>\n\n <p-pickList\n [source]=\"displayedColumnsModel\"\n [target]=\"hiddenColumnsModel\"\n [sourceHeader]=\"activeColumnsLabel || (activeColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n [targetHeader]=\"inactiveColumnsLabel || (inactiveColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)\"\n [dragdrop]=\"true\"\n [responsive]=\"false\"\n [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 >\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 class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</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 >\n <ng-template #item let-option> {{option.label | translate}} </ng-template>\n </p-selectbutton>\n </div>\n <div>\n <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</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 >\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: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "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: ["source", "target", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "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: ["onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "component", type: i1$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3.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: i8.TranslatePipe, name: "translate" }] }); }
|
|
1415
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CustomGroupColumnSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1416
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: CustomGroupColumnSelectorComponent, isStandalone: false, selector: "ocx-custom-group-column-selector", inputs: { columns: "columns", displayedColumns: "displayedColumns", customGroupKey: "customGroupKey", dialogTitle: "dialogTitle", dialogTitleKey: "dialogTitleKey", openButtonTitle: "openButtonTitle", openButtonTitleKey: "openButtonTitleKey", openButtonAriaLabel: "openButtonAriaLabel", openButtonAriaLabelKey: "openButtonAriaLabelKey", saveButtonLabel: "saveButtonLabel", saveButtonLabelKey: "saveButtonLabelKey", saveButtonAriaLabel: "saveButtonAriaLabel", saveButtonAriaLabelKey: "saveButtonAriaLabelKey", cancelButtonLabel: "cancelButtonLabel", cancelButtonLabelKey: "cancelButtonLabelKey", cancelButtonAriaLabel: "cancelButtonAriaLabel", cancelButtonAriaLabelKey: "cancelButtonAriaLabelKey", activeColumnsLabel: "activeColumnsLabel", activeColumnsLabelKey: "activeColumnsLabelKey", inactiveColumnsLabel: "inactiveColumnsLabel", inactiveColumnsLabelKey: "inactiveColumnsLabelKey", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition" }, outputs: { columnSelectionChanged: "columnSelectionChanged", actionColumnConfigChanged: "actionColumnConfigChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-button\n id=\"customGroupColumnSelectorButton\"\n type=\"button\"\n (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n [pTooltip]=\"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' | translate)\n }}</span\n >\n </ng-template>\n\n <p-pickList\n [source]=\"displayedColumnsModel\"\n [target]=\"hiddenColumnsModel\"\n [sourceHeader]=\"activeColumnsLabel || (activeColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n [targetHeader]=\"inactiveColumnsLabel || (inactiveColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)\"\n [dragdrop]=\"true\"\n [responsive]=\"false\"\n [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 >\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 class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</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 >\n <ng-template #item let-option> {{option.label | translate}} </ng-template>\n </p-selectbutton>\n </div>\n <div>\n <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</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 >\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: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "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: ["source", "target", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "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: ["onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "component", type: i1$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3.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: i8.TranslatePipe, name: "translate" }] }); }
|
|
1417
1417
|
}
|
|
1418
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1418
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CustomGroupColumnSelectorComponent, decorators: [{
|
|
1419
1419
|
type: Component,
|
|
1420
1420
|
args: [{ standalone: false, selector: 'ocx-custom-group-column-selector', template: "<p-button\n id=\"customGroupColumnSelectorButton\"\n type=\"button\"\n (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n [pTooltip]=\"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' | translate)\n }}</span\n >\n </ng-template>\n\n <p-pickList\n [source]=\"displayedColumnsModel\"\n [target]=\"hiddenColumnsModel\"\n [sourceHeader]=\"activeColumnsLabel || (activeColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n [targetHeader]=\"inactiveColumnsLabel || (inactiveColumnsLabelKey | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)\"\n [dragdrop]=\"true\"\n [responsive]=\"false\"\n [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 >\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 class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</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 >\n <ng-template #item let-option> {{option.label | translate}} </ng-template>\n </p-selectbutton>\n </div>\n <div>\n <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</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 >\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"] }]
|
|
1421
1421
|
}], propDecorators: { columns: [{
|
|
@@ -1520,10 +1520,10 @@ class DataLayoutSelectionComponent {
|
|
|
1520
1520
|
layout: event.layout,
|
|
1521
1521
|
});
|
|
1522
1522
|
}
|
|
1523
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1524
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1523
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DataLayoutSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1524
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DataLayoutSelectionComponent, isStandalone: false, selector: "ocx-data-layout-selection", inputs: { supportedViewLayouts: "supportedViewLayouts", layout: "layout" }, outputs: { 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 >\n <ng-template #item let-item>\n <i [class]=\"item.icon\" [pTooltip]=\"item.tooltipKey | translate\" tooltipPosition=\"top\"></i>\n <label style=\"display: none\" id=\"{{item.id}}\">{{item.labelKey | translate}}</label>\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}\n"], dependencies: [{ kind: "component", type: i1$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3.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: i8.TranslatePipe, name: "translate" }] }); }
|
|
1525
1525
|
}
|
|
1526
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1526
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DataLayoutSelectionComponent, decorators: [{
|
|
1527
1527
|
type: Component,
|
|
1528
1528
|
args: [{ standalone: false, selector: 'ocx-data-layout-selection', 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 >\n <ng-template #item let-item>\n <i [class]=\"item.icon\" [pTooltip]=\"item.tooltipKey | translate\" tooltipPosition=\"top\"></i>\n <label style=\"display: none\" id=\"{{item.id}}\">{{item.labelKey | translate}}</label>\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}\n"] }]
|
|
1529
1529
|
}], propDecorators: { supportedViewLayouts: [{
|
|
@@ -1837,10 +1837,10 @@ class OcxTimeAgoPipe extends TranslatePipe {
|
|
|
1837
1837
|
return 3600;
|
|
1838
1838
|
}
|
|
1839
1839
|
}
|
|
1840
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1841
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.
|
|
1840
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OcxTimeAgoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1841
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: OcxTimeAgoPipe, isStandalone: false, name: "timeago" }); }
|
|
1842
1842
|
}
|
|
1843
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1843
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OcxTimeAgoPipe, decorators: [{
|
|
1844
1844
|
type: Pipe,
|
|
1845
1845
|
args: [{
|
|
1846
1846
|
name: 'timeago',
|
|
@@ -2310,10 +2310,10 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2310
2310
|
}
|
|
2311
2311
|
return this.userService.getPermissions();
|
|
2312
2312
|
}
|
|
2313
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2314
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DataListGridComponent, isStandalone: false, selector: "ocx-data-list-grid", inputs: { titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", emptyResultsMessage: "emptyResultsMessage", fallbackImage: "fallbackImage", layout: "layout", viewPermission: "viewPermission", editPermission: "editPermission", deletePermission: "deletePermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", viewMenuItemKey: "viewMenuItemKey", editMenuItemKey: "editMenuItemKey", deleteMenuItemKey: "deleteMenuItemKey", paginator: "paginator", page: "page", columns: "columns", name: "name", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", data: "data", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", listItemTemplate: "listItemTemplate", gridItemTemplate: "gridItemTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { viewItem: "viewItem", editItem: "editItem", deleteItem: "deleteItem", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if ((displayedPageSize$ | async); as displayedPageSize) { @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 ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n id=\"dataListGrid_{{name}}\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #grid let-rows>\n <div class=\"grid grid-cols-12 gap-4\">\n @for (item of rows; track item) {\n <ng-container\n [ngTemplateOutlet]=\"_gridItem ? _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\">\n @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n <ng-container\n [ngTemplateOutlet]=\"_listItem ? _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\">\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 <ng-container *ngIf=\"hasViewPermission$ | async as hasViewPermission; else noViewPermission\">\n <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n </ng-container>\n <ng-template #noViewPermission>\n <a [routerLink]=\"\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n </ng-template>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div *ngIf=\"(gridMenuItems$ | async) as gridMenuItems\">\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 [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n </div>\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\">\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 [pTooltip]=\"(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 [pTooltip]=\"(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 <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 [pTooltip]=\"(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$ | async; track action) { @if ((!action.actionVisibleField ||\n fieldIsTruthy(item, 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)=\"action.callback(item)\"\n [pTooltip]=\"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 [pTooltip]=\"'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 ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div class=\"flex flex-wrap\">\n @for (col of getFilteredColumns(); 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 ? _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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { 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", "style", "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", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i8$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "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]] }); }
|
|
2313
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DataListGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2314
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DataListGridComponent, isStandalone: false, selector: "ocx-data-list-grid", inputs: { titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", emptyResultsMessage: "emptyResultsMessage", fallbackImage: "fallbackImage", layout: "layout", viewPermission: "viewPermission", editPermission: "editPermission", deletePermission: "deletePermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", viewMenuItemKey: "viewMenuItemKey", editMenuItemKey: "editMenuItemKey", deleteMenuItemKey: "deleteMenuItemKey", paginator: "paginator", page: "page", columns: "columns", name: "name", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", data: "data", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", listItemTemplate: "listItemTemplate", gridItemTemplate: "gridItemTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { viewItem: "viewItem", editItem: "editItem", deleteItem: "deleteItem", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if ((displayedPageSize$ | async); as displayedPageSize) { @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 ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n id=\"dataListGrid_{{name}}\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #grid let-rows>\n <div class=\"grid grid-cols-12 gap-4\">\n @for (item of rows; track item) {\n <ng-container\n [ngTemplateOutlet]=\"_gridItem ? _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\">\n @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n <ng-container\n [ngTemplateOutlet]=\"_listItem ? _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\">\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 <ng-container *ngIf=\"hasViewPermission$ | async as hasViewPermission; else noViewPermission\">\n <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n </ng-container>\n <ng-template #noViewPermission>\n <a [routerLink]=\"\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n </ng-template>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div *ngIf=\"(gridMenuItems$ | async) as gridMenuItems\">\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 [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n </div>\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\">\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 [pTooltip]=\"(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 [pTooltip]=\"(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 <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 [pTooltip]=\"(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$ | async; track action) { @if ((!action.actionVisibleField ||\n fieldIsTruthy(item, 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)=\"action.callback(item)\"\n [pTooltip]=\"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 [pTooltip]=\"'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 ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div class=\"flex flex-wrap\">\n @for (col of getFilteredColumns(); 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 ? _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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { 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", "style", "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", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i8$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "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]] }); }
|
|
2315
2315
|
}
|
|
2316
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2316
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DataListGridComponent, decorators: [{
|
|
2317
2317
|
type: Component,
|
|
2318
2318
|
args: [{ standalone: false, selector: 'ocx-data-list-grid', template: "@if ((displayedPageSize$ | async); as displayedPageSize) { @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 ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n id=\"dataListGrid_{{name}}\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #grid let-rows>\n <div class=\"grid grid-cols-12 gap-4\">\n @for (item of rows; track item) {\n <ng-container\n [ngTemplateOutlet]=\"_gridItem ? _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\">\n @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n <ng-container\n [ngTemplateOutlet]=\"_listItem ? _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\">\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 <ng-container *ngIf=\"hasViewPermission$ | async as hasViewPermission; else noViewPermission\">\n <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n </ng-container>\n <ng-template #noViewPermission>\n <a [routerLink]=\"\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n </ng-template>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div *ngIf=\"(gridMenuItems$ | async) as gridMenuItems\">\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 [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n </div>\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\">\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 [pTooltip]=\"(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 [pTooltip]=\"(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 <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 [pTooltip]=\"(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$ | async; track action) { @if ((!action.actionVisibleField ||\n fieldIsTruthy(item, 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)=\"action.callback(item)\"\n [pTooltip]=\"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 [pTooltip]=\"'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 ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div class=\"flex flex-wrap\">\n @for (col of getFilteredColumns(); 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 ? _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"] }]
|
|
2319
2319
|
}], ctorParameters: () => [], propDecorators: { titleLineId: [{
|
|
@@ -2530,10 +2530,10 @@ class DataListGridSortingComponent {
|
|
|
2530
2530
|
return 'OCX_LIST_GRID_SORT.TOGGLE_BUTTON.DEFAULT_TOOLTIP';
|
|
2531
2531
|
}
|
|
2532
2532
|
}
|
|
2533
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2534
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2533
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DataListGridSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2534
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DataListGridSortingComponent, isStandalone: false, selector: "ocx-data-list-grid-sorting", inputs: { columns: "columns", sortStates: "sortStates", sortDirection: "sortDirection", sortField: "sortField" }, outputs: { 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 >\n <ng-template let-item #item> {{ item?.columnName ? (item.columnName | translate) : ''}} </ng-template>\n <ng-template let-item #selectedItem>\n {{ item?.columnName ? (item.columnName | translate) : ''}}\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 [pTooltip]=\"(sortIconTitle() | translate)\"\n tooltipPosition=\"top\"\n [ariaLabel]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{direction: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n ></p-button>\n</div>\n", 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", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3.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: i8.TranslatePipe, name: "translate" }] }); }
|
|
2535
2535
|
}
|
|
2536
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2536
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DataListGridSortingComponent, decorators: [{
|
|
2537
2537
|
type: Component,
|
|
2538
2538
|
args: [{ standalone: false, selector: 'ocx-data-list-grid-sorting', 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 >\n <ng-template let-item #item> {{ item?.columnName ? (item.columnName | translate) : ''}} </ng-template>\n <ng-template let-item #selectedItem>\n {{ item?.columnName ? (item.columnName | translate) : ''}}\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 [pTooltip]=\"(sortIconTitle() | translate)\"\n tooltipPosition=\"top\"\n [ariaLabel]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{direction: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n ></p-button>\n</div>\n", styles: [".pi{border-radius:var(--border-radius);border-width:thin;background:none;cursor:pointer}:host ::ng-deep .p-select{min-width:12rem}\n"] }]
|
|
2539
2539
|
}], propDecorators: { columns: [{
|
|
@@ -3188,10 +3188,10 @@ class DataTableComponent extends DataSortBase {
|
|
|
3188
3188
|
});
|
|
3189
3189
|
}));
|
|
3190
3190
|
}
|
|
3191
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3192
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DataTableComponent, isStandalone: false, selector: "ocx-data-table", inputs: { rows: "rows", selectedRows: "selectedRows", filters: "filters", sortDirection: "sortDirection", sortColumn: "sortColumn", columns: "columns", clientSideFiltering: "clientSideFiltering", clientSideSorting: "clientSideSorting", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", emptyResultsMessage: "emptyResultsMessage", name: "name", deletePermission: "deletePermission", viewPermission: "viewPermission", editPermission: "editPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", selectionEnabledField: "selectionEnabledField", allowSelectAll: "allowSelectAll", paginator: "paginator", page: "page", tableStyle: "tableStyle", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", stringCellTemplate: "stringCellTemplate", numberCellTemplate: "numberCellTemplate", dateCellTemplate: "dateCellTemplate", relativeDateCellTemplate: "relativeDateCellTemplate", cellTemplate: "cellTemplate", translationKeyCellTemplate: "translationKeyCellTemplate", stringFilterCellTemplate: "stringFilterCellTemplate", numberFilterCellTemplate: "numberFilterCellTemplate", dateFilterCellTemplate: "dateFilterCellTemplate", relativeDateFilterCellTemplate: "relativeDateFilterCellTemplate", filterCellTemplate: "filterCellTemplate", translationKeyFilterCellTemplate: "translationKeyFilterCellTemplate", additionalActions: "additionalActions", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "stringCellChildTemplate", first: true, predicate: ["stringCell"], descendants: true }, { propertyName: "numberCellChildTemplate", first: true, predicate: ["numberCell"], descendants: true }, { propertyName: "dateCellChildTemplate", first: true, predicate: ["dateCell"], descendants: true }, { propertyName: "relativeDateCellChildTemplate", first: true, predicate: ["relativeDateCell"], descendants: true }, { propertyName: "cellChildTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "translationKeyCellChildTemplate", first: true, predicate: ["translationKeyCell"], descendants: true }, { propertyName: "stringFilterCellChildTemplate", first: true, predicate: ["stringFilterCell"], descendants: true }, { propertyName: "numberFilterCellChildTemplate", first: true, predicate: ["numberFilterCell"], descendants: true }, { propertyName: "dateFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateFilterCellChildTemplate", first: true, predicate: ["relativeDateFilterCell"], descendants: true }, { propertyName: "filterCellChildTemplate", first: true, predicate: ["filterCell"], descendants: true }, { propertyName: "translationKeyFilterCellChildTemplate", first: true, predicate: ["translationKeyFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n @if (anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0)\n {\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 <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$ | async; track action) { @if ((!action.actionVisibleField ||\n fieldIsTruthy(rowObject, 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)=\"action.callback(rowObject)\"\n [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\"\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 #actionColumnHeader>\n @if (anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0)\n {\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 >\n {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n </th>\n }\n</ng-template>\n\n@if ((displayedPageSize$ | async); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-table\n [value]=\"(displayedRows$ | async) ?? []\"\n responsiveLayout=\"scroll\"\n [paginator]=\"paginator\"\n [first]=\"page * displayedPageSize\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize\"\n [showCurrentPageReport]=\"true\"\n currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n id=\"dataTable_{{name}}\"\n (selectionChange)=\"onSelectionChange($event)\"\n dataKey=\"id\"\n [rowTrackBy]=\"rowTrackByFunction\"\n [selection]=\"(selectedRows$ | async) ?? []\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [style]=\"tableStyle\"\n paginatorDropdownAppendTo=\"body\"\n [rowSelectable]=\"rowSelectable\"\n tableStyleClass=\"h-full\"\n>\n <ng-template #header>\n <tr style=\"vertical-align: top\">\n @if (selectionChangedObserved) {\n <th style=\"width: 4rem\" scope=\"col\">\n @if (allowSelectAll) {\n <p-tableHeaderCheckbox\n pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n ></p-tableHeaderCheckbox>\n }\n </th>\n } @if (actionColumnPosition === 'left';) {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n } @for (column of columns; track column) { @if (column.sortable || column.filterable) {\n <th scope=\"col\">\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\">{{ column.nameKey | translate }}</span>\n <span class=\"flex icon-button-header-wrapper\">\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 [title]=\"(sortIconTitle(column.id) | translate)\"\n [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n ></button>\n } @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { @if (columnFilterTemplates$ | async; as\n columnFilterTemplates) { @if (column.filterable && (!column.filterType || column.filterType ===\n FilterType.EQUALS)) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\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 [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[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 } } } @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"truthyFilterOptions\"\n [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\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]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value> {{value.key | translate}} </ng-template>\n </p-multiselect>\n }\n </span>\n </div>\n </th>\n } @else {\n <th scope=\"col\">{{ column.nameKey | translate }}</th>\n } } @if (actionColumnPosition === 'right';) {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n }\n </tr>\n </ng-template>\n <ng-template #body let-rowObject>\n @if (columnTemplates) {\n <tr>\n @if (selectionChangedObserved) {\n <td>\n @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n <p-checkbox\n [(ngModel)]=\"checked\"\n [binary]=\"true\"\n [disabled]=\"true\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\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}\"\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]=\"\n _cell ? _cell: columnTemplates[column.id]\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\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 <ng-template #emptymessage>\n <tr>\n <!-- If allowSelectAll is set to true, an additional column for checkbox selection is added and\n the colSpan needs to be increased by one so that the row is rendered the whole width of the table. -->\n <td\n [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0) +\n (allowSelectAll ? 1 : 0)\"\n >\n {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n </td>\n </tr>\n </ng-template>\n</p-table>\n} }\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", 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}\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: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i5$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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.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", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3.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: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "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]] }); }
|
|
3191
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3192
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DataTableComponent, isStandalone: false, selector: "ocx-data-table", inputs: { rows: "rows", selectedRows: "selectedRows", filters: "filters", sortDirection: "sortDirection", sortColumn: "sortColumn", columns: "columns", clientSideFiltering: "clientSideFiltering", clientSideSorting: "clientSideSorting", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", emptyResultsMessage: "emptyResultsMessage", name: "name", deletePermission: "deletePermission", viewPermission: "viewPermission", editPermission: "editPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", selectionEnabledField: "selectionEnabledField", allowSelectAll: "allowSelectAll", paginator: "paginator", page: "page", tableStyle: "tableStyle", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", stringCellTemplate: "stringCellTemplate", numberCellTemplate: "numberCellTemplate", dateCellTemplate: "dateCellTemplate", relativeDateCellTemplate: "relativeDateCellTemplate", cellTemplate: "cellTemplate", translationKeyCellTemplate: "translationKeyCellTemplate", stringFilterCellTemplate: "stringFilterCellTemplate", numberFilterCellTemplate: "numberFilterCellTemplate", dateFilterCellTemplate: "dateFilterCellTemplate", relativeDateFilterCellTemplate: "relativeDateFilterCellTemplate", filterCellTemplate: "filterCellTemplate", translationKeyFilterCellTemplate: "translationKeyFilterCellTemplate", additionalActions: "additionalActions", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "stringCellChildTemplate", first: true, predicate: ["stringCell"], descendants: true }, { propertyName: "numberCellChildTemplate", first: true, predicate: ["numberCell"], descendants: true }, { propertyName: "dateCellChildTemplate", first: true, predicate: ["dateCell"], descendants: true }, { propertyName: "relativeDateCellChildTemplate", first: true, predicate: ["relativeDateCell"], descendants: true }, { propertyName: "cellChildTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "translationKeyCellChildTemplate", first: true, predicate: ["translationKeyCell"], descendants: true }, { propertyName: "stringFilterCellChildTemplate", first: true, predicate: ["stringFilterCell"], descendants: true }, { propertyName: "numberFilterCellChildTemplate", first: true, predicate: ["numberFilterCell"], descendants: true }, { propertyName: "dateFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateFilterCellChildTemplate", first: true, predicate: ["relativeDateFilterCell"], descendants: true }, { propertyName: "filterCellChildTemplate", first: true, predicate: ["filterCell"], descendants: true }, { propertyName: "translationKeyFilterCellChildTemplate", first: true, predicate: ["translationKeyFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n @if (anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0)\n {\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 <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$ | async; track action) { @if ((!action.actionVisibleField ||\n fieldIsTruthy(rowObject, 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)=\"action.callback(rowObject)\"\n [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\"\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 #actionColumnHeader>\n @if (anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0)\n {\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 >\n {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n </th>\n }\n</ng-template>\n\n@if ((displayedPageSize$ | async); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-table\n [value]=\"(displayedRows$ | async) ?? []\"\n responsiveLayout=\"scroll\"\n [paginator]=\"paginator\"\n [first]=\"page * displayedPageSize\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize\"\n [showCurrentPageReport]=\"true\"\n currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n id=\"dataTable_{{name}}\"\n (selectionChange)=\"onSelectionChange($event)\"\n dataKey=\"id\"\n [rowTrackBy]=\"rowTrackByFunction\"\n [selection]=\"(selectedRows$ | async) ?? []\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [style]=\"tableStyle\"\n paginatorDropdownAppendTo=\"body\"\n [rowSelectable]=\"rowSelectable\"\n tableStyleClass=\"h-full\"\n>\n <ng-template #header>\n <tr style=\"vertical-align: top\">\n @if (selectionChangedObserved) {\n <th style=\"width: 4rem\" scope=\"col\">\n @if (allowSelectAll) {\n <p-tableHeaderCheckbox\n pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n ></p-tableHeaderCheckbox>\n }\n </th>\n } @if (actionColumnPosition === 'left';) {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n } @for (column of columns; track column) { @if (column.sortable || column.filterable) {\n <th scope=\"col\">\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\">{{ column.nameKey | translate }}</span>\n <span class=\"flex icon-button-header-wrapper\">\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 [title]=\"(sortIconTitle(column.id) | translate)\"\n [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n ></button>\n } @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { @if (columnFilterTemplates$ | async; as\n columnFilterTemplates) { @if (column.filterable && (!column.filterType || column.filterType ===\n FilterType.EQUALS)) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\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 [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[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 } } } @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"truthyFilterOptions\"\n [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\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]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value> {{value.key | translate}} </ng-template>\n </p-multiselect>\n }\n </span>\n </div>\n </th>\n } @else {\n <th scope=\"col\">{{ column.nameKey | translate }}</th>\n } } @if (actionColumnPosition === 'right';) {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n }\n </tr>\n </ng-template>\n <ng-template #body let-rowObject>\n @if (columnTemplates) {\n <tr>\n @if (selectionChangedObserved) {\n <td>\n @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n <p-checkbox\n [(ngModel)]=\"checked\"\n [binary]=\"true\"\n [disabled]=\"true\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\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}\"\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]=\"\n _cell ? _cell: columnTemplates[column.id]\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\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 <ng-template #emptymessage>\n <tr>\n <!-- If allowSelectAll is set to true, an additional column for checkbox selection is added and\n the colSpan needs to be increased by one so that the row is rendered the whole width of the table. -->\n <td\n [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0) +\n (allowSelectAll ? 1 : 0)\"\n >\n {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n </td>\n </tr>\n </ng-template>\n</p-table>\n} }\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", 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}\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: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i5$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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.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", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3.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: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "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]] }); }
|
|
3193
3193
|
}
|
|
3194
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3194
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
3195
3195
|
type: Component,
|
|
3196
3196
|
args: [{ standalone: false, selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n @if (anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0)\n {\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 <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$ | async; track action) { @if ((!action.actionVisibleField ||\n fieldIsTruthy(rowObject, 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)=\"action.callback(rowObject)\"\n [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\"\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 #actionColumnHeader>\n @if (anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0)\n {\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 >\n {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n </th>\n }\n</ng-template>\n\n@if ((displayedPageSize$ | async); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-table\n [value]=\"(displayedRows$ | async) ?? []\"\n responsiveLayout=\"scroll\"\n [paginator]=\"paginator\"\n [first]=\"page * displayedPageSize\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize\"\n [showCurrentPageReport]=\"true\"\n currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n id=\"dataTable_{{name}}\"\n (selectionChange)=\"onSelectionChange($event)\"\n dataKey=\"id\"\n [rowTrackBy]=\"rowTrackByFunction\"\n [selection]=\"(selectedRows$ | async) ?? []\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [style]=\"tableStyle\"\n paginatorDropdownAppendTo=\"body\"\n [rowSelectable]=\"rowSelectable\"\n tableStyleClass=\"h-full\"\n>\n <ng-template #header>\n <tr style=\"vertical-align: top\">\n @if (selectionChangedObserved) {\n <th style=\"width: 4rem\" scope=\"col\">\n @if (allowSelectAll) {\n <p-tableHeaderCheckbox\n pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n ></p-tableHeaderCheckbox>\n }\n </th>\n } @if (actionColumnPosition === 'left';) {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n } @for (column of columns; track column) { @if (column.sortable || column.filterable) {\n <th scope=\"col\">\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\">{{ column.nameKey | translate }}</span>\n <span class=\"flex icon-button-header-wrapper\">\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 [title]=\"(sortIconTitle(column.id) | translate)\"\n [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n ></button>\n } @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { @if (columnFilterTemplates$ | async; as\n columnFilterTemplates) { @if (column.filterable && (!column.filterType || column.filterType ===\n FilterType.EQUALS)) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\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 [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[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 } } } @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"truthyFilterOptions\"\n [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\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]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value> {{value.key | translate}} </ng-template>\n </p-multiselect>\n }\n </span>\n </div>\n </th>\n } @else {\n <th scope=\"col\">{{ column.nameKey | translate }}</th>\n } } @if (actionColumnPosition === 'right';) {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n }\n </tr>\n </ng-template>\n <ng-template #body let-rowObject>\n @if (columnTemplates) {\n <tr>\n @if (selectionChangedObserved) {\n <td>\n @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n <p-checkbox\n [(ngModel)]=\"checked\"\n [binary]=\"true\"\n [disabled]=\"true\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\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}\"\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]=\"\n _cell ? _cell: columnTemplates[column.id]\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\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 <ng-template #emptymessage>\n <tr>\n <!-- If allowSelectAll is set to true, an additional column for checkbox selection is added and\n the colSpan needs to be increased by one so that the row is rendered the whole width of the table. -->\n <td\n [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0) +\n (allowSelectAll ? 1 : 0)\"\n >\n {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n </td>\n </tr>\n </ng-template>\n</p-table>\n} }\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", 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}\n"] }]
|
|
3197
3197
|
}], ctorParameters: () => [], propDecorators: { rows: [{
|
|
@@ -3709,10 +3709,10 @@ class DataViewComponent {
|
|
|
3709
3709
|
this.pageSize = event;
|
|
3710
3710
|
this.pageSizeChanged.emit(event);
|
|
3711
3711
|
}
|
|
3712
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3713
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DataViewComponent, isStandalone: false, selector: "ocx-data-view", inputs: { deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", data: "data", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", layout: "layout", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortField: "sortField", sortDirection: "sortDirection", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", page: "page", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", selectedRows: "selectedRows", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", paginator: "paginator", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", stringTableCellTemplate: "stringTableCellTemplate", numberTableCellTemplate: "numberTableCellTemplate", dateTableCellTemplate: "dateTableCellTemplate", tableCellTemplate: "tableCellTemplate", translationKeyTableCellTemplate: "translationKeyTableCellTemplate", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", gridItemTemplate: "gridItemTemplate", listItemTemplate: "listItemTemplate", relativeDateTableCellTemplate: "relativeDateTableCellTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", tableFilterCellTemplate: "tableFilterCellTemplate", dateTableFilterCellTemplate: "dateTableFilterCellTemplate", relativeDateTableFilterCellTemplate: "relativeDateTableFilterCellTemplate", translationKeyTableFilterCellTemplate: "translationKeyTableFilterCellTemplate", stringTableFilterCellTemplate: "stringTableFilterCellTemplate", numberTableFilterCellTemplate: "numberTableFilterCellTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], queries: [{ propertyName: "stringTableCellChildTemplate", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCellChildTemplate", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "dateTableCellChildTemplate", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableCellChildTemplate", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "translationKeyTableCellChildTemplate", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "relativeDateTableCellChildTemplate", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "tableFilterCellChildTemplate", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCellChildTemplate", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCellChildTemplate", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCellChildTemplate", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCellChildTemplate", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listGrid", first: true, predicate: DataListGridComponent, descendants: true }, { propertyName: "dataTable", first: true, predicate: DataTableComponent, descendants: true }], ngImport: i0, template: "@if (layout !== 'table') {\n<div>\n <ocx-data-list-grid\n #ocxdatalistgrid\n [name]=\"name\"\n [data]=\"data\"\n [columns]=\"columns\"\n [filters]=\"filters\"\n [sortDirection]=\"sortDirection\"\n [sortField]=\"sortField\"\n [sortStates]=\"sortStates\"\n [clientSideFiltering]=\"clientSideFiltering\"\n [clientSideSorting]=\"clientSideSorting\"\n [titleLineId]=\"titleLineId\"\n [subtitleLineIds]=\"subtitleLineIds\"\n [clientSideSorting]=\"true\"\n [pageSizes]=\"pageSizes\"\n [pageSize]=\"pageSize\"\n [paginator]=\"listGridPaginator\"\n [page]=\"page\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n [emptyResultsMessage]=\"emptyResultsMessage\"\n [layout]=\"layout\"\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 [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n [listItemTemplate]=\"_listItem ? listItem : undefined\"\n [listValueTemplate]=\"_listValue ? listValue : undefined\"\n [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n [gridItemTemplate]=\"_gridItem ? gridItem : undefined\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [parentTemplates]=\"templatesForChildren$ | async\"\n >\n </ocx-data-list-grid>\n <ng-template #listItemSubtitleLines let-item>\n @if (_listItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #gridItemSubtitleLines let-item>\n @if (_gridItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #gridItem let-item>\n @if (_gridItem) {\n <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n >\n <ng-template #listItem let-item>\n @if (_listItem) {\n <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n >\n <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_listValue) {\n <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_translationKeyListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_relativeDateListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateListValue) {\n <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n</div>\n} @if (layout === 'table') {\n<div>\n <ocx-data-table\n #ocxdatatable\n [rows]=\"data\"\n [columns]=\"columns\"\n [filters]=\"filters\"\n [sortDirection]=\"sortDirection\"\n [sortColumn]=\"sortField\"\n [sortStates]=\"sortStates\"\n [clientSideFiltering]=\"clientSideFiltering\"\n [clientSideSorting]=\"clientSideSorting\"\n [pageSizes]=\"pageSizes\"\n [pageSize]=\"pageSize\"\n [paginator]=\"tablePaginator\"\n [page]=\"page\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n [selectedRows]=\"selectedRows\"\n [frozenActionColumn]=\"frozenActionColumn\"\n [actionColumnPosition]=\"actionColumnPosition\"\n [emptyResultsMessage]=\"emptyResultsMessage\"\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 [stringCellTemplate]=\"_stringTableCell ? stringCell : undefined\"\n [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n [cellTemplate]=\"_tableCell ? cell : undefined\"\n [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [currentPageShowingKey]=\"currentPageShowingKey\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n [parentTemplates]=\"templatesForChildren$ | async\"\n [allowSelectAll]=\"tableAllowSelectAll\"\n [selectionEnabledField]=\"tableSelectionEnabledField\"\n >\n </ocx-data-table>\n <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_numberTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateTableCell) {\n <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_relativeDateTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableCell) {\n <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_translationKeyTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_stringTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_dateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_numberTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_relativeDateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_translationKeyTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataListGridComponent, selector: "ocx-data-list-grid", inputs: ["titleLineId", "subtitleLineIds", "clientSideSorting", "clientSideFiltering", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "fallbackImage", "layout", "viewPermission", "editPermission", "deletePermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "viewMenuItemKey", "editMenuItemKey", "deleteMenuItemKey", "paginator", "page", "columns", "name", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "data", "filters", "sortDirection", "sortField", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "listItemTemplate", "gridItemTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "additionalActions", "parentTemplates"], outputs: ["viewItem", "editItem", "deleteItem", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { 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", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
3712
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3713
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DataViewComponent, isStandalone: false, selector: "ocx-data-view", inputs: { deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", data: "data", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", layout: "layout", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortField: "sortField", sortDirection: "sortDirection", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", page: "page", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", selectedRows: "selectedRows", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", paginator: "paginator", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", stringTableCellTemplate: "stringTableCellTemplate", numberTableCellTemplate: "numberTableCellTemplate", dateTableCellTemplate: "dateTableCellTemplate", tableCellTemplate: "tableCellTemplate", translationKeyTableCellTemplate: "translationKeyTableCellTemplate", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", gridItemTemplate: "gridItemTemplate", listItemTemplate: "listItemTemplate", relativeDateTableCellTemplate: "relativeDateTableCellTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", tableFilterCellTemplate: "tableFilterCellTemplate", dateTableFilterCellTemplate: "dateTableFilterCellTemplate", relativeDateTableFilterCellTemplate: "relativeDateTableFilterCellTemplate", translationKeyTableFilterCellTemplate: "translationKeyTableFilterCellTemplate", stringTableFilterCellTemplate: "stringTableFilterCellTemplate", numberTableFilterCellTemplate: "numberTableFilterCellTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], queries: [{ propertyName: "stringTableCellChildTemplate", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCellChildTemplate", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "dateTableCellChildTemplate", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableCellChildTemplate", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "translationKeyTableCellChildTemplate", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "relativeDateTableCellChildTemplate", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "tableFilterCellChildTemplate", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCellChildTemplate", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCellChildTemplate", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCellChildTemplate", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCellChildTemplate", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listGrid", first: true, predicate: DataListGridComponent, descendants: true }, { propertyName: "dataTable", first: true, predicate: DataTableComponent, descendants: true }], ngImport: i0, template: "@if (layout !== 'table') {\n<div>\n <ocx-data-list-grid\n #ocxdatalistgrid\n [name]=\"name\"\n [data]=\"data\"\n [columns]=\"columns\"\n [filters]=\"filters\"\n [sortDirection]=\"sortDirection\"\n [sortField]=\"sortField\"\n [sortStates]=\"sortStates\"\n [clientSideFiltering]=\"clientSideFiltering\"\n [clientSideSorting]=\"clientSideSorting\"\n [titleLineId]=\"titleLineId\"\n [subtitleLineIds]=\"subtitleLineIds\"\n [clientSideSorting]=\"true\"\n [pageSizes]=\"pageSizes\"\n [pageSize]=\"pageSize\"\n [paginator]=\"listGridPaginator\"\n [page]=\"page\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n [emptyResultsMessage]=\"emptyResultsMessage\"\n [layout]=\"layout\"\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 [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n [listItemTemplate]=\"_listItem ? listItem : undefined\"\n [listValueTemplate]=\"_listValue ? listValue : undefined\"\n [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n [gridItemTemplate]=\"_gridItem ? gridItem : undefined\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [parentTemplates]=\"templatesForChildren$ | async\"\n >\n </ocx-data-list-grid>\n <ng-template #listItemSubtitleLines let-item>\n @if (_listItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #gridItemSubtitleLines let-item>\n @if (_gridItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #gridItem let-item>\n @if (_gridItem) {\n <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n >\n <ng-template #listItem let-item>\n @if (_listItem) {\n <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n >\n <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_listValue) {\n <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_translationKeyListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_relativeDateListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateListValue) {\n <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n</div>\n} @if (layout === 'table') {\n<div>\n <ocx-data-table\n #ocxdatatable\n [rows]=\"data\"\n [columns]=\"columns\"\n [filters]=\"filters\"\n [sortDirection]=\"sortDirection\"\n [sortColumn]=\"sortField\"\n [sortStates]=\"sortStates\"\n [clientSideFiltering]=\"clientSideFiltering\"\n [clientSideSorting]=\"clientSideSorting\"\n [pageSizes]=\"pageSizes\"\n [pageSize]=\"pageSize\"\n [paginator]=\"tablePaginator\"\n [page]=\"page\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n [selectedRows]=\"selectedRows\"\n [frozenActionColumn]=\"frozenActionColumn\"\n [actionColumnPosition]=\"actionColumnPosition\"\n [emptyResultsMessage]=\"emptyResultsMessage\"\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 [stringCellTemplate]=\"_stringTableCell ? stringCell : undefined\"\n [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n [cellTemplate]=\"_tableCell ? cell : undefined\"\n [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [currentPageShowingKey]=\"currentPageShowingKey\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n [parentTemplates]=\"templatesForChildren$ | async\"\n [allowSelectAll]=\"tableAllowSelectAll\"\n [selectionEnabledField]=\"tableSelectionEnabledField\"\n >\n </ocx-data-table>\n <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_numberTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateTableCell) {\n <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_relativeDateTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableCell) {\n <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_translationKeyTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_stringTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_dateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_numberTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_relativeDateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_translationKeyTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataListGridComponent, selector: "ocx-data-list-grid", inputs: ["titleLineId", "subtitleLineIds", "clientSideSorting", "clientSideFiltering", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "fallbackImage", "layout", "viewPermission", "editPermission", "deletePermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "viewMenuItemKey", "editMenuItemKey", "deleteMenuItemKey", "paginator", "page", "columns", "name", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "data", "filters", "sortDirection", "sortField", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "listItemTemplate", "gridItemTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "additionalActions", "parentTemplates"], outputs: ["viewItem", "editItem", "deleteItem", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { 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", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
3714
3714
|
}
|
|
3715
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3715
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DataViewComponent, decorators: [{
|
|
3716
3716
|
type: Component,
|
|
3717
3717
|
args: [{ standalone: false, selector: 'ocx-data-view', providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], template: "@if (layout !== 'table') {\n<div>\n <ocx-data-list-grid\n #ocxdatalistgrid\n [name]=\"name\"\n [data]=\"data\"\n [columns]=\"columns\"\n [filters]=\"filters\"\n [sortDirection]=\"sortDirection\"\n [sortField]=\"sortField\"\n [sortStates]=\"sortStates\"\n [clientSideFiltering]=\"clientSideFiltering\"\n [clientSideSorting]=\"clientSideSorting\"\n [titleLineId]=\"titleLineId\"\n [subtitleLineIds]=\"subtitleLineIds\"\n [clientSideSorting]=\"true\"\n [pageSizes]=\"pageSizes\"\n [pageSize]=\"pageSize\"\n [paginator]=\"listGridPaginator\"\n [page]=\"page\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n [emptyResultsMessage]=\"emptyResultsMessage\"\n [layout]=\"layout\"\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 [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n [listItemTemplate]=\"_listItem ? listItem : undefined\"\n [listValueTemplate]=\"_listValue ? listValue : undefined\"\n [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n [gridItemTemplate]=\"_gridItem ? gridItem : undefined\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [parentTemplates]=\"templatesForChildren$ | async\"\n >\n </ocx-data-list-grid>\n <ng-template #listItemSubtitleLines let-item>\n @if (_listItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #gridItemSubtitleLines let-item>\n @if (_gridItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #gridItem let-item>\n @if (_gridItem) {\n <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n >\n <ng-template #listItem let-item>\n @if (_listItem) {\n <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n >\n <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_listValue) {\n <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_translationKeyListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_relativeDateListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateListValue) {\n <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n</div>\n} @if (layout === 'table') {\n<div>\n <ocx-data-table\n #ocxdatatable\n [rows]=\"data\"\n [columns]=\"columns\"\n [filters]=\"filters\"\n [sortDirection]=\"sortDirection\"\n [sortColumn]=\"sortField\"\n [sortStates]=\"sortStates\"\n [clientSideFiltering]=\"clientSideFiltering\"\n [clientSideSorting]=\"clientSideSorting\"\n [pageSizes]=\"pageSizes\"\n [pageSize]=\"pageSize\"\n [paginator]=\"tablePaginator\"\n [page]=\"page\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n [selectedRows]=\"selectedRows\"\n [frozenActionColumn]=\"frozenActionColumn\"\n [actionColumnPosition]=\"actionColumnPosition\"\n [emptyResultsMessage]=\"emptyResultsMessage\"\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 [stringCellTemplate]=\"_stringTableCell ? stringCell : undefined\"\n [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n [cellTemplate]=\"_tableCell ? cell : undefined\"\n [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [currentPageShowingKey]=\"currentPageShowingKey\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n [parentTemplates]=\"templatesForChildren$ | async\"\n [allowSelectAll]=\"tableAllowSelectAll\"\n [selectionEnabledField]=\"tableSelectionEnabledField\"\n >\n </ocx-data-table>\n <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_numberTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateTableCell) {\n <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_relativeDateTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableCell) {\n <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_translationKeyTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_stringTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_dateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_numberTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_relativeDateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_translationKeyTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n</div>\n}\n" }]
|
|
3718
3718
|
}], propDecorators: { listGrid: [{
|
|
@@ -4093,10 +4093,10 @@ class DiagramComponent {
|
|
|
4093
4093
|
activeDiagramType: event.value.layout,
|
|
4094
4094
|
});
|
|
4095
4095
|
}
|
|
4096
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4097
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
4096
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4097
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DiagramComponent, isStandalone: false, selector: "ocx-diagram", inputs: { data: "data", sumKey: "sumKey", fillMissingColors: "fillMissingColors", diagramType: "diagramType", supportedDiagramTypes: "supportedDiagramTypes" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged", componentStateChanged: "componentStateChanged" }, usesOnChanges: true, ngImport: i0, template: "@if (this.data) {\n @if (shownDiagramTypes.length > 1) {\n <div class=\"flex justify-content-center pb-2\">\n <p-selectbutton\n [options]=\"shownDiagramTypes\"\n [(ngModel)]=\"selectedDiagramType\"\n optionLabel=\"id\"\n (onChange)=\"onDiagramTypeChanged($event)\"\n name=\"diagram-type-select-button\"\n [allowEmpty]=\"false\"\n >\n <ng-template #item let-item>\n <i\n [class]=\"item.icon\"\n [pTooltip]=\"item.tooltipKey | translate\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n ></i>\n <label style=\"display: none\" id=\"{{item.id}}\"> {{item.label ? item.label : item.labelKey | translate}} </label>\n </ng-template>\n </p-selectbutton>\n </div>\n }\n <div class=\"w-full flex justify-content-center\">\n <p-chart\n id=\"diagram\"\n [type]=\"chartType\"\n [data]=\"chartData\"\n [responsive]=\"false\"\n [options]=\"chartOptions\"\n (onDataSelect)=\"dataClicked($event)\"\n [ariaLabel]=\"(data ? 'OCX_DIAGRAM.ARIA_LABEL' : 'OCX_DIAGRAM.EMPTY_ARIA_LABEL') | translate: {total: generateTotal(data), valueString: generateDiagramValueString(data)}\"\n ></p-chart>\n </div>\n <div class=\"w-full flex justify-content-center mt-2 sumKey\">\n <p class=\"text-md font-medium text-700\">\n <span name=\"sumLabel\"> {{ sumKey | translate }}</span> : <span name=\"amountOfData\">{{ amountOfData}}</span>\n </p>\n </div>\n}\n\n@if (!this.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", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"], dependencies: [{ kind: "component", type: i1$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: i2$4.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "ariaLabel", "ariaLabelledBy", "data", "options"], outputs: ["onDataSelect"] }, { kind: "component", type: i3$3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3.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: i8.TranslatePipe, name: "translate" }] }); }
|
|
4098
4098
|
}
|
|
4099
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4099
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DiagramComponent, decorators: [{
|
|
4100
4100
|
type: Component,
|
|
4101
4101
|
args: [{ standalone: false, selector: 'ocx-diagram', template: "@if (this.data) {\n @if (shownDiagramTypes.length > 1) {\n <div class=\"flex justify-content-center pb-2\">\n <p-selectbutton\n [options]=\"shownDiagramTypes\"\n [(ngModel)]=\"selectedDiagramType\"\n optionLabel=\"id\"\n (onChange)=\"onDiagramTypeChanged($event)\"\n name=\"diagram-type-select-button\"\n [allowEmpty]=\"false\"\n >\n <ng-template #item let-item>\n <i\n [class]=\"item.icon\"\n [pTooltip]=\"item.tooltipKey | translate\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n ></i>\n <label style=\"display: none\" id=\"{{item.id}}\"> {{item.label ? item.label : item.labelKey | translate}} </label>\n </ng-template>\n </p-selectbutton>\n </div>\n }\n <div class=\"w-full flex justify-content-center\">\n <p-chart\n id=\"diagram\"\n [type]=\"chartType\"\n [data]=\"chartData\"\n [responsive]=\"false\"\n [options]=\"chartOptions\"\n (onDataSelect)=\"dataClicked($event)\"\n [ariaLabel]=\"(data ? 'OCX_DIAGRAM.ARIA_LABEL' : 'OCX_DIAGRAM.EMPTY_ARIA_LABEL') | translate: {total: generateTotal(data), valueString: generateDiagramValueString(data)}\"\n ></p-chart>\n </div>\n <div class=\"w-full flex justify-content-center mt-2 sumKey\">\n <p class=\"text-md font-medium text-700\">\n <span name=\"sumLabel\"> {{ sumKey | translate }}</span> : <span name=\"amountOfData\">{{ amountOfData}}</span>\n </p>\n </div>\n}\n\n@if (!this.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", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"] }]
|
|
4102
4102
|
}], propDecorators: { data: [{
|
|
@@ -4328,10 +4328,10 @@ class FilterViewComponent {
|
|
|
4328
4328
|
[row['valueColumnId']]: row['value'],
|
|
4329
4329
|
};
|
|
4330
4330
|
}
|
|
4331
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4332
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FilterViewComponent, isStandalone: false, selector: "ocx-filter-view", inputs: { filters: "filters", columns: "columns", displayMode: "displayMode", selectDisplayedChips: "selectDisplayedChips", chipStyleClass: "chipStyleClass", tableStyle: "tableStyle", panelStyle: "panelStyle", templates: "templates" }, outputs: { filtered: "filtered", componentStateChanged: "componentStateChanged" }, viewQueries: [{ propertyName: "panel", first: true, predicate: Popover, descendants: true }, { propertyName: "manageButton", first: true, predicate: ["manageButton"], descendants: true }, { propertyName: "defaultTemplates", predicate: PrimeTemplate, descendants: true }], ngImport: i0, template: "@if (columns$ | async; as columns) { @if (filters$ | async; 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 pTooltip=\"{{ '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 (_fitlerViewNoSelection) {\n <ng-container [ngTemplateOutlet]=\"_fitlerViewNoSelection\"> </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 { @if (columns$ | async; as columns) {\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 #manageButton\n id=\"ocxFilterViewManage\"\n (onClick)=\"showPanel($event)\"\n icon=\"pi pi-sliders-h\"\n label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n pTooltip=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate }}\"\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 pTooltip=\"{{ '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$ | async) ?? []\"\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)}\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", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], 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"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i6.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { 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", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { 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" }] }); }
|
|
4331
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4332
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FilterViewComponent, isStandalone: false, selector: "ocx-filter-view", inputs: { filters: "filters", columns: "columns", displayMode: "displayMode", selectDisplayedChips: "selectDisplayedChips", chipStyleClass: "chipStyleClass", tableStyle: "tableStyle", panelStyle: "panelStyle", templates: "templates" }, outputs: { filtered: "filtered", componentStateChanged: "componentStateChanged" }, viewQueries: [{ propertyName: "panel", first: true, predicate: Popover, descendants: true }, { propertyName: "manageButton", first: true, predicate: ["manageButton"], descendants: true }, { propertyName: "defaultTemplates", predicate: PrimeTemplate, descendants: true }], ngImport: i0, template: "@if (columns$ | async; as columns) { @if (filters$ | async; 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 pTooltip=\"{{ '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 (_fitlerViewNoSelection) {\n <ng-container [ngTemplateOutlet]=\"_fitlerViewNoSelection\"> </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 { @if (columns$ | async; as columns) {\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 #manageButton\n id=\"ocxFilterViewManage\"\n (onClick)=\"showPanel($event)\"\n icon=\"pi pi-sliders-h\"\n label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n pTooltip=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate }}\"\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 pTooltip=\"{{ '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$ | async) ?? []\"\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)}\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", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], 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"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i6.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { 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", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { 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" }] }); }
|
|
4333
4333
|
}
|
|
4334
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4334
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FilterViewComponent, decorators: [{
|
|
4335
4335
|
type: Component,
|
|
4336
4336
|
args: [{ standalone: false, selector: 'ocx-filter-view', template: "@if (columns$ | async; as columns) { @if (filters$ | async; 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 pTooltip=\"{{ '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 (_fitlerViewNoSelection) {\n <ng-container [ngTemplateOutlet]=\"_fitlerViewNoSelection\"> </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 { @if (columns$ | async; as columns) {\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 #manageButton\n id=\"ocxFilterViewManage\"\n (onClick)=\"showPanel($event)\"\n icon=\"pi pi-sliders-h\"\n label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n pTooltip=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate }}\"\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 pTooltip=\"{{ '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$ | async) ?? []\"\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)}\n"] }]
|
|
4337
4337
|
}], propDecorators: { filters: [{
|
|
@@ -4446,10 +4446,10 @@ class GroupByCountDiagramComponent {
|
|
|
4446
4446
|
activeDiagramType: newDiagramType,
|
|
4447
4447
|
});
|
|
4448
4448
|
}
|
|
4449
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4450
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
4449
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GroupByCountDiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4450
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: GroupByCountDiagramComponent, isStandalone: false, selector: "ocx-group-by-count-diagram", inputs: { sumKey: "sumKey", diagramType: "diagramType", fillMissingColors: "fillMissingColors", supportedDiagramTypes: "supportedDiagramTypes", data: "data", columnType: "columnType", columnField: "columnField", column: "column", colors: "colors" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<ocx-diagram\n [data]=\"(diagramData$ | async) || []\"\n [fillMissingColors]=\"fillMissingColors\"\n [sumKey]=\"sumKey\"\n [diagramType]=\"diagramType\"\n (onDataSelect)=\"dataClicked($event)\"\n [supportedDiagramTypes]=\"supportedDiagramTypes\"\n (diagramTypeChanged)=\"onDiagramTypeChanged($event)\"\n></ocx-diagram>\n", dependencies: [{ kind: "component", type: DiagramComponent, selector: "ocx-diagram", inputs: ["data", "sumKey", "fillMissingColors", "diagramType", "supportedDiagramTypes"], outputs: ["dataSelected", "diagramTypeChanged", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
4451
4451
|
}
|
|
4452
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4452
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GroupByCountDiagramComponent, decorators: [{
|
|
4453
4453
|
type: Component,
|
|
4454
4454
|
args: [{ standalone: false, selector: 'ocx-group-by-count-diagram', template: "<ocx-diagram\n [data]=\"(diagramData$ | async) || []\"\n [fillMissingColors]=\"fillMissingColors\"\n [sumKey]=\"sumKey\"\n [diagramType]=\"diagramType\"\n (onDataSelect)=\"dataClicked($event)\"\n [supportedDiagramTypes]=\"supportedDiagramTypes\"\n (diagramTypeChanged)=\"onDiagramTypeChanged($event)\"\n></ocx-diagram>\n" }]
|
|
4455
4455
|
}], propDecorators: { sumKey: [{
|
|
@@ -4899,10 +4899,10 @@ class InteractiveDataViewComponent {
|
|
|
4899
4899
|
.map((key) => this.columns.find((c) => c.id === key))
|
|
4900
4900
|
.filter((d) => d) ?? []);
|
|
4901
4901
|
}
|
|
4902
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4903
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: InteractiveDataViewComponent, isStandalone: false, selector: "ocx-interactive-data-view", inputs: { searchConfigPermission: "searchConfigPermission", deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", supportedViewLayouts: "supportedViewLayouts", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", totalRecordsOnServer: "totalRecordsOnServer", layout: "layout", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey", groupSelectionNoGroupSelectedKey: "groupSelectionNoGroupSelectedKey", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", additionalActions: "additionalActions", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", disableFilterView: "disableFilterView", filterViewDisplayMode: "filterViewDisplayMode", filterViewChipStyleClass: "filterViewChipStyleClass", filterViewTableStyle: "filterViewTableStyle", filterViewPanelStyle: "filterViewPanelStyle", selectDisplayedChips: "selectDisplayedChips", page: "page", selectedRows: "selectedRows", displayedColumnKeys: "displayedColumnKeys", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", headerStyleClass: "headerStyleClass", contentStyleClass: "contentStyleClass", paginator: "paginator", data: "data" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnKeysChange: "displayedColumnKeysChange", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], queries: [{ propertyName: "tableCell", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "dateTableCell", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "relativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "translationKeyTableCell", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLines", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLines", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "stringTableCell", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCell", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "gridItem", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItem", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "topCenter", first: true, predicate: ["topCenter"], descendants: true }, { propertyName: "listValue", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValue", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValue", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValue", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "stringListValue", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValue", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "tableFilterCell", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCell", first: true, predicate: ["dateTableFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCell", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCell", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCell", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCell", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "dataView", first: true, predicate: DataViewComponent, descendants: 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$ | async\"\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) {\n <div>\n <ng-container [ngTemplateOutlet]=\"topCenter\"> </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$ | async) ?? []\"\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$ | async) { @if (displayedColumnKeys$ | async; as displayedColumnKeys)\n {\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: groupSelectionChangedSlotEmitter }\"\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$ | async) ?? []\"\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$ | async) ?? []\"\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]=\"primeNgStringTableCell ?? _stringTableCell\"\n [numberTableCellTemplate]=\"primeNgNumberTableCell ?? _numberTableCell\"\n [dateTableCellTemplate]=\"primeNgDateTableCell ?? _dateTableCell\"\n [relativeDateTableCellTemplate]=\"primeNgRelativeDateTableCell ?? _relativeDateTableCell\"\n [tableCellTemplate]=\"primeNgTableCell ?? _tableCell\"\n [translationKeyTableCellTemplate]=\"primeNgTranslationKeyTableCell ?? _translationKeyTableCell\"\n [gridItemSubtitleLinesTemplate]=\"primeNgGridItemSubtitleLines ?? _gridItemSubtitleLines\"\n [listItemSubtitleLinesTemplate]=\"primeNgListItemSubtitleLines ?? _listItemSubtitleLines\"\n [listItemTemplate]=\"primeNgListItem ?? _listItem\"\n [listValueTemplate]=\"primeNgListValue ?? _listValue\"\n [translationKeyListValueTemplate]=\"primeNgTranslationKeyListValue ?? _translationKeyListValue\"\n [numberListValueTemplate]=\"primeNgNumberListValue ?? _numberListValue\"\n [relativeDateListValueTemplate]=\"primeNgRelativeDateListValue ?? _relativeDateListValue\"\n [stringListValueTemplate]=\"primeNgStringListValue ?? _stringListValue\"\n [dateListValueTemplate]=\"primeNgDateListValue ?? _dateListValue\"\n [gridItemTemplate]=\"primeNgGridItem ?? _gridItem\"\n [tableFilterCellTemplate]=\"primeNgTableFilterCell ?? _tableFilterCell\"\n [dateTableFilterCellTemplate]=\"primeNgDateTableFilterCell ?? _dateTableFilterCell\"\n [numberTableFilterCellTemplate]=\"primeNgNumberTableFilterCell ?? _numberTableFilterCell\"\n [stringTableFilterCellTemplate]=\"primeNgStringTableFilterCell ?? _stringTableFilterCell\"\n [relativeDateTableFilterCellTemplate]=\"primeNgRelativeDateTableFilterCell ?? _relativeDateTableFilterCell\"\n [translationKeyTableFilterCellTemplate]=\"primeNgTranslationKeyTableFilterCell ?? _translationKeyTableFilterCell\"\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$ | async\"\n [tableAllowSelectAll]=\"tableAllowSelectAll\"\n [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\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\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringTableCell) {\n <ng-container [ngTemplateOutlet]=\"_stringTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #numberTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberTableCell) {\n <ng-container [ngTemplateOutlet]=\"_numberTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateTableCell) {\n <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_relativeDateTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableCell) {\n <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_translationKeyTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #gridItemSubtitleLines let-item>\n @if (_gridItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n @if (_listItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #gridItem let-item>\n @if (_gridItem) {\n <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n>\n<ng-template #listItem let-item>\n @if (_listItem) {\n <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_listValue) {\n <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_translationKeyListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberListValue) {\n <ng-container [ngTemplateOutlet]=\"_numberListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_relativeDateListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringListValue) {\n <ng-container [ngTemplateOutlet]=\"_stringListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateListValue) {\n <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_stringTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_numberTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_dateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_relativeDateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_translationKeyTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\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", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i5$1.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "slotStyles", "slotClasses", "inputs", "outputs"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["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: ["columnSelectionChanged", "actionColumnConfigChanged", "componentStateChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["dataViewLayoutChange", "componentStateChanged"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortChange", "sortDirectionChange", "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", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "paginator", "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", "additionalActions", "parentTemplates"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "component", type: FilterViewComponent, selector: "ocx-filter-view", inputs: ["filters", "columns", "displayMode", "selectDisplayedChips", "chipStyleClass", "tableStyle", "panelStyle", "templates"], outputs: ["filtered", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
4902
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InteractiveDataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4903
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: InteractiveDataViewComponent, isStandalone: false, selector: "ocx-interactive-data-view", inputs: { searchConfigPermission: "searchConfigPermission", deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", supportedViewLayouts: "supportedViewLayouts", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", totalRecordsOnServer: "totalRecordsOnServer", layout: "layout", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey", groupSelectionNoGroupSelectedKey: "groupSelectionNoGroupSelectedKey", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", additionalActions: "additionalActions", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", disableFilterView: "disableFilterView", filterViewDisplayMode: "filterViewDisplayMode", filterViewChipStyleClass: "filterViewChipStyleClass", filterViewTableStyle: "filterViewTableStyle", filterViewPanelStyle: "filterViewPanelStyle", selectDisplayedChips: "selectDisplayedChips", page: "page", selectedRows: "selectedRows", displayedColumnKeys: "displayedColumnKeys", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", headerStyleClass: "headerStyleClass", contentStyleClass: "contentStyleClass", paginator: "paginator", data: "data" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnKeysChange: "displayedColumnKeysChange", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], queries: [{ propertyName: "tableCell", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "dateTableCell", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "relativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "translationKeyTableCell", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLines", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLines", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "stringTableCell", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCell", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "gridItem", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItem", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "topCenter", first: true, predicate: ["topCenter"], descendants: true }, { propertyName: "listValue", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValue", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValue", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValue", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "stringListValue", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValue", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "tableFilterCell", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCell", first: true, predicate: ["dateTableFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCell", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCell", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCell", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCell", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "dataView", first: true, predicate: DataViewComponent, descendants: 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$ | async\"\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) {\n <div>\n <ng-container [ngTemplateOutlet]=\"topCenter\"> </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$ | async) ?? []\"\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$ | async) { @if (displayedColumnKeys$ | async; as displayedColumnKeys)\n {\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: groupSelectionChangedSlotEmitter }\"\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$ | async) ?? []\"\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$ | async) ?? []\"\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]=\"primeNgStringTableCell ?? _stringTableCell\"\n [numberTableCellTemplate]=\"primeNgNumberTableCell ?? _numberTableCell\"\n [dateTableCellTemplate]=\"primeNgDateTableCell ?? _dateTableCell\"\n [relativeDateTableCellTemplate]=\"primeNgRelativeDateTableCell ?? _relativeDateTableCell\"\n [tableCellTemplate]=\"primeNgTableCell ?? _tableCell\"\n [translationKeyTableCellTemplate]=\"primeNgTranslationKeyTableCell ?? _translationKeyTableCell\"\n [gridItemSubtitleLinesTemplate]=\"primeNgGridItemSubtitleLines ?? _gridItemSubtitleLines\"\n [listItemSubtitleLinesTemplate]=\"primeNgListItemSubtitleLines ?? _listItemSubtitleLines\"\n [listItemTemplate]=\"primeNgListItem ?? _listItem\"\n [listValueTemplate]=\"primeNgListValue ?? _listValue\"\n [translationKeyListValueTemplate]=\"primeNgTranslationKeyListValue ?? _translationKeyListValue\"\n [numberListValueTemplate]=\"primeNgNumberListValue ?? _numberListValue\"\n [relativeDateListValueTemplate]=\"primeNgRelativeDateListValue ?? _relativeDateListValue\"\n [stringListValueTemplate]=\"primeNgStringListValue ?? _stringListValue\"\n [dateListValueTemplate]=\"primeNgDateListValue ?? _dateListValue\"\n [gridItemTemplate]=\"primeNgGridItem ?? _gridItem\"\n [tableFilterCellTemplate]=\"primeNgTableFilterCell ?? _tableFilterCell\"\n [dateTableFilterCellTemplate]=\"primeNgDateTableFilterCell ?? _dateTableFilterCell\"\n [numberTableFilterCellTemplate]=\"primeNgNumberTableFilterCell ?? _numberTableFilterCell\"\n [stringTableFilterCellTemplate]=\"primeNgStringTableFilterCell ?? _stringTableFilterCell\"\n [relativeDateTableFilterCellTemplate]=\"primeNgRelativeDateTableFilterCell ?? _relativeDateTableFilterCell\"\n [translationKeyTableFilterCellTemplate]=\"primeNgTranslationKeyTableFilterCell ?? _translationKeyTableFilterCell\"\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$ | async\"\n [tableAllowSelectAll]=\"tableAllowSelectAll\"\n [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\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\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringTableCell) {\n <ng-container [ngTemplateOutlet]=\"_stringTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #numberTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberTableCell) {\n <ng-container [ngTemplateOutlet]=\"_numberTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateTableCell) {\n <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_relativeDateTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableCell) {\n <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_translationKeyTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #gridItemSubtitleLines let-item>\n @if (_gridItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n @if (_listItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #gridItem let-item>\n @if (_gridItem) {\n <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n>\n<ng-template #listItem let-item>\n @if (_listItem) {\n <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_listValue) {\n <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_translationKeyListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberListValue) {\n <ng-container [ngTemplateOutlet]=\"_numberListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_relativeDateListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringListValue) {\n <ng-container [ngTemplateOutlet]=\"_stringListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateListValue) {\n <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_stringTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_numberTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_dateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_relativeDateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_translationKeyTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\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", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i5$1.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "slotStyles", "slotClasses", "inputs", "outputs"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["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: ["columnSelectionChanged", "actionColumnConfigChanged", "componentStateChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["dataViewLayoutChange", "componentStateChanged"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortChange", "sortDirectionChange", "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", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "paginator", "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", "additionalActions", "parentTemplates"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "component", type: FilterViewComponent, selector: "ocx-filter-view", inputs: ["filters", "columns", "displayMode", "selectDisplayedChips", "chipStyleClass", "tableStyle", "panelStyle", "templates"], outputs: ["filtered", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
4904
4904
|
}
|
|
4905
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4905
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InteractiveDataViewComponent, decorators: [{
|
|
4906
4906
|
type: Component,
|
|
4907
4907
|
args: [{ standalone: false, selector: 'ocx-interactive-data-view', providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], 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$ | async\"\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) {\n <div>\n <ng-container [ngTemplateOutlet]=\"topCenter\"> </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$ | async) ?? []\"\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$ | async) { @if (displayedColumnKeys$ | async; as displayedColumnKeys)\n {\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: groupSelectionChangedSlotEmitter }\"\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$ | async) ?? []\"\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$ | async) ?? []\"\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]=\"primeNgStringTableCell ?? _stringTableCell\"\n [numberTableCellTemplate]=\"primeNgNumberTableCell ?? _numberTableCell\"\n [dateTableCellTemplate]=\"primeNgDateTableCell ?? _dateTableCell\"\n [relativeDateTableCellTemplate]=\"primeNgRelativeDateTableCell ?? _relativeDateTableCell\"\n [tableCellTemplate]=\"primeNgTableCell ?? _tableCell\"\n [translationKeyTableCellTemplate]=\"primeNgTranslationKeyTableCell ?? _translationKeyTableCell\"\n [gridItemSubtitleLinesTemplate]=\"primeNgGridItemSubtitleLines ?? _gridItemSubtitleLines\"\n [listItemSubtitleLinesTemplate]=\"primeNgListItemSubtitleLines ?? _listItemSubtitleLines\"\n [listItemTemplate]=\"primeNgListItem ?? _listItem\"\n [listValueTemplate]=\"primeNgListValue ?? _listValue\"\n [translationKeyListValueTemplate]=\"primeNgTranslationKeyListValue ?? _translationKeyListValue\"\n [numberListValueTemplate]=\"primeNgNumberListValue ?? _numberListValue\"\n [relativeDateListValueTemplate]=\"primeNgRelativeDateListValue ?? _relativeDateListValue\"\n [stringListValueTemplate]=\"primeNgStringListValue ?? _stringListValue\"\n [dateListValueTemplate]=\"primeNgDateListValue ?? _dateListValue\"\n [gridItemTemplate]=\"primeNgGridItem ?? _gridItem\"\n [tableFilterCellTemplate]=\"primeNgTableFilterCell ?? _tableFilterCell\"\n [dateTableFilterCellTemplate]=\"primeNgDateTableFilterCell ?? _dateTableFilterCell\"\n [numberTableFilterCellTemplate]=\"primeNgNumberTableFilterCell ?? _numberTableFilterCell\"\n [stringTableFilterCellTemplate]=\"primeNgStringTableFilterCell ?? _stringTableFilterCell\"\n [relativeDateTableFilterCellTemplate]=\"primeNgRelativeDateTableFilterCell ?? _relativeDateTableFilterCell\"\n [translationKeyTableFilterCellTemplate]=\"primeNgTranslationKeyTableFilterCell ?? _translationKeyTableFilterCell\"\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$ | async\"\n [tableAllowSelectAll]=\"tableAllowSelectAll\"\n [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\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\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringTableCell) {\n <ng-container [ngTemplateOutlet]=\"_stringTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #numberTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberTableCell) {\n <ng-container [ngTemplateOutlet]=\"_numberTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateTableCell) {\n <ng-container [ngTemplateOutlet]=\"_dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_relativeDateTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableCell) {\n <ng-container [ngTemplateOutlet]=\"_tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_translationKeyTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #gridItemSubtitleLines let-item>\n @if (_gridItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n @if (_listItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #gridItem let-item>\n @if (_gridItem) {\n <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n>\n<ng-template #listItem let-item>\n @if (_listItem) {\n <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_listValue) {\n <ng-container [ngTemplateOutlet]=\"_listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_translationKeyListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberListValue) {\n <ng-container [ngTemplateOutlet]=\"_numberListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_relativeDateListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringListValue) {\n <ng-container [ngTemplateOutlet]=\"_stringListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateListValue) {\n <ng-container [ngTemplateOutlet]=\"_dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_stringTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_numberTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_dateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_relativeDateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_translationKeyTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n" }]
|
|
4908
4908
|
}], ctorParameters: () => [], propDecorators: { dataView: [{
|
|
@@ -5112,10 +5112,10 @@ class LifecycleComponent {
|
|
|
5112
5112
|
constructor() {
|
|
5113
5113
|
this.steps = [];
|
|
5114
5114
|
}
|
|
5115
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5116
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
5115
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LifecycleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5116
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LifecycleComponent, isStandalone: false, selector: "ocx-lifecycle", inputs: { steps: "steps", activeStepId: "activeStepId" }, ngImport: i0, template: "<p-timeline [value]=\"steps\">\n <ng-template pTemplate=\"marker\" let-step>\n <span class=\"p-timeline-event-marker\" [ngClass]=\"activeStepId && activeStepId === step.id ? 'bg-primary' : ''\"></span>\n </ng-template>\n <ng-template pTemplate=\"content\" let-step>\n <div class=\"pb-4 h-full\">\n <div class=\"card h-full\" [ngClass]=\"activeStepId && activeStepId === step.id ? 'bg-primary' : ''\">\n <p class=\"font-bold text-xl\" [ngClass]=\"step.details ? 'mb-2' : ''\">{{ step.title }}</p>\n @if (step.details) {\n <p [ngClass]=\"activeStepId && activeStepId === step.id ? '' : 'text-color-secondary'\">{{ step.details }}</p>\n }\n </div>\n </div>\n </ng-template>\n</p-timeline>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$5.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }] }); }
|
|
5117
5117
|
}
|
|
5118
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5118
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LifecycleComponent, decorators: [{
|
|
5119
5119
|
type: Component,
|
|
5120
5120
|
args: [{ standalone: false, selector: 'ocx-lifecycle', template: "<p-timeline [value]=\"steps\">\n <ng-template pTemplate=\"marker\" let-step>\n <span class=\"p-timeline-event-marker\" [ngClass]=\"activeStepId && activeStepId === step.id ? 'bg-primary' : ''\"></span>\n </ng-template>\n <ng-template pTemplate=\"content\" let-step>\n <div class=\"pb-4 h-full\">\n <div class=\"card h-full\" [ngClass]=\"activeStepId && activeStepId === step.id ? 'bg-primary' : ''\">\n <p class=\"font-bold text-xl\" [ngClass]=\"step.details ? 'mb-2' : ''\">{{ step.title }}</p>\n @if (step.details) {\n <p [ngClass]=\"activeStepId && activeStepId === step.id ? '' : 'text-color-secondary'\">{{ step.details }}</p>\n }\n </div>\n </div>\n </ng-template>\n</p-timeline>\n" }]
|
|
5121
5121
|
}], propDecorators: { steps: [{
|
|
@@ -5130,10 +5130,10 @@ class DialogMessageContentComponent {
|
|
|
5130
5130
|
this.messageParameters = {};
|
|
5131
5131
|
this.icon = '';
|
|
5132
5132
|
}
|
|
5133
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5134
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
5133
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DialogMessageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5134
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DialogMessageContentComponent, isStandalone: false, selector: "ng-component", inputs: { message: "message", messageParameters: "messageParameters", icon: "icon" }, ngImport: i0, template: "<div class=\"dialogMessageContent\">\n <div>\n @if (icon !== '') {\n <i [class]=\"icon\"></i>\n }\n <span id=\"dialogMessage\">{{message | translate:messageParameters}}</span>\n </div>\n</div>", dependencies: [{ kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
5135
5135
|
}
|
|
5136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DialogMessageContentComponent, decorators: [{
|
|
5137
5137
|
type: Component,
|
|
5138
5138
|
args: [{ standalone: false, template: "<div class=\"dialogMessageContent\">\n <div>\n @if (icon !== '') {\n <i [class]=\"icon\"></i>\n }\n <span id=\"dialogMessage\">{{message | translate:messageParameters}}</span>\n </div>\n</div>" }]
|
|
5139
5139
|
}], propDecorators: { message: [{
|
|
@@ -5262,10 +5262,10 @@ class DialogContentComponent {
|
|
|
5262
5262
|
isDialogCustomButtonDisabledImplemented(component) {
|
|
5263
5263
|
return 'customButtonEnabled' in component;
|
|
5264
5264
|
}
|
|
5265
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5266
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
5265
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5266
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DialogContentComponent, isStandalone: false, selector: "ocx-dialog-content", viewQueries: [{ propertyName: "dialogHost", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"buttonDialogScrollableContent\">\n <ng-container #container></ng-container>\n <ng-content></ng-content>\n</div>\n", styles: [".buttonDialogScrollableContent{overflow:auto;max-height:500px;margin-bottom:20px}\n"] }); }
|
|
5267
5267
|
}
|
|
5268
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5268
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DialogContentComponent, decorators: [{
|
|
5269
5269
|
type: Component,
|
|
5270
5270
|
args: [{ standalone: false, selector: 'ocx-dialog-content', template: "<div class=\"buttonDialogScrollableContent\">\n <ng-container #container></ng-container>\n <ng-content></ng-content>\n</div>\n", styles: [".buttonDialogScrollableContent{overflow:auto;max-height:500px;margin-bottom:20px}\n"] }]
|
|
5271
5271
|
}], propDecorators: { dialogHost: [{
|
|
@@ -5408,10 +5408,10 @@ class DialogFooterComponent {
|
|
|
5408
5408
|
this.leftCustomButtons = dialogData.config.customButtons?.filter((button) => button.alignment === 'left') ?? [];
|
|
5409
5409
|
this.rightCustomButtons = dialogData.config.customButtons?.filter((button) => button.alignment === 'right') ?? [];
|
|
5410
5410
|
}
|
|
5411
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5412
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
5411
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5412
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DialogFooterComponent, isStandalone: false, selector: "ocx-dialog-footer", inputs: { config: "config" }, outputs: { buttonClickedEmitter: "buttonClickedEmitter" }, viewQueries: [{ propertyName: "primaryButton", first: true, predicate: ["primaryButton"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "secondaryButton", first: true, predicate: ["secondaryButton"], descendants: true, read: ViewContainerRef }, { propertyName: "customButtons", predicate: ["customButton"], descendants: 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 }\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 !== undefined ? dialogData.config.secondaryButtonDetails!.icon : ''\"\n (click)=\"secondaryButtonAction()\"\n [label]=\"dialogData.config.secondaryButtonDetails!.key | translate:dialogData.config.secondaryButtonDetails?.parameters\"\n [disabled]=\"secondaryButtonDisabled$ | async\"\n pTooltip=\"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 !== undefined ? dialogData.config.primaryButtonDetails!.icon : ''\"\n (click)=\"primaryButtonAction()\"\n [label]=\"dialogData.config.primaryButtonDetails!.key | translate:dialogData.config.primaryButtonDetails?.parameters\"\n [disabled]=\"primaryButtonDisabled$ | async\"\n pTooltip=\"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 pTooltip=\"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: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
5413
5413
|
}
|
|
5414
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5414
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DialogFooterComponent, decorators: [{
|
|
5415
5415
|
type: Component,
|
|
5416
5416
|
args: [{ standalone: false, selector: 'ocx-dialog-footer', 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 }\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 !== undefined ? dialogData.config.secondaryButtonDetails!.icon : ''\"\n (click)=\"secondaryButtonAction()\"\n [label]=\"dialogData.config.secondaryButtonDetails!.key | translate:dialogData.config.secondaryButtonDetails?.parameters\"\n [disabled]=\"secondaryButtonDisabled$ | async\"\n pTooltip=\"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 !== undefined ? dialogData.config.primaryButtonDetails!.icon : ''\"\n (click)=\"primaryButtonAction()\"\n [label]=\"dialogData.config.primaryButtonDetails!.key | translate:dialogData.config.primaryButtonDetails?.parameters\"\n [disabled]=\"primaryButtonDisabled$ | async\"\n pTooltip=\"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 pTooltip=\"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" }]
|
|
5417
5417
|
}], propDecorators: { config: [{
|
|
@@ -5437,10 +5437,10 @@ class DialogInlineComponent {
|
|
|
5437
5437
|
buttonClicked(event) {
|
|
5438
5438
|
this.resultEmitter.emit(event.button);
|
|
5439
5439
|
}
|
|
5440
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5441
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
5440
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DialogInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5441
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DialogInlineComponent, isStandalone: false, selector: "ocx-dialog-inline", inputs: { config: "config" }, outputs: { resultEmitter: "resultEmitter" }, ngImport: i0, template: "<div>\n <ocx-dialog-content>\n <ng-content></ng-content>\n </ocx-dialog-content>\n <ocx-dialog-footer [config]=\"config\" (buttonClickedEmitter)=\"buttonClicked($event)\"></ocx-dialog-footer>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: DialogFooterComponent, selector: "ocx-dialog-footer", inputs: ["config"], outputs: ["buttonClickedEmitter"] }, { kind: "component", type: DialogContentComponent, selector: "ocx-dialog-content" }] }); }
|
|
5442
5442
|
}
|
|
5443
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5443
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DialogInlineComponent, decorators: [{
|
|
5444
5444
|
type: Component,
|
|
5445
5445
|
args: [{ standalone: false, selector: 'ocx-dialog-inline', template: "<div>\n <ocx-dialog-content>\n <ng-content></ng-content>\n </ocx-dialog-content>\n <ocx-dialog-footer [config]=\"config\" (buttonClickedEmitter)=\"buttonClicked($event)\"></ocx-dialog-footer>\n</div>\n" }]
|
|
5446
5446
|
}], propDecorators: { config: [{
|
|
@@ -5462,10 +5462,10 @@ class GlobalErrorComponent {
|
|
|
5462
5462
|
reload() {
|
|
5463
5463
|
window.location.reload();
|
|
5464
5464
|
}
|
|
5465
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5466
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
5465
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GlobalErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5466
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: GlobalErrorComponent, isStandalone: false, selector: "ocx-error", inputs: { errCode: "errCode" }, ngImport: i0, template: "<div class=\"pages-body error-page flex flex-column\">\n <div class=\"align-self-center mt-auto mb-auto\">\n <div class=\"pages-panel card flex flex-column\">\n <div class=\"pages-header px-3 py-1\">\n <h2>ERROR</h2>\n </div>\n <div class=\"card mt-3 px-6\">\n <img src=\"assets/images/error.png\" alt=\"\" />\n </div>\n <div class=\"pages-detail pb-6\">{{errCode}}</div>\n <button pButton pRipple type=\"button\" label=\"Try Again\" (click)=\"reload()\" class=\"p-button-text\"></button>\n </div>\n </div>\n</div>\n", styles: [".pages-body{height:100vh}.pages-body .topbar{box-shadow:0 2px 5px #00000042;background-color:#1565c0;z-index:100}.pages-body .topbar .topbar-left img{height:2rem}.pages-body .topbar .p-button.p-button-text.p-button-plain{color:#fff}.pages-body .pages-panel{text-align:center;z-index:200}.pages-body .pages-panel.card{border:1.5px solid var(--divider-color);border-radius:6px}.pages-body .pages-panel.card img{width:100%}.pages-body .pages-panel.card>.card{background-color:var(--content-alt-bg-color)}.pages-body .pages-panel .pages-header{margin-top:-3rem;color:var(--primary-color-text);border:1.5px solid var(--divider-color);border-radius:4px;margin-left:auto;margin-right:auto}.pages-body .pages-panel .pages-header h2{margin:0}.pages-body .pages-panel .pages-detail{color:var(--text-secondary-color)}.pages-body.error-page{background-size:cover;background-color:var(--primary-color)}.pages-body.error-page .pages-panel .pages-header{background:#d81b60}.pages-body.notfound-page{background-size:cover}.pages-body.notfound-page .pages-panel .pages-header{background:#455a64}.pages-body.accessdenied-page{background-size:cover}.pages-body.accessdenied-page .pages-panel .pages-header{background:#fb8c00}@media screen and (max-width: 768px){.pages-body.contact-page .pages-panel{padding-bottom:10em}.pages-body.contact-page .pages-panel .p-button{width:100%}.pages-body.contact-page .pages-panel .card .right-panel{text-align:center}}\n"], dependencies: [{ kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }] }); }
|
|
5467
5467
|
}
|
|
5468
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5468
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GlobalErrorComponent, decorators: [{
|
|
5469
5469
|
type: Component,
|
|
5470
5470
|
args: [{ standalone: false, selector: 'ocx-error', template: "<div class=\"pages-body error-page flex flex-column\">\n <div class=\"align-self-center mt-auto mb-auto\">\n <div class=\"pages-panel card flex flex-column\">\n <div class=\"pages-header px-3 py-1\">\n <h2>ERROR</h2>\n </div>\n <div class=\"card mt-3 px-6\">\n <img src=\"assets/images/error.png\" alt=\"\" />\n </div>\n <div class=\"pages-detail pb-6\">{{errCode}}</div>\n <button pButton pRipple type=\"button\" label=\"Try Again\" (click)=\"reload()\" class=\"p-button-text\"></button>\n </div>\n </div>\n</div>\n", styles: [".pages-body{height:100vh}.pages-body .topbar{box-shadow:0 2px 5px #00000042;background-color:#1565c0;z-index:100}.pages-body .topbar .topbar-left img{height:2rem}.pages-body .topbar .p-button.p-button-text.p-button-plain{color:#fff}.pages-body .pages-panel{text-align:center;z-index:200}.pages-body .pages-panel.card{border:1.5px solid var(--divider-color);border-radius:6px}.pages-body .pages-panel.card img{width:100%}.pages-body .pages-panel.card>.card{background-color:var(--content-alt-bg-color)}.pages-body .pages-panel .pages-header{margin-top:-3rem;color:var(--primary-color-text);border:1.5px solid var(--divider-color);border-radius:4px;margin-left:auto;margin-right:auto}.pages-body .pages-panel .pages-header h2{margin:0}.pages-body .pages-panel .pages-detail{color:var(--text-secondary-color)}.pages-body.error-page{background-size:cover;background-color:var(--primary-color)}.pages-body.error-page .pages-panel .pages-header{background:#d81b60}.pages-body.notfound-page{background-size:cover}.pages-body.notfound-page .pages-panel .pages-header{background:#455a64}.pages-body.accessdenied-page{background-size:cover}.pages-body.accessdenied-page .pages-panel .pages-header{background:#fb8c00}@media screen and (max-width: 768px){.pages-body.contact-page .pages-panel{padding-bottom:10em}.pages-body.contact-page .pages-panel .p-button{width:100%}.pages-body.contact-page .pages-panel .card .right-panel{text-align:center}}\n"] }]
|
|
5471
5471
|
}], ctorParameters: () => [], propDecorators: { errCode: [{
|
|
@@ -5643,10 +5643,10 @@ class PortalDialogService {
|
|
|
5643
5643
|
isType(obj) {
|
|
5644
5644
|
return obj instanceof Type;
|
|
5645
5645
|
}
|
|
5646
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5647
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
5646
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PortalDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5647
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PortalDialogService, providedIn: 'any' }); }
|
|
5648
5648
|
}
|
|
5649
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5649
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PortalDialogService, decorators: [{
|
|
5650
5650
|
type: Injectable,
|
|
5651
5651
|
args: [{ providedIn: 'any' }]
|
|
5652
5652
|
}], ctorParameters: () => [] });
|
|
@@ -5671,10 +5671,10 @@ class DateUtils {
|
|
|
5671
5671
|
? new Intl.DateTimeFormat(this.locale, this.options).format(date instanceof Date ? date : new Date(date))
|
|
5672
5672
|
: '';
|
|
5673
5673
|
}
|
|
5674
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5675
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
5674
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5675
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateUtils, providedIn: 'root' }); }
|
|
5676
5676
|
}
|
|
5677
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5677
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DateUtils, decorators: [{
|
|
5678
5678
|
type: Injectable,
|
|
5679
5679
|
args: [{
|
|
5680
5680
|
providedIn: 'root',
|
|
@@ -5698,12 +5698,12 @@ class ExportDataService {
|
|
|
5698
5698
|
const dataString = dataToExport
|
|
5699
5699
|
.map((d) => columns
|
|
5700
5700
|
.reduce((arr, c) => [...arr, d[c.id]], [])
|
|
5701
|
-
.map((d) => this.
|
|
5701
|
+
.map((d) => this.escapeDelimiterAndLineBreaks(delimiter, d))
|
|
5702
5702
|
.join(delimiter))
|
|
5703
5703
|
.join('\r\n');
|
|
5704
5704
|
const headerString = (await firstValueFrom(this.translateColumnNames(columns)))
|
|
5705
5705
|
.map((c) => c.name)
|
|
5706
|
-
.map((c) => this.
|
|
5706
|
+
.map((c) => this.escapeDelimiterAndLineBreaks(delimiter, c))
|
|
5707
5707
|
.join(delimiter);
|
|
5708
5708
|
const csvString = headerString + '\r\n' + dataString;
|
|
5709
5709
|
const blob = new Blob(['\ufeff' + csvString], {
|
|
@@ -5747,7 +5747,7 @@ class ExportDataService {
|
|
|
5747
5747
|
}
|
|
5748
5748
|
return of(data);
|
|
5749
5749
|
}
|
|
5750
|
-
|
|
5750
|
+
escapeDelimiterAndLineBreaks(delimiter, data) {
|
|
5751
5751
|
if (data === null || data === undefined) {
|
|
5752
5752
|
return data;
|
|
5753
5753
|
}
|
|
@@ -5755,15 +5755,15 @@ class ExportDataService {
|
|
|
5755
5755
|
if (str.includes('"')) {
|
|
5756
5756
|
str = str.replaceAll('"', '""');
|
|
5757
5757
|
}
|
|
5758
|
-
if (str.includes(delimiter)) {
|
|
5758
|
+
if (str.includes(delimiter) || str.includes('\n') || str.includes('\r')) {
|
|
5759
5759
|
str = `"${str}"`;
|
|
5760
5760
|
}
|
|
5761
5761
|
return str;
|
|
5762
5762
|
}
|
|
5763
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5764
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
5763
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ExportDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5764
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ExportDataService, providedIn: 'any' }); }
|
|
5765
5765
|
}
|
|
5766
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5766
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ExportDataService, decorators: [{
|
|
5767
5767
|
type: Injectable,
|
|
5768
5768
|
args: [{ providedIn: 'any' }]
|
|
5769
5769
|
}] });
|
|
@@ -5805,10 +5805,10 @@ class RelativeDatePipe {
|
|
|
5805
5805
|
duration /= division.amount;
|
|
5806
5806
|
}
|
|
5807
5807
|
}
|
|
5808
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5809
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.
|
|
5808
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RelativeDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
5809
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: RelativeDatePipe, isStandalone: false, name: "relativeDate" }); }
|
|
5810
5810
|
}
|
|
5811
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5811
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RelativeDatePipe, decorators: [{
|
|
5812
5812
|
type: Pipe,
|
|
5813
5813
|
args: [{
|
|
5814
5814
|
name: 'relativeDate',
|
|
@@ -5817,8 +5817,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5817
5817
|
}], ctorParameters: () => [] });
|
|
5818
5818
|
|
|
5819
5819
|
class AngularAcceleratorPrimeNgModule {
|
|
5820
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5821
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
5820
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AngularAcceleratorPrimeNgModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5821
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: AngularAcceleratorPrimeNgModule, imports: [BreadcrumbModule,
|
|
5822
5822
|
ChipModule,
|
|
5823
5823
|
CheckboxModule,
|
|
5824
5824
|
SelectModule,
|
|
@@ -5861,7 +5861,7 @@ class AngularAcceleratorPrimeNgModule {
|
|
|
5861
5861
|
TimelineModule,
|
|
5862
5862
|
SelectButtonModule,
|
|
5863
5863
|
SharedModule] }); }
|
|
5864
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
5864
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AngularAcceleratorPrimeNgModule, providers: [providePrimeNG()], imports: [BreadcrumbModule,
|
|
5865
5865
|
ChipModule,
|
|
5866
5866
|
CheckboxModule,
|
|
5867
5867
|
SelectModule,
|
|
@@ -5905,7 +5905,7 @@ class AngularAcceleratorPrimeNgModule {
|
|
|
5905
5905
|
SelectButtonModule,
|
|
5906
5906
|
SharedModule] }); }
|
|
5907
5907
|
}
|
|
5908
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5908
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AngularAcceleratorPrimeNgModule, decorators: [{
|
|
5909
5909
|
type: NgModule,
|
|
5910
5910
|
args: [{
|
|
5911
5911
|
imports: [
|
|
@@ -5992,8 +5992,8 @@ function appInitializer(userService) {
|
|
|
5992
5992
|
};
|
|
5993
5993
|
}
|
|
5994
5994
|
class AngularAcceleratorModule {
|
|
5995
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5996
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
5995
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AngularAcceleratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5996
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: AngularAcceleratorModule, declarations: [ColumnGroupSelectionComponent,
|
|
5997
5997
|
CustomGroupColumnSelectorComponent,
|
|
5998
5998
|
DataLayoutSelectionComponent,
|
|
5999
5999
|
DataListGridSortingComponent,
|
|
@@ -6065,7 +6065,7 @@ class AngularAcceleratorModule {
|
|
|
6065
6065
|
DialogContentComponent,
|
|
6066
6066
|
DialogInlineComponent,
|
|
6067
6067
|
DialogMessageContentComponent] }); }
|
|
6068
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
6068
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AngularAcceleratorModule, providers: [
|
|
6069
6069
|
providePermissionChecker(),
|
|
6070
6070
|
{
|
|
6071
6071
|
provide: LOCALE_ID,
|
|
@@ -6094,7 +6094,7 @@ class AngularAcceleratorModule {
|
|
|
6094
6094
|
RouterModule,
|
|
6095
6095
|
ReactiveFormsModule, AngularRemoteComponentsModule] }); }
|
|
6096
6096
|
}
|
|
6097
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
6097
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AngularAcceleratorModule, decorators: [{
|
|
6098
6098
|
type: NgModule,
|
|
6099
6099
|
args: [{
|
|
6100
6100
|
imports: [
|