@onecx/angular-accelerator 6.0.0-rc.16 → 6.0.0-rc.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/onecx-angular-accelerator-testing.mjs +5 -5
- package/fesm2022/onecx-angular-accelerator-testing.mjs.map +1 -1
- package/fesm2022/onecx-angular-accelerator.mjs +68 -340
- package/fesm2022/onecx-angular-accelerator.mjs.map +1 -1
- package/lib/components/data-list-grid/data-list-grid.component.d.ts +1 -18
- package/lib/components/data-table/data-table.component.d.ts +4 -34
- package/lib/components/data-view/data-view.component.d.ts +2 -72
- package/lib/components/group-by-count-diagram/group-by-count-diagram.component.d.ts +1 -6
- package/lib/components/interactive-data-view/interactive-data-view.component.d.ts +27 -49
- package/lib/components/page-header/page-header.component.d.ts +0 -4
- package/lib/components/search-header/search-header.component.d.ts +1 -6
- package/lib/model/breadcrumb-menu-item.model.d.ts +0 -4
- package/lib/model/column-type.model.d.ts +1 -8
- package/lib/services/portal-dialog.service.d.ts +1 -9
- package/package.json +8 -8
- package/testing/filter-view.harness.d.ts +1 -1
- package/testing/interactive-data-view.harness.d.ts +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ElementRef, Input, Directive, Renderer2, ViewContainerRef, TemplateRef, HostListener, EventEmitter, Output, Injectable, Injector, LOCALE_ID, Pipe, ContentChild, ViewEncapsulation, Component, ViewChild, ContentChildren, NgZone, ChangeDetectorRef, ViewChildren, QueryList,
|
|
2
|
+
import { inject, ElementRef, Input, Directive, Renderer2, ViewContainerRef, TemplateRef, HostListener, EventEmitter, Output, Injectable, Injector, LOCALE_ID, Pipe, ContentChild, ViewEncapsulation, Component, ViewChild, ContentChildren, NgZone, ChangeDetectorRef, ViewChildren, QueryList, Type, NgModule, APP_INITIALIZER } from '@angular/core';
|
|
3
3
|
import { UserService, AppStateService, ConfigurationService, CONFIG_KEY, ShellCapabilityService, Capability, AppConfigService } from '@onecx/angular-integration-interface';
|
|
4
4
|
import { HAS_PERMISSION_CHECKER, SKIP_STYLE_SCOPING, getScopeIdentifier, dataStyleIdKey, dataNoPortalLayoutStylesKey, providePermissionChecker, TRANSLATION_PATH, provideTranslationConnectionService } from '@onecx/angular-utils';
|
|
5
5
|
import { HttpClient } from '@angular/common/http';
|
|
@@ -479,16 +479,16 @@ let BreadcrumbService = class BreadcrumbService {
|
|
|
479
479
|
}
|
|
480
480
|
setItems(items) {
|
|
481
481
|
const translationKeys = [
|
|
482
|
-
...items.map((i) => i.labelKey
|
|
483
|
-
...items.map((i) => i.titleKey
|
|
482
|
+
...items.map((i) => i.labelKey ?? '').filter((l) => !!l),
|
|
483
|
+
...items.map((i) => i.titleKey ?? '').filter((l) => !!l),
|
|
484
484
|
];
|
|
485
485
|
if (translationKeys.length) {
|
|
486
486
|
this.translateService.get(translationKeys).subscribe((translations) => {
|
|
487
487
|
this.itemsSource$.publish({
|
|
488
488
|
menuItems: items.map((i) => ({
|
|
489
489
|
...i,
|
|
490
|
-
label: translations[i.labelKey
|
|
491
|
-
title: translations[i.titleKey
|
|
490
|
+
label: translations[i.labelKey ?? ''],
|
|
491
|
+
title: translations[i.titleKey ?? ''],
|
|
492
492
|
})),
|
|
493
493
|
});
|
|
494
494
|
});
|
|
@@ -757,11 +757,11 @@ class PageHeaderComponent {
|
|
|
757
757
|
});
|
|
758
758
|
}
|
|
759
759
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
760
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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 }], usesOnChanges: 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 <h2 id=\"page-subheader\">{{ subheader }}</h2>\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 && inlineActions.length > 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 [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n (onClick)=\"action.actionCallback()\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </span>\n }\n </div>\n }\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n @if (overflowActions.length !== 0) {\n <div>\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n }\n </ng-container>\n } @else {\n <div class=\"flex\">\n <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n } @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 >{{ item.label | dynamicPipe:item.labelPipe }}</span\n >\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 || item.tooltip || ''\"\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 [pTooltip]=\"item.actionItemTooltip || ''\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n }\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 }); }
|
|
760
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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 }], usesOnChanges: 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 <h2 id=\"page-subheader\">{{ subheader }}</h2>\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 && inlineActions.length > 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 [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n (onClick)=\"action.actionCallback()\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </span>\n }\n </div>\n }\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n @if (overflowActions.length !== 0) {\n <div>\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n }\n </ng-container>\n } @else {\n <div class=\"flex\">\n <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n } @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 >{{ item.label | dynamicPipe:item.labelPipe }}</span\n >\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 [pTooltip]=\"item.actionItemTooltip || ''\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n }\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 }); }
|
|
761
761
|
}
|
|
762
762
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
763
763
|
type: Component,
|
|
764
|
-
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 <h2 id=\"page-subheader\">{{ subheader }}</h2>\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 && inlineActions.length > 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 [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n (onClick)=\"action.actionCallback()\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </span>\n }\n </div>\n }\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n @if (overflowActions.length !== 0) {\n <div>\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n }\n </ng-container>\n } @else {\n <div class=\"flex\">\n <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n } @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 >{{ item.label | dynamicPipe:item.labelPipe }}</span\n >\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 ||
|
|
764
|
+
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 <h2 id=\"page-subheader\">{{ subheader }}</h2>\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 && inlineActions.length > 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 [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n (onClick)=\"action.actionCallback()\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </span>\n }\n </div>\n }\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n @if (overflowActions.length !== 0) {\n <div>\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n }\n </ng-container>\n } @else {\n <div class=\"flex\">\n <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n } @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 >{{ item.label | dynamicPipe:item.labelPipe }}</span\n >\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 [pTooltip]=\"item.actionItemTooltip || ''\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n }\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"] }]
|
|
765
765
|
}], ctorParameters: () => [], propDecorators: { header: [{
|
|
766
766
|
type: Input
|
|
767
767
|
}], loading: [{
|
|
@@ -805,15 +805,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
805
805
|
* which do not have an input element.
|
|
806
806
|
*/
|
|
807
807
|
class SearchHeaderComponent {
|
|
808
|
-
/**
|
|
809
|
-
* @deprecated Will be replaced by header
|
|
810
|
-
*/
|
|
811
|
-
get headline() {
|
|
812
|
-
return this.header;
|
|
813
|
-
}
|
|
814
|
-
set headline(value) {
|
|
815
|
-
this.header = value;
|
|
816
|
-
}
|
|
817
808
|
get viewMode() {
|
|
818
809
|
return this._viewMode;
|
|
819
810
|
}
|
|
@@ -933,15 +924,13 @@ class SearchHeaderComponent {
|
|
|
933
924
|
return this.visibleFormControls.some((formControl) => formControl.name !== null && String(formControl.name) === control);
|
|
934
925
|
}
|
|
935
926
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SearchHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
936
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: SearchHeaderComponent, isStandalone: false, selector: "ocx-search-header", inputs: { header: "header",
|
|
927
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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 }\n @if (_additionalToolbarContentLeft) {\n <ng-container\n [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"\n ></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 <div>\n <div #searchParameterFields>\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"(searchButtonsReversed$ | async) ? 'flex-row-reverse' : 'flex-row'\">\n @if (resetted.observed) {\n <p-button\n id=\"resetButton\"\n (onClick)=\"onResetClicked()\"\n label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n icon=\"pi pi-eraser\"\n pTooltip=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [disabled]=\"resetButtonDisabled\"\n [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.ARIA_LABEL' | translate\"\n >\n </p-button>\n }\n\n <p-button\n id=\"searchButton\"\n (onClick)=\"onSearchClicked()\"\n label=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}\"\n icon=\"pi pi-search\"\n pTooltip=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [disabled]=\"searchButtonDisabled || formGroup?.invalid\"\n [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.ARIA_LABEL' | translate\"\n >\n </p-button>\n </div>\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", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
937
928
|
}
|
|
938
929
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SearchHeaderComponent, decorators: [{
|
|
939
930
|
type: Component,
|
|
940
931
|
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 }\n @if (_additionalToolbarContentLeft) {\n <ng-container\n [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"\n ></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 <div>\n <div #searchParameterFields>\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"(searchButtonsReversed$ | async) ? 'flex-row-reverse' : 'flex-row'\">\n @if (resetted.observed) {\n <p-button\n id=\"resetButton\"\n (onClick)=\"onResetClicked()\"\n label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n icon=\"pi pi-eraser\"\n pTooltip=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [disabled]=\"resetButtonDisabled\"\n [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.ARIA_LABEL' | translate\"\n >\n </p-button>\n }\n\n <p-button\n id=\"searchButton\"\n (onClick)=\"onSearchClicked()\"\n label=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}\"\n icon=\"pi pi-search\"\n pTooltip=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [disabled]=\"searchButtonDisabled || formGroup?.invalid\"\n [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.ARIA_LABEL' | translate\"\n >\n </p-button>\n </div>\n </div>\n</ocx-page-header>\n" }]
|
|
941
932
|
}], ctorParameters: () => [], propDecorators: { header: [{
|
|
942
933
|
type: Input
|
|
943
|
-
}], headline: [{
|
|
944
|
-
type: Input
|
|
945
934
|
}], subheader: [{
|
|
946
935
|
type: Input
|
|
947
936
|
}], viewMode: [{
|
|
@@ -1028,7 +1017,15 @@ class TooltipOnOverflowDirective extends Tooltip {
|
|
|
1028
1017
|
}
|
|
1029
1018
|
ngAfterViewInit() {
|
|
1030
1019
|
super.ngAfterViewInit();
|
|
1031
|
-
|
|
1020
|
+
setTimeout(() => {
|
|
1021
|
+
// Needed to ensure change detection picks up the correct state of 'disabled'
|
|
1022
|
+
// Without this the tooltip for some elements won't update properly
|
|
1023
|
+
this.zone.run(() => {
|
|
1024
|
+
this.disabled = this.el.nativeElement.scrollWidth <= this.el.nativeElement.offsetWidth;
|
|
1025
|
+
this.setOption({ disabled: this.disabled });
|
|
1026
|
+
}, this);
|
|
1027
|
+
this.mutationObserver.observe(this.el.nativeElement, { subtree: true, characterData: true, childList: true });
|
|
1028
|
+
}, 0);
|
|
1032
1029
|
}
|
|
1033
1030
|
constructor() {
|
|
1034
1031
|
const zone = inject(NgZone);
|
|
@@ -1521,11 +1518,11 @@ class DataLayoutSelectionComponent {
|
|
|
1521
1518
|
});
|
|
1522
1519
|
}
|
|
1523
1520
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DataLayoutSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1524
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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.
|
|
1521
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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
1522
|
}
|
|
1526
1523
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DataLayoutSelectionComponent, decorators: [{
|
|
1527
1524
|
type: Component,
|
|
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.
|
|
1525
|
+
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
1526
|
}], propDecorators: { supportedViewLayouts: [{
|
|
1530
1527
|
type: Input
|
|
1531
1528
|
}], layout: [{
|
|
@@ -1543,13 +1540,6 @@ var ColumnType;
|
|
|
1543
1540
|
ColumnType["DATE"] = "DATE";
|
|
1544
1541
|
ColumnType["RELATIVE_DATE"] = "RELATIVE_DATE";
|
|
1545
1542
|
ColumnType["TRANSLATION_KEY"] = "TRANSLATION_KEY";
|
|
1546
|
-
/**
|
|
1547
|
-
* @deprecated Will be removed with the next major v6 upgrade.
|
|
1548
|
-
* Please use pTemplate="column id + IdCell" in DataTable or
|
|
1549
|
-
* pTemplate="column id + IdTableCell" in DataView and InteractiveDataView
|
|
1550
|
-
* e.g. for a column with the id 'status' in DataTable use pTemplate="statusIdCell"
|
|
1551
|
-
*/
|
|
1552
|
-
ColumnType["CUSTOM"] = "CUSTOM";
|
|
1553
1543
|
})(ColumnType || (ColumnType = {}));
|
|
1554
1544
|
|
|
1555
1545
|
class ObjectUtils {
|
|
@@ -1868,10 +1858,6 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1868
1858
|
set pageSize(value) {
|
|
1869
1859
|
this._pageSize$.next(value);
|
|
1870
1860
|
}
|
|
1871
|
-
/**
|
|
1872
|
-
* @deprecated
|
|
1873
|
-
*/
|
|
1874
|
-
set showAllOption(value) { }
|
|
1875
1861
|
get columns() {
|
|
1876
1862
|
return this._columns$.getValue();
|
|
1877
1863
|
}
|
|
@@ -1942,9 +1928,6 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1942
1928
|
get _relativeDateListValue() {
|
|
1943
1929
|
return this.relativeDateListValueTemplate || this.relativeDateListValueChildTemplate;
|
|
1944
1930
|
}
|
|
1945
|
-
get _customListValue() {
|
|
1946
|
-
return this.customListValueTemplate || this.customListValueChildTemplate;
|
|
1947
|
-
}
|
|
1948
1931
|
get _stringListValue() {
|
|
1949
1932
|
return this.stringListValueTemplate || this.stringListValueChildTemplate;
|
|
1950
1933
|
}
|
|
@@ -2084,9 +2067,6 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2084
2067
|
case 'relativeDateListValue':
|
|
2085
2068
|
this.relativeDateListValueChildTemplate = item.template;
|
|
2086
2069
|
break;
|
|
2087
|
-
case 'customListValue':
|
|
2088
|
-
this.customListValueChildTemplate = item.template;
|
|
2089
|
-
break;
|
|
2090
2070
|
case 'stringListValue':
|
|
2091
2071
|
this.stringListValueChildTemplate = item.template;
|
|
2092
2072
|
break;
|
|
@@ -2301,10 +2281,6 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2301
2281
|
return (this._translationKeyListValue ??
|
|
2302
2282
|
this.findTemplate(templates, ['translationKeyListValue', 'defaultTranslationKeyListValue'])?.template ??
|
|
2303
2283
|
null);
|
|
2304
|
-
case ColumnType.CUSTOM:
|
|
2305
|
-
return (this._customListValue ??
|
|
2306
|
-
this.findTemplate(templates, ['customListValue', 'defaultCustomListValue'])?.template ??
|
|
2307
|
-
null);
|
|
2308
2284
|
default:
|
|
2309
2285
|
return (this._stringListValue ??
|
|
2310
2286
|
this.findTemplate(templates, ['stringListValue', 'defaultStringListValue'])?.template ??
|
|
@@ -2315,11 +2291,11 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2315
2291
|
return this.templatesObservables[column.id];
|
|
2316
2292
|
}
|
|
2317
2293
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DataListGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2318
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: DataListGridComponent, isStandalone: false, selector: "ocx-data-list-grid", inputs: { titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", 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", customListValueTemplate: "customListValueTemplate", 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: "customListValueChildTemplate", first: true, predicate: ["customListValue"], 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 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 <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div>\n <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n (click)=\"setSelectedItem(item); updateGridMenuItems(true); 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]=\"(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, 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 ></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=\"defaultCustomListValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{cursor:pointer;min-width:4rem}.list-border-divider{border-top:.0625rem;border-top-style:solid;border-color:var(--p-surface-200)}.grid-border-divider{border:.0625rem;border-style:solid;border-color:var(--p-surface-200)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["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", "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]] }); }
|
|
2294
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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 <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div>\n <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n (click)=\"setSelectedItem(item); updateGridMenuItems(true); 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]=\"(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, 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 ></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.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", "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]] }); }
|
|
2319
2295
|
}
|
|
2320
2296
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DataListGridComponent, decorators: [{
|
|
2321
2297
|
type: Component,
|
|
2322
|
-
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 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 <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div>\n <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n (click)=\"setSelectedItem(item); updateGridMenuItems(true); 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]=\"(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, 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 ></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=\"defaultCustomListValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </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"] }]
|
|
2298
|
+
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 <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div>\n <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n (click)=\"setSelectedItem(item); updateGridMenuItems(true); 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]=\"(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, 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 ></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"] }]
|
|
2323
2299
|
}], ctorParameters: () => [], propDecorators: { titleLineId: [{
|
|
2324
2300
|
type: Input
|
|
2325
2301
|
}], subtitleLineIds: [{
|
|
@@ -2334,8 +2310,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
2334
2310
|
type: Input
|
|
2335
2311
|
}], pageSize: [{
|
|
2336
2312
|
type: Input
|
|
2337
|
-
}], showAllOption: [{
|
|
2338
|
-
type: Input
|
|
2339
2313
|
}], emptyResultsMessage: [{
|
|
2340
2314
|
type: Input
|
|
2341
2315
|
}], fallbackImage: [{
|
|
@@ -2428,11 +2402,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
2428
2402
|
}], relativeDateListValueChildTemplate: [{
|
|
2429
2403
|
type: ContentChild,
|
|
2430
2404
|
args: ['relativeDateListValue']
|
|
2431
|
-
}], customListValueTemplate: [{
|
|
2432
|
-
type: Input
|
|
2433
|
-
}], customListValueChildTemplate: [{
|
|
2434
|
-
type: ContentChild,
|
|
2435
|
-
args: ['customListValue']
|
|
2436
2405
|
}], stringListValueTemplate: [{
|
|
2437
2406
|
type: Input
|
|
2438
2407
|
}], stringListValueChildTemplate: [{
|
|
@@ -2638,10 +2607,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
2638
2607
|
set pageSize(value) {
|
|
2639
2608
|
this._pageSize$.next(value);
|
|
2640
2609
|
}
|
|
2641
|
-
/**
|
|
2642
|
-
* @deprecated
|
|
2643
|
-
*/
|
|
2644
|
-
set showAllOption(value) { }
|
|
2645
2610
|
get totalRecordsOnServer() {
|
|
2646
2611
|
return this.params['totalRecordsOnServer'] ? Number(this.params['totalRecordsOnServer']) : undefined;
|
|
2647
2612
|
}
|
|
@@ -2654,9 +2619,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
2654
2619
|
get _numberCell() {
|
|
2655
2620
|
return this.numberCellTemplate || this.numberCellChildTemplate;
|
|
2656
2621
|
}
|
|
2657
|
-
get _customCell() {
|
|
2658
|
-
return this.customCellTemplate || this.customCellChildTemplate;
|
|
2659
|
-
}
|
|
2660
2622
|
get _dateCell() {
|
|
2661
2623
|
return this.dateCellTemplate || this.dateCellChildTemplate;
|
|
2662
2624
|
}
|
|
@@ -2675,9 +2637,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
2675
2637
|
get _numberFilterCell() {
|
|
2676
2638
|
return this.numberFilterCellTemplate || this.numberFilterCellChildTemplate;
|
|
2677
2639
|
}
|
|
2678
|
-
get _customFilterCell() {
|
|
2679
|
-
return this.customFilterCellTemplate || this.customFilterCellChildTemplate;
|
|
2680
|
-
}
|
|
2681
2640
|
get _dateFilterCell() {
|
|
2682
2641
|
return this.dateFilterCellTemplate || this.dateFilterCellChildTemplate;
|
|
2683
2642
|
}
|
|
@@ -2795,7 +2754,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
2795
2754
|
[ColumnType.NUMBER]: ['numberCell', 'numberTableCell', 'defaultNumberCell'],
|
|
2796
2755
|
[ColumnType.RELATIVE_DATE]: ['relativeDateCell', 'relativeDateTableCell', 'defaultRelativeDateCell'],
|
|
2797
2756
|
[ColumnType.TRANSLATION_KEY]: ['translationKeyCell', 'translationKeyTableCell', 'defaultTranslationKeyCell'],
|
|
2798
|
-
[ColumnType.CUSTOM]: ['customCell', 'customTableCell', 'defaultCustomCell'],
|
|
2799
2757
|
[ColumnType.STRING]: ['stringCell', 'stringTableCell', 'defaultStringCell'],
|
|
2800
2758
|
},
|
|
2801
2759
|
};
|
|
@@ -2825,13 +2783,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
2825
2783
|
'translationKeyCell',
|
|
2826
2784
|
'translationKeyTableCell',
|
|
2827
2785
|
],
|
|
2828
|
-
[ColumnType.CUSTOM]: [
|
|
2829
|
-
'customFilterCell',
|
|
2830
|
-
'customTableFilterCell',
|
|
2831
|
-
'customCell',
|
|
2832
|
-
'customTableCell',
|
|
2833
|
-
'defaultCustomCell',
|
|
2834
|
-
],
|
|
2835
2786
|
[ColumnType.STRING]: [
|
|
2836
2787
|
'stringFilterCell',
|
|
2837
2788
|
'stringTableFilterCell',
|
|
@@ -2954,9 +2905,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
2954
2905
|
case 'numberCell':
|
|
2955
2906
|
this.numberCellChildTemplate = item.template;
|
|
2956
2907
|
break;
|
|
2957
|
-
case 'customCell':
|
|
2958
|
-
this.customCellChildTemplate = item.template;
|
|
2959
|
-
break;
|
|
2960
2908
|
case 'dateCell':
|
|
2961
2909
|
this.dateCellChildTemplate = item.template;
|
|
2962
2910
|
break;
|
|
@@ -2975,9 +2923,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
2975
2923
|
case 'numberFilterCell':
|
|
2976
2924
|
this.numberFilterCellChildTemplate = item.template;
|
|
2977
2925
|
break;
|
|
2978
|
-
case 'customFilterCell':
|
|
2979
|
-
this.customFilterCellChildTemplate = item.template;
|
|
2980
|
-
break;
|
|
2981
2926
|
case 'dateFilterCell':
|
|
2982
2927
|
this.dateFilterCellChildTemplate = item.template;
|
|
2983
2928
|
break;
|
|
@@ -3164,9 +3109,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
3164
3109
|
case ColumnType.TRANSLATION_KEY:
|
|
3165
3110
|
template = this._translationKeyCell;
|
|
3166
3111
|
break;
|
|
3167
|
-
case ColumnType.CUSTOM:
|
|
3168
|
-
template = this._customCell;
|
|
3169
|
-
break;
|
|
3170
3112
|
default:
|
|
3171
3113
|
template = this._stringCell;
|
|
3172
3114
|
}
|
|
@@ -3185,9 +3127,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
3185
3127
|
case ColumnType.TRANSLATION_KEY:
|
|
3186
3128
|
template = this._translationKeyFilterCell;
|
|
3187
3129
|
break;
|
|
3188
|
-
case ColumnType.CUSTOM:
|
|
3189
|
-
template = this._customFilterCell;
|
|
3190
|
-
break;
|
|
3191
3130
|
default:
|
|
3192
3131
|
template = this._stringFilterCell;
|
|
3193
3132
|
}
|
|
@@ -3224,11 +3163,11 @@ class DataTableComponent extends DataSortBase {
|
|
|
3224
3163
|
};
|
|
3225
3164
|
}
|
|
3226
3165
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3227
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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", showAllOption: "showAllOption", 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", customCellTemplate: "customCellTemplate", dateCellTemplate: "dateCellTemplate", relativeDateCellTemplate: "relativeDateCellTemplate", cellTemplate: "cellTemplate", translationKeyCellTemplate: "translationKeyCellTemplate", stringFilterCellTemplate: "stringFilterCellTemplate", numberFilterCellTemplate: "numberFilterCellTemplate", customFilterCellTemplate: "customFilterCellTemplate", 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: "customCellChildTemplate", first: true, predicate: ["customCell"], 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: "customFilterCellChildTemplate", first: true, predicate: ["customFilterCell"], 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 <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 }\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 }\n @if (deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, 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 }\n @for (action of inlineActions$ | async; track action) {\n @if ((!action.actionVisibleField || 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 }\n }\n @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n class=\"p-button-rounded p-button-text\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n ></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 <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) {\n @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 [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 }\n @if (actionColumnPosition === 'left';) {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n }\n @for (column of columns; track column) {\n @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 }\n @if (currentEqualFilterOptions$ | async; as equalFilterOptions) {\n @if (columnFilterTemplates$ | async; as columnFilterTemplates) {\n @if (column.filterable && (!column.filterType || column.filterType === FilterType.EQUALS)) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n [ngModel]=\"(currentEqualSelectedFilters$ | 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 }\n }\n }\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 }\n }\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 }\n @if (actionColumnPosition === 'left';) {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n }\n @for (column of columns; track column) {\n <td>\n @defer(on viewport){\n @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 }\n } @placeholder {\n <p-skeleton width=\"3rem\" />\n }\n </td>\n }\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 <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\n {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n}\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=\"defaultCustomCell\" let-rowObject=\"rowObject\" let-column=\"column\"> </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", "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]] }); }
|
|
3166
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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 ></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 [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 <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\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", "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]] }); }
|
|
3228
3167
|
}
|
|
3229
3168
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
3230
3169
|
type: Component,
|
|
3231
|
-
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 <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 }\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 }\n @if (deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, 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 }\n @for (action of inlineActions$ | async; track action) {\n @if ((!action.actionVisibleField || 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 }\n }\n @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n class=\"p-button-rounded p-button-text\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n ></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 <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) {\n @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 [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 }\n @if (actionColumnPosition === 'left';) {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n }\n @for (column of columns; track column) {\n @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 }\n @if (currentEqualFilterOptions$ | async; as equalFilterOptions) {\n @if (columnFilterTemplates$ | async; as columnFilterTemplates) {\n @if (column.filterable && (!column.filterType || column.filterType === FilterType.EQUALS)) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n [ngModel]=\"(currentEqualSelectedFilters$ | 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 }\n }\n }\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 }\n }\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 }\n @if (actionColumnPosition === 'left';) {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n }\n @for (column of columns; track column) {\n <td>\n @defer(on viewport){\n @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 }\n } @placeholder {\n <p-skeleton width=\"3rem\" />\n }\n </td>\n }\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 <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\n {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n}\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=\"defaultCustomCell\" let-rowObject=\"rowObject\" let-column=\"column\"> </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"] }]
|
|
3170
|
+
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 ></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 [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 <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\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"] }]
|
|
3232
3171
|
}], ctorParameters: () => [], propDecorators: { rows: [{
|
|
3233
3172
|
type: Input
|
|
3234
3173
|
}], selectedRows: [{
|
|
@@ -3251,8 +3190,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
3251
3190
|
type: Input
|
|
3252
3191
|
}], pageSize: [{
|
|
3253
3192
|
type: Input
|
|
3254
|
-
}], showAllOption: [{
|
|
3255
|
-
type: Input
|
|
3256
3193
|
}], emptyResultsMessage: [{
|
|
3257
3194
|
type: Input
|
|
3258
3195
|
}], name: [{
|
|
@@ -3301,11 +3238,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
3301
3238
|
}], numberCellChildTemplate: [{
|
|
3302
3239
|
type: ContentChild,
|
|
3303
3240
|
args: ['numberCell']
|
|
3304
|
-
}], customCellTemplate: [{
|
|
3305
|
-
type: Input
|
|
3306
|
-
}], customCellChildTemplate: [{
|
|
3307
|
-
type: ContentChild,
|
|
3308
|
-
args: ['customCell']
|
|
3309
3241
|
}], dateCellTemplate: [{
|
|
3310
3242
|
type: Input
|
|
3311
3243
|
}], dateCellChildTemplate: [{
|
|
@@ -3336,11 +3268,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
3336
3268
|
}], numberFilterCellChildTemplate: [{
|
|
3337
3269
|
type: ContentChild,
|
|
3338
3270
|
args: ['numberFilterCell']
|
|
3339
|
-
}], customFilterCellTemplate: [{
|
|
3340
|
-
type: Input
|
|
3341
|
-
}], customFilterCellChildTemplate: [{
|
|
3342
|
-
type: ContentChild,
|
|
3343
|
-
args: ['customFilterCell']
|
|
3344
3271
|
}], dateFilterCellTemplate: [{
|
|
3345
3272
|
type: Input
|
|
3346
3273
|
}], dateFilterCellChildTemplate: [{
|
|
@@ -3435,10 +3362,6 @@ class DataViewComponent {
|
|
|
3435
3362
|
this.actionColumnPosition = 'right';
|
|
3436
3363
|
this.sortStates = ["ASCENDING" /* DataSortDirection.ASCENDING */, "DESCENDING" /* DataSortDirection.DESCENDING */];
|
|
3437
3364
|
this.pageSizes = [10, 25, 50];
|
|
3438
|
-
/**
|
|
3439
|
-
* @deprecated
|
|
3440
|
-
*/
|
|
3441
|
-
this.showAllOption = false;
|
|
3442
3365
|
this.additionalActions = [];
|
|
3443
3366
|
this.filtered = new EventEmitter();
|
|
3444
3367
|
this.sorted = new EventEmitter();
|
|
@@ -3487,37 +3410,14 @@ class DataViewComponent {
|
|
|
3487
3410
|
get _numberTableCell() {
|
|
3488
3411
|
return this.numberTableCellTemplate || this.numberTableCellChildTemplate;
|
|
3489
3412
|
}
|
|
3490
|
-
get _customTableCell() {
|
|
3491
|
-
return this.customTableCellTemplate || this.customTableCellChildTemplate;
|
|
3492
|
-
}
|
|
3493
|
-
/**
|
|
3494
|
-
* @deprecated Will be replaced by dateTableCellTemplate
|
|
3495
|
-
*/
|
|
3496
|
-
get tableDateCellTemplate() {
|
|
3497
|
-
return this.dateTableCellTemplate;
|
|
3498
|
-
}
|
|
3499
|
-
set tableDateCellTemplate(value) {
|
|
3500
|
-
this.dateTableCellTemplate = value;
|
|
3501
|
-
}
|
|
3502
3413
|
get _dateTableCell() {
|
|
3503
|
-
return this.dateTableCellTemplate || this.dateTableCellChildTemplate
|
|
3414
|
+
return this.dateTableCellTemplate || this.dateTableCellChildTemplate;
|
|
3504
3415
|
}
|
|
3505
3416
|
get _tableCell() {
|
|
3506
3417
|
return this.tableCellTemplate || this.tableCellChildTemplate;
|
|
3507
3418
|
}
|
|
3508
|
-
/**
|
|
3509
|
-
* @deprecated Will be replaced by translationKeyTableCellTemplate
|
|
3510
|
-
*/
|
|
3511
|
-
get tableTranslationKeyCellTemplate() {
|
|
3512
|
-
return this.translationKeyTableCellTemplate;
|
|
3513
|
-
}
|
|
3514
|
-
set tableTranslationKeyCellTemplate(value) {
|
|
3515
|
-
this.translationKeyTableCellTemplate = value;
|
|
3516
|
-
}
|
|
3517
3419
|
get _translationKeyTableCell() {
|
|
3518
|
-
return
|
|
3519
|
-
this.translationKeyTableCellChildTemplate ||
|
|
3520
|
-
this.tableTranslationKeyCellChildTemplate);
|
|
3420
|
+
return this.translationKeyTableCellTemplate || this.translationKeyTableCellChildTemplate;
|
|
3521
3421
|
}
|
|
3522
3422
|
get _gridItemSubtitleLines() {
|
|
3523
3423
|
return this.gridItemSubtitleLinesTemplate || this.gridItemSubtitleLinesChildTemplate;
|
|
@@ -3531,19 +3431,8 @@ class DataViewComponent {
|
|
|
3531
3431
|
get _listItem() {
|
|
3532
3432
|
return this.listItemTemplate || this.listItemChildTemplate;
|
|
3533
3433
|
}
|
|
3534
|
-
/**
|
|
3535
|
-
* @deprecated Will be replaced by relativeDateTableCellTemplate
|
|
3536
|
-
*/
|
|
3537
|
-
get tableRelativeDateCellTemplate() {
|
|
3538
|
-
return this.relativeDateTableCellTemplate;
|
|
3539
|
-
}
|
|
3540
|
-
set tableRelativeDateCellTemplate(value) {
|
|
3541
|
-
this.relativeDateTableCellTemplate = value;
|
|
3542
|
-
}
|
|
3543
3434
|
get _relativeDateTableCell() {
|
|
3544
|
-
return
|
|
3545
|
-
this.relativeDateTableCellChildTemplate ||
|
|
3546
|
-
this.tableRelativeDateCellChildTemplate);
|
|
3435
|
+
return this.relativeDateTableCellTemplate || this.relativeDateTableCellChildTemplate;
|
|
3547
3436
|
}
|
|
3548
3437
|
get _listValue() {
|
|
3549
3438
|
return this.listValueTemplate || this.listValueChildTemplate;
|
|
@@ -3557,9 +3446,6 @@ class DataViewComponent {
|
|
|
3557
3446
|
get _relativeDateListValue() {
|
|
3558
3447
|
return this.relativeDateListValueTemplate || this.relativeDateListValueChildTemplate;
|
|
3559
3448
|
}
|
|
3560
|
-
get _customListValue() {
|
|
3561
|
-
return this.customListValueTemplate || this.customListValueChildTemplate;
|
|
3562
|
-
}
|
|
3563
3449
|
get _stringListValue() {
|
|
3564
3450
|
return this.stringListValueTemplate || this.stringListValueChildTemplate;
|
|
3565
3451
|
}
|
|
@@ -3584,9 +3470,6 @@ class DataViewComponent {
|
|
|
3584
3470
|
get _numberTableFilterCell() {
|
|
3585
3471
|
return this.numberTableFilterCellTemplate || this.numberTableFilterCellChildTemplate;
|
|
3586
3472
|
}
|
|
3587
|
-
get _customTableFilterCell() {
|
|
3588
|
-
return this.customTableFilterCellTemplate || this.customTableFilterCellChildTemplate;
|
|
3589
|
-
}
|
|
3590
3473
|
set parentTemplates(value) {
|
|
3591
3474
|
this.parentTemplates$.next(value);
|
|
3592
3475
|
}
|
|
@@ -3633,21 +3516,12 @@ class DataViewComponent {
|
|
|
3633
3516
|
case 'numberTableCell':
|
|
3634
3517
|
this.numberTableCellChildTemplate = item.template;
|
|
3635
3518
|
break;
|
|
3636
|
-
case 'customTableCell':
|
|
3637
|
-
this.customTableCellChildTemplate = item.template;
|
|
3638
|
-
break;
|
|
3639
|
-
case 'tableDateCell':
|
|
3640
|
-
this.tableDateCellChildTemplate = item.template;
|
|
3641
|
-
break;
|
|
3642
3519
|
case 'dateTableCell':
|
|
3643
3520
|
this.dateTableCellChildTemplate = item.template;
|
|
3644
3521
|
break;
|
|
3645
3522
|
case 'tableCell':
|
|
3646
3523
|
this.tableCellChildTemplate = item.template;
|
|
3647
3524
|
break;
|
|
3648
|
-
case 'tableTranslationKeyCell':
|
|
3649
|
-
this.tableTranslationKeyCellChildTemplate = item.template;
|
|
3650
|
-
break;
|
|
3651
3525
|
case 'translationKeyTableCell':
|
|
3652
3526
|
this.translationKeyTableCellChildTemplate = item.template;
|
|
3653
3527
|
break;
|
|
@@ -3663,9 +3537,6 @@ class DataViewComponent {
|
|
|
3663
3537
|
case 'listItem':
|
|
3664
3538
|
this.listItemChildTemplate = item.template;
|
|
3665
3539
|
break;
|
|
3666
|
-
case 'tableRelativeDateCell':
|
|
3667
|
-
this.tableRelativeDateCellChildTemplate = item.template;
|
|
3668
|
-
break;
|
|
3669
3540
|
case 'relativeDateTableCell':
|
|
3670
3541
|
this.relativeDateTableCellChildTemplate = item.template;
|
|
3671
3542
|
break;
|
|
@@ -3681,9 +3552,6 @@ class DataViewComponent {
|
|
|
3681
3552
|
case 'relativeDateListValue':
|
|
3682
3553
|
this.relativeDateListValueChildTemplate = item.template;
|
|
3683
3554
|
break;
|
|
3684
|
-
case 'customListValue':
|
|
3685
|
-
this.customListValueChildTemplate = item.template;
|
|
3686
|
-
break;
|
|
3687
3555
|
case 'stringListValue':
|
|
3688
3556
|
this.stringListValueChildTemplate = item.template;
|
|
3689
3557
|
break;
|
|
@@ -3708,9 +3576,6 @@ class DataViewComponent {
|
|
|
3708
3576
|
case 'numberTableFilterCell':
|
|
3709
3577
|
this.numberTableFilterCellChildTemplate = item.template;
|
|
3710
3578
|
break;
|
|
3711
|
-
case 'customTableFilterCell':
|
|
3712
|
-
this.customTableFilterCellChildTemplate = item.template;
|
|
3713
|
-
break;
|
|
3714
3579
|
}
|
|
3715
3580
|
});
|
|
3716
3581
|
}
|
|
@@ -3819,11 +3684,11 @@ class DataViewComponent {
|
|
|
3819
3684
|
this.pageSizeChanged.emit(event);
|
|
3820
3685
|
}
|
|
3821
3686
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3822
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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", showAllOption: "showAllOption", stringTableCellTemplate: "stringTableCellTemplate", numberTableCellTemplate: "numberTableCellTemplate", customTableCellTemplate: "customTableCellTemplate", dateTableCellTemplate: "dateTableCellTemplate", tableDateCellTemplate: "tableDateCellTemplate", tableCellTemplate: "tableCellTemplate", translationKeyTableCellTemplate: "translationKeyTableCellTemplate", tableTranslationKeyCellTemplate: "tableTranslationKeyCellTemplate", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", gridItemTemplate: "gridItemTemplate", listItemTemplate: "listItemTemplate", relativeDateTableCellTemplate: "relativeDateTableCellTemplate", tableRelativeDateCellTemplate: "tableRelativeDateCellTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", customListValueTemplate: "customListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", tableFilterCellTemplate: "tableFilterCellTemplate", dateTableFilterCellTemplate: "dateTableFilterCellTemplate", relativeDateTableFilterCellTemplate: "relativeDateTableFilterCellTemplate", translationKeyTableFilterCellTemplate: "translationKeyTableFilterCellTemplate", stringTableFilterCellTemplate: "stringTableFilterCellTemplate", numberTableFilterCellTemplate: "numberTableFilterCellTemplate", customTableFilterCellTemplate: "customTableFilterCellTemplate", 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: "customTableCellChildTemplate", first: true, predicate: ["customTableCell"], descendants: true }, { propertyName: "tableDateCellChildTemplate", first: true, predicate: ["tableDateCell"], descendants: true }, { propertyName: "dateTableCellChildTemplate", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableCellChildTemplate", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "tableTranslationKeyCellChildTemplate", first: true, predicate: ["tableTranslationKeyCell"], 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: "tableRelativeDateCellChildTemplate", first: true, predicate: ["tableRelativeDateCell"], 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: "customListValueChildTemplate", first: true, predicate: ["customListValue"], 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: "customTableFilterCellChildTemplate", first: true, predicate: ["customTableFilterCell"], 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 [customListValueTemplate]=\"_customListValue ? customListValue : 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\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #gridItemSubtitleLines let-item>\n @if (_gridItemSubtitleLines) {\n <ng-container\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #gridItem let-item>\n @if (_gridItem) {\n <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n >\n }</ng-template>\n <ng-template #listItem let-item>\n @if (_listItem) {\n <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n >\n }</ng-template>\n <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_listValue) {\n <ng-container\n [ngTemplateOutlet]=\"_listValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\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 >\n }</ng-template>\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 >\n }</ng-template>\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 >\n }</ng-template>\n <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_customListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\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 >\n }</ng-template>\n <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_dateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\n </div>\n }\n\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 [customCellTemplate]=\"_customTableCell ? customCell : 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 [customFilterCellTemplate]=\"_customTableFilterCell ? customFilterCell : 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 >\n }</ng-template>\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 >\n }</ng-template>\n <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_customTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\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 >\n }</ng-template>\n <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\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 >\n }</ng-template>\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 >\n }</ng-template>\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 #customFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_customTableFilterCell\"\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", "showAllOption", "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", "customListValueTemplate", "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", "showAllOption", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "customCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "customFilterCellTemplate", "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" }] }); }
|
|
3687
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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" }] }); }
|
|
3823
3688
|
}
|
|
3824
3689
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DataViewComponent, decorators: [{
|
|
3825
3690
|
type: Component,
|
|
3826
|
-
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 [customListValueTemplate]=\"_customListValue ? customListValue : 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\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #gridItemSubtitleLines let-item>\n @if (_gridItemSubtitleLines) {\n <ng-container\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #gridItem let-item>\n @if (_gridItem) {\n <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n >\n }</ng-template>\n <ng-template #listItem let-item>\n @if (_listItem) {\n <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n >\n }</ng-template>\n <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_listValue) {\n <ng-container\n [ngTemplateOutlet]=\"_listValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\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 >\n }</ng-template>\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 >\n }</ng-template>\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 >\n }</ng-template>\n <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_customListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\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 >\n }</ng-template>\n <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_dateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\n </div>\n }\n\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 [customCellTemplate]=\"_customTableCell ? customCell : 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 [customFilterCellTemplate]=\"_customTableFilterCell ? customFilterCell : 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 >\n }</ng-template>\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 >\n }</ng-template>\n <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_customTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\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 >\n }</ng-template>\n <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\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 >\n }</ng-template>\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 >\n }</ng-template>\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 #customFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_customTableFilterCell\"\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" }]
|
|
3691
|
+
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" }]
|
|
3827
3692
|
}], propDecorators: { listGrid: [{
|
|
3828
3693
|
type: ViewChild,
|
|
3829
3694
|
args: [DataListGridComponent]
|
|
@@ -3904,8 +3769,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
3904
3769
|
type: Input
|
|
3905
3770
|
}], pageSize: [{
|
|
3906
3771
|
type: Input
|
|
3907
|
-
}], showAllOption: [{
|
|
3908
|
-
type: Input
|
|
3909
3772
|
}], stringTableCellTemplate: [{
|
|
3910
3773
|
type: Input
|
|
3911
3774
|
}], stringTableCellChildTemplate: [{
|
|
@@ -3916,18 +3779,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
3916
3779
|
}], numberTableCellChildTemplate: [{
|
|
3917
3780
|
type: ContentChild,
|
|
3918
3781
|
args: ['numberTableCell']
|
|
3919
|
-
}], customTableCellTemplate: [{
|
|
3920
|
-
type: Input
|
|
3921
|
-
}], customTableCellChildTemplate: [{
|
|
3922
|
-
type: ContentChild,
|
|
3923
|
-
args: ['customTableCell']
|
|
3924
3782
|
}], dateTableCellTemplate: [{
|
|
3925
3783
|
type: Input
|
|
3926
|
-
}], tableDateCellTemplate: [{
|
|
3927
|
-
type: Input
|
|
3928
|
-
}], tableDateCellChildTemplate: [{
|
|
3929
|
-
type: ContentChild,
|
|
3930
|
-
args: ['tableDateCell']
|
|
3931
3784
|
}], dateTableCellChildTemplate: [{
|
|
3932
3785
|
type: ContentChild,
|
|
3933
3786
|
args: ['dateTableCell']
|
|
@@ -3938,11 +3791,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
3938
3791
|
args: ['tableCell']
|
|
3939
3792
|
}], translationKeyTableCellTemplate: [{
|
|
3940
3793
|
type: Input
|
|
3941
|
-
}], tableTranslationKeyCellTemplate: [{
|
|
3942
|
-
type: Input
|
|
3943
|
-
}], tableTranslationKeyCellChildTemplate: [{
|
|
3944
|
-
type: ContentChild,
|
|
3945
|
-
args: ['tableTranslationKeyCell']
|
|
3946
3794
|
}], translationKeyTableCellChildTemplate: [{
|
|
3947
3795
|
type: ContentChild,
|
|
3948
3796
|
args: ['translationKeyTableCell']
|
|
@@ -3968,11 +3816,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
3968
3816
|
args: ['listItem']
|
|
3969
3817
|
}], relativeDateTableCellTemplate: [{
|
|
3970
3818
|
type: Input
|
|
3971
|
-
}], tableRelativeDateCellTemplate: [{
|
|
3972
|
-
type: Input
|
|
3973
|
-
}], tableRelativeDateCellChildTemplate: [{
|
|
3974
|
-
type: ContentChild,
|
|
3975
|
-
args: ['tableRelativeDateCell']
|
|
3976
3819
|
}], relativeDateTableCellChildTemplate: [{
|
|
3977
3820
|
type: ContentChild,
|
|
3978
3821
|
args: ['relativeDateTableCell']
|
|
@@ -3996,11 +3839,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
3996
3839
|
}], relativeDateListValueChildTemplate: [{
|
|
3997
3840
|
type: ContentChild,
|
|
3998
3841
|
args: ['relativeDateListValue']
|
|
3999
|
-
}], customListValueTemplate: [{
|
|
4000
|
-
type: Input
|
|
4001
|
-
}], customListValueChildTemplate: [{
|
|
4002
|
-
type: ContentChild,
|
|
4003
|
-
args: ['customListValue']
|
|
4004
3842
|
}], stringListValueTemplate: [{
|
|
4005
3843
|
type: Input
|
|
4006
3844
|
}], stringListValueChildTemplate: [{
|
|
@@ -4041,11 +3879,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
4041
3879
|
}], numberTableFilterCellChildTemplate: [{
|
|
4042
3880
|
type: ContentChild,
|
|
4043
3881
|
args: ['numberTableFilterCell']
|
|
4044
|
-
}], customTableFilterCellTemplate: [{
|
|
4045
|
-
type: Input
|
|
4046
|
-
}], customTableFilterCellChildTemplate: [{
|
|
4047
|
-
type: ContentChild,
|
|
4048
|
-
args: ['customTableFilterCell']
|
|
4049
3882
|
}], additionalActions: [{
|
|
4050
3883
|
type: Input
|
|
4051
3884
|
}], filtered: [{
|
|
@@ -4235,11 +4068,11 @@ class DiagramComponent {
|
|
|
4235
4068
|
});
|
|
4236
4069
|
}
|
|
4237
4070
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4238
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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.
|
|
4071
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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" }] }); }
|
|
4239
4072
|
}
|
|
4240
4073
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DiagramComponent, decorators: [{
|
|
4241
4074
|
type: Component,
|
|
4242
|
-
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.
|
|
4075
|
+
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"] }]
|
|
4243
4076
|
}], propDecorators: { data: [{
|
|
4244
4077
|
type: Input
|
|
4245
4078
|
}], sumKey: [{
|
|
@@ -4311,7 +4144,6 @@ class FilterViewComponent {
|
|
|
4311
4144
|
'translationKeyTableCell',
|
|
4312
4145
|
'defaultTranslationKeyValue',
|
|
4313
4146
|
],
|
|
4314
|
-
[ColumnType.CUSTOM]: ['customFilterChipValue', 'customTableFilterCell', 'customTableCell', 'defaultCustomValue'],
|
|
4315
4147
|
[ColumnType.STRING]: ['stringFilterChipValue', 'stringTableFilterCell', 'stringTableCell', 'defaultStringValue'],
|
|
4316
4148
|
};
|
|
4317
4149
|
this.chipTemplates = {};
|
|
@@ -4331,7 +4163,6 @@ class FilterViewComponent {
|
|
|
4331
4163
|
'translationKeyTableCell',
|
|
4332
4164
|
'defaultTranslationKeyValue',
|
|
4333
4165
|
],
|
|
4334
|
-
[ColumnType.CUSTOM]: ['customFilterViewCell', 'customTableFilterCell', 'customTableCell', 'defaultCustomValue'],
|
|
4335
4166
|
[ColumnType.STRING]: ['stringFilterViewCell', 'stringTableFilterCell', 'stringTableCell', 'defaultStringValue'],
|
|
4336
4167
|
};
|
|
4337
4168
|
this.tableTemplates = {};
|
|
@@ -4472,7 +4303,7 @@ class FilterViewComponent {
|
|
|
4472
4303
|
};
|
|
4473
4304
|
}
|
|
4474
4305
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4475
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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", "showAllOption", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "customCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "customFilterCellTemplate", "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" }] }); }
|
|
4306
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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" }] }); }
|
|
4476
4307
|
}
|
|
4477
4308
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FilterViewComponent, decorators: [{
|
|
4478
4309
|
type: Component,
|
|
@@ -4528,15 +4359,6 @@ class GroupByCountDiagramComponent {
|
|
|
4528
4359
|
this.diagramTypeChanged = new EventEmitter();
|
|
4529
4360
|
this.componentStateChanged = new EventEmitter();
|
|
4530
4361
|
}
|
|
4531
|
-
/**
|
|
4532
|
-
* @deprecated Will be replaced by diagramType
|
|
4533
|
-
*/
|
|
4534
|
-
get type() {
|
|
4535
|
-
return this.diagramType;
|
|
4536
|
-
}
|
|
4537
|
-
set type(value) {
|
|
4538
|
-
this.diagramType = value;
|
|
4539
|
-
}
|
|
4540
4362
|
get data() {
|
|
4541
4363
|
return this._data$.getValue();
|
|
4542
4364
|
}
|
|
@@ -4599,7 +4421,7 @@ class GroupByCountDiagramComponent {
|
|
|
4599
4421
|
});
|
|
4600
4422
|
}
|
|
4601
4423
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: GroupByCountDiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4602
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: GroupByCountDiagramComponent, isStandalone: false, selector: "ocx-group-by-count-diagram", inputs: { sumKey: "sumKey", diagramType: "diagramType", fillMissingColors: "fillMissingColors",
|
|
4424
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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" }] }); }
|
|
4603
4425
|
}
|
|
4604
4426
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: GroupByCountDiagramComponent, decorators: [{
|
|
4605
4427
|
type: Component,
|
|
@@ -4610,8 +4432,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
4610
4432
|
type: Input
|
|
4611
4433
|
}], fillMissingColors: [{
|
|
4612
4434
|
type: Input
|
|
4613
|
-
}], type: [{
|
|
4614
|
-
type: Input
|
|
4615
4435
|
}], supportedDiagramTypes: [{
|
|
4616
4436
|
type: Input
|
|
4617
4437
|
}], data: [{
|
|
@@ -4646,17 +4466,6 @@ class InteractiveDataViewComponent {
|
|
|
4646
4466
|
set displayedColumnKeys(value) {
|
|
4647
4467
|
this.displayedColumnKeys$.next(value);
|
|
4648
4468
|
}
|
|
4649
|
-
/**
|
|
4650
|
-
* @deprecated Use `displayedColumnKeys` and pass in column ids instead of `DataTableColumn` objects
|
|
4651
|
-
*/
|
|
4652
|
-
get displayedColumns() {
|
|
4653
|
-
return (this.displayedColumnKeys
|
|
4654
|
-
.map((d) => this.columns.find((c) => c.id === d))
|
|
4655
|
-
.filter((d) => d) ?? []);
|
|
4656
|
-
}
|
|
4657
|
-
set displayedColumns(value) {
|
|
4658
|
-
this.displayedColumnKeys$.next(value.map((d) => d.id));
|
|
4659
|
-
}
|
|
4660
4469
|
set templates(value) {
|
|
4661
4470
|
this.templates$.next(value);
|
|
4662
4471
|
}
|
|
@@ -4688,24 +4497,12 @@ class InteractiveDataViewComponent {
|
|
|
4688
4497
|
get _numberTableCell() {
|
|
4689
4498
|
return this.numberTableCell;
|
|
4690
4499
|
}
|
|
4691
|
-
get _customTableCell() {
|
|
4692
|
-
return this.customTableCell;
|
|
4693
|
-
}
|
|
4694
|
-
get _tableDateCell() {
|
|
4695
|
-
return this.dateTableCell ?? this.tableDateCell;
|
|
4696
|
-
}
|
|
4697
4500
|
get _dateTableCell() {
|
|
4698
4501
|
return this.dateTableCell;
|
|
4699
4502
|
}
|
|
4700
|
-
get _tableRelativeDateCell() {
|
|
4701
|
-
return this.relativeDateTableCell ?? this.tableRelativeDateCell;
|
|
4702
|
-
}
|
|
4703
4503
|
get _relativeDateTableCell() {
|
|
4704
4504
|
return this.relativeDateTableCell;
|
|
4705
4505
|
}
|
|
4706
|
-
get _tableTranslationKeyCell() {
|
|
4707
|
-
return this.translationKeyTableCell ?? this.tableTranslationKeyCell;
|
|
4708
|
-
}
|
|
4709
4506
|
get _translationKeyTableCell() {
|
|
4710
4507
|
return this.translationKeyTableCell;
|
|
4711
4508
|
}
|
|
@@ -4727,9 +4524,6 @@ class InteractiveDataViewComponent {
|
|
|
4727
4524
|
get _relativeDateListValue() {
|
|
4728
4525
|
return this.relativeDateListValue;
|
|
4729
4526
|
}
|
|
4730
|
-
get _customListValue() {
|
|
4731
|
-
return this.customListValue;
|
|
4732
|
-
}
|
|
4733
4527
|
get _stringListValue() {
|
|
4734
4528
|
return this.stringListValue;
|
|
4735
4529
|
}
|
|
@@ -4754,9 +4548,6 @@ class InteractiveDataViewComponent {
|
|
|
4754
4548
|
get _numberTableFilterCell() {
|
|
4755
4549
|
return this.numberTableFilterCell;
|
|
4756
4550
|
}
|
|
4757
|
-
get _customTableFilterCell() {
|
|
4758
|
-
return this.customTableFilterCell;
|
|
4759
|
-
}
|
|
4760
4551
|
get data() {
|
|
4761
4552
|
return this._data;
|
|
4762
4553
|
}
|
|
@@ -4788,10 +4579,6 @@ class InteractiveDataViewComponent {
|
|
|
4788
4579
|
"NONE" /* DataSortDirection.NONE */,
|
|
4789
4580
|
];
|
|
4790
4581
|
this.pageSizes = [10, 25, 50];
|
|
4791
|
-
/**
|
|
4792
|
-
* @deprecated
|
|
4793
|
-
*/
|
|
4794
|
-
this.showAllOption = false;
|
|
4795
4582
|
this.layout = 'table';
|
|
4796
4583
|
this.defaultGroupKey = '';
|
|
4797
4584
|
this.customGroupKey = 'OCX_INTERACTIVE_DATA_VIEW.CUSTOM_GROUP';
|
|
@@ -4819,8 +4606,6 @@ class InteractiveDataViewComponent {
|
|
|
4819
4606
|
this.viewItem = new EventEmitter();
|
|
4820
4607
|
this.editItem = new EventEmitter();
|
|
4821
4608
|
this.dataViewLayoutChange = new EventEmitter();
|
|
4822
|
-
// TODO: Remove following line once displayedColumns (deprecated) has been removed
|
|
4823
|
-
this.displayedColumnsChange = new EventEmitter();
|
|
4824
4609
|
this.displayedColumnKeysChange = new EventEmitter();
|
|
4825
4610
|
this.selectionChanged = new EventEmitter();
|
|
4826
4611
|
this.pageChanged = new EventEmitter();
|
|
@@ -4834,15 +4619,12 @@ class InteractiveDataViewComponent {
|
|
|
4834
4619
|
.isSomeComponentDefinedForSlot(this.columnGroupSlotName)
|
|
4835
4620
|
.pipe(startWith(true));
|
|
4836
4621
|
this.groupSelectionChangedSlotEmitter.subscribe((event) => {
|
|
4837
|
-
|
|
4838
|
-
|
|
4839
|
-
|
|
4840
|
-
|
|
4841
|
-
};
|
|
4842
|
-
}
|
|
4622
|
+
event ??= {
|
|
4623
|
+
activeColumns: this.getDisplayedColumns(),
|
|
4624
|
+
groupKey: this.selectedGroupKey ?? this.defaultGroupKey,
|
|
4625
|
+
};
|
|
4843
4626
|
this.displayedColumnKeys$.next(event.activeColumns.map((col) => col.id));
|
|
4844
4627
|
this.selectedGroupKey$.next(event.groupKey);
|
|
4845
|
-
this.displayedColumnsChange.emit(this.displayedColumns);
|
|
4846
4628
|
this.displayedColumnKeysChange.emit(this.displayedColumnKeys);
|
|
4847
4629
|
this.columnGroupSelectionComponentState$.next({
|
|
4848
4630
|
activeColumnGroupKey: event.groupKey,
|
|
@@ -4862,9 +4644,6 @@ class InteractiveDataViewComponent {
|
|
|
4862
4644
|
}
|
|
4863
4645
|
ngOnInit() {
|
|
4864
4646
|
this.selectedGroupKey = this.defaultGroupKey;
|
|
4865
|
-
if (!this.displayedColumns || this.displayedColumns.length === 0) {
|
|
4866
|
-
this.displayedColumnKeys = this.columns.map((column) => column.id);
|
|
4867
|
-
}
|
|
4868
4647
|
if (this.defaultGroupKey && this.defaultGroupKey !== this.customGroupKey) {
|
|
4869
4648
|
this.displayedColumnKeys = this.columns
|
|
4870
4649
|
.filter((column) => column.predefinedGroupKeys?.includes(this.defaultGroupKey))
|
|
@@ -4872,7 +4651,6 @@ class InteractiveDataViewComponent {
|
|
|
4872
4651
|
}
|
|
4873
4652
|
this.displayedColumns$ = this.displayedColumnKeys$.pipe(distinctUntilChanged((prev, curr) => prev.length === curr.length && prev.every((v, i) => curr[i] === v)), map((columnKeys) => columnKeys.map((key) => this.columns.find((col) => col.id === key)).filter((d) => d) ??
|
|
4874
4653
|
[]));
|
|
4875
|
-
this.displayedColumnsChange.emit(this.displayedColumns);
|
|
4876
4654
|
this.displayedColumnKeysChange.emit(this.displayedColumnKeys);
|
|
4877
4655
|
if (!this.groupSelectionNoGroupSelectedKey) {
|
|
4878
4656
|
this.groupSelectionNoGroupSelectedKey = 'OCX_INTERACTIVE_DATA_VIEW.NO_GROUP_SELECTED';
|
|
@@ -4887,14 +4665,14 @@ class InteractiveDataViewComponent {
|
|
|
4887
4665
|
else {
|
|
4888
4666
|
columnGroupSelectionComponentState$ = columnGroupSelectionComponentState$.pipe(startWith({
|
|
4889
4667
|
activeColumnGroupKey: this.selectedGroupKey,
|
|
4890
|
-
displayedColumns: this.
|
|
4668
|
+
displayedColumns: this.getDisplayedColumns(),
|
|
4891
4669
|
}));
|
|
4892
4670
|
customGroupColumnSelectorComponentState$ = customGroupColumnSelectorComponentState$.pipe(startWith({
|
|
4893
4671
|
actionColumnConfig: {
|
|
4894
4672
|
frozen: this.frozenActionColumn,
|
|
4895
4673
|
position: this.actionColumnPosition,
|
|
4896
4674
|
},
|
|
4897
|
-
displayedColumns: this.
|
|
4675
|
+
displayedColumns: this.getDisplayedColumns(),
|
|
4898
4676
|
activeColumnGroupKey: this.selectedGroupKey,
|
|
4899
4677
|
}));
|
|
4900
4678
|
}
|
|
@@ -4923,91 +4701,73 @@ class InteractiveDataViewComponent {
|
|
|
4923
4701
|
this.templates$.value?.forEach((item) => {
|
|
4924
4702
|
switch (item.getType()) {
|
|
4925
4703
|
case 'tableCell':
|
|
4926
|
-
this.
|
|
4927
|
-
break;
|
|
4928
|
-
case 'tableDateCell':
|
|
4929
|
-
this.tableDateCell = item.template;
|
|
4704
|
+
this.primeNgTableCell = item.template;
|
|
4930
4705
|
break;
|
|
4931
4706
|
case 'dateTableCell':
|
|
4932
|
-
this.
|
|
4933
|
-
break;
|
|
4934
|
-
case 'tableRelativeDateCell':
|
|
4935
|
-
this.tableRelativeDateCell = item.template;
|
|
4707
|
+
this.primeNgDateTableCell = item.template;
|
|
4936
4708
|
break;
|
|
4937
4709
|
case 'relativeDateTableCell':
|
|
4938
|
-
this.
|
|
4939
|
-
break;
|
|
4940
|
-
case 'tableTranslationKeyCell':
|
|
4941
|
-
this.tableTranslationKeyCell = item.template;
|
|
4710
|
+
this.primeNgRelativeDateTableCell = item.template;
|
|
4942
4711
|
break;
|
|
4943
4712
|
case 'translationKeyTableCell':
|
|
4944
|
-
this.
|
|
4713
|
+
this.primeNgTranslationKeyTableCell = item.template;
|
|
4945
4714
|
break;
|
|
4946
4715
|
case 'gridItemSubtitleLines':
|
|
4947
|
-
this.
|
|
4716
|
+
this.primeNgGridItemSubtitleLines = item.template;
|
|
4948
4717
|
break;
|
|
4949
4718
|
case 'listItemSubtitleLines':
|
|
4950
|
-
this.
|
|
4719
|
+
this.primeNgListItemSubtitleLines = item.template;
|
|
4951
4720
|
break;
|
|
4952
4721
|
case 'stringTableCell':
|
|
4953
|
-
this.
|
|
4722
|
+
this.primeNgStringTableCell = item.template;
|
|
4954
4723
|
break;
|
|
4955
4724
|
case 'numberTableCell':
|
|
4956
|
-
this.
|
|
4957
|
-
break;
|
|
4958
|
-
case 'customTableCell':
|
|
4959
|
-
this.customTableCell = item.template;
|
|
4725
|
+
this.primeNgNumberTableCell = item.template;
|
|
4960
4726
|
break;
|
|
4961
4727
|
case 'gridItem':
|
|
4962
|
-
this.
|
|
4728
|
+
this.primeNgGridItem = item.template;
|
|
4963
4729
|
break;
|
|
4964
4730
|
case 'listItem':
|
|
4965
|
-
this.
|
|
4731
|
+
this.primeNgListItem = item.template;
|
|
4966
4732
|
break;
|
|
4967
4733
|
case 'topCenter':
|
|
4968
|
-
this.
|
|
4734
|
+
this.primeNgTopCenter = item.template;
|
|
4969
4735
|
break;
|
|
4970
4736
|
case 'listValue':
|
|
4971
|
-
this.
|
|
4737
|
+
this.primeNgListValue = item.template;
|
|
4972
4738
|
break;
|
|
4973
4739
|
case 'translationKeyListValue':
|
|
4974
|
-
this.
|
|
4740
|
+
this.primeNgTranslationKeyListValue = item.template;
|
|
4975
4741
|
break;
|
|
4976
4742
|
case 'numberListValue':
|
|
4977
|
-
this.
|
|
4743
|
+
this.primeNgNumberListValue = item.template;
|
|
4978
4744
|
break;
|
|
4979
4745
|
case 'relativeDateListValue':
|
|
4980
|
-
this.
|
|
4981
|
-
break;
|
|
4982
|
-
case 'customListValue':
|
|
4983
|
-
this.customListValue = item.template;
|
|
4746
|
+
this.primeNgRelativeDateListValue = item.template;
|
|
4984
4747
|
break;
|
|
4985
4748
|
case 'stringListValue':
|
|
4986
|
-
this.
|
|
4749
|
+
this.primeNgStringListValue = item.template;
|
|
4987
4750
|
break;
|
|
4988
4751
|
case 'dateListValue':
|
|
4989
|
-
this.
|
|
4752
|
+
this.primeNgDateListValue = item.template;
|
|
4990
4753
|
break;
|
|
4991
4754
|
case 'tableFilterCell':
|
|
4992
|
-
this.
|
|
4755
|
+
this.primeNgTableFilterCell = item.template;
|
|
4993
4756
|
break;
|
|
4994
4757
|
case 'dateTableFilterCell':
|
|
4995
|
-
this.
|
|
4758
|
+
this.primeNgDateTableFilterCell = item.template;
|
|
4996
4759
|
break;
|
|
4997
4760
|
case 'relativeDateTableFilterCell':
|
|
4998
|
-
this.
|
|
4761
|
+
this.primeNgRelativeDateTableFilterCell = item.template;
|
|
4999
4762
|
break;
|
|
5000
4763
|
case 'translationKeyTableFilterCell':
|
|
5001
|
-
this.
|
|
4764
|
+
this.primeNgTranslationKeyTableFilterCell = item.template;
|
|
5002
4765
|
break;
|
|
5003
4766
|
case 'stringTableFilterCell':
|
|
5004
|
-
this.
|
|
4767
|
+
this.primeNgStringTableFilterCell = item.template;
|
|
5005
4768
|
break;
|
|
5006
4769
|
case 'numberTableFilterCell':
|
|
5007
|
-
this.
|
|
5008
|
-
break;
|
|
5009
|
-
case 'customTableFilterCell':
|
|
5010
|
-
this.customTableFilterCell = item.template;
|
|
4770
|
+
this.primeNgNumberTableFilterCell = item.template;
|
|
5011
4771
|
break;
|
|
5012
4772
|
}
|
|
5013
4773
|
});
|
|
@@ -5051,8 +4811,6 @@ class InteractiveDataViewComponent {
|
|
|
5051
4811
|
onColumnGroupSelectionChange(event) {
|
|
5052
4812
|
this.displayedColumnKeys = event.activeColumns.map((col) => col.id);
|
|
5053
4813
|
this.selectedGroupKey = event.groupKey;
|
|
5054
|
-
// TODO: Remove following line once displayedColumns (deprecated) has been removed
|
|
5055
|
-
this.displayedColumnsChange.emit(this.displayedColumns);
|
|
5056
4814
|
this.displayedColumnKeysChange.emit(this.displayedColumnKeys);
|
|
5057
4815
|
}
|
|
5058
4816
|
registerEventListenerForDataView() {
|
|
@@ -5091,8 +4849,6 @@ class InteractiveDataViewComponent {
|
|
|
5091
4849
|
onColumnSelectionChange(event) {
|
|
5092
4850
|
this.displayedColumnKeys = event.activeColumns.map((col) => col.id);
|
|
5093
4851
|
this.selectedGroupKey = this.customGroupKey;
|
|
5094
|
-
// TODO: Remove following line once displayedColumns (deprecated) has been removed
|
|
5095
|
-
this.displayedColumnsChange.emit(this.displayedColumns);
|
|
5096
4852
|
this.displayedColumnKeysChange.emit(this.displayedColumnKeys);
|
|
5097
4853
|
}
|
|
5098
4854
|
onActionColumnConfigChange(event) {
|
|
@@ -5112,12 +4868,17 @@ class InteractiveDataViewComponent {
|
|
|
5112
4868
|
this.pageSize = event;
|
|
5113
4869
|
this.pageSizeChanged.emit(event);
|
|
5114
4870
|
}
|
|
4871
|
+
getDisplayedColumns() {
|
|
4872
|
+
return (this.displayedColumnKeys
|
|
4873
|
+
.map((key) => this.columns.find((c) => c.id === key))
|
|
4874
|
+
.filter((d) => d) ?? []);
|
|
4875
|
+
}
|
|
5115
4876
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: InteractiveDataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5116
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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", showAllOption: "showAllOption", 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", displayedColumns: "displayedColumns", 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", displayedColumnsChange: "displayedColumnsChange", 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: "tableDateCell", first: true, predicate: ["tableDateCell"], descendants: true }, { propertyName: "dateTableCell", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableRelativeDateCell", first: true, predicate: ["tableRelativeDateCell"], descendants: true }, { propertyName: "relativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "tableTranslationKeyCell", first: true, predicate: ["tableTranslationKeyCell"], 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: "customTableCell", first: true, predicate: ["customTableCell"], 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: "customListValue", first: true, predicate: ["customListValue"], 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: "customTableFilterCell", first: true, predicate: ["customTableFilterCell"], 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]=\"_stringTableCell ? stringTableCell : undefined\"\n [numberTableCellTemplate]=\"_numberTableCell ? numberTableCell : undefined\"\n [customTableCellTemplate]=\"_customTableCell ? customTableCell : undefined\"\n [dateTableCellTemplate]=\"_dateTableCell ? dateTableCell : _tableDateCell ? tableDateCell : undefined\"\n [relativeDateTableCellTemplate]=\"_relativeDateTableCell ? relativeDateTableCell : _tableRelativeDateCell ? tableRelativeDateCell : undefined\"\n [tableCellTemplate]=\"_tableCell ? tableCell : undefined\"\n [translationKeyTableCellTemplate]=\"_translationKeyTableCell ? translationKeyTableCell : _tableTranslationKeyCell ? tableTranslationKeyCell : undefined\"\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 [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n [gridItemTemplate]=\"_gridItem ? gridItem : undefined\"\n [tableFilterCellTemplate]=\"_tableFilterCell ? tableFilterCell : undefined\"\n [dateTableFilterCellTemplate]=\"_dateTableFilterCell ? dateTableFilterCell : undefined\"\n [customTableFilterCellTemplate]=\"_customTableFilterCell ? customTableFilterCell : undefined\"\n [numberTableFilterCellTemplate]=\"_numberTableFilterCell ? numberTableFilterCell : undefined\"\n [stringTableFilterCellTemplate]=\"_stringTableFilterCell ? stringTableFilterCell : undefined\"\n [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateTableFilterCell : undefined\"\n [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyTableFilterCell : undefined\"\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 #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableDateCell) {\n <ng-container [ngTemplateOutlet]=\"_tableDateCell\" [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 #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableRelativeDateCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\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 #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableTranslationKeyCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\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 #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customListValue) {\n <ng-container [ngTemplateOutlet]=\"_customListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\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 #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_customTableFilterCell\"\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", "showAllOption", "stringTableCellTemplate", "numberTableCellTemplate", "customTableCellTemplate", "dateTableCellTemplate", "tableDateCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "tableTranslationKeyCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "tableRelativeDateCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "customListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "tableFilterCellTemplate", "dateTableFilterCellTemplate", "relativeDateTableFilterCellTemplate", "translationKeyTableFilterCellTemplate", "stringTableFilterCellTemplate", "numberTableFilterCellTemplate", "customTableFilterCellTemplate", "additionalActions", "parentTemplates"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "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" }] }); }
|
|
4877
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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", "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" }] }); }
|
|
5117
4878
|
}
|
|
5118
4879
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: InteractiveDataViewComponent, decorators: [{
|
|
5119
4880
|
type: Component,
|
|
5120
|
-
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]=\"_stringTableCell ? stringTableCell : undefined\"\n [numberTableCellTemplate]=\"_numberTableCell ? numberTableCell : undefined\"\n [customTableCellTemplate]=\"_customTableCell ? customTableCell : undefined\"\n [dateTableCellTemplate]=\"_dateTableCell ? dateTableCell : _tableDateCell ? tableDateCell : undefined\"\n [relativeDateTableCellTemplate]=\"_relativeDateTableCell ? relativeDateTableCell : _tableRelativeDateCell ? tableRelativeDateCell : undefined\"\n [tableCellTemplate]=\"_tableCell ? tableCell : undefined\"\n [translationKeyTableCellTemplate]=\"_translationKeyTableCell ? translationKeyTableCell : _tableTranslationKeyCell ? tableTranslationKeyCell : undefined\"\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 [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n [gridItemTemplate]=\"_gridItem ? gridItem : undefined\"\n [tableFilterCellTemplate]=\"_tableFilterCell ? tableFilterCell : undefined\"\n [dateTableFilterCellTemplate]=\"_dateTableFilterCell ? dateTableFilterCell : undefined\"\n [customTableFilterCellTemplate]=\"_customTableFilterCell ? customTableFilterCell : undefined\"\n [numberTableFilterCellTemplate]=\"_numberTableFilterCell ? numberTableFilterCell : undefined\"\n [stringTableFilterCellTemplate]=\"_stringTableFilterCell ? stringTableFilterCell : undefined\"\n [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateTableFilterCell : undefined\"\n [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyTableFilterCell : undefined\"\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 #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableDateCell) {\n <ng-container [ngTemplateOutlet]=\"_tableDateCell\" [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 #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableRelativeDateCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\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 #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableTranslationKeyCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\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 #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customListValue) {\n <ng-container [ngTemplateOutlet]=\"_customListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\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 #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_customTableFilterCell\"\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" }]
|
|
4881
|
+
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" }]
|
|
5121
4882
|
}], ctorParameters: () => [], propDecorators: { dataView: [{
|
|
5122
4883
|
type: ViewChild,
|
|
5123
4884
|
args: [DataViewComponent]
|
|
@@ -5175,8 +4936,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
5175
4936
|
type: Input
|
|
5176
4937
|
}], pageSize: [{
|
|
5177
4938
|
type: Input
|
|
5178
|
-
}], showAllOption: [{
|
|
5179
|
-
type: Input
|
|
5180
4939
|
}], totalRecordsOnServer: [{
|
|
5181
4940
|
type: Input
|
|
5182
4941
|
}], layout: [{
|
|
@@ -5215,8 +4974,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
5215
4974
|
type: Input
|
|
5216
4975
|
}], displayedColumnKeys: [{
|
|
5217
4976
|
type: Input
|
|
5218
|
-
}], displayedColumns: [{
|
|
5219
|
-
type: Input
|
|
5220
4977
|
}], frozenActionColumn: [{
|
|
5221
4978
|
type: Input
|
|
5222
4979
|
}], actionColumnPosition: [{
|
|
@@ -5228,21 +4985,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
5228
4985
|
}], tableCell: [{
|
|
5229
4986
|
type: ContentChild,
|
|
5230
4987
|
args: ['tableCell']
|
|
5231
|
-
}], tableDateCell: [{
|
|
5232
|
-
type: ContentChild,
|
|
5233
|
-
args: ['tableDateCell']
|
|
5234
4988
|
}], dateTableCell: [{
|
|
5235
4989
|
type: ContentChild,
|
|
5236
4990
|
args: ['dateTableCell']
|
|
5237
|
-
}], tableRelativeDateCell: [{
|
|
5238
|
-
type: ContentChild,
|
|
5239
|
-
args: ['tableRelativeDateCell']
|
|
5240
4991
|
}], relativeDateTableCell: [{
|
|
5241
4992
|
type: ContentChild,
|
|
5242
4993
|
args: ['relativeDateTableCell']
|
|
5243
|
-
}], tableTranslationKeyCell: [{
|
|
5244
|
-
type: ContentChild,
|
|
5245
|
-
args: ['tableTranslationKeyCell']
|
|
5246
4994
|
}], translationKeyTableCell: [{
|
|
5247
4995
|
type: ContentChild,
|
|
5248
4996
|
args: ['translationKeyTableCell']
|
|
@@ -5258,9 +5006,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
5258
5006
|
}], numberTableCell: [{
|
|
5259
5007
|
type: ContentChild,
|
|
5260
5008
|
args: ['numberTableCell']
|
|
5261
|
-
}], customTableCell: [{
|
|
5262
|
-
type: ContentChild,
|
|
5263
|
-
args: ['customTableCell']
|
|
5264
5009
|
}], gridItem: [{
|
|
5265
5010
|
type: ContentChild,
|
|
5266
5011
|
args: ['gridItem']
|
|
@@ -5282,9 +5027,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
5282
5027
|
}], relativeDateListValue: [{
|
|
5283
5028
|
type: ContentChild,
|
|
5284
5029
|
args: ['relativeDateListValue']
|
|
5285
|
-
}], customListValue: [{
|
|
5286
|
-
type: ContentChild,
|
|
5287
|
-
args: ['customListValue']
|
|
5288
5030
|
}], stringListValue: [{
|
|
5289
5031
|
type: ContentChild,
|
|
5290
5032
|
args: ['stringListValue']
|
|
@@ -5309,9 +5051,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
5309
5051
|
}], numberTableFilterCell: [{
|
|
5310
5052
|
type: ContentChild,
|
|
5311
5053
|
args: ['numberTableFilterCell']
|
|
5312
|
-
}], customTableFilterCell: [{
|
|
5313
|
-
type: ContentChild,
|
|
5314
|
-
args: ['customTableFilterCell']
|
|
5315
5054
|
}], templates: [{
|
|
5316
5055
|
type: ContentChildren,
|
|
5317
5056
|
args: [PrimeTemplate]
|
|
@@ -5327,8 +5066,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
5327
5066
|
type: Output
|
|
5328
5067
|
}], dataViewLayoutChange: [{
|
|
5329
5068
|
type: Output
|
|
5330
|
-
}], displayedColumnsChange: [{
|
|
5331
|
-
type: Output
|
|
5332
5069
|
}], displayedColumnKeysChange: [{
|
|
5333
5070
|
type: Output
|
|
5334
5071
|
}], selectionChanged: [{
|
|
@@ -5736,15 +5473,6 @@ class PortalDialogService {
|
|
|
5736
5473
|
this.cleanupAndCloseDialog();
|
|
5737
5474
|
this.eventsTopic.destroy();
|
|
5738
5475
|
}
|
|
5739
|
-
/**
|
|
5740
|
-
* @deprecated
|
|
5741
|
-
*/
|
|
5742
|
-
open(componentType, config) {
|
|
5743
|
-
if (isDevMode()) {
|
|
5744
|
-
console.warn('You are using a deprecated method to display a dialog. Please move to the new one');
|
|
5745
|
-
}
|
|
5746
|
-
return this.dialogService.open(componentType, config);
|
|
5747
|
-
}
|
|
5748
5476
|
openDialog(title, componentOrMessage, primaryButtonTranslationKeyOrDetails, secondaryButtonTranslationKeyOrDetails, extrasOrShowXButton = {}) {
|
|
5749
5477
|
const dialogOptions = typeof extrasOrShowXButton === 'object'
|
|
5750
5478
|
? extrasOrShowXButton
|