@onecx/angular-accelerator 5.5.0 → 5.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/index.mjs +2 -1
- package/esm2022/lib/angular-accelerator-primeng.module.mjs +14 -7
- package/esm2022/lib/angular-accelerator.module.mjs +10 -9
- package/esm2022/lib/components/data-layout-selection/data-layout-selection.component.mjs +9 -9
- package/esm2022/lib/components/data-list-grid/data-list-grid.component.mjs +174 -8
- package/esm2022/lib/components/data-table/data-table.component.mjs +115 -6
- package/esm2022/lib/components/data-view/data-view.component.mjs +158 -6
- package/esm2022/lib/components/interactive-data-view/interactive-data-view.component.mjs +127 -4
- package/esm2022/lib/components/page-header/page-header.component.mjs +3 -3
- package/esm2022/lib/directives/tooltipOnOverflow.directive.mjs +48 -0
- package/esm2022/lib/model/column-type.model.mjs +7 -1
- package/esm2022/testing/data-table.harness.mjs +2 -2
- package/esm2022/testing/data-view.harness.mjs +3 -3
- package/fesm2022/onecx-angular-accelerator-testing.mjs +3 -3
- package/fesm2022/onecx-angular-accelerator-testing.mjs.map +1 -1
- package/fesm2022/onecx-angular-accelerator.mjs +755 -157
- package/fesm2022/onecx-angular-accelerator.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/angular-accelerator-primeng.module.d.ts +2 -1
- package/lib/angular-accelerator.module.d.ts +7 -6
- package/lib/components/data-list-grid/data-list-grid.component.d.ts +51 -8
- package/lib/components/data-table/data-table.component.d.ts +25 -4
- package/lib/components/data-view/data-view.component.d.ts +52 -3
- package/lib/components/interactive-data-view/interactive-data-view.component.d.ts +36 -7
- package/lib/directives/tooltipOnOverflow.directive.d.ts +14 -0
- package/lib/model/column-type.model.d.ts +6 -0
- package/package.json +1 -1
- package/testing/data-table.harness.d.ts +1 -1
- package/testing/data-view.harness.d.ts +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, Directive, Optional, Inject, Input, HostListener, EventEmitter, Output, Component, Injectable, Injector, LOCALE_ID, Pipe, ViewEncapsulation, ContentChild, ViewChild, NgModule, APP_INITIALIZER, inject } from '@angular/core';
|
|
2
|
+
import { InjectionToken, Directive, Optional, Inject, Input, HostListener, EventEmitter, Output, Component, Injectable, Injector, LOCALE_ID, Pipe, ViewEncapsulation, ContentChild, ViewChild, PLATFORM_ID, ContentChildren, ViewChildren, QueryList, NgModule, APP_INITIALIZER, inject } from '@angular/core';
|
|
3
3
|
import * as i3 from '@onecx/angular-integration-interface';
|
|
4
4
|
import { UserService } from '@onecx/angular-integration-interface';
|
|
5
5
|
import * as i1 from '@angular/common/http';
|
|
@@ -7,15 +7,15 @@ import * as i4 from '@angular/common';
|
|
|
7
7
|
import { CurrencyPipe, DecimalPipe, DatePipe, Location, CommonModule } from '@angular/common';
|
|
8
8
|
import * as i7 from 'primeng/button';
|
|
9
9
|
import { ButtonModule } from 'primeng/button';
|
|
10
|
-
import * as
|
|
10
|
+
import * as i3$1 from '@angular/forms';
|
|
11
11
|
import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
12
12
|
import * as i2 from 'primeng/dropdown';
|
|
13
13
|
import { DropdownModule } from 'primeng/dropdown';
|
|
14
14
|
import * as i1$1 from '@ngx-translate/core';
|
|
15
15
|
import { TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
|
|
16
|
-
import * as
|
|
17
|
-
import { PrimeIcons } from 'primeng/api';
|
|
18
|
-
import { BehaviorSubject, map, filter, concat, of, combineLatest, mergeMap, first, tap, firstValueFrom, skip, defaultIfEmpty, forkJoin } from 'rxjs';
|
|
16
|
+
import * as i1$3 from 'primeng/api';
|
|
17
|
+
import { PrimeIcons, PrimeTemplate, SharedModule } from 'primeng/api';
|
|
18
|
+
import { BehaviorSubject, map, filter, concat, of, combineLatest, mergeMap, debounceTime, first, tap, firstValueFrom, skip, defaultIfEmpty, forkJoin } from 'rxjs';
|
|
19
19
|
import { __decorate, __metadata } from 'tslib';
|
|
20
20
|
import * as i1$2 from '@angular/router';
|
|
21
21
|
import { NavigationEnd, Router, ActivatedRoute, RouterModule } from '@angular/router';
|
|
@@ -24,15 +24,16 @@ import { SyncableTopic, isValidDate as isValidDate$1 } from '@onecx/accelerator'
|
|
|
24
24
|
import * as i5 from 'primeng/breadcrumb';
|
|
25
25
|
import { BreadcrumbModule } from 'primeng/breadcrumb';
|
|
26
26
|
import * as i6 from 'primeng/tooltip';
|
|
27
|
+
import { Tooltip } from 'primeng/tooltip';
|
|
27
28
|
import * as i8 from 'primeng/menu';
|
|
28
29
|
import { MenuModule } from 'primeng/menu';
|
|
29
30
|
import * as i9 from 'primeng/skeleton';
|
|
30
31
|
import { SkeletonModule } from 'primeng/skeleton';
|
|
31
|
-
import * as i4$
|
|
32
|
+
import * as i4$1 from 'primeng/dialog';
|
|
32
33
|
import { DialogModule } from 'primeng/dialog';
|
|
33
34
|
import * as i5$1 from 'primeng/picklist';
|
|
34
35
|
import { PickListModule } from 'primeng/picklist';
|
|
35
|
-
import * as
|
|
36
|
+
import * as i4$2 from 'primeng/selectbutton';
|
|
36
37
|
import { SelectButtonModule } from 'primeng/selectbutton';
|
|
37
38
|
import * as i7$1 from 'primeng/dataview';
|
|
38
39
|
import { DataViewModule } from 'primeng/dataview';
|
|
@@ -43,7 +44,7 @@ import { MultiSelectModule } from 'primeng/multiselect';
|
|
|
43
44
|
import * as d3 from 'd3-scale-chromatic';
|
|
44
45
|
import * as i5$2 from 'primeng/chart';
|
|
45
46
|
import { ChartModule } from 'primeng/chart';
|
|
46
|
-
import * as i6$
|
|
47
|
+
import * as i6$1 from 'primeng/message';
|
|
47
48
|
import { MessageModule } from 'primeng/message';
|
|
48
49
|
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
|
|
49
50
|
|
|
@@ -240,7 +241,7 @@ class SearchConfigComponent {
|
|
|
240
241
|
this.selectedSearchConfigChanged?.emit(event.value);
|
|
241
242
|
}
|
|
242
243
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SearchConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
243
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SearchConfigComponent, selector: "ocx-search-config", inputs: { searchConfigs: "searchConfigs", placeholderKey: "placeholderKey" }, outputs: { selectedSearchConfigChanged: "selectedSearchConfigChanged" }, ngImport: i0, template: "<div *ngIf=\"formGroup\">\n <form [formGroup]=\"formGroup\">\n <div *ngIf=\"searchConfigs !== undefined\">\n <div *ngIf=\"searchConfigs.length > 0\">\n <p-dropdown\n id=\"searchConfig\"\n formControlName=\"searchConfigForm\"\n [options]=\"searchConfigs\"\n optionLabel=\"name\"\n [placeholder]=\"placeholderKey | translate\"\n [showClear]=\"true\"\n (onChange)=\"onSearchConfigChange($event)\"\n ></p-dropdown>\n </div>\n </div>\n </form>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type:
|
|
244
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SearchConfigComponent, selector: "ocx-search-config", inputs: { searchConfigs: "searchConfigs", placeholderKey: "placeholderKey" }, outputs: { selectedSearchConfigChanged: "selectedSearchConfigChanged" }, ngImport: i0, template: "<div *ngIf=\"formGroup\">\n <form [formGroup]=\"formGroup\">\n <div *ngIf=\"searchConfigs !== undefined\">\n <div *ngIf=\"searchConfigs.length > 0\">\n <p-dropdown\n id=\"searchConfig\"\n formControlName=\"searchConfigForm\"\n [options]=\"searchConfigs\"\n optionLabel=\"name\"\n [placeholder]=\"placeholderKey | translate\"\n [showClear]=\"true\"\n (onChange)=\"onSearchConfigChange($event)\"\n ></p-dropdown>\n </div>\n </div>\n </form>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
244
245
|
}
|
|
245
246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SearchConfigComponent, decorators: [{
|
|
246
247
|
type: Component,
|
|
@@ -598,11 +599,11 @@ class PageHeaderComponent {
|
|
|
598
599
|
}
|
|
599
600
|
}
|
|
600
601
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PageHeaderComponent, deps: [{ token: BreadcrumbService }, { token: i1$1.TranslateService }, { token: i3.AppStateService }, { token: i3.UserService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
601
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: PageHeaderComponent, selector: "ocx-page-header", inputs: { header: "header", loading: "loading", figureBackground: "figureBackground", showFigure: "showFigure", figureImage: "figureImage", disableDefaultActions: "disableDefaultActions", subheader: "subheader", actions: "actions", objectDetails: "objectDetails", showBreadcrumbs: "showBreadcrumbs", manualBreadcrumbs: "manualBreadcrumbs", enableGridView: "enableGridView", gridLayoutDesktopColumns: "gridLayoutDesktopColumns" }, outputs: { save: "save" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n <ng-container *ngIf=\"showBreadcrumbs\">\n <p-breadcrumb\n [model]=\"items\"\n *ngIf=\"breadcrumbs$ | async as items\"\n [home]=\"(home$ | async)?.menuItem ?? {}\"\n [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n [attr.manual]=\"manualBreadcrumbs\"\n ></p-breadcrumb>\n </ng-container>\n <div class=\"title-bar flex flex-row md:justify-content-between p-3\">\n <div class=\"title-wrap\">\n <div class=\"figure flex h-2rem w-2rem md:h-3rem md:w-3rem\" *ngIf=\"showFigure\">\n <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n <ng-content select=\"[figureImage]\"></ng-content>\n <img\n *ngIf=\"figureImage && !figureImageLoadError\"\n [ocxSrc]=\"figureImage\"\n alt=\"Figure image\"\n class=\"w-full\"\n (error)=\"handleImageError()\"\n />\n </div>\n <div\n class=\"colorblob flex-1 border-round\"\n *ngIf=\"previewImage.children.length === 0 || figureImageLoadError\"\n ></div>\n </div>\n <ng-template #skeletonBar>\n <div class=\"header justify-content-evenly\">\n <p-skeleton width=\"10rem\"></p-skeleton>\n <p-skeleton width=\"10rem\"></p-skeleton>\n </div>\n </ng-template>\n <div class=\"header\" *ngIf=\"!loading; else skeletonBar\">\n <h1 id=\"page-header\" *ngIf=\"!!header\">{{ header }}</h1>\n <h2 id=\"page-subheader\" *ngIf=\"!!subheader\">{{ subheader }}</h2>\n </div>\n </div>\n <div class=\"action-items-wrap mt-2 md:mt-0\">\n <ng-container *ngIf=\"additionalToolbarContentLeft\" [ngTemplateOutlet]=\"additionalToolbarContentLeft\">\n </ng-container>\n\n <ng-container *ngIf=\"!disableDefaultActions\"> </ng-container>\n <ng-template #skeletonActions>\n <div class=\"flex\">\n <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n </ng-template>\n <ng-container *ngIf=\"!loading; else skeletonActions\">\n <div *ngIf=\"inlineActions && inlineActions.length > 0\" class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n <ng-container *ngFor=\"let action of inlineActions\">\n <p-button\n id=\"{{ action.id }}\"\n [icon]=\"action.icon ?? ''\"\n type=\"button\"\n class=\"action-button\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n (onClick)=\"action.actionCallback()\"\n [pTooltip]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [attr.aria-label]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </ng-container>\n </div>\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n <div *ngIf=\"overflowActions.length !== 0\">\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"additionalToolbarContent\" [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n </div>\n </div>\n\n <div\n class=\"object-panel\"\n [ngClass]=\"getObjectPanelLayoutClasses()\"\n >\n <ng-container *ngIf=\"objectDetails\">\n <div\n class=\"object-info\"\n [ngClass]=\"getObjectInfoLayoutClasses()\"\n *ngFor=\"let item of objectDetails\"\n >\n <span\n class=\"flex font-medium text-600 object-info-grid-label\"\n name=\"object-detail-label\"\n [pTooltip]=\"item.labelTooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >{{ item.label | dynamicPipe:item.labelPipe }}</span\n >\n <span\n *ngIf=\"item.icon || item.value\"\n class=\"object-info-grid-value\"\n >\n <span\n class=\"flex text-900 align-items-center gap-2 w-max\"\n [ngClass]=\"generateItemStyle(item)\"\n name=\"object-detail-value\"\n >\n <span \n class=\"flex align-items-center gap-2\" \n [pTooltip]=\"item.valueTooltip || item.tooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\" \n >\n <i *ngIf=\"item.icon\" class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}' name=\"object-detail-icon\"></i>\n {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n <p-button\n *ngIf=\"item.actionItemIcon && item.actionItemCallback\"\n [icon]=\"item.actionItemIcon\"\n styleClass=\"p-button-text p-0 w-full\"\n [pTooltip]=\"item.actionItemTooltip || ''\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"item.actionItemTooltip || ''\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n </span>\n </span>\n </div>\n </ng-container>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure{width:3rem;height:3rem;margin-right:.5rem;position:relative}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i8.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: SrcDirective, selector: "[ocxSrc]", inputs: ["ocxSrc"], outputs: ["error"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
602
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: PageHeaderComponent, selector: "ocx-page-header", inputs: { header: "header", loading: "loading", figureBackground: "figureBackground", showFigure: "showFigure", figureImage: "figureImage", disableDefaultActions: "disableDefaultActions", subheader: "subheader", actions: "actions", objectDetails: "objectDetails", showBreadcrumbs: "showBreadcrumbs", manualBreadcrumbs: "manualBreadcrumbs", enableGridView: "enableGridView", gridLayoutDesktopColumns: "gridLayoutDesktopColumns" }, outputs: { save: "save" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n <ng-container *ngIf=\"showBreadcrumbs\">\n <p-breadcrumb\n [model]=\"items\"\n *ngIf=\"breadcrumbs$ | async as items\"\n [home]=\"(home$ | async)?.menuItem ?? {}\"\n [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n [attr.manual]=\"manualBreadcrumbs\"\n ></p-breadcrumb>\n </ng-container>\n <div class=\"title-bar flex flex-row md:justify-content-between p-3\">\n <div class=\"title-wrap\">\n <div class=\"figure flex h-2rem w-2rem md:h-3rem md:w-3rem\" *ngIf=\"showFigure\">\n <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n <ng-content select=\"[figureImage]\"></ng-content>\n <img\n *ngIf=\"figureImage && !figureImageLoadError\"\n [ocxSrc]=\"figureImage\"\n alt=\"Figure image\"\n class=\"w-full\"\n (error)=\"handleImageError()\"\n />\n </div>\n <div\n class=\"colorblob flex-1 border-round\"\n *ngIf=\"previewImage.children.length === 0 || figureImageLoadError\"\n ></div>\n </div>\n <ng-template #skeletonBar>\n <div class=\"header justify-content-evenly\">\n <p-skeleton width=\"10rem\"></p-skeleton>\n <p-skeleton width=\"10rem\"></p-skeleton>\n </div>\n </ng-template>\n <div class=\"header\" *ngIf=\"!loading; else skeletonBar\">\n <h1 id=\"page-header\" *ngIf=\"!!header\">{{ header }}</h1>\n <h2 id=\"page-subheader\" *ngIf=\"!!subheader\">{{ subheader }}</h2>\n </div>\n </div>\n <div class=\"action-items-wrap mt-2 md:mt-0\">\n <ng-container *ngIf=\"additionalToolbarContentLeft\" [ngTemplateOutlet]=\"additionalToolbarContentLeft\">\n </ng-container>\n\n <ng-container *ngIf=\"!disableDefaultActions\"> </ng-container>\n <ng-template #skeletonActions>\n <div class=\"flex\">\n <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n </ng-template>\n <ng-container *ngIf=\"!loading; else skeletonActions\">\n <div *ngIf=\"inlineActions && inlineActions.length > 0\" class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n <ng-container *ngFor=\"let action of inlineActions\">\n <p-button\n id=\"{{ action.id }}\"\n [icon]=\"action.icon ?? ''\"\n type=\"button\"\n class=\"action-button\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n (onClick)=\"action.actionCallback()\"\n [pTooltip]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [attr.aria-label]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </ng-container>\n </div>\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n <div *ngIf=\"overflowActions.length !== 0\">\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"additionalToolbarContent\" [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n <ng-container *ngIf=\"objectDetails\">\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\" *ngFor=\"let item of objectDetails\">\n <span\n class=\"flex font-medium text-600 object-info-grid-label\"\n name=\"object-detail-label\"\n [pTooltip]=\"item.labelTooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >{{ item.label | dynamicPipe:item.labelPipe }}</span\n >\n <span *ngIf=\"item.icon || item.value\" class=\"object-info-grid-value\">\n <span\n class=\"flex text-900 align-items-center gap-2 w-max\"\n [ngClass]=\"generateItemStyle(item)\"\n name=\"object-detail-value\"\n >\n <span\n class=\"flex align-items-center gap-2\"\n [pTooltip]=\"item.valueTooltip || item.tooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n <i\n *ngIf=\"item.icon\"\n class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}'\n name=\"object-detail-icon\"\n ></i>\n {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n <p-button\n *ngIf=\"item.actionItemIcon && item.actionItemCallback\"\n [icon]=\"item.actionItemIcon\"\n styleClass=\"p-button-text p-0 w-full\"\n [pTooltip]=\"item.actionItemTooltip || ''\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"item.actionItemTooltip || ''\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n </span>\n </span>\n </div>\n </ng-container>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure{width:3rem;height:3rem;margin-right:.5rem;position:relative}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i8.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: SrcDirective, selector: "[ocxSrc]", inputs: ["ocxSrc"], outputs: ["error"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
602
603
|
}
|
|
603
604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
604
605
|
type: Component,
|
|
605
|
-
args: [{ selector: 'ocx-page-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n <ng-container *ngIf=\"showBreadcrumbs\">\n <p-breadcrumb\n [model]=\"items\"\n *ngIf=\"breadcrumbs$ | async as items\"\n [home]=\"(home$ | async)?.menuItem ?? {}\"\n [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n [attr.manual]=\"manualBreadcrumbs\"\n ></p-breadcrumb>\n </ng-container>\n <div class=\"title-bar flex flex-row md:justify-content-between p-3\">\n <div class=\"title-wrap\">\n <div class=\"figure flex h-2rem w-2rem md:h-3rem md:w-3rem\" *ngIf=\"showFigure\">\n <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n <ng-content select=\"[figureImage]\"></ng-content>\n <img\n *ngIf=\"figureImage && !figureImageLoadError\"\n [ocxSrc]=\"figureImage\"\n alt=\"Figure image\"\n class=\"w-full\"\n (error)=\"handleImageError()\"\n />\n </div>\n <div\n class=\"colorblob flex-1 border-round\"\n *ngIf=\"previewImage.children.length === 0 || figureImageLoadError\"\n ></div>\n </div>\n <ng-template #skeletonBar>\n <div class=\"header justify-content-evenly\">\n <p-skeleton width=\"10rem\"></p-skeleton>\n <p-skeleton width=\"10rem\"></p-skeleton>\n </div>\n </ng-template>\n <div class=\"header\" *ngIf=\"!loading; else skeletonBar\">\n <h1 id=\"page-header\" *ngIf=\"!!header\">{{ header }}</h1>\n <h2 id=\"page-subheader\" *ngIf=\"!!subheader\">{{ subheader }}</h2>\n </div>\n </div>\n <div class=\"action-items-wrap mt-2 md:mt-0\">\n <ng-container *ngIf=\"additionalToolbarContentLeft\" [ngTemplateOutlet]=\"additionalToolbarContentLeft\">\n </ng-container>\n\n <ng-container *ngIf=\"!disableDefaultActions\"> </ng-container>\n <ng-template #skeletonActions>\n <div class=\"flex\">\n <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n </ng-template>\n <ng-container *ngIf=\"!loading; else skeletonActions\">\n <div *ngIf=\"inlineActions && inlineActions.length > 0\" class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n <ng-container *ngFor=\"let action of inlineActions\">\n <p-button\n id=\"{{ action.id }}\"\n [icon]=\"action.icon ?? ''\"\n type=\"button\"\n class=\"action-button\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n (onClick)=\"action.actionCallback()\"\n [pTooltip]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [attr.aria-label]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </ng-container>\n </div>\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n <div *ngIf=\"overflowActions.length !== 0\">\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"additionalToolbarContent\" [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n </div>\n </div>\n\n <div
|
|
606
|
+
args: [{ selector: 'ocx-page-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n <ng-container *ngIf=\"showBreadcrumbs\">\n <p-breadcrumb\n [model]=\"items\"\n *ngIf=\"breadcrumbs$ | async as items\"\n [home]=\"(home$ | async)?.menuItem ?? {}\"\n [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n [attr.manual]=\"manualBreadcrumbs\"\n ></p-breadcrumb>\n </ng-container>\n <div class=\"title-bar flex flex-row md:justify-content-between p-3\">\n <div class=\"title-wrap\">\n <div class=\"figure flex h-2rem w-2rem md:h-3rem md:w-3rem\" *ngIf=\"showFigure\">\n <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n <ng-content select=\"[figureImage]\"></ng-content>\n <img\n *ngIf=\"figureImage && !figureImageLoadError\"\n [ocxSrc]=\"figureImage\"\n alt=\"Figure image\"\n class=\"w-full\"\n (error)=\"handleImageError()\"\n />\n </div>\n <div\n class=\"colorblob flex-1 border-round\"\n *ngIf=\"previewImage.children.length === 0 || figureImageLoadError\"\n ></div>\n </div>\n <ng-template #skeletonBar>\n <div class=\"header justify-content-evenly\">\n <p-skeleton width=\"10rem\"></p-skeleton>\n <p-skeleton width=\"10rem\"></p-skeleton>\n </div>\n </ng-template>\n <div class=\"header\" *ngIf=\"!loading; else skeletonBar\">\n <h1 id=\"page-header\" *ngIf=\"!!header\">{{ header }}</h1>\n <h2 id=\"page-subheader\" *ngIf=\"!!subheader\">{{ subheader }}</h2>\n </div>\n </div>\n <div class=\"action-items-wrap mt-2 md:mt-0\">\n <ng-container *ngIf=\"additionalToolbarContentLeft\" [ngTemplateOutlet]=\"additionalToolbarContentLeft\">\n </ng-container>\n\n <ng-container *ngIf=\"!disableDefaultActions\"> </ng-container>\n <ng-template #skeletonActions>\n <div class=\"flex\">\n <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n </ng-template>\n <ng-container *ngIf=\"!loading; else skeletonActions\">\n <div *ngIf=\"inlineActions && inlineActions.length > 0\" class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n <ng-container *ngFor=\"let action of inlineActions\">\n <p-button\n id=\"{{ action.id }}\"\n [icon]=\"action.icon ?? ''\"\n type=\"button\"\n class=\"action-button\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n (onClick)=\"action.actionCallback()\"\n [pTooltip]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [attr.aria-label]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </ng-container>\n </div>\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n <div *ngIf=\"overflowActions.length !== 0\">\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"additionalToolbarContent\" [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n <ng-container *ngIf=\"objectDetails\">\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\" *ngFor=\"let item of objectDetails\">\n <span\n class=\"flex font-medium text-600 object-info-grid-label\"\n name=\"object-detail-label\"\n [pTooltip]=\"item.labelTooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >{{ item.label | dynamicPipe:item.labelPipe }}</span\n >\n <span *ngIf=\"item.icon || item.value\" class=\"object-info-grid-value\">\n <span\n class=\"flex text-900 align-items-center gap-2 w-max\"\n [ngClass]=\"generateItemStyle(item)\"\n name=\"object-detail-value\"\n >\n <span\n class=\"flex align-items-center gap-2\"\n [pTooltip]=\"item.valueTooltip || item.tooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n <i\n *ngIf=\"item.icon\"\n class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}'\n name=\"object-detail-icon\"\n ></i>\n {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n <p-button\n *ngIf=\"item.actionItemIcon && item.actionItemCallback\"\n [icon]=\"item.actionItemIcon\"\n styleClass=\"p-button-text p-0 w-full\"\n [pTooltip]=\"item.actionItemTooltip || ''\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"item.actionItemTooltip || ''\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n </span>\n </span>\n </div>\n </ng-container>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure{width:3rem;height:3rem;margin-right:.5rem;position:relative}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"] }]
|
|
606
607
|
}], ctorParameters: () => [{ type: BreadcrumbService }, { type: i1$1.TranslateService }, { type: i3.AppStateService }, { type: i3.UserService }], propDecorators: { header: [{
|
|
607
608
|
type: Input
|
|
608
609
|
}], loading: [{
|
|
@@ -806,6 +807,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
806
807
|
type: Optional
|
|
807
808
|
}] }] });
|
|
808
809
|
|
|
810
|
+
class TooltipOnOverflowDirective extends Tooltip {
|
|
811
|
+
get ocxTooltipOnOverflow() {
|
|
812
|
+
return this.content;
|
|
813
|
+
}
|
|
814
|
+
set ocxTooltipOnOverflow(value) {
|
|
815
|
+
this.content = value;
|
|
816
|
+
this.setOption({ tooltipLabel: value });
|
|
817
|
+
}
|
|
818
|
+
ngOnDestroy() {
|
|
819
|
+
super.ngOnDestroy();
|
|
820
|
+
this.mutationObserver.disconnect();
|
|
821
|
+
}
|
|
822
|
+
ngAfterViewInit() {
|
|
823
|
+
super.ngAfterViewInit();
|
|
824
|
+
this.mutationObserver.observe(this.el.nativeElement, { subtree: true, characterData: true, childList: true });
|
|
825
|
+
}
|
|
826
|
+
constructor(platformId, el, zone, config, renderer, viewContainer) {
|
|
827
|
+
super(platformId, el, zone, config, renderer, viewContainer);
|
|
828
|
+
this.mutationObserver = new MutationObserver(() => {
|
|
829
|
+
this.zone.run(() => {
|
|
830
|
+
this.disabled = this.el.nativeElement.scrollWidth <= this.el.nativeElement.offsetWidth;
|
|
831
|
+
this.setOption({ disabled: this.disabled });
|
|
832
|
+
}, this);
|
|
833
|
+
});
|
|
834
|
+
renderer.setStyle(this.el.nativeElement, 'text-overflow', 'ellipsis');
|
|
835
|
+
renderer.setStyle(this.el.nativeElement, 'overflow', 'hidden');
|
|
836
|
+
renderer.setStyle(this.el.nativeElement, 'white-space', 'nowrap');
|
|
837
|
+
this.disabled = true;
|
|
838
|
+
this.setOption({ disabled: this.disabled });
|
|
839
|
+
}
|
|
840
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TooltipOnOverflowDirective, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$3.PrimeNGConfig }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
841
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: TooltipOnOverflowDirective, selector: "[ocxTooltipOnOverflow]", inputs: { ocxTooltipOnOverflow: "ocxTooltipOnOverflow" }, usesInheritance: true, ngImport: i0 }); }
|
|
842
|
+
}
|
|
843
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TooltipOnOverflowDirective, decorators: [{
|
|
844
|
+
type: Directive,
|
|
845
|
+
args: [{ selector: '[ocxTooltipOnOverflow]' }]
|
|
846
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
847
|
+
type: Inject,
|
|
848
|
+
args: [PLATFORM_ID]
|
|
849
|
+
}] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$3.PrimeNGConfig }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], propDecorators: { ocxTooltipOnOverflow: [{
|
|
850
|
+
type: Input
|
|
851
|
+
}] } });
|
|
852
|
+
|
|
809
853
|
class ColumnGroupSelectionComponent {
|
|
810
854
|
constructor() {
|
|
811
855
|
this.selectedGroupKey$ = new BehaviorSubject('');
|
|
@@ -851,7 +895,7 @@ class ColumnGroupSelectionComponent {
|
|
|
851
895
|
this.groupSelectionChanged.emit({ activeColumns, groupKey: this.defaultGroupKey });
|
|
852
896
|
}
|
|
853
897
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ColumnGroupSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
854
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: { selectedGroupKey: "selectedGroupKey", columns: "columns", placeholderKey: "placeholderKey", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey" }, outputs: { groupSelectionChanged: "groupSelectionChanged" }, ngImport: i0, template: "<span class=\"p-float-label\">\n <p-dropdown\n id=\"columnGroupSelectionDropdown\"\n *ngIf=\"(allGroupKeys$ | async)?.length\"\n (onClear)=\"clearGroupSelection()\"\n (onChange)=\"changeGroupSelection($event)\"\n [options]=\"(allGroupKeys$ | async) || []\"\n [placeholder]=\"placeholderKey | translate\"\n [showClear]=\"selectedGroupKey !== defaultGroupKey\"\n [(ngModel)]=\"selectedGroupKey\"\n >\n <ng-template let-item pTemplate=\"item\"> {{ item ? (item | translate) : ''}} </ng-template>\n <ng-template let-item pTemplate=\"selectedItem\"> {{ item ? (item | translate) : ''}} </ng-template>\n </p-dropdown>\n <label *ngIf=\"(allGroupKeys$ | async)?.length\" for=\"columnGroupSelectionDropdown\"\n >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n >\n</span>\n", styles: [":host ::ng-deep .p-dropdown{min-width:12rem}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type:
|
|
898
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: { selectedGroupKey: "selectedGroupKey", columns: "columns", placeholderKey: "placeholderKey", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey" }, outputs: { groupSelectionChanged: "groupSelectionChanged" }, ngImport: i0, template: "<span class=\"p-float-label\">\n <p-dropdown\n id=\"columnGroupSelectionDropdown\"\n *ngIf=\"(allGroupKeys$ | async)?.length\"\n (onClear)=\"clearGroupSelection()\"\n (onChange)=\"changeGroupSelection($event)\"\n [options]=\"(allGroupKeys$ | async) || []\"\n [placeholder]=\"placeholderKey | translate\"\n [showClear]=\"selectedGroupKey !== defaultGroupKey\"\n [(ngModel)]=\"selectedGroupKey\"\n >\n <ng-template let-item pTemplate=\"item\"> {{ item ? (item | translate) : ''}} </ng-template>\n <ng-template let-item pTemplate=\"selectedItem\"> {{ item ? (item | translate) : ''}} </ng-template>\n </p-dropdown>\n <label *ngIf=\"(allGroupKeys$ | async)?.length\" for=\"columnGroupSelectionDropdown\"\n >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n >\n</span>\n", styles: [":host ::ng-deep .p-dropdown{min-width:12rem}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
855
899
|
}
|
|
856
900
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ColumnGroupSelectionComponent, decorators: [{
|
|
857
901
|
type: Component,
|
|
@@ -938,7 +982,7 @@ class CustomGroupColumnSelectorComponent {
|
|
|
938
982
|
this.visible = false;
|
|
939
983
|
}
|
|
940
984
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CustomGroupColumnSelectorComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
941
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: { columns: "columns", displayedColumns: "displayedColumns", dialogTitle: "dialogTitle", openButtonTitle: "openButtonTitle", saveButtonLabel: "saveButtonLabel", cancelButtonLabel: "cancelButtonLabel", activeColumnsLabel: "activeColumnsLabel", inactiveColumnsLabel: "inactiveColumnsLabel", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition" }, outputs: { columnSelectionChanged: "columnSelectionChanged", actionColumnConfigChanged: "actionColumnConfigChanged" }, ngImport: i0, template: "<p-button\n id=\"customGroupColumnSelectorButton\"\n type=\"button\"\n (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n [title]=\"openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n icon=\"pi pi-cog\"\n styleClass=\"p-button\"\n [attr.aria-label]=\"openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n></p-button>\n\n<p-dialog header=\"Header\" [(visible)]=\"visible\" [style]=\"{ width: '70%' }\" [modal]=\"true\" [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\">\n <ng-template pTemplate=\"header\">\n <span class=\"text-xl font-bold\"\n >{{ dialogTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' | translate) }}</span\n >\n </ng-template>\n\n <p-pickList\n [source]=\"displayedColumnsModel\"\n [target]=\"hiddenColumnsModel\"\n [sourceHeader]=\"activeColumnsLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n [targetHeader]=\"inactiveColumnsLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)\"\n [dragdrop]=\"true\"\n [responsive]=\"false\"\n [sourceStyle]=\"{ height: '300px' }\"\n [targetStyle]=\"{ height: '300px' }\"\n [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\"\n >\n <ng-template let-item pTemplate=\"item\">\n <div>{{ item.nameKey | translate }}</div>\n </ng-template>\n </p-pickList>\n\n <div class=\"pt-4\">\n <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n <div class=\"flex gap-6 px-3\">\n <div>\n <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</p>\n <p-selectButton\n [options]=\"frozenOptions\"\n [(ngModel)]=\"frozenActionColumnModel\"\n optionLabel=\"label\"\n optionValue=\"value\"\n id=\"frozenActionColumn\"\n name=\"frozen-action-column-select-button\"\n >\n <ng-template let-option pTemplate> {{option.label | translate}} </ng-template>\n </p-selectButton>\n </div>\n <div>\n <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</p>\n <p-selectButton\n [options]=\"alignmentOptions\"\n [(ngModel)]=\"actionColumnPositionModel\"\n optionLabel=\"label\"\n optionValue=\"value\"\n id=\"actionColumnPosition\"\n class=\"mt-2\"\n name=\"action-column-position-select-button\"\n >\n <ng-template let-option pTemplate> {{option.label | translate}} </ng-template>\n </p-selectButton>\n </div>\n </div>\n </div>\n\n <ng-template pTemplate=\"footer\">\n <p-button\n id=\"cancelButton\"\n (onClick)=\"onCancelClick()\"\n [label]=\"cancelButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n styleClass=\"p-button\"\n ></p-button>\n <p-button\n id=\"saveButton\"\n (onClick)=\"onSaveClick()\"\n [label]=\"saveButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n ></p-button>\n </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}.p-button{height:100%}\n"], dependencies: [{ kind: "directive", type:
|
|
985
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: { columns: "columns", displayedColumns: "displayedColumns", dialogTitle: "dialogTitle", openButtonTitle: "openButtonTitle", saveButtonLabel: "saveButtonLabel", cancelButtonLabel: "cancelButtonLabel", activeColumnsLabel: "activeColumnsLabel", inactiveColumnsLabel: "inactiveColumnsLabel", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition" }, outputs: { columnSelectionChanged: "columnSelectionChanged", actionColumnConfigChanged: "actionColumnConfigChanged" }, ngImport: i0, template: "<p-button\n id=\"customGroupColumnSelectorButton\"\n type=\"button\"\n (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n [title]=\"openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n icon=\"pi pi-cog\"\n styleClass=\"p-button\"\n [attr.aria-label]=\"openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n></p-button>\n\n<p-dialog header=\"Header\" [(visible)]=\"visible\" [style]=\"{ width: '70%' }\" [modal]=\"true\" [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\">\n <ng-template pTemplate=\"header\">\n <span class=\"text-xl font-bold\"\n >{{ dialogTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' | translate) }}</span\n >\n </ng-template>\n\n <p-pickList\n [source]=\"displayedColumnsModel\"\n [target]=\"hiddenColumnsModel\"\n [sourceHeader]=\"activeColumnsLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n [targetHeader]=\"inactiveColumnsLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)\"\n [dragdrop]=\"true\"\n [responsive]=\"false\"\n [sourceStyle]=\"{ height: '300px' }\"\n [targetStyle]=\"{ height: '300px' }\"\n [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\"\n >\n <ng-template let-item pTemplate=\"item\">\n <div>{{ item.nameKey | translate }}</div>\n </ng-template>\n </p-pickList>\n\n <div class=\"pt-4\">\n <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n <div class=\"flex gap-6 px-3\">\n <div>\n <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</p>\n <p-selectButton\n [options]=\"frozenOptions\"\n [(ngModel)]=\"frozenActionColumnModel\"\n optionLabel=\"label\"\n optionValue=\"value\"\n id=\"frozenActionColumn\"\n name=\"frozen-action-column-select-button\"\n >\n <ng-template let-option pTemplate> {{option.label | translate}} </ng-template>\n </p-selectButton>\n </div>\n <div>\n <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</p>\n <p-selectButton\n [options]=\"alignmentOptions\"\n [(ngModel)]=\"actionColumnPositionModel\"\n optionLabel=\"label\"\n optionValue=\"value\"\n id=\"actionColumnPosition\"\n class=\"mt-2\"\n name=\"action-column-position-select-button\"\n >\n <ng-template let-option pTemplate> {{option.label | translate}} </ng-template>\n </p-selectButton>\n </div>\n </div>\n </div>\n\n <ng-template pTemplate=\"footer\">\n <p-button\n id=\"cancelButton\"\n (onClick)=\"onCancelClick()\"\n [label]=\"cancelButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n styleClass=\"p-button\"\n ></p-button>\n <p-button\n id=\"saveButton\"\n (onClick)=\"onSaveClick()\"\n [label]=\"saveButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n ></p-button>\n </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}.p-button{height:100%}\n"], dependencies: [{ kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i5$1.PickList, selector: "p-pickList", inputs: ["source", "target", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "targetHeader", "responsive", "filterBy", "filterLocale", "trackBy", "sourceTrackBy", "targetTrackBy", "showSourceFilter", "showTargetFilter", "metaKeySelection", "dragdrop", "style", "styleClass", "sourceStyle", "targetStyle", "showSourceControls", "showTargetControls", "sourceFilterPlaceholder", "targetFilterPlaceholder", "disabled", "ariaSourceFilterLabel", "ariaTargetFilterLabel", "filterMatchMode", "stripedRows", "keepSelection", "breakpoint"], outputs: ["onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "component", type: i4$2.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
942
986
|
}
|
|
943
987
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CustomGroupColumnSelectorComponent, decorators: [{
|
|
944
988
|
type: Component,
|
|
@@ -981,24 +1025,23 @@ class DataLayoutSelectionComponent {
|
|
|
981
1025
|
this.viewingLayouts = [];
|
|
982
1026
|
}
|
|
983
1027
|
set layout(value) {
|
|
984
|
-
this.selectedViewLayout =
|
|
1028
|
+
this.selectedViewLayout = ALL_VIEW_LAYOUTS.find((v) => v.layout === value);
|
|
985
1029
|
}
|
|
986
1030
|
get layout() {
|
|
987
1031
|
return this.selectedViewLayout?.layout || 'table';
|
|
988
1032
|
}
|
|
989
1033
|
ngOnInit() {
|
|
990
1034
|
this.viewingLayouts = ALL_VIEW_LAYOUTS.filter((vl) => this.supportedViewLayouts.includes(vl.layout));
|
|
991
|
-
this.layout = 'table';
|
|
992
1035
|
}
|
|
993
1036
|
onDataViewLayoutChange(event) {
|
|
994
1037
|
this.dataViewLayoutChange.emit(event.layout);
|
|
995
1038
|
}
|
|
996
1039
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DataLayoutSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
997
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: { supportedViewLayouts: "supportedViewLayouts", layout: "layout" }, outputs: { dataViewLayoutChange: "dataViewLayoutChange" }, ngImport: i0, template: "<div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n <p-selectButton\n *ngIf=\"viewingLayouts.length > 1\"\n [options]=\"viewingLayouts\"\n [(ngModel)]=\"selectedViewLayout\"\n optionLabel=\"icon\"\n (onChange)=\"onDataViewLayoutChange($event.value)\"\n >\n <ng-template let-item pTemplate>\n <i [class]=\"item.icon\" [
|
|
1040
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: { supportedViewLayouts: "supportedViewLayouts", layout: "layout" }, outputs: { dataViewLayoutChange: "dataViewLayoutChange" }, ngImport: i0, template: "<div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n <p-selectButton\n *ngIf=\"viewingLayouts.length > 1\"\n [options]=\"viewingLayouts\"\n [(ngModel)]=\"selectedViewLayout\"\n optionLabel=\"icon\"\n (onChange)=\"onDataViewLayoutChange($event.value)\"\n >\n <ng-template let-item pTemplate>\n <i [class]=\"item.icon\" [pTooltip]=\"item.title || (item.titleKey | translate)\" tooltipPosition=\"top\"></i>\n </ng-template>\n </p-selectButton>\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
998
1041
|
}
|
|
999
1042
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DataLayoutSelectionComponent, decorators: [{
|
|
1000
1043
|
type: Component,
|
|
1001
|
-
args: [{ selector: 'ocx-data-layout-selection', template: "<div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n <p-selectButton\n *ngIf=\"viewingLayouts.length > 1\"\n [options]=\"viewingLayouts\"\n [(ngModel)]=\"selectedViewLayout\"\n optionLabel=\"icon\"\n (onChange)=\"onDataViewLayoutChange($event.value)\"\n >\n <ng-template let-item pTemplate>\n <i [class]=\"item.icon\" [
|
|
1044
|
+
args: [{ selector: 'ocx-data-layout-selection', template: "<div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n <p-selectButton\n *ngIf=\"viewingLayouts.length > 1\"\n [options]=\"viewingLayouts\"\n [(ngModel)]=\"selectedViewLayout\"\n optionLabel=\"icon\"\n (onChange)=\"onDataViewLayoutChange($event.value)\"\n >\n <ng-template let-item pTemplate>\n <i [class]=\"item.icon\" [pTooltip]=\"item.title || (item.titleKey | translate)\" tooltipPosition=\"top\"></i>\n </ng-template>\n </p-selectButton>\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"] }]
|
|
1002
1045
|
}], propDecorators: { supportedViewLayouts: [{
|
|
1003
1046
|
type: Input
|
|
1004
1047
|
}], layout: [{
|
|
@@ -1007,6 +1050,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
1007
1050
|
type: Output
|
|
1008
1051
|
}] } });
|
|
1009
1052
|
|
|
1053
|
+
var ColumnType;
|
|
1054
|
+
(function (ColumnType) {
|
|
1055
|
+
ColumnType["STRING"] = "STRING";
|
|
1056
|
+
ColumnType["NUMBER"] = "NUMBER";
|
|
1057
|
+
ColumnType["DATE"] = "DATE";
|
|
1058
|
+
ColumnType["RELATIVE_DATE"] = "RELATIVE_DATE";
|
|
1059
|
+
ColumnType["TRANSLATION_KEY"] = "TRANSLATION_KEY";
|
|
1060
|
+
/**
|
|
1061
|
+
* @deprecated Will be removed with the next major v6 upgrade.
|
|
1062
|
+
* Please use pTemplate="column id + IdCell" in DataTable or
|
|
1063
|
+
* pTemplate="column id + IdTableCell" in DataView and InteractiveDataView
|
|
1064
|
+
* e.g. for a column with the id 'status' in DataTable use pTemplate="statusIdCell"
|
|
1065
|
+
*/
|
|
1066
|
+
ColumnType["CUSTOM"] = "CUSTOM";
|
|
1067
|
+
})(ColumnType || (ColumnType = {}));
|
|
1068
|
+
|
|
1010
1069
|
class ObjectUtils {
|
|
1011
1070
|
static resolveFieldData(data, field) {
|
|
1012
1071
|
if (data && field) {
|
|
@@ -1057,16 +1116,6 @@ function flattenObject(ob) {
|
|
|
1057
1116
|
return toReturn;
|
|
1058
1117
|
}
|
|
1059
1118
|
|
|
1060
|
-
var ColumnType;
|
|
1061
|
-
(function (ColumnType) {
|
|
1062
|
-
ColumnType["STRING"] = "STRING";
|
|
1063
|
-
ColumnType["NUMBER"] = "NUMBER";
|
|
1064
|
-
ColumnType["DATE"] = "DATE";
|
|
1065
|
-
ColumnType["RELATIVE_DATE"] = "RELATIVE_DATE";
|
|
1066
|
-
ColumnType["TRANSLATION_KEY"] = "TRANSLATION_KEY";
|
|
1067
|
-
ColumnType["CUSTOM"] = "CUSTOM";
|
|
1068
|
-
})(ColumnType || (ColumnType = {}));
|
|
1069
|
-
|
|
1070
1119
|
class DataSortBase {
|
|
1071
1120
|
constructor(locale, translateService) {
|
|
1072
1121
|
this.locale = locale;
|
|
@@ -1176,6 +1225,109 @@ class DataSortBase {
|
|
|
1176
1225
|
}
|
|
1177
1226
|
}
|
|
1178
1227
|
|
|
1228
|
+
// eslint-disable-next-line @angular-eslint/use-pipe-transform-interface
|
|
1229
|
+
class OcxTimeAgoPipe extends TranslatePipe {
|
|
1230
|
+
constructor(changeDetectorRef, ngZone, translateService) {
|
|
1231
|
+
super(translateService, changeDetectorRef);
|
|
1232
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
1233
|
+
this.ngZone = ngZone;
|
|
1234
|
+
this.translateService = translateService;
|
|
1235
|
+
}
|
|
1236
|
+
transform(value) {
|
|
1237
|
+
this.removeTimer();
|
|
1238
|
+
const d = new Date(value);
|
|
1239
|
+
const now = new Date();
|
|
1240
|
+
const seconds = Math.round(Math.abs((now.getTime() - d.getTime()) / 1000));
|
|
1241
|
+
const timeToUpdate = Number.isNaN(seconds) ? 1000 : this.getSecondsUntilUpdate(seconds) * 1000;
|
|
1242
|
+
this.timer = this.ngZone.runOutsideAngular(() => {
|
|
1243
|
+
if (typeof window !== 'undefined') {
|
|
1244
|
+
return window.setTimeout(() => {
|
|
1245
|
+
this.ngZone.run(() => this.changeDetectorRef.markForCheck());
|
|
1246
|
+
}, timeToUpdate);
|
|
1247
|
+
}
|
|
1248
|
+
return null;
|
|
1249
|
+
});
|
|
1250
|
+
const minutes = Math.round(Math.abs(seconds / 60));
|
|
1251
|
+
const hours = Math.round(Math.abs(minutes / 60));
|
|
1252
|
+
const days = Math.round(Math.abs(hours / 24));
|
|
1253
|
+
const months = Math.round(Math.abs(days / 30.416));
|
|
1254
|
+
const years = Math.round(Math.abs(days / 365));
|
|
1255
|
+
let translationKey = 'UNKNOWN';
|
|
1256
|
+
if (Number.isNaN(seconds)) {
|
|
1257
|
+
translationKey = 'NAN';
|
|
1258
|
+
}
|
|
1259
|
+
else if (seconds <= 45) {
|
|
1260
|
+
translationKey = 'A_FEW_SECONDS_AGO';
|
|
1261
|
+
}
|
|
1262
|
+
else if (seconds <= 90) {
|
|
1263
|
+
translationKey = 'A_MINUTE_AGO';
|
|
1264
|
+
}
|
|
1265
|
+
else if (minutes <= 45) {
|
|
1266
|
+
translationKey = 'MINUTES_AGO';
|
|
1267
|
+
}
|
|
1268
|
+
else if (minutes <= 90) {
|
|
1269
|
+
translationKey = 'AN_HOUR_AGO';
|
|
1270
|
+
}
|
|
1271
|
+
else if (hours <= 22) {
|
|
1272
|
+
translationKey = 'HOURS_AGO';
|
|
1273
|
+
}
|
|
1274
|
+
else if (hours <= 36) {
|
|
1275
|
+
translationKey = 'A_DAY_AGO';
|
|
1276
|
+
}
|
|
1277
|
+
else if (days <= 25) {
|
|
1278
|
+
translationKey = 'DAYS_AGO';
|
|
1279
|
+
}
|
|
1280
|
+
else if (days <= 45) {
|
|
1281
|
+
translationKey = 'A_MONTH_AGO';
|
|
1282
|
+
}
|
|
1283
|
+
else if (days <= 345) {
|
|
1284
|
+
translationKey = 'MONTHS_AGO';
|
|
1285
|
+
}
|
|
1286
|
+
else if (days <= 545) {
|
|
1287
|
+
translationKey = 'A_YEAR_AGO';
|
|
1288
|
+
}
|
|
1289
|
+
else {
|
|
1290
|
+
translationKey = 'YEARS_AGO';
|
|
1291
|
+
}
|
|
1292
|
+
return super.transform('OCX_TIMEAGO.' + translationKey, { minutes, hours, days, months, years });
|
|
1293
|
+
}
|
|
1294
|
+
ngOnDestroy() {
|
|
1295
|
+
this.removeTimer();
|
|
1296
|
+
super.ngOnDestroy();
|
|
1297
|
+
}
|
|
1298
|
+
removeTimer() {
|
|
1299
|
+
if (this.timer) {
|
|
1300
|
+
window.clearTimeout(this.timer);
|
|
1301
|
+
this.timer = null;
|
|
1302
|
+
}
|
|
1303
|
+
}
|
|
1304
|
+
getSecondsUntilUpdate(seconds) {
|
|
1305
|
+
const min = 60;
|
|
1306
|
+
const hr = min * 60;
|
|
1307
|
+
const day = hr * 24;
|
|
1308
|
+
if (seconds < min) {
|
|
1309
|
+
return 2;
|
|
1310
|
+
}
|
|
1311
|
+
else if (seconds < hr) {
|
|
1312
|
+
return 30;
|
|
1313
|
+
}
|
|
1314
|
+
else if (seconds < day) {
|
|
1315
|
+
return 300;
|
|
1316
|
+
}
|
|
1317
|
+
else {
|
|
1318
|
+
return 3600;
|
|
1319
|
+
}
|
|
1320
|
+
}
|
|
1321
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OcxTimeAgoPipe, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1322
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: OcxTimeAgoPipe, name: "timeago" }); }
|
|
1323
|
+
}
|
|
1324
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OcxTimeAgoPipe, decorators: [{
|
|
1325
|
+
type: Pipe,
|
|
1326
|
+
args: [{
|
|
1327
|
+
name: 'timeago',
|
|
1328
|
+
}]
|
|
1329
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.TranslateService }] });
|
|
1330
|
+
|
|
1179
1331
|
class DataListGridComponent extends DataSortBase {
|
|
1180
1332
|
get pageSizes() {
|
|
1181
1333
|
return this._pageSizes$.getValue();
|
|
@@ -1237,6 +1389,27 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1237
1389
|
get _gridItem() {
|
|
1238
1390
|
return this.gridItemTemplate || this.gridItemChildTemplate;
|
|
1239
1391
|
}
|
|
1392
|
+
get _listValue() {
|
|
1393
|
+
return this.listValueTemplate || this.listValueChildTemplate;
|
|
1394
|
+
}
|
|
1395
|
+
get _translationKeyListValue() {
|
|
1396
|
+
return this.translationKeyListValueTemplate || this.translationKeyListValueChildTemplate;
|
|
1397
|
+
}
|
|
1398
|
+
get _numberListValue() {
|
|
1399
|
+
return this.numberListValueTemplate || this.numberListValueChildTemplate;
|
|
1400
|
+
}
|
|
1401
|
+
get _relativeDateListValue() {
|
|
1402
|
+
return this.relativeDateListValueTemplate || this.relativeDateListValueChildTemplate;
|
|
1403
|
+
}
|
|
1404
|
+
get _customListValue() {
|
|
1405
|
+
return this.customListValueTemplate || this.customListValueChildTemplate;
|
|
1406
|
+
}
|
|
1407
|
+
get _stringListValue() {
|
|
1408
|
+
return this.stringListValueTemplate || this.stringListValueChildTemplate;
|
|
1409
|
+
}
|
|
1410
|
+
get _dateListValue() {
|
|
1411
|
+
return this.dateListValueTemplate || this.dateListValueChildTemplate;
|
|
1412
|
+
}
|
|
1240
1413
|
get additionalActions() {
|
|
1241
1414
|
return this._additionalActions$.getValue();
|
|
1242
1415
|
}
|
|
@@ -1263,6 +1436,15 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1263
1436
|
return -1;
|
|
1264
1437
|
return 0;
|
|
1265
1438
|
}
|
|
1439
|
+
set templates(value) {
|
|
1440
|
+
this.templates$.next(value);
|
|
1441
|
+
}
|
|
1442
|
+
set viewTemplates(value) {
|
|
1443
|
+
this.viewTemplates$.next(value);
|
|
1444
|
+
}
|
|
1445
|
+
set parentTemplates(value) {
|
|
1446
|
+
this.parentTemplates$.next(value);
|
|
1447
|
+
}
|
|
1266
1448
|
constructor(locale, translateService, userService, router, injector, appStateService) {
|
|
1267
1449
|
super(locale, translateService);
|
|
1268
1450
|
this.userService = userService;
|
|
@@ -1305,6 +1487,11 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1305
1487
|
this.showMenu = false;
|
|
1306
1488
|
this.gridMenuItems = [];
|
|
1307
1489
|
this.observedOutputs = 0;
|
|
1490
|
+
this.templates$ = new BehaviorSubject(undefined);
|
|
1491
|
+
this.viewTemplates$ = new BehaviorSubject(undefined);
|
|
1492
|
+
this.parentTemplates$ = new BehaviorSubject(undefined);
|
|
1493
|
+
this.columnType = ColumnType;
|
|
1494
|
+
this.templatesObservables = {};
|
|
1308
1495
|
this.name = this.name || this.router.url.replace(/[^A-Za-z0-9]/, '_');
|
|
1309
1496
|
this.fallbackImagePath$ = this.appStateService.currentMfe$.pipe(map((currentMfe) => this.getFallbackImagePath(currentMfe)));
|
|
1310
1497
|
this.displayedPageSizes$ = combineLatest([this._pageSizes$, this.translateService.get('OCX_DATA_TABLE.ALL')]).pipe(map(([pageSizes, translation]) => pageSizes.concat({ showAll: translation })));
|
|
@@ -1338,6 +1525,33 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1338
1525
|
(!!this.editPermission && this.userService.hasPermission(this.editPermission)) ||
|
|
1339
1526
|
(!!this.deletePermission && this.userService.hasPermission(this.deletePermission));
|
|
1340
1527
|
}
|
|
1528
|
+
ngAfterContentInit() {
|
|
1529
|
+
this.templates?.forEach((item) => {
|
|
1530
|
+
switch (item.getType()) {
|
|
1531
|
+
case 'listValue':
|
|
1532
|
+
this.listValueChildTemplate = item.template;
|
|
1533
|
+
break;
|
|
1534
|
+
case 'translationKeyListValue':
|
|
1535
|
+
this.translationKeyListValueChildTemplate = item.template;
|
|
1536
|
+
break;
|
|
1537
|
+
case 'numberListValue':
|
|
1538
|
+
this.numberListValueChildTemplate = item.template;
|
|
1539
|
+
break;
|
|
1540
|
+
case 'relativeDateListValue':
|
|
1541
|
+
this.relativeDateListValueChildTemplate = item.template;
|
|
1542
|
+
break;
|
|
1543
|
+
case 'customListValue':
|
|
1544
|
+
this.customListValueChildTemplate = item.template;
|
|
1545
|
+
break;
|
|
1546
|
+
case 'stringListValue':
|
|
1547
|
+
this.stringListValueChildTemplate = item.template;
|
|
1548
|
+
break;
|
|
1549
|
+
case 'dateListValue':
|
|
1550
|
+
this.dateListValueChildTemplate = item.template;
|
|
1551
|
+
break;
|
|
1552
|
+
}
|
|
1553
|
+
});
|
|
1554
|
+
}
|
|
1341
1555
|
onDeleteRow(element) {
|
|
1342
1556
|
this.deleteItem.emit(element);
|
|
1343
1557
|
}
|
|
@@ -1456,12 +1670,71 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1456
1670
|
this.currentMenuRow$.next(row);
|
|
1457
1671
|
menu.toggle(event);
|
|
1458
1672
|
}
|
|
1673
|
+
getFilteredColumns() {
|
|
1674
|
+
let ids = [...(this.subtitleLineIds ?? [])];
|
|
1675
|
+
if (this.titleLineId) {
|
|
1676
|
+
ids = [this.titleLineId, ...(this.subtitleLineIds ?? [])];
|
|
1677
|
+
}
|
|
1678
|
+
return this.columns.filter((c) => !ids.includes(c.id));
|
|
1679
|
+
}
|
|
1680
|
+
findTemplate(templates, names) {
|
|
1681
|
+
for (let index = 0; index < names.length; index++) {
|
|
1682
|
+
const name = names[index];
|
|
1683
|
+
const template = templates.find((template) => template.name === name);
|
|
1684
|
+
if (template) {
|
|
1685
|
+
return template;
|
|
1686
|
+
}
|
|
1687
|
+
}
|
|
1688
|
+
return undefined;
|
|
1689
|
+
}
|
|
1690
|
+
getTemplate(column) {
|
|
1691
|
+
if (!this.templatesObservables[column.id]) {
|
|
1692
|
+
this.templatesObservables[column.id] = combineLatest([
|
|
1693
|
+
this.templates$,
|
|
1694
|
+
this.viewTemplates$,
|
|
1695
|
+
this.parentTemplates$,
|
|
1696
|
+
]).pipe(map(([t, vt, pt]) => {
|
|
1697
|
+
const templates = [...(t ?? []), ...(vt ?? []), ...(pt ?? [])];
|
|
1698
|
+
const columnTemplate = templates.find((template) => template.name === column.id + 'IdListValue')?.template;
|
|
1699
|
+
if (columnTemplate) {
|
|
1700
|
+
return columnTemplate;
|
|
1701
|
+
}
|
|
1702
|
+
switch (column.columnType) {
|
|
1703
|
+
case ColumnType.DATE:
|
|
1704
|
+
return (this._dateListValue ??
|
|
1705
|
+
this.findTemplate(templates, ['dateListValue', 'defaultDateListValue'])?.template ??
|
|
1706
|
+
null);
|
|
1707
|
+
case ColumnType.NUMBER:
|
|
1708
|
+
return (this._numberListValue ??
|
|
1709
|
+
this.findTemplate(templates, ['numberListValue', 'defaultNumberListValue'])?.template ??
|
|
1710
|
+
null);
|
|
1711
|
+
case ColumnType.RELATIVE_DATE:
|
|
1712
|
+
return (this._relativeDateListValue ??
|
|
1713
|
+
this.findTemplate(templates, ['relativeDateListValue', 'defaultRelativeDateListValue'])?.template ??
|
|
1714
|
+
null);
|
|
1715
|
+
case ColumnType.TRANSLATION_KEY:
|
|
1716
|
+
return (this._translationKeyListValue ??
|
|
1717
|
+
this.findTemplate(templates, ['translationListValue', 'defaultTranslationListValue'])?.template ??
|
|
1718
|
+
null);
|
|
1719
|
+
case ColumnType.CUSTOM:
|
|
1720
|
+
return (this._customListValue ??
|
|
1721
|
+
this.findTemplate(templates, ['customListValue', 'defaultCustomListValue'])?.template ??
|
|
1722
|
+
null);
|
|
1723
|
+
default:
|
|
1724
|
+
return (this._stringListValue ??
|
|
1725
|
+
this.findTemplate(templates, ['stringListValue', 'defaultStringListValue'])?.template ??
|
|
1726
|
+
null);
|
|
1727
|
+
}
|
|
1728
|
+
}), debounceTime(50));
|
|
1729
|
+
}
|
|
1730
|
+
return this.templatesObservables[column.id];
|
|
1731
|
+
}
|
|
1459
1732
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DataListGridComponent, deps: [{ token: LOCALE_ID }, { token: i1$1.TranslateService }, { token: i3.UserService }, { token: i1$2.Router }, { token: i0.Injector }, { token: i3.AppStateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1460
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: DataListGridComponent, 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", additionalActions: "additionalActions" }, outputs: { viewItem: "viewItem", editItem: "editItem", deleteItem: "deleteItem", pageChanged: "pageChanged" }, 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 }], usesInheritance: true, ngImport: i0, template: "<p-dataView\n *ngIf=\"displayedPageSize$ | async as displayedPageSize\"\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]=\"(displayedPageSizes$ | async) ?? []\"\n id=\"dataListGrid_{{name}}\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #gridItem let-item pTemplate=\"gridItem\">\n </ng-template>\n <ng-template #gridItem let-rows pTemplate=\"gridItem\">\n <div class=\"p-grid p-nogutter grid grid-nogutter\">\n <ng-template ngFor let-item [ngForOf]=\"rows\">\n <ng-container\n [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </ng-template>\n </div>\n </ng-template>\n\n <ng-template #listItem let-rows pTemplate=\"listItem\">\n <div class=\"p-grid p-nogutter grid grid-nogutter\">\n <ng-template ngFor let-item [ngForOf]=\"rows\">\n <ng-container\n [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </ng-template>\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<ng-template #defaultGridItem let-item>\n <div class=\"col-12 lg:col-6 xl:col-4 flex\">\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\">{{ 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.ariaLabel]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS' | translate\"\n class=\"more-actions-menu-button menu-btn\"\n [attr.name]=\"'data-grid-item-menu-button'\"\n ></button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine edit-time text-xl my-3\">\n {{ resolveFieldData(item, subtitleLineId) }}\n </div>\n</ng-template>\n<ng-template #defaultListItem let-item>\n <div class=\"col-12\">\n <div class=\"flex flex-1 align-items-center p-3 w-full\">\n <div class=\"data-list-items flex-1\">\n <div class=\"item-name-row flex flex-row justify-content-between\">\n <div class=\"item-name mr-3 text-2xl font-medium\">\n <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n </div>\n <div class=\"flex flex-column md:flex-row md:justify-content-between\">\n <ng-container\n *ngIf=\"viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))\"\n >\n <button\n type=\"button\"\n icon=\"pi pi-eye\"\n pButton\n class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n title=\"{{ (viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate }}\"\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 </ng-container>\n <ng-container\n *ngIf=\"editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))\"\n >\n <button\n type=\"button\"\n class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n icon=\"pi pi-pencil\"\n pButton\n title=\"{{ (editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate }}\"\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 </ng-container>\n <ng-container\n *ngIf=\"deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))\"\n >\n <button\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 title=\"{{ (deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate }}\"\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 </ng-container>\n <ng-container *ngFor=\"let action of inlineListActions$ | async\">\n <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(item, action.actionVisibleField))\">\n <button\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 [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n ></button>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"hasVisibleOverflowMenuItems(item) | async\">\n <p-menu\n #menu\n [model]=\"(overflowMenuItems$ | async) || []\"\n [popup]=\"true\"\n appendTo=\"body\"\n ></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 [ariaLabel]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n ></button>\n </ng-container>\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>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine text-xl my-3\">\n {{ resolveFieldData(item, subtitleLineId) }}\n </div>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{color:var(--primary-text-color);background-color:var(--primary-color);border:var(--button-border);border-radius:var(--border-radius);padding:var(--button-padding);cursor:pointer;min-width:4rem}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7$1.DataView, selector: "p-dataView", 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: i8.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
1733
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: DataListGridComponent, 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", customListValueTemplate: "customListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { viewItem: "viewItem", editItem: "editItem", deleteItem: "deleteItem", pageChanged: "pageChanged" }, 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: "<p-dataView\n *ngIf=\"displayedPageSize$ | async as displayedPageSize\"\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]=\"(displayedPageSizes$ | async) ?? []\"\n id=\"dataListGrid_{{name}}\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #gridItem let-rows pTemplate=\"gridItem\">\n <div class=\"p-grid p-nogutter grid grid-nogutter\">\n <ng-template ngFor let-item [ngForOf]=\"rows\">\n <ng-container\n [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </ng-template>\n </div>\n </ng-template>\n\n <ng-template #listItem let-rows pTemplate=\"listItem\">\n <div class=\"p-grid p-nogutter grid grid-nogutter\">\n <ng-template ngFor let-item [ngForOf]=\"rows\">\n <ng-container\n [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </ng-template>\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<ng-template #defaultGridItem let-item>\n <div class=\"col-12 lg:col-6 xl:col-4 flex\">\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\">{{ 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.ariaLabel]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS' | translate\"\n class=\"more-actions-menu-button menu-btn\"\n [attr.name]=\"'data-grid-item-menu-button'\"\n ></button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine edit-time text-xl my-3\">\n {{ resolveFieldData(item, subtitleLineId) }}\n </div>\n</ng-template>\n<ng-template #defaultListItem let-item>\n <div class=\"col-12\">\n <div class=\"data-list-items p-3\">\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 <a *ngIf=\"titleLineId\" [routerLink]=\"\" (click)=\"onViewRow(item)\"\n >{{ resolveFieldData(item, titleLineId) || '' }}</a\n >\n </div>\n <div class=\"flex flex-row\">\n <ng-container\n *ngIf=\"viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))\"\n >\n <button\n type=\"button\"\n icon=\"pi pi-eye\"\n pButton\n class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n title=\"{{ (viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate }}\"\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 </ng-container>\n <ng-container\n *ngIf=\"editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))\"\n >\n <button\n type=\"button\"\n class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n icon=\"pi pi-pencil\"\n pButton\n title=\"{{ (editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate }}\"\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 </ng-container>\n <ng-container\n *ngIf=\"deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))\"\n >\n <button\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 title=\"{{ (deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate }}\"\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 </ng-container>\n <ng-container *ngFor=\"let action of inlineListActions$ | async\">\n <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(item, action.actionVisibleField))\">\n <button\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 [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n ></button>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"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 [ariaLabel]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n ></button>\n </ng-container>\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 <div *ngFor=\"let col of getFilteredColumns()\" 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 <ng-container\n [ngTemplateOutlet]=\"\n _listValue ? _listValue: defaultListValue\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: item,\n column: col\n }\"\n ></ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine text-xl my-3\">\n {{ resolveFieldData(item, subtitleLineId) }}\n </div>\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n [ngTemplateOutlet]=\"getTemplate(column) | async\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\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: '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{color:var(--primary-text-color);background-color:var(--primary-color);border:var(--button-border);border-radius:var(--border-radius);padding:var(--button-padding);cursor:pointer;min-width:4rem}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7$1.DataView, selector: "p-dataView", 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: i8.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions"] }, { kind: "directive", type: TooltipOnOverflowDirective, selector: "[ocxTooltipOnOverflow]", inputs: ["ocxTooltipOnOverflow"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
|
|
1461
1734
|
}
|
|
1462
1735
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DataListGridComponent, decorators: [{
|
|
1463
1736
|
type: Component,
|
|
1464
|
-
args: [{ selector: 'ocx-data-list-grid', template: "<p-dataView\n *ngIf=\"displayedPageSize$ | async as displayedPageSize\"\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]=\"(displayedPageSizes$ | async) ?? []\"\n id=\"dataListGrid_{{name}}\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #gridItem let-item pTemplate=\"gridItem\">\n </ng-template>\n <ng-template #gridItem let-rows pTemplate=\"gridItem\">\n <div class=\"p-grid p-nogutter grid grid-nogutter\">\n <ng-template ngFor let-item [ngForOf]=\"rows\">\n <ng-container\n [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </ng-template>\n </div>\n </ng-template>\n\n <ng-template #listItem let-rows pTemplate=\"listItem\">\n <div class=\"p-grid p-nogutter grid grid-nogutter\">\n <ng-template ngFor let-item [ngForOf]=\"rows\">\n <ng-container\n [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </ng-template>\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<ng-template #defaultGridItem let-item>\n <div class=\"col-12 lg:col-6 xl:col-4 flex\">\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\">{{ 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.ariaLabel]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS' | translate\"\n class=\"more-actions-menu-button menu-btn\"\n [attr.name]=\"'data-grid-item-menu-button'\"\n ></button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine edit-time text-xl my-3\">\n {{ resolveFieldData(item, subtitleLineId) }}\n </div>\n</ng-template>\n<ng-template #defaultListItem let-item>\n <div class=\"col-12\">\n <div class=\"flex flex-1 align-items-center p-3 w-full\">\n <div class=\"data-list-items flex-1\">\n <div class=\"item-name-row flex flex-row justify-content-between\">\n <div class=\"item-name mr-3 text-2xl font-medium\">\n <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n </div>\n <div class=\"flex flex-column md:flex-row md:justify-content-between\">\n <ng-container\n *ngIf=\"viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))\"\n >\n <button\n type=\"button\"\n icon=\"pi pi-eye\"\n pButton\n class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n title=\"{{ (viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate }}\"\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 </ng-container>\n <ng-container\n *ngIf=\"editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))\"\n >\n <button\n type=\"button\"\n class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n icon=\"pi pi-pencil\"\n pButton\n title=\"{{ (editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate }}\"\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 </ng-container>\n <ng-container\n *ngIf=\"deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))\"\n >\n <button\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 title=\"{{ (deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate }}\"\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 </ng-container>\n <ng-container *ngFor=\"let action of inlineListActions$ | async\">\n <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(item, action.actionVisibleField))\">\n <button\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 [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n ></button>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"hasVisibleOverflowMenuItems(item) | async\">\n <p-menu\n #menu\n [model]=\"(overflowMenuItems$ | async) || []\"\n [popup]=\"true\"\n appendTo=\"body\"\n ></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 [ariaLabel]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n ></button>\n </ng-container>\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>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine text-xl my-3\">\n {{ resolveFieldData(item, subtitleLineId) }}\n </div>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{color:var(--primary-text-color);background-color:var(--primary-color);border:var(--button-border);border-radius:var(--border-radius);padding:var(--button-padding);cursor:pointer;min-width:4rem}\n"] }]
|
|
1737
|
+
args: [{ selector: 'ocx-data-list-grid', template: "<p-dataView\n *ngIf=\"displayedPageSize$ | async as displayedPageSize\"\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]=\"(displayedPageSizes$ | async) ?? []\"\n id=\"dataListGrid_{{name}}\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #gridItem let-rows pTemplate=\"gridItem\">\n <div class=\"p-grid p-nogutter grid grid-nogutter\">\n <ng-template ngFor let-item [ngForOf]=\"rows\">\n <ng-container\n [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </ng-template>\n </div>\n </ng-template>\n\n <ng-template #listItem let-rows pTemplate=\"listItem\">\n <div class=\"p-grid p-nogutter grid grid-nogutter\">\n <ng-template ngFor let-item [ngForOf]=\"rows\">\n <ng-container\n [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </ng-template>\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<ng-template #defaultGridItem let-item>\n <div class=\"col-12 lg:col-6 xl:col-4 flex\">\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\">{{ 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.ariaLabel]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS' | translate\"\n class=\"more-actions-menu-button menu-btn\"\n [attr.name]=\"'data-grid-item-menu-button'\"\n ></button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine edit-time text-xl my-3\">\n {{ resolveFieldData(item, subtitleLineId) }}\n </div>\n</ng-template>\n<ng-template #defaultListItem let-item>\n <div class=\"col-12\">\n <div class=\"data-list-items p-3\">\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 <a *ngIf=\"titleLineId\" [routerLink]=\"\" (click)=\"onViewRow(item)\"\n >{{ resolveFieldData(item, titleLineId) || '' }}</a\n >\n </div>\n <div class=\"flex flex-row\">\n <ng-container\n *ngIf=\"viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))\"\n >\n <button\n type=\"button\"\n icon=\"pi pi-eye\"\n pButton\n class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n title=\"{{ (viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate }}\"\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 </ng-container>\n <ng-container\n *ngIf=\"editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))\"\n >\n <button\n type=\"button\"\n class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n icon=\"pi pi-pencil\"\n pButton\n title=\"{{ (editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate }}\"\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 </ng-container>\n <ng-container\n *ngIf=\"deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))\"\n >\n <button\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 title=\"{{ (deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate }}\"\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 </ng-container>\n <ng-container *ngFor=\"let action of inlineListActions$ | async\">\n <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(item, action.actionVisibleField))\">\n <button\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 [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n ></button>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"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 [ariaLabel]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n ></button>\n </ng-container>\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 <div *ngFor=\"let col of getFilteredColumns()\" 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 <ng-container\n [ngTemplateOutlet]=\"\n _listValue ? _listValue: defaultListValue\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: item,\n column: col\n }\"\n ></ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine text-xl my-3\">\n {{ resolveFieldData(item, subtitleLineId) }}\n </div>\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n [ngTemplateOutlet]=\"getTemplate(column) | async\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\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: '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{color:var(--primary-text-color);background-color:var(--primary-color);border:var(--button-border);border-radius:var(--border-radius);padding:var(--button-padding);cursor:pointer;min-width:4rem}\n"] }]
|
|
1465
1738
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1466
1739
|
type: Inject,
|
|
1467
1740
|
args: [LOCALE_ID]
|
|
@@ -1551,6 +1824,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
1551
1824
|
}], gridItemChildTemplate: [{
|
|
1552
1825
|
type: ContentChild,
|
|
1553
1826
|
args: ['gridItem']
|
|
1827
|
+
}], listValueTemplate: [{
|
|
1828
|
+
type: Input
|
|
1829
|
+
}], listValueChildTemplate: [{
|
|
1830
|
+
type: ContentChild,
|
|
1831
|
+
args: ['listValue']
|
|
1832
|
+
}], translationKeyListValueTemplate: [{
|
|
1833
|
+
type: Input
|
|
1834
|
+
}], translationKeyListValueChildTemplate: [{
|
|
1835
|
+
type: ContentChild,
|
|
1836
|
+
args: ['translationKeyListValue']
|
|
1837
|
+
}], numberListValueTemplate: [{
|
|
1838
|
+
type: Input
|
|
1839
|
+
}], numberListValueChildTemplate: [{
|
|
1840
|
+
type: ContentChild,
|
|
1841
|
+
args: ['numberListValue']
|
|
1842
|
+
}], relativeDateListValueTemplate: [{
|
|
1843
|
+
type: Input
|
|
1844
|
+
}], relativeDateListValueChildTemplate: [{
|
|
1845
|
+
type: ContentChild,
|
|
1846
|
+
args: ['relativeDateListValue']
|
|
1847
|
+
}], customListValueTemplate: [{
|
|
1848
|
+
type: Input
|
|
1849
|
+
}], customListValueChildTemplate: [{
|
|
1850
|
+
type: ContentChild,
|
|
1851
|
+
args: ['customListValue']
|
|
1852
|
+
}], stringListValueTemplate: [{
|
|
1853
|
+
type: Input
|
|
1854
|
+
}], stringListValueChildTemplate: [{
|
|
1855
|
+
type: ContentChild,
|
|
1856
|
+
args: ['stringListValue']
|
|
1857
|
+
}], dateListValueTemplate: [{
|
|
1858
|
+
type: Input
|
|
1859
|
+
}], dateListValueChildTemplate: [{
|
|
1860
|
+
type: ContentChild,
|
|
1861
|
+
args: ['dateListValue']
|
|
1554
1862
|
}], additionalActions: [{
|
|
1555
1863
|
type: Input
|
|
1556
1864
|
}], viewItem: [{
|
|
@@ -1561,6 +1869,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
1561
1869
|
type: Output
|
|
1562
1870
|
}], pageChanged: [{
|
|
1563
1871
|
type: Output
|
|
1872
|
+
}], templates: [{
|
|
1873
|
+
type: ContentChildren,
|
|
1874
|
+
args: [PrimeTemplate]
|
|
1875
|
+
}], viewTemplates: [{
|
|
1876
|
+
type: ViewChildren,
|
|
1877
|
+
args: [PrimeTemplate]
|
|
1878
|
+
}], parentTemplates: [{
|
|
1879
|
+
type: Input
|
|
1564
1880
|
}] } });
|
|
1565
1881
|
|
|
1566
1882
|
class DataListGridSortingComponent {
|
|
@@ -1626,7 +1942,7 @@ class DataListGridSortingComponent {
|
|
|
1626
1942
|
}
|
|
1627
1943
|
}
|
|
1628
1944
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DataListGridSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1629
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: { columns: "columns", sortStates: "sortStates", sortDirection: "sortDirection", sortField: "sortField" }, outputs: { sortChange: "sortChange", sortDirectionChange: "sortDirectionChange", columnsChange: "columnsChange" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n <p-dropdown\n id=\"dataListGridSortingDropdown\"\n [(ngModel)]=\"selectedSortingOption\"\n class=\"sort-dropdown\"\n [options]=\"dropdownOptions\"\n [placeholder]=\"('OCX_LIST_GRID_SORT.DROPDOWN.PLACEHOLDER' | translate)\"\n (onChange)=\"selectSorting($event)\"\n [title]=\"('OCX_LIST_GRID_SORT.DROPDOWN.TITLE' | translate)\"\n >\n <ng-template let-item pTemplate=\"item\"> {{ item?.columnName ? (item.columnName | translate) : ''}} </ng-template>\n <ng-template let-item pTemplate=\"selectedItem\">\n {{ item?.columnName ? (item.columnName | translate) : ''}}\n </ng-template></p-dropdown\n >\n <p-button\n id=\"dataListGridSortingButton\"\n icon=\"pi {{sortIcon()}}\"\n styleClass=\"p-button-outlined\"\n (onClick)=\"sortDirectionChanged()\"\n [title]=\"(sortIconTitle() | translate)\"\n [attr.aria-label]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{direction: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n ></p-button>\n</div>\n", styles: [".pi{border-radius:var(--border-radius);border-width:thin;background:none;cursor:pointer}\n"], dependencies: [{ kind: "directive", type:
|
|
1945
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: { columns: "columns", sortStates: "sortStates", sortDirection: "sortDirection", sortField: "sortField" }, outputs: { sortChange: "sortChange", sortDirectionChange: "sortDirectionChange", columnsChange: "columnsChange" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n <p-dropdown\n id=\"dataListGridSortingDropdown\"\n [(ngModel)]=\"selectedSortingOption\"\n class=\"sort-dropdown\"\n [options]=\"dropdownOptions\"\n [placeholder]=\"('OCX_LIST_GRID_SORT.DROPDOWN.PLACEHOLDER' | translate)\"\n (onChange)=\"selectSorting($event)\"\n [title]=\"('OCX_LIST_GRID_SORT.DROPDOWN.TITLE' | translate)\"\n >\n <ng-template let-item pTemplate=\"item\"> {{ item?.columnName ? (item.columnName | translate) : ''}} </ng-template>\n <ng-template let-item pTemplate=\"selectedItem\">\n {{ item?.columnName ? (item.columnName | translate) : ''}}\n </ng-template></p-dropdown\n >\n <p-button\n id=\"dataListGridSortingButton\"\n icon=\"pi {{sortIcon()}}\"\n styleClass=\"p-button-outlined\"\n (onClick)=\"sortDirectionChanged()\"\n [title]=\"(sortIconTitle() | translate)\"\n [attr.aria-label]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{direction: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n ></p-button>\n</div>\n", styles: [".pi{border-radius:var(--border-radius);border-width:thin;background:none;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
1630
1946
|
}
|
|
1631
1947
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DataListGridSortingComponent, decorators: [{
|
|
1632
1948
|
type: Component,
|
|
@@ -1647,109 +1963,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
1647
1963
|
type: Output
|
|
1648
1964
|
}] } });
|
|
1649
1965
|
|
|
1650
|
-
// eslint-disable-next-line @angular-eslint/use-pipe-transform-interface
|
|
1651
|
-
class OcxTimeAgoPipe extends TranslatePipe {
|
|
1652
|
-
constructor(changeDetectorRef, ngZone, translateService) {
|
|
1653
|
-
super(translateService, changeDetectorRef);
|
|
1654
|
-
this.changeDetectorRef = changeDetectorRef;
|
|
1655
|
-
this.ngZone = ngZone;
|
|
1656
|
-
this.translateService = translateService;
|
|
1657
|
-
}
|
|
1658
|
-
transform(value) {
|
|
1659
|
-
this.removeTimer();
|
|
1660
|
-
const d = new Date(value);
|
|
1661
|
-
const now = new Date();
|
|
1662
|
-
const seconds = Math.round(Math.abs((now.getTime() - d.getTime()) / 1000));
|
|
1663
|
-
const timeToUpdate = Number.isNaN(seconds) ? 1000 : this.getSecondsUntilUpdate(seconds) * 1000;
|
|
1664
|
-
this.timer = this.ngZone.runOutsideAngular(() => {
|
|
1665
|
-
if (typeof window !== 'undefined') {
|
|
1666
|
-
return window.setTimeout(() => {
|
|
1667
|
-
this.ngZone.run(() => this.changeDetectorRef.markForCheck());
|
|
1668
|
-
}, timeToUpdate);
|
|
1669
|
-
}
|
|
1670
|
-
return null;
|
|
1671
|
-
});
|
|
1672
|
-
const minutes = Math.round(Math.abs(seconds / 60));
|
|
1673
|
-
const hours = Math.round(Math.abs(minutes / 60));
|
|
1674
|
-
const days = Math.round(Math.abs(hours / 24));
|
|
1675
|
-
const months = Math.round(Math.abs(days / 30.416));
|
|
1676
|
-
const years = Math.round(Math.abs(days / 365));
|
|
1677
|
-
let translationKey = 'UNKNOWN';
|
|
1678
|
-
if (Number.isNaN(seconds)) {
|
|
1679
|
-
translationKey = 'NAN';
|
|
1680
|
-
}
|
|
1681
|
-
else if (seconds <= 45) {
|
|
1682
|
-
translationKey = 'A_FEW_SECONDS_AGO';
|
|
1683
|
-
}
|
|
1684
|
-
else if (seconds <= 90) {
|
|
1685
|
-
translationKey = 'A_MINUTE_AGO';
|
|
1686
|
-
}
|
|
1687
|
-
else if (minutes <= 45) {
|
|
1688
|
-
translationKey = 'MINUTES_AGO';
|
|
1689
|
-
}
|
|
1690
|
-
else if (minutes <= 90) {
|
|
1691
|
-
translationKey = 'AN_HOUR_AGO';
|
|
1692
|
-
}
|
|
1693
|
-
else if (hours <= 22) {
|
|
1694
|
-
translationKey = 'HOURS_AGO';
|
|
1695
|
-
}
|
|
1696
|
-
else if (hours <= 36) {
|
|
1697
|
-
translationKey = 'A_DAY_AGO';
|
|
1698
|
-
}
|
|
1699
|
-
else if (days <= 25) {
|
|
1700
|
-
translationKey = 'DAYS_AGO';
|
|
1701
|
-
}
|
|
1702
|
-
else if (days <= 45) {
|
|
1703
|
-
translationKey = 'A_MONTH_AGO';
|
|
1704
|
-
}
|
|
1705
|
-
else if (days <= 345) {
|
|
1706
|
-
translationKey = 'MONTHS_AGO';
|
|
1707
|
-
}
|
|
1708
|
-
else if (days <= 545) {
|
|
1709
|
-
translationKey = 'A_YEAR_AGO';
|
|
1710
|
-
}
|
|
1711
|
-
else {
|
|
1712
|
-
translationKey = 'YEARS_AGO';
|
|
1713
|
-
}
|
|
1714
|
-
return super.transform('OCX_TIMEAGO.' + translationKey, { minutes, hours, days, months, years });
|
|
1715
|
-
}
|
|
1716
|
-
ngOnDestroy() {
|
|
1717
|
-
this.removeTimer();
|
|
1718
|
-
super.ngOnDestroy();
|
|
1719
|
-
}
|
|
1720
|
-
removeTimer() {
|
|
1721
|
-
if (this.timer) {
|
|
1722
|
-
window.clearTimeout(this.timer);
|
|
1723
|
-
this.timer = null;
|
|
1724
|
-
}
|
|
1725
|
-
}
|
|
1726
|
-
getSecondsUntilUpdate(seconds) {
|
|
1727
|
-
const min = 60;
|
|
1728
|
-
const hr = min * 60;
|
|
1729
|
-
const day = hr * 24;
|
|
1730
|
-
if (seconds < min) {
|
|
1731
|
-
return 2;
|
|
1732
|
-
}
|
|
1733
|
-
else if (seconds < hr) {
|
|
1734
|
-
return 30;
|
|
1735
|
-
}
|
|
1736
|
-
else if (seconds < day) {
|
|
1737
|
-
return 300;
|
|
1738
|
-
}
|
|
1739
|
-
else {
|
|
1740
|
-
return 3600;
|
|
1741
|
-
}
|
|
1742
|
-
}
|
|
1743
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OcxTimeAgoPipe, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1744
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: OcxTimeAgoPipe, name: "timeago" }); }
|
|
1745
|
-
}
|
|
1746
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: OcxTimeAgoPipe, decorators: [{
|
|
1747
|
-
type: Pipe,
|
|
1748
|
-
args: [{
|
|
1749
|
-
name: 'timeago',
|
|
1750
|
-
}]
|
|
1751
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.TranslateService }] });
|
|
1752
|
-
|
|
1753
1966
|
class DataTableComponent extends DataSortBase {
|
|
1754
1967
|
get rows() {
|
|
1755
1968
|
return this._rows$.getValue();
|
|
@@ -1828,6 +2041,15 @@ class DataTableComponent extends DataSortBase {
|
|
|
1828
2041
|
set additionalActions(value) {
|
|
1829
2042
|
this._additionalActions$.next(value);
|
|
1830
2043
|
}
|
|
2044
|
+
set templates(value) {
|
|
2045
|
+
this.templates$.next(value);
|
|
2046
|
+
}
|
|
2047
|
+
set viewTemplates(value) {
|
|
2048
|
+
this.viewTemplates$.next(value);
|
|
2049
|
+
}
|
|
2050
|
+
set parentTemplates(value) {
|
|
2051
|
+
this.parentTemplates$.next(value);
|
|
2052
|
+
}
|
|
1831
2053
|
get viewTableRowObserved() {
|
|
1832
2054
|
const dv = this.injector.get('DataViewComponent', null);
|
|
1833
2055
|
return dv?.viewItemObserved || dv?.viewItem.observed || this.viewTableRow.observed;
|
|
@@ -1888,6 +2110,10 @@ class DataTableComponent extends DataSortBase {
|
|
|
1888
2110
|
this.pageChanged = new EventEmitter();
|
|
1889
2111
|
this.currentFilterColumn$ = new BehaviorSubject(null);
|
|
1890
2112
|
this.currentMenuRow$ = new BehaviorSubject(null);
|
|
2113
|
+
this.templates$ = new BehaviorSubject(undefined);
|
|
2114
|
+
this.viewTemplates$ = new BehaviorSubject(undefined);
|
|
2115
|
+
this.parentTemplates$ = new BehaviorSubject(undefined);
|
|
2116
|
+
this.templatesObservables = {};
|
|
1891
2117
|
this.name = this.name || this.router.url.replace(/[^A-Za-z0-9]/, '_');
|
|
1892
2118
|
this.displayedPageSizes$ = combineLatest([this._pageSizes$, this.translateService.get('OCX_DATA_TABLE.ALL')]).pipe(map(([pageSizes, translation]) => pageSizes.concat({ showAll: translation })));
|
|
1893
2119
|
this.displayedPageSize$ = combineLatest([this._pageSize$, this._pageSizes$]).pipe(map(([pageSize, pageSizes]) => pageSize ?? pageSizes.find((val) => typeof val === 'number') ?? 50));
|
|
@@ -1937,6 +2163,33 @@ class DataTableComponent extends DataSortBase {
|
|
|
1937
2163
|
.map((columnId) => [columnId, filters.filter((filter) => filter.columnId === columnId).length])), map((amounts) => Object.fromEntries(amounts)));
|
|
1938
2164
|
this.mapSelectionToRows();
|
|
1939
2165
|
}
|
|
2166
|
+
ngAfterContentInit() {
|
|
2167
|
+
this.templates?.forEach((item) => {
|
|
2168
|
+
switch (item.getType()) {
|
|
2169
|
+
case 'stringCell':
|
|
2170
|
+
this.stringCellChildTemplate = item.template;
|
|
2171
|
+
break;
|
|
2172
|
+
case 'numberCell':
|
|
2173
|
+
this.numberCellChildTemplate = item.template;
|
|
2174
|
+
break;
|
|
2175
|
+
case 'customCell':
|
|
2176
|
+
this.customCellChildTemplate = item.template;
|
|
2177
|
+
break;
|
|
2178
|
+
case 'dateCell':
|
|
2179
|
+
this.dateCellChildTemplate = item.template;
|
|
2180
|
+
break;
|
|
2181
|
+
case 'relativeDateCell':
|
|
2182
|
+
this.relativeDateCellChildTemplate = item.template;
|
|
2183
|
+
break;
|
|
2184
|
+
case 'cellTemplate':
|
|
2185
|
+
this.cellChildTemplate = item.template;
|
|
2186
|
+
break;
|
|
2187
|
+
case 'translationKeyCell':
|
|
2188
|
+
this.translationKeyCellChildTemplate = item.template;
|
|
2189
|
+
break;
|
|
2190
|
+
}
|
|
2191
|
+
});
|
|
2192
|
+
}
|
|
1940
2193
|
onSortColumnClick(sortColumn) {
|
|
1941
2194
|
const newSortDirection = this.columnNextSortDirection(sortColumn);
|
|
1942
2195
|
this._sortColumn$.next(sortColumn);
|
|
@@ -2028,12 +2281,72 @@ class DataTableComponent extends DataSortBase {
|
|
|
2028
2281
|
const d = new Date(value);
|
|
2029
2282
|
return isValidDate$1(d);
|
|
2030
2283
|
}
|
|
2284
|
+
findTemplate(templates, names) {
|
|
2285
|
+
for (let index = 0; index < names.length; index++) {
|
|
2286
|
+
const name = names[index];
|
|
2287
|
+
const template = templates.find((template) => template.name === name);
|
|
2288
|
+
if (template) {
|
|
2289
|
+
return template;
|
|
2290
|
+
}
|
|
2291
|
+
}
|
|
2292
|
+
return undefined;
|
|
2293
|
+
}
|
|
2294
|
+
getTemplate(column) {
|
|
2295
|
+
if (!this.templatesObservables[column.id]) {
|
|
2296
|
+
this.templatesObservables[column.id] = combineLatest([
|
|
2297
|
+
this.templates$,
|
|
2298
|
+
this.viewTemplates$,
|
|
2299
|
+
this.parentTemplates$,
|
|
2300
|
+
]).pipe(map(([t, vt, pt]) => {
|
|
2301
|
+
const templates = [...(t ?? []), ...(vt ?? []), ...(pt ?? [])];
|
|
2302
|
+
const columnTemplate = this.findTemplate(templates, [
|
|
2303
|
+
column.id + 'IdCell',
|
|
2304
|
+
column.id + 'IdTableCell',
|
|
2305
|
+
])?.template;
|
|
2306
|
+
if (columnTemplate) {
|
|
2307
|
+
return columnTemplate;
|
|
2308
|
+
}
|
|
2309
|
+
switch (column.columnType) {
|
|
2310
|
+
case ColumnType.DATE:
|
|
2311
|
+
return (this._dateCell ??
|
|
2312
|
+
this.findTemplate(templates, ['dateCell', 'dateTableCell', 'defaultDateCell'])?.template ??
|
|
2313
|
+
null);
|
|
2314
|
+
case ColumnType.NUMBER:
|
|
2315
|
+
return (this._numberCell ??
|
|
2316
|
+
this.findTemplate(templates, ['numberCell', 'numberTableCell', 'defaultNumberCell'])?.template ??
|
|
2317
|
+
null);
|
|
2318
|
+
case ColumnType.RELATIVE_DATE:
|
|
2319
|
+
return (this._relativeDateCell ??
|
|
2320
|
+
this.findTemplate(templates, ['relativeDateCell', 'relativeDateTableCell', 'defaultRelativeDateCell'])
|
|
2321
|
+
?.template ??
|
|
2322
|
+
null);
|
|
2323
|
+
case ColumnType.TRANSLATION_KEY:
|
|
2324
|
+
return (this._translationKeyCell ??
|
|
2325
|
+
this.findTemplate(templates, ['translationKeyCell', 'translationKeyTableCell', 'defaultTranslationKeyCell'])
|
|
2326
|
+
?.template ??
|
|
2327
|
+
null);
|
|
2328
|
+
case ColumnType.CUSTOM:
|
|
2329
|
+
return (this._customCell ??
|
|
2330
|
+
this.findTemplate(templates, ['customCell', 'customTableCell', 'defaultCustomCell'])?.template ??
|
|
2331
|
+
null);
|
|
2332
|
+
default:
|
|
2333
|
+
return (this._stringCell ??
|
|
2334
|
+
this.findTemplate(templates, ['stringCell', 'stringTableCell', 'defaultStringCell'])?.template ??
|
|
2335
|
+
null);
|
|
2336
|
+
}
|
|
2337
|
+
}), debounceTime(50));
|
|
2338
|
+
}
|
|
2339
|
+
return this.templatesObservables[column.id];
|
|
2340
|
+
}
|
|
2341
|
+
resolveFieldData(object, key) {
|
|
2342
|
+
return ObjectUtils.resolveFieldData(object, key);
|
|
2343
|
+
}
|
|
2031
2344
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DataTableComponent, deps: [{ token: LOCALE_ID }, { token: i1$1.TranslateService }, { token: i1$2.Router }, { token: i0.Injector }, { token: i3.UserService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2032
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: DataTableComponent, 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", paginator: "paginator", page: "page", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", stringCellTemplate: "stringCellTemplate", numberCellTemplate: "numberCellTemplate", customCellTemplate: "customCellTemplate", dateCellTemplate: "dateCellTemplate", relativeDateCellTemplate: "relativeDateCellTemplate", cellTemplate: "cellTemplate", translationKeyCellTemplate: "translationKeyCellTemplate", additionalActions: "additionalActions", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition" }, outputs: { filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged" }, 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 }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n <ng-container\n *ngIf=\"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 <ng-container\n *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container\n *ngIf=\"editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container\n *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container *ngFor=\"let action of inlineActions$ | async\">\n <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\">\n <button\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 ></button>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"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 </ng-container>\n </div>\n </td>\n </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n <ng-container\n *ngIf=\"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 </ng-container>\n</ng-template>\n\n<p-table\n *ngIf=\"displayedPageSize$ | async as displayedPageSize\"\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]=\"(displayedPageSizes$ | async) ?? []\"\n id=\"dataTable_{{name}}\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selection]=\"(selectedRows$ | async) ?? []\"\n [scrollable]=\"true\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template pTemplate=\"header\">\n <tr>\n <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n </ng-container>\n <ng-container *ngFor=\"let column of columns\">\n <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n <div class=\"table-header-wrapper\">\n <span id=\"{{column.id}}-header-name\">{{ column.nameKey | translate }}</span>\n <span class=\"icon-button-header-wrapper\">\n <button\n *ngIf=\"column.sortable\"\n class=\"pi sortButton\"\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 <p-multiSelect\n class=\"filterMultiSelect\"\n *ngIf=\"column.filterable\"\n [options]=\"(currentFilterOptions$ | async) || []\"\n [ngModel]=\"(currentSelectedFilters$ | async) || []\"\n [showToggleAll]=\"true\"\n emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onFilterChange(column, $event)\"\n placeholder=\"Icon\"\n appendTo=\"body\"\n (onClick)=\"onFilterClick(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [attr.aria-label]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template pTemplate=\"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 pTemplate=\"item\" let-value>\n <ng-container [ngSwitch]=\"(currentFilterColumn$ | async)?.columnType\">\n <span *ngSwitchCase=\"'DATE'\">{{ isDate(value.label) ? (value.label | date) : '' }}</span>\n <span *ngSwitchDefault> {{ value.label }} </span>\n </ng-container>\n </ng-template>\n </p-multiSelect>\n </span>\n </div>\n </th>\n <ng-template #simpleHeader>\n <th scope=\"col\">{{ column.nameKey | translate }}</th>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-rowObject>\n <tr>\n <td *ngIf=\"selectionChangedObserved\">\n <p-tableCheckbox\n [value]=\"rowObject\"\n [disabled]=\"!!selectionEnabledField && !fieldIsTruthy(rowObject, selectionEnabledField)\"\n ></p-tableCheckbox>\n </td>\n <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n </ng-container>\n <td *ngFor=\"let column of columns\">\n <ng-container\n [ngTemplateOutlet]=\"\n _cell ? _cell: defaultCell\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n ></ng-container>\n </td>\n <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"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<ng-template #defaultCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container [ngSwitch]=\"column.columnType\">\n <ng-container *ngSwitchCase=\"'CUSTOM'\">\n <ng-container\n [ngTemplateOutlet]=\"\n _customCell ? _customCell: defaultCustomCell\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'DATE'\">\n <ng-container\n [ngTemplateOutlet]=\"\n _dateCell ? _dateCell : defaultDateCell\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'RELATIVE_DATE'\">\n <ng-container\n [ngTemplateOutlet]=\"\n _relativeDateCell ? _relativeDateCell : defaultRelativeDateCell\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'TRANSLATION_KEY'\">\n <ng-container\n [ngTemplateOutlet]=\"\n _translationKeyCell ? _translationKeyCell: defaultTranslationKeyCell\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'NUMBER'\">\n <ng-container\n [ngTemplateOutlet]=\"\n _numberCell ? _numberCell: defaultNumberCell\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-container\n [ngTemplateOutlet]=\"\n _stringCell ? _stringCell: defaultStringCell\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #defaultStringCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ rowObject[column.id] }} </ng-container>\n</ng-template>\n\n<ng-template #defaultNumberCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ rowObject[column.id] | number }} </ng-container>\n</ng-template>\n\n<ng-template #defaultCustomCell let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template #defaultDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ rowObject[column.id] | date: 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template #defaultRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ rowObject[column.id] | timeago }} </ng-container>\n</ng-template>\n\n<ng-template #defaultTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ 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-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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7$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", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], 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: i7$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i7$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i7$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i8.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.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"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
|
|
2345
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: DataTableComponent, 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", paginator: "paginator", page: "page", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", stringCellTemplate: "stringCellTemplate", numberCellTemplate: "numberCellTemplate", customCellTemplate: "customCellTemplate", dateCellTemplate: "dateCellTemplate", relativeDateCellTemplate: "relativeDateCellTemplate", cellTemplate: "cellTemplate", translationKeyCellTemplate: "translationKeyCellTemplate", additionalActions: "additionalActions", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged" }, 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: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n <ng-container\n *ngIf=\"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 <ng-container\n *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container\n *ngIf=\"editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container\n *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container *ngFor=\"let action of inlineActions$ | async\">\n <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\">\n <button\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 ></button>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"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 </ng-container>\n </div>\n </td>\n </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n <ng-container\n *ngIf=\"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 </ng-container>\n</ng-template>\n\n<p-table\n *ngIf=\"displayedPageSize$ | async as displayedPageSize\"\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]=\"(displayedPageSizes$ | async) ?? []\"\n id=\"dataTable_{{name}}\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selection]=\"(selectedRows$ | async) ?? []\"\n [scrollable]=\"true\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template pTemplate=\"header\">\n <tr>\n <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n </ng-container>\n <ng-container *ngFor=\"let column of columns\">\n <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n <div class=\"table-header-wrapper\">\n <span id=\"{{column.id}}-header-name\">{{ column.nameKey | translate }}</span>\n <span class=\"icon-button-header-wrapper\">\n <button\n *ngIf=\"column.sortable\"\n class=\"pi sortButton\"\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 <p-multiSelect\n class=\"filterMultiSelect\"\n *ngIf=\"column.filterable\"\n [options]=\"(currentFilterOptions$ | async) || []\"\n [ngModel]=\"(currentSelectedFilters$ | async) || []\"\n [showToggleAll]=\"true\"\n emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onFilterChange(column, $event)\"\n placeholder=\"Icon\"\n appendTo=\"body\"\n (onClick)=\"onFilterClick(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [attr.aria-label]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template pTemplate=\"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 pTemplate=\"item\" let-value>\n <ng-container [ngSwitch]=\"(currentFilterColumn$ | async)?.columnType\">\n <span *ngSwitchCase=\"'DATE'\">{{ isDate(value.label) ? (value.label | date) : '' }}</span>\n <span *ngSwitchDefault> {{ value.label }} </span>\n </ng-container>\n </ng-template>\n </p-multiSelect>\n </span>\n </div>\n </th>\n <ng-template #simpleHeader>\n <th scope=\"col\">{{ column.nameKey | translate }}</th>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-rowObject>\n <tr>\n <td *ngIf=\"selectionChangedObserved\">\n <p-tableCheckbox\n [value]=\"rowObject\"\n [disabled]=\"!!selectionEnabledField && !fieldIsTruthy(rowObject, selectionEnabledField)\"\n ></p-tableCheckbox>\n </td>\n <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n </ng-container>\n <td *ngFor=\"let column of columns\">\n <ng-container\n [ngTemplateOutlet]=\"\n _cell ? _cell: defaultCell\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n ></ng-container>\n </td>\n <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"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<ng-template #defaultCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"getTemplate(column) | async as template\"\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"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: '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-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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7$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", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], 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: i7$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i7$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i7$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i8.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.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"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
|
|
2033
2346
|
}
|
|
2034
2347
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
2035
2348
|
type: Component,
|
|
2036
|
-
args: [{ selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n <ng-container\n *ngIf=\"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 <ng-container\n *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container\n *ngIf=\"editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container\n *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container *ngFor=\"let action of inlineActions$ | async\">\n <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\">\n <button\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 ></button>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"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 </ng-container>\n </div>\n </td>\n </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n <ng-container\n *ngIf=\"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 </ng-container>\n</ng-template>\n\n<p-table\n *ngIf=\"displayedPageSize$ | async as displayedPageSize\"\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]=\"(displayedPageSizes$ | async) ?? []\"\n id=\"dataTable_{{name}}\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selection]=\"(selectedRows$ | async) ?? []\"\n [scrollable]=\"true\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template pTemplate=\"header\">\n <tr>\n <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n </ng-container>\n <ng-container *ngFor=\"let column of columns\">\n <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n <div class=\"table-header-wrapper\">\n <span id=\"{{column.id}}-header-name\">{{ column.nameKey | translate }}</span>\n <span class=\"icon-button-header-wrapper\">\n <button\n *ngIf=\"column.sortable\"\n class=\"pi sortButton\"\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 <p-multiSelect\n class=\"filterMultiSelect\"\n *ngIf=\"column.filterable\"\n [options]=\"(currentFilterOptions$ | async) || []\"\n [ngModel]=\"(currentSelectedFilters$ | async) || []\"\n [showToggleAll]=\"true\"\n emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onFilterChange(column, $event)\"\n placeholder=\"Icon\"\n appendTo=\"body\"\n (onClick)=\"onFilterClick(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [attr.aria-label]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template pTemplate=\"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 pTemplate=\"item\" let-value>\n <ng-container [ngSwitch]=\"(currentFilterColumn$ | async)?.columnType\">\n <span *ngSwitchCase=\"'DATE'\">{{ isDate(value.label) ? (value.label | date) : '' }}</span>\n <span *ngSwitchDefault> {{ value.label }} </span>\n </ng-container>\n </ng-template>\n </p-multiSelect>\n </span>\n </div>\n </th>\n <ng-template #simpleHeader>\n <th scope=\"col\">{{ column.nameKey | translate }}</th>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-rowObject>\n <tr>\n <td *ngIf=\"selectionChangedObserved\">\n <p-tableCheckbox\n [value]=\"rowObject\"\n [disabled]=\"!!selectionEnabledField && !fieldIsTruthy(rowObject, selectionEnabledField)\"\n ></p-tableCheckbox>\n </td>\n <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n </ng-container>\n <td *ngFor=\"let column of columns\">\n <ng-container\n [ngTemplateOutlet]=\"\n _cell ? _cell: defaultCell\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n ></ng-container>\n </td>\n <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"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<ng-template #defaultCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container [ngSwitch]=\"column.columnType\">\n <ng-container *ngSwitchCase=\"'CUSTOM'\">\n <ng-container\n [ngTemplateOutlet]=\"\n _customCell ? _customCell: defaultCustomCell\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'DATE'\">\n <ng-container\n [ngTemplateOutlet]=\"\n _dateCell ? _dateCell : defaultDateCell\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'RELATIVE_DATE'\">\n <ng-container\n [ngTemplateOutlet]=\"\n _relativeDateCell ? _relativeDateCell : defaultRelativeDateCell\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'TRANSLATION_KEY'\">\n <ng-container\n [ngTemplateOutlet]=\"\n _translationKeyCell ? _translationKeyCell: defaultTranslationKeyCell\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'NUMBER'\">\n <ng-container\n [ngTemplateOutlet]=\"\n _numberCell ? _numberCell: defaultNumberCell\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-container\n [ngTemplateOutlet]=\"\n _stringCell ? _stringCell: defaultStringCell\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #defaultStringCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ rowObject[column.id] }} </ng-container>\n</ng-template>\n\n<ng-template #defaultNumberCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ rowObject[column.id] | number }} </ng-container>\n</ng-template>\n\n<ng-template #defaultCustomCell let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template #defaultDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ rowObject[column.id] | date: 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template #defaultRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ rowObject[column.id] | timeago }} </ng-container>\n</ng-template>\n\n<ng-template #defaultTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ 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-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"] }]
|
|
2349
|
+
args: [{ selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n <ng-container\n *ngIf=\"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 <ng-container\n *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container\n *ngIf=\"editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container\n *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container *ngFor=\"let action of inlineActions$ | async\">\n <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\">\n <button\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 ></button>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"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 </ng-container>\n </div>\n </td>\n </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n <ng-container\n *ngIf=\"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 </ng-container>\n</ng-template>\n\n<p-table\n *ngIf=\"displayedPageSize$ | async as displayedPageSize\"\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]=\"(displayedPageSizes$ | async) ?? []\"\n id=\"dataTable_{{name}}\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selection]=\"(selectedRows$ | async) ?? []\"\n [scrollable]=\"true\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template pTemplate=\"header\">\n <tr>\n <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n </ng-container>\n <ng-container *ngFor=\"let column of columns\">\n <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n <div class=\"table-header-wrapper\">\n <span id=\"{{column.id}}-header-name\">{{ column.nameKey | translate }}</span>\n <span class=\"icon-button-header-wrapper\">\n <button\n *ngIf=\"column.sortable\"\n class=\"pi sortButton\"\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 <p-multiSelect\n class=\"filterMultiSelect\"\n *ngIf=\"column.filterable\"\n [options]=\"(currentFilterOptions$ | async) || []\"\n [ngModel]=\"(currentSelectedFilters$ | async) || []\"\n [showToggleAll]=\"true\"\n emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onFilterChange(column, $event)\"\n placeholder=\"Icon\"\n appendTo=\"body\"\n (onClick)=\"onFilterClick(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [attr.aria-label]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template pTemplate=\"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 pTemplate=\"item\" let-value>\n <ng-container [ngSwitch]=\"(currentFilterColumn$ | async)?.columnType\">\n <span *ngSwitchCase=\"'DATE'\">{{ isDate(value.label) ? (value.label | date) : '' }}</span>\n <span *ngSwitchDefault> {{ value.label }} </span>\n </ng-container>\n </ng-template>\n </p-multiSelect>\n </span>\n </div>\n </th>\n <ng-template #simpleHeader>\n <th scope=\"col\">{{ column.nameKey | translate }}</th>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-rowObject>\n <tr>\n <td *ngIf=\"selectionChangedObserved\">\n <p-tableCheckbox\n [value]=\"rowObject\"\n [disabled]=\"!!selectionEnabledField && !fieldIsTruthy(rowObject, selectionEnabledField)\"\n ></p-tableCheckbox>\n </td>\n <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n </ng-container>\n <td *ngFor=\"let column of columns\">\n <ng-container\n [ngTemplateOutlet]=\"\n _cell ? _cell: defaultCell\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n ></ng-container>\n </td>\n <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"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<ng-template #defaultCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"getTemplate(column) | async as template\"\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"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: '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-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"] }]
|
|
2037
2350
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2038
2351
|
type: Inject,
|
|
2039
2352
|
args: [LOCALE_ID]
|
|
@@ -2148,6 +2461,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
2148
2461
|
type: Output
|
|
2149
2462
|
}], pageChanged: [{
|
|
2150
2463
|
type: Output
|
|
2464
|
+
}], templates: [{
|
|
2465
|
+
type: ContentChildren,
|
|
2466
|
+
args: [PrimeTemplate]
|
|
2467
|
+
}], viewTemplates: [{
|
|
2468
|
+
type: ViewChildren,
|
|
2469
|
+
args: [PrimeTemplate]
|
|
2470
|
+
}], parentTemplates: [{
|
|
2471
|
+
type: Input
|
|
2151
2472
|
}] } });
|
|
2152
2473
|
|
|
2153
2474
|
class DataViewComponent {
|
|
@@ -2206,7 +2527,9 @@ class DataViewComponent {
|
|
|
2206
2527
|
this.translationKeyTableCellTemplate = value;
|
|
2207
2528
|
}
|
|
2208
2529
|
get _translationKeyTableCell() {
|
|
2209
|
-
return this.translationKeyTableCellTemplate ||
|
|
2530
|
+
return (this.translationKeyTableCellTemplate ||
|
|
2531
|
+
this.translationKeyTableCellChildTemplate ||
|
|
2532
|
+
this.tableTranslationKeyCellChildTemplate);
|
|
2210
2533
|
}
|
|
2211
2534
|
get _gridItemSubtitleLines() {
|
|
2212
2535
|
return this.gridItemSubtitleLinesTemplate || this.gridItemSubtitleLinesChildTemplate;
|
|
@@ -2230,7 +2553,36 @@ class DataViewComponent {
|
|
|
2230
2553
|
this.relativeDateTableCellTemplate = value;
|
|
2231
2554
|
}
|
|
2232
2555
|
get _relativeDateTableCell() {
|
|
2233
|
-
return this.relativeDateTableCellTemplate ||
|
|
2556
|
+
return (this.relativeDateTableCellTemplate ||
|
|
2557
|
+
this.relativeDateTableCellChildTemplate ||
|
|
2558
|
+
this.tableRelativeDateCellChildTemplate);
|
|
2559
|
+
}
|
|
2560
|
+
get _listValue() {
|
|
2561
|
+
return this.listValueTemplate || this.listValueChildTemplate;
|
|
2562
|
+
}
|
|
2563
|
+
get _translationKeyListValue() {
|
|
2564
|
+
return this.translationKeyListValueTemplate || this.translationKeyListValueChildTemplate;
|
|
2565
|
+
}
|
|
2566
|
+
get _numberListValue() {
|
|
2567
|
+
return this.numberListValueTemplate || this.numberListValueChildTemplate;
|
|
2568
|
+
}
|
|
2569
|
+
get _relativeDateListValue() {
|
|
2570
|
+
return this.relativeDateListValueTemplate || this.relativeDateListValueChildTemplate;
|
|
2571
|
+
}
|
|
2572
|
+
get _customListValue() {
|
|
2573
|
+
return this.customListValueTemplate || this.customListValueChildTemplate;
|
|
2574
|
+
}
|
|
2575
|
+
get _stringListValue() {
|
|
2576
|
+
return this.stringListValueTemplate || this.stringListValueChildTemplate;
|
|
2577
|
+
}
|
|
2578
|
+
get _dateListValue() {
|
|
2579
|
+
return this.dateListValueTemplate || this.dateListValueChildTemplate;
|
|
2580
|
+
}
|
|
2581
|
+
set parentTemplates(value) {
|
|
2582
|
+
this.parentTemplates$.next(value);
|
|
2583
|
+
}
|
|
2584
|
+
set templates(value) {
|
|
2585
|
+
this.templates$.next(value);
|
|
2234
2586
|
}
|
|
2235
2587
|
get viewItemObserved() {
|
|
2236
2588
|
return this.injector.get('InteractiveDataViewComponent', null)?.viewItem.observed || this.viewItem.observed;
|
|
@@ -2276,10 +2628,89 @@ class DataViewComponent {
|
|
|
2276
2628
|
this.editItem = new EventEmitter();
|
|
2277
2629
|
this.selectionChanged = new EventEmitter();
|
|
2278
2630
|
this.pageChanged = new EventEmitter();
|
|
2631
|
+
this.parentTemplates$ = new BehaviorSubject(undefined);
|
|
2632
|
+
this.templates$ = new BehaviorSubject(undefined);
|
|
2633
|
+
this.templatesForChildren$ = combineLatest([
|
|
2634
|
+
this.templates$,
|
|
2635
|
+
this.parentTemplates$,
|
|
2636
|
+
]).pipe(map(([t, pt]) => {
|
|
2637
|
+
const ql = new QueryList();
|
|
2638
|
+
ql.reset([...(t?.toArray() ?? []), ...(pt?.toArray() ?? [])]);
|
|
2639
|
+
return ql;
|
|
2640
|
+
}));
|
|
2279
2641
|
}
|
|
2280
2642
|
ngOnInit() {
|
|
2281
2643
|
this.firstColumnId = this.columns[0]?.id;
|
|
2282
2644
|
}
|
|
2645
|
+
ngAfterContentInit() {
|
|
2646
|
+
this.templates?.forEach((item) => {
|
|
2647
|
+
switch (item.getType()) {
|
|
2648
|
+
case 'stringTableCell':
|
|
2649
|
+
this.stringTableCellChildTemplate = item.template;
|
|
2650
|
+
break;
|
|
2651
|
+
case 'numberTableCell':
|
|
2652
|
+
this.numberTableCellChildTemplate = item.template;
|
|
2653
|
+
break;
|
|
2654
|
+
case 'customTableCell':
|
|
2655
|
+
this.customTableCellChildTemplate = item.template;
|
|
2656
|
+
break;
|
|
2657
|
+
case 'tableDateCell':
|
|
2658
|
+
this.tableDateCellChildTemplate = item.template;
|
|
2659
|
+
break;
|
|
2660
|
+
case 'dateTableCell':
|
|
2661
|
+
this.dateTableCellChildTemplate = item.template;
|
|
2662
|
+
break;
|
|
2663
|
+
case 'tableCell':
|
|
2664
|
+
this.tableCellChildTemplate = item.template;
|
|
2665
|
+
break;
|
|
2666
|
+
case 'tableTranslationKeyCell':
|
|
2667
|
+
this.tableTranslationKeyCellChildTemplate = item.template;
|
|
2668
|
+
break;
|
|
2669
|
+
case 'translationKeyTableCell':
|
|
2670
|
+
this.translationKeyTableCellChildTemplate = item.template;
|
|
2671
|
+
break;
|
|
2672
|
+
case 'gridItemSubtitleLines':
|
|
2673
|
+
this.gridItemSubtitleLinesChildTemplate = item.template;
|
|
2674
|
+
break;
|
|
2675
|
+
case 'listItemSubtitleLines':
|
|
2676
|
+
this.listItemSubtitleLinesChildTemplate = item.template;
|
|
2677
|
+
break;
|
|
2678
|
+
case 'gridItem':
|
|
2679
|
+
this.gridItemChildTemplate = item.template;
|
|
2680
|
+
break;
|
|
2681
|
+
case 'listItem':
|
|
2682
|
+
this.listItemChildTemplate = item.template;
|
|
2683
|
+
break;
|
|
2684
|
+
case 'tableRelativeDateCell':
|
|
2685
|
+
this.tableRelativeDateCellChildTemplate = item.template;
|
|
2686
|
+
break;
|
|
2687
|
+
case 'relativeDateTableCell':
|
|
2688
|
+
this.relativeDateTableCellChildTemplate = item.template;
|
|
2689
|
+
break;
|
|
2690
|
+
case 'listValue':
|
|
2691
|
+
this.listValueChildTemplate = item.template;
|
|
2692
|
+
break;
|
|
2693
|
+
case 'translationKeyListValue':
|
|
2694
|
+
this.translationKeyListValueChildTemplate = item.template;
|
|
2695
|
+
break;
|
|
2696
|
+
case 'numberListValue':
|
|
2697
|
+
this.numberListValueChildTemplate = item.template;
|
|
2698
|
+
break;
|
|
2699
|
+
case 'relativeDateListValue':
|
|
2700
|
+
this.relativeDateListValueChildTemplate = item.template;
|
|
2701
|
+
break;
|
|
2702
|
+
case 'customListValue':
|
|
2703
|
+
this.customListValueChildTemplate = item.template;
|
|
2704
|
+
break;
|
|
2705
|
+
case 'stringListValue':
|
|
2706
|
+
this.stringListValueChildTemplate = item.template;
|
|
2707
|
+
break;
|
|
2708
|
+
case 'dateListValue':
|
|
2709
|
+
this.dateListValueChildTemplate = item.template;
|
|
2710
|
+
break;
|
|
2711
|
+
}
|
|
2712
|
+
});
|
|
2713
|
+
}
|
|
2283
2714
|
ngDoCheck() {
|
|
2284
2715
|
this.registerEventListenerForDataTable();
|
|
2285
2716
|
this.registerEventListenerForListGrid();
|
|
@@ -2381,11 +2812,11 @@ class DataViewComponent {
|
|
|
2381
2812
|
this.pageChanged.emit(event);
|
|
2382
2813
|
}
|
|
2383
2814
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DataViewComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2384
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: DataViewComponent, selector: "ocx-data-view", inputs: { deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", 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", customTableCellTemplate: "customTableCellTemplate", dateTableCellTemplate: "dateTableCellTemplate", tableDateCellTemplate: "tableDateCellTemplate", tableCellTemplate: "tableCellTemplate", translationKeyTableCellTemplate: "translationKeyTableCellTemplate", tableTranslationKeyCellTemplate: "tableTranslationKeyCellTemplate", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", gridItemTemplate: "gridItemTemplate", listItemTemplate: "listItemTemplate", relativeDateTableCellTemplate: "relativeDateTableCellTemplate", tableRelativeDateCellTemplate: "tableRelativeDateCellTemplate", additionalActions: "additionalActions" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", pageChanged: "pageChanged" }, 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 }], viewQueries: [{ propertyName: "listGrid", first: true, predicate: DataListGridComponent, descendants: true }, { propertyName: "dataTable", first: true, predicate: DataTableComponent, descendants: true }], ngImport: i0, template: "<div *ngIf=\"layout !== 'table'\">\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 || firstColumnId\"\n [subtitleLineIds]=\"subtitleLineIds\"\n [clientSideSorting]=\"true\"\n [pageSizes]=\"pageSizes\"\n [pageSize]=\"pageSize\"\n [paginator]=\"listGridPaginator\"\n [page]=\"page\"\n (pageChanged)=\"onPageChange($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 [gridItemTemplate]=\"_gridItem ? gridItem : undefined\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n >\n </ocx-data-list-grid>\n <ng-template #listItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_listItemSubtitleLines\"\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #gridItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_gridItemSubtitleLines\"\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #gridItem let-item>\n <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n ></ng-template>\n <ng-template #listItem let-item>\n <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n ></ng-template>\n</div>\n\n<div *ngIf=\"layout === 'table'\">\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 [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 (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [currentPageShowingKey]=\"currentPageShowingKey\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n >\n </ocx-data-table>\n <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableCell\"\n [ngTemplateOutlet]=\"_stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberTableCell\"\n [ngTemplateOutlet]=\"_numberTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customTableCell\"\n [ngTemplateOutlet]=\"_customTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableCell\"\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableCell\"\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableCell\"\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableCell\"\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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", "additionalActions"], outputs: ["viewItem", "editItem", "deleteItem", "pageChanged"] }, { 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", "paginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "customCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged"] }] }); }
|
|
2815
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: DataViewComponent, selector: "ocx-data-view", inputs: { deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", 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", 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", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", pageChanged: "pageChanged" }, 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: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listGrid", first: true, predicate: DataListGridComponent, descendants: true }, { propertyName: "dataTable", first: true, predicate: DataTableComponent, descendants: true }], ngImport: i0, template: "<div *ngIf=\"layout !== 'table'\">\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 [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 <ng-container\n *ngIf=\"_listItemSubtitleLines\"\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #gridItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_gridItemSubtitleLines\"\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #gridItem let-item>\n <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n ></ng-template>\n <ng-template #listItem let-item>\n <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n ></ng-template>\n <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_listValue\"\n [ngTemplateOutlet]=\"_listValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyListValue\"\n [ngTemplateOutlet]=\"_translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberListValue\"\n [ngTemplateOutlet]=\"_numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateListValue\"\n [ngTemplateOutlet]=\"_relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customListValue\"\n [ngTemplateOutlet]=\"_customListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringListValue\"\n [ngTemplateOutlet]=\"_stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateListValue\"\n [ngTemplateOutlet]=\"_dateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n</div>\n\n<div *ngIf=\"layout === 'table'\">\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 [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 (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [currentPageShowingKey]=\"currentPageShowingKey\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n [parentTemplates]=\"templatesForChildren$ | async\"\n >\n </ocx-data-table>\n <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableCell\"\n [ngTemplateOutlet]=\"_stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberTableCell\"\n [ngTemplateOutlet]=\"_numberTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customTableCell\"\n [ngTemplateOutlet]=\"_customTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableCell\"\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableCell\"\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableCell\"\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableCell\"\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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", "customListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "additionalActions", "parentTemplates"], outputs: ["viewItem", "editItem", "deleteItem", "pageChanged"] }, { 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", "paginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "customCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
|
|
2385
2816
|
}
|
|
2386
2817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DataViewComponent, decorators: [{
|
|
2387
2818
|
type: Component,
|
|
2388
|
-
args: [{ selector: 'ocx-data-view', providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], template: "<div *ngIf=\"layout !== 'table'\">\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
|
|
2819
|
+
args: [{ selector: 'ocx-data-view', providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], template: "<div *ngIf=\"layout !== 'table'\">\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 [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 <ng-container\n *ngIf=\"_listItemSubtitleLines\"\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #gridItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_gridItemSubtitleLines\"\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #gridItem let-item>\n <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n ></ng-template>\n <ng-template #listItem let-item>\n <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n ></ng-template>\n <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_listValue\"\n [ngTemplateOutlet]=\"_listValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyListValue\"\n [ngTemplateOutlet]=\"_translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberListValue\"\n [ngTemplateOutlet]=\"_numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateListValue\"\n [ngTemplateOutlet]=\"_relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customListValue\"\n [ngTemplateOutlet]=\"_customListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringListValue\"\n [ngTemplateOutlet]=\"_stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateListValue\"\n [ngTemplateOutlet]=\"_dateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n</div>\n\n<div *ngIf=\"layout === 'table'\">\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 [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 (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [currentPageShowingKey]=\"currentPageShowingKey\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n [parentTemplates]=\"templatesForChildren$ | async\"\n >\n </ocx-data-table>\n <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableCell\"\n [ngTemplateOutlet]=\"_stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberTableCell\"\n [ngTemplateOutlet]=\"_numberTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customTableCell\"\n [ngTemplateOutlet]=\"_customTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableCell\"\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableCell\"\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableCell\"\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableCell\"\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n</div>\n" }]
|
|
2389
2820
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { listGrid: [{
|
|
2390
2821
|
type: ViewChild,
|
|
2391
2822
|
args: [DataListGridComponent]
|
|
@@ -2532,6 +2963,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
2532
2963
|
}], relativeDateTableCellChildTemplate: [{
|
|
2533
2964
|
type: ContentChild,
|
|
2534
2965
|
args: ['relativeDateTableCell']
|
|
2966
|
+
}], listValueTemplate: [{
|
|
2967
|
+
type: Input
|
|
2968
|
+
}], listValueChildTemplate: [{
|
|
2969
|
+
type: ContentChild,
|
|
2970
|
+
args: ['listValue']
|
|
2971
|
+
}], translationKeyListValueTemplate: [{
|
|
2972
|
+
type: Input
|
|
2973
|
+
}], translationKeyListValueChildTemplate: [{
|
|
2974
|
+
type: ContentChild,
|
|
2975
|
+
args: ['translationKeyListValue']
|
|
2976
|
+
}], numberListValueTemplate: [{
|
|
2977
|
+
type: Input
|
|
2978
|
+
}], numberListValueChildTemplate: [{
|
|
2979
|
+
type: ContentChild,
|
|
2980
|
+
args: ['numberListValue']
|
|
2981
|
+
}], relativeDateListValueTemplate: [{
|
|
2982
|
+
type: Input
|
|
2983
|
+
}], relativeDateListValueChildTemplate: [{
|
|
2984
|
+
type: ContentChild,
|
|
2985
|
+
args: ['relativeDateListValue']
|
|
2986
|
+
}], customListValueTemplate: [{
|
|
2987
|
+
type: Input
|
|
2988
|
+
}], customListValueChildTemplate: [{
|
|
2989
|
+
type: ContentChild,
|
|
2990
|
+
args: ['customListValue']
|
|
2991
|
+
}], stringListValueTemplate: [{
|
|
2992
|
+
type: Input
|
|
2993
|
+
}], stringListValueChildTemplate: [{
|
|
2994
|
+
type: ContentChild,
|
|
2995
|
+
args: ['stringListValue']
|
|
2996
|
+
}], dateListValueTemplate: [{
|
|
2997
|
+
type: Input
|
|
2998
|
+
}], dateListValueChildTemplate: [{
|
|
2999
|
+
type: ContentChild,
|
|
3000
|
+
args: ['dateListValue']
|
|
2535
3001
|
}], additionalActions: [{
|
|
2536
3002
|
type: Input
|
|
2537
3003
|
}], filtered: [{
|
|
@@ -2548,6 +3014,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
2548
3014
|
type: Output
|
|
2549
3015
|
}], pageChanged: [{
|
|
2550
3016
|
type: Output
|
|
3017
|
+
}], parentTemplates: [{
|
|
3018
|
+
type: Input
|
|
3019
|
+
}], templates: [{
|
|
3020
|
+
type: ContentChildren,
|
|
3021
|
+
args: [PrimeTemplate]
|
|
2551
3022
|
}] } });
|
|
2552
3023
|
|
|
2553
3024
|
class ColorUtils {
|
|
@@ -2671,7 +3142,7 @@ class DiagramComponent {
|
|
|
2671
3142
|
this.diagramTypeChanged.emit(event.value.layout);
|
|
2672
3143
|
}
|
|
2673
3144
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DiagramComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2674
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: DiagramComponent, selector: "ocx-diagram", inputs: { data: "data", sumKey: "sumKey", diagramType: "diagramType", supportedDiagramTypes: "supportedDiagramTypes" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"this.data\">\n <div class=\"flex justify-content-center pb-2\" *ngIf=\"shownDiagramTypes.length > 1\">\n <p-selectButton\n [options]=\"shownDiagramTypes\"\n [(ngModel)]=\"selectedDiagramType\"\n optionLabel=\"icon\"\n (onChange)=\"onDiagramTypeChanged($event)\"\n name=\"diagram-type-select-button\"\n >\n <ng-template let-item pTemplate>\n <i [class]=\"item.icon\" [title]=\"item.title || (item.titleKey | translate)\"></i>\n </ng-template>\n </p-selectButton>\n </div>\n <div class=\"w-full flex justify-content-center\">\n <p-chart\n id=\"diagram\"\n [type]=\"chartType\"\n [data]=\"chartData\"\n [responsive]=\"false\"\n [options]=\"chartOptions\"\n (onDataSelect)=\"dataClicked($event)\"\n ></p-chart>\n </div>\n <div class=\"w-full flex justify-content-center mt-2 sumKey\">\n <p class=\"text-md font-medium text-700\">\n <span name=\"sumLabel\"> {{ sumKey | translate }}</span> : <span name=\"amountOfData\">{{ amountOfData}}</span>\n </p>\n </div>\n</ng-container>\n\n<div *ngIf=\"!this.data\" class=\"w-full flex justify-content-center\">\n <p-message severity=\"info\" text=\"{{ 'OCX_DIAGRAM.NO_DATA' | translate }}\"></p-message>\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type:
|
|
3145
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: DiagramComponent, selector: "ocx-diagram", inputs: { data: "data", sumKey: "sumKey", diagramType: "diagramType", supportedDiagramTypes: "supportedDiagramTypes" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"this.data\">\n <div class=\"flex justify-content-center pb-2\" *ngIf=\"shownDiagramTypes.length > 1\">\n <p-selectButton\n [options]=\"shownDiagramTypes\"\n [(ngModel)]=\"selectedDiagramType\"\n optionLabel=\"icon\"\n (onChange)=\"onDiagramTypeChanged($event)\"\n name=\"diagram-type-select-button\"\n >\n <ng-template let-item pTemplate>\n <i [class]=\"item.icon\" [title]=\"item.title || (item.titleKey | translate)\"></i>\n </ng-template>\n </p-selectButton>\n </div>\n <div class=\"w-full flex justify-content-center\">\n <p-chart\n id=\"diagram\"\n [type]=\"chartType\"\n [data]=\"chartData\"\n [responsive]=\"false\"\n [options]=\"chartOptions\"\n (onDataSelect)=\"dataClicked($event)\"\n ></p-chart>\n </div>\n <div class=\"w-full flex justify-content-center mt-2 sumKey\">\n <p class=\"text-md font-medium text-700\">\n <span name=\"sumLabel\"> {{ sumKey | translate }}</span> : <span name=\"amountOfData\">{{ amountOfData}}</span>\n </p>\n </div>\n</ng-container>\n\n<div *ngIf=\"!this.data\" class=\"w-full flex justify-content-center\">\n <p-message severity=\"info\" text=\"{{ 'OCX_DIAGRAM.NO_DATA' | translate }}\"></p-message>\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: i5$2.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "ariaLabel", "ariaLabelledBy", "data", "options"], outputs: ["onDataSelect"] }, { kind: "component", type: i6$1.UIMessage, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
2675
3146
|
}
|
|
2676
3147
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DiagramComponent, decorators: [{
|
|
2677
3148
|
type: Component,
|
|
@@ -2825,6 +3296,7 @@ class InteractiveDataViewComponent {
|
|
|
2825
3296
|
this.displayedColumns = [];
|
|
2826
3297
|
this.frozenActionColumn = false;
|
|
2827
3298
|
this.actionColumnPosition = 'right';
|
|
3299
|
+
this.templates$ = new BehaviorSubject(undefined);
|
|
2828
3300
|
this.filtered = new EventEmitter();
|
|
2829
3301
|
this.sorted = new EventEmitter();
|
|
2830
3302
|
this.deleteItem = new EventEmitter();
|
|
@@ -2844,6 +3316,9 @@ class InteractiveDataViewComponent {
|
|
|
2844
3316
|
get dataView() {
|
|
2845
3317
|
return this._dataViewComponent;
|
|
2846
3318
|
}
|
|
3319
|
+
set templates(value) {
|
|
3320
|
+
this.templates$.next(value);
|
|
3321
|
+
}
|
|
2847
3322
|
get paginator() {
|
|
2848
3323
|
return this.listGridPaginator && this.tablePaginator;
|
|
2849
3324
|
}
|
|
@@ -2893,6 +3368,27 @@ class InteractiveDataViewComponent {
|
|
|
2893
3368
|
get _listItem() {
|
|
2894
3369
|
return this.listItem;
|
|
2895
3370
|
}
|
|
3371
|
+
get _listValue() {
|
|
3372
|
+
return this.listValue;
|
|
3373
|
+
}
|
|
3374
|
+
get _translationKeyListValue() {
|
|
3375
|
+
return this.translationKeyListValue;
|
|
3376
|
+
}
|
|
3377
|
+
get _numberListValue() {
|
|
3378
|
+
return this.numberListValue;
|
|
3379
|
+
}
|
|
3380
|
+
get _relativeDateListValue() {
|
|
3381
|
+
return this.relativeDateListValue;
|
|
3382
|
+
}
|
|
3383
|
+
get _customListValue() {
|
|
3384
|
+
return this.customListValue;
|
|
3385
|
+
}
|
|
3386
|
+
get _stringListValue() {
|
|
3387
|
+
return this.stringListValue;
|
|
3388
|
+
}
|
|
3389
|
+
get _dateListValue() {
|
|
3390
|
+
return this.dateListValue;
|
|
3391
|
+
}
|
|
2896
3392
|
get data() {
|
|
2897
3393
|
return this._data;
|
|
2898
3394
|
}
|
|
@@ -2911,6 +3407,78 @@ class InteractiveDataViewComponent {
|
|
|
2911
3407
|
}
|
|
2912
3408
|
this.firstColumnId = this.columns[0]?.id;
|
|
2913
3409
|
}
|
|
3410
|
+
ngAfterContentInit() {
|
|
3411
|
+
this.templates?.forEach((item) => {
|
|
3412
|
+
switch (item.getType()) {
|
|
3413
|
+
case 'tableCell':
|
|
3414
|
+
this.tableCell = item.template;
|
|
3415
|
+
break;
|
|
3416
|
+
case 'tableDateCell':
|
|
3417
|
+
this.tableDateCell = item.template;
|
|
3418
|
+
break;
|
|
3419
|
+
case 'dateTableCell':
|
|
3420
|
+
this.dateTableCell = item.template;
|
|
3421
|
+
break;
|
|
3422
|
+
case 'tableRelativeDateCell':
|
|
3423
|
+
this.tableRelativeDateCell = item.template;
|
|
3424
|
+
break;
|
|
3425
|
+
case 'relativeDateTableCell':
|
|
3426
|
+
this.relativeDateTableCell = item.template;
|
|
3427
|
+
break;
|
|
3428
|
+
case 'tableTranslationKeyCell':
|
|
3429
|
+
this.tableTranslationKeyCell = item.template;
|
|
3430
|
+
break;
|
|
3431
|
+
case 'translationKeyTableCell':
|
|
3432
|
+
this.translationKeyTableCell = item.template;
|
|
3433
|
+
break;
|
|
3434
|
+
case 'gridItemSubtitleLines':
|
|
3435
|
+
this.gridItemSubtitleLines = item.template;
|
|
3436
|
+
break;
|
|
3437
|
+
case 'listItemSubtitleLines':
|
|
3438
|
+
this.listItemSubtitleLines = item.template;
|
|
3439
|
+
break;
|
|
3440
|
+
case 'stringTableCell':
|
|
3441
|
+
this.stringTableCell = item.template;
|
|
3442
|
+
break;
|
|
3443
|
+
case 'numberTableCell':
|
|
3444
|
+
this.numberTableCell = item.template;
|
|
3445
|
+
break;
|
|
3446
|
+
case 'customTableCell':
|
|
3447
|
+
this.customTableCell = item.template;
|
|
3448
|
+
break;
|
|
3449
|
+
case 'gridItem':
|
|
3450
|
+
this.gridItem = item.template;
|
|
3451
|
+
break;
|
|
3452
|
+
case 'listItem':
|
|
3453
|
+
this.listItem = item.template;
|
|
3454
|
+
break;
|
|
3455
|
+
case 'topCenter':
|
|
3456
|
+
this.topCenter = item.template;
|
|
3457
|
+
break;
|
|
3458
|
+
case 'listValue':
|
|
3459
|
+
this.listValue = item.template;
|
|
3460
|
+
break;
|
|
3461
|
+
case 'translationKeyListValue':
|
|
3462
|
+
this.translationKeyListValue = item.template;
|
|
3463
|
+
break;
|
|
3464
|
+
case 'numberListValue':
|
|
3465
|
+
this.numberListValue = item.template;
|
|
3466
|
+
break;
|
|
3467
|
+
case 'relativeDateListValue':
|
|
3468
|
+
this.relativeDateListValue = item.template;
|
|
3469
|
+
break;
|
|
3470
|
+
case 'customListValue':
|
|
3471
|
+
this.customListValue = item.template;
|
|
3472
|
+
break;
|
|
3473
|
+
case 'stringListValue':
|
|
3474
|
+
this.stringListValue = item.template;
|
|
3475
|
+
break;
|
|
3476
|
+
case 'dateListValue':
|
|
3477
|
+
this.dateListValue = item.template;
|
|
3478
|
+
break;
|
|
3479
|
+
}
|
|
3480
|
+
});
|
|
3481
|
+
}
|
|
2914
3482
|
filtering(event) {
|
|
2915
3483
|
this.filters = event;
|
|
2916
3484
|
this.filtered.emit(event);
|
|
@@ -3004,11 +3572,11 @@ class InteractiveDataViewComponent {
|
|
|
3004
3572
|
this.pageChanged.emit(event);
|
|
3005
3573
|
}
|
|
3006
3574
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: InteractiveDataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3007
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: InteractiveDataViewComponent, selector: "ocx-interactive-data-view", inputs: { deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", 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", page: "page", selectedRows: "selectedRows", displayedColumns: "displayedColumns", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", paginator: "paginator", data: "data" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnsChange: "displayedColumnsChange", selectionChanged: "selectionChanged", pageChanged: "pageChanged" }, 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 }], viewQueries: [{ propertyName: "dataView", first: true, predicate: DataViewComponent, descendants: true }], ngImport: i0, template: "<div class=\"p-3 border-bottom-1 surface-border\">\n <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n <ocx-data-layout-selection\n [supportedViewLayouts]=\"supportedViewLayouts\"\n [layout]=\"layout\"\n (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n ></ocx-data-layout-selection>\n\n <div *ngIf=\"topCenter\">\n <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n </div>\n\n <div *ngIf=\"layout !== 'table'\" class=\"flex align-items-center gap-2\">\n <ocx-data-list-grid-sorting\n [sortDirection]=\"sortDirection\"\n [sortField]=\"sortField\"\n [columns]=\"columns\"\n [sortStates]=\"sortStates\"\n (sortChange)=\"onSortChange($event)\"\n (sortDirectionChange)=\"onSortDirectionChange($event)\"\n ></ocx-data-list-grid-sorting>\n </div>\n\n <div *ngIf=\"layout === 'table'\" class=\"flex flex-wrap justify-content-between align-items-center gap-2\">\n <ocx-column-group-selection\n [selectedGroupKey]=\"selectedGroupKey\"\n [columns]=\"columns\"\n [defaultGroupKey]=\"defaultGroupKey\"\n [customGroupKey]=\"customGroupKey\"\n [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n ></ocx-column-group-selection>\n\n <ocx-custom-group-column-selector\n [columns]=\"columns\"\n [displayedColumns]=\"displayedColumns\"\n (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n [frozenActionColumn]=\"frozenActionColumn\"\n [actionColumnPosition]=\"actionColumnPosition\"\n (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n ></ocx-custom-group-column-selector>\n </div>\n </div>\n</div>\n<div class=\"p-3\">\n <ocx-data-view\n [columns]=\"displayedColumns\"\n [sortStates]=\"sortStates\"\n [sortField]=\"sortField\"\n [filters]=\"filters\"\n [data]=\"data\"\n [sortDirection]=\"sortDirection\"\n [titleLineId]=\"titleLineId || firstColumnId\"\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 [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 [gridItemTemplate]=\"_gridItem? gridItem : undefined\"\n (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [currentPageShowingKey]=\"currentPageShowingKey\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n >\n </ocx-data-view>\n</div>\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableCell\"\n [ngTemplateOutlet]=\"_stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableDateCell\"\n [ngTemplateOutlet]=\"_tableDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableCell\"\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableRelativeDateCell\"\n [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableCell\"\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableCell\"\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableTranslationKeyCell\"\n [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableCell\"\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #gridItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_gridItemSubtitleLines\"\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container>\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_listItemSubtitleLines\"\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n></ng-template>\n<ng-template #gridItem let-item>\n <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n></ng-template>\n<ng-template #listItem let-item>\n <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n></ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["groupSelectionChanged"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "dialogTitle", "openButtonTitle", "saveButtonLabel", "cancelButtonLabel", "activeColumnsLabel", "inactiveColumnsLabel", "frozenActionColumn", "actionColumnPosition"], outputs: ["columnSelectionChanged", "actionColumnConfigChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["dataViewLayoutChange"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortChange", "sortDirectionChange", "columnsChange"] }, { kind: "component", type: DataViewComponent, selector: "ocx-data-view", inputs: ["deletePermission", "editPermission", "viewPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "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", "customTableCellTemplate", "dateTableCellTemplate", "tableDateCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "tableTranslationKeyCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "tableRelativeDateCellTemplate", "additionalActions"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged"] }] }); }
|
|
3575
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: InteractiveDataViewComponent, selector: "ocx-interactive-data-view", inputs: { deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", 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", page: "page", selectedRows: "selectedRows", displayedColumns: "displayedColumns", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", paginator: "paginator", data: "data" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnsChange: "displayedColumnsChange", selectionChanged: "selectionChanged", pageChanged: "pageChanged" }, 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: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "dataView", first: true, predicate: DataViewComponent, descendants: true }], ngImport: i0, template: "<div class=\"p-3 border-bottom-1 surface-border\">\n <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n <ocx-data-layout-selection\n [supportedViewLayouts]=\"supportedViewLayouts\"\n [layout]=\"layout\"\n (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n ></ocx-data-layout-selection>\n\n <div *ngIf=\"topCenter\">\n <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n </div>\n\n <div *ngIf=\"layout !== 'table'\" class=\"flex align-items-center gap-2\">\n <ocx-data-list-grid-sorting\n [sortDirection]=\"sortDirection\"\n [sortField]=\"sortField\"\n [columns]=\"columns\"\n [sortStates]=\"sortStates\"\n (sortChange)=\"onSortChange($event)\"\n (sortDirectionChange)=\"onSortDirectionChange($event)\"\n ></ocx-data-list-grid-sorting>\n </div>\n\n <div *ngIf=\"layout === 'table'\" class=\"flex flex-wrap justify-content-between align-items-center gap-2\">\n <ocx-column-group-selection\n [selectedGroupKey]=\"selectedGroupKey\"\n [columns]=\"columns\"\n [defaultGroupKey]=\"defaultGroupKey\"\n [customGroupKey]=\"customGroupKey\"\n [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n ></ocx-column-group-selection>\n\n <ocx-custom-group-column-selector\n [columns]=\"columns\"\n [displayedColumns]=\"displayedColumns\"\n (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n [frozenActionColumn]=\"frozenActionColumn\"\n [actionColumnPosition]=\"actionColumnPosition\"\n (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n ></ocx-custom-group-column-selector>\n </div>\n </div>\n</div>\n<div class=\"p-3\">\n <ocx-data-view\n [columns]=\"displayedColumns\"\n [sortStates]=\"sortStates\"\n [sortField]=\"sortField\"\n [filters]=\"filters\"\n [data]=\"data\"\n [sortDirection]=\"sortDirection\"\n [titleLineId]=\"titleLineId\"\n [subtitleLineIds]=\"subtitleLineIds\"\n [clientSideSorting]=\"clientSideSorting\"\n [clientSideFiltering]=\"clientSideFiltering\"\n [pageSizes]=\"pageSizes\"\n [pageSize]=\"pageSize\"\n [emptyResultsMessage]=\"emptyResultsMessage\"\n [layout]=\"layout\"\n [name]=\"name\"\n [deletePermission]=\"deletePermission\"\n [editPermission]=\"editPermission\"\n [viewPermission]=\"viewPermission\"\n [deleteActionEnabledField]=\"deleteActionEnabledField\"\n [deleteActionVisibleField]=\"deleteActionVisibleField\"\n [editActionEnabledField]=\"editActionEnabledField\"\n [editActionVisibleField]=\"editActionVisibleField\"\n [viewActionEnabledField]=\"viewActionEnabledField\"\n [viewActionVisibleField]=\"viewActionVisibleField\"\n [additionalActions]=\"additionalActions\"\n [listGridPaginator]=\"listGridPaginator\"\n [tablePaginator]=\"tablePaginator\"\n [page]=\"page\"\n (pageChanged)=\"onPageChange($event)\"\n [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 (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [currentPageShowingKey]=\"currentPageShowingKey\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n [parentTemplates]=\"templates$ | async\"\n >\n </ocx-data-view>\n</div>\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableCell\"\n [ngTemplateOutlet]=\"_stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableDateCell\"\n [ngTemplateOutlet]=\"_tableDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableCell\"\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableRelativeDateCell\"\n [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableCell\"\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableCell\"\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableTranslationKeyCell\"\n [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableCell\"\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #gridItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_gridItemSubtitleLines\"\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container>\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_listItemSubtitleLines\"\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n></ng-template>\n<ng-template #gridItem let-item>\n <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n></ng-template>\n<ng-template #listItem let-item>\n <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n></ng-template>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_listValue\"\n [ngTemplateOutlet]=\"_listValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyListValue\"\n [ngTemplateOutlet]=\"_translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberListValue\"\n [ngTemplateOutlet]=\"_numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateListValue\"\n [ngTemplateOutlet]=\"_relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customListValue\"\n [ngTemplateOutlet]=\"_customListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringListValue\"\n [ngTemplateOutlet]=\"_stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateListValue\"\n [ngTemplateOutlet]=\"_dateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["groupSelectionChanged"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "dialogTitle", "openButtonTitle", "saveButtonLabel", "cancelButtonLabel", "activeColumnsLabel", "inactiveColumnsLabel", "frozenActionColumn", "actionColumnPosition"], outputs: ["columnSelectionChanged", "actionColumnConfigChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["dataViewLayoutChange"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortChange", "sortDirectionChange", "columnsChange"] }, { kind: "component", type: DataViewComponent, selector: "ocx-data-view", inputs: ["deletePermission", "editPermission", "viewPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "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", "customTableCellTemplate", "dateTableCellTemplate", "tableDateCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "tableTranslationKeyCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "tableRelativeDateCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "customListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "additionalActions", "parentTemplates"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
|
|
3008
3576
|
}
|
|
3009
3577
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: InteractiveDataViewComponent, decorators: [{
|
|
3010
3578
|
type: Component,
|
|
3011
|
-
args: [{ selector: 'ocx-interactive-data-view', providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], template: "<div class=\"p-3 border-bottom-1 surface-border\">\n <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n <ocx-data-layout-selection\n [supportedViewLayouts]=\"supportedViewLayouts\"\n [layout]=\"layout\"\n (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n ></ocx-data-layout-selection>\n\n <div *ngIf=\"topCenter\">\n <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n </div>\n\n <div *ngIf=\"layout !== 'table'\" class=\"flex align-items-center gap-2\">\n <ocx-data-list-grid-sorting\n [sortDirection]=\"sortDirection\"\n [sortField]=\"sortField\"\n [columns]=\"columns\"\n [sortStates]=\"sortStates\"\n (sortChange)=\"onSortChange($event)\"\n (sortDirectionChange)=\"onSortDirectionChange($event)\"\n ></ocx-data-list-grid-sorting>\n </div>\n\n <div *ngIf=\"layout === 'table'\" class=\"flex flex-wrap justify-content-between align-items-center gap-2\">\n <ocx-column-group-selection\n [selectedGroupKey]=\"selectedGroupKey\"\n [columns]=\"columns\"\n [defaultGroupKey]=\"defaultGroupKey\"\n [customGroupKey]=\"customGroupKey\"\n [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n ></ocx-column-group-selection>\n\n <ocx-custom-group-column-selector\n [columns]=\"columns\"\n [displayedColumns]=\"displayedColumns\"\n (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n [frozenActionColumn]=\"frozenActionColumn\"\n [actionColumnPosition]=\"actionColumnPosition\"\n (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n ></ocx-custom-group-column-selector>\n </div>\n </div>\n</div>\n<div class=\"p-3\">\n <ocx-data-view\n [columns]=\"displayedColumns\"\n [sortStates]=\"sortStates\"\n [sortField]=\"sortField\"\n [filters]=\"filters\"\n [data]=\"data\"\n [sortDirection]=\"sortDirection\"\n [titleLineId]=\"titleLineId || firstColumnId\"\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 [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 [gridItemTemplate]=\"_gridItem? gridItem : undefined\"\n (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [currentPageShowingKey]=\"currentPageShowingKey\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n >\n </ocx-data-view>\n</div>\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableCell\"\n [ngTemplateOutlet]=\"_stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableDateCell\"\n [ngTemplateOutlet]=\"_tableDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableCell\"\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableRelativeDateCell\"\n [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableCell\"\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableCell\"\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableTranslationKeyCell\"\n [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableCell\"\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #gridItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_gridItemSubtitleLines\"\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container>\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_listItemSubtitleLines\"\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n></ng-template>\n<ng-template #gridItem let-item>\n <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n></ng-template>\n<ng-template #listItem let-item>\n <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n></ng-template>\n" }]
|
|
3579
|
+
args: [{ selector: 'ocx-interactive-data-view', providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], template: "<div class=\"p-3 border-bottom-1 surface-border\">\n <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n <ocx-data-layout-selection\n [supportedViewLayouts]=\"supportedViewLayouts\"\n [layout]=\"layout\"\n (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n ></ocx-data-layout-selection>\n\n <div *ngIf=\"topCenter\">\n <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n </div>\n\n <div *ngIf=\"layout !== 'table'\" class=\"flex align-items-center gap-2\">\n <ocx-data-list-grid-sorting\n [sortDirection]=\"sortDirection\"\n [sortField]=\"sortField\"\n [columns]=\"columns\"\n [sortStates]=\"sortStates\"\n (sortChange)=\"onSortChange($event)\"\n (sortDirectionChange)=\"onSortDirectionChange($event)\"\n ></ocx-data-list-grid-sorting>\n </div>\n\n <div *ngIf=\"layout === 'table'\" class=\"flex flex-wrap justify-content-between align-items-center gap-2\">\n <ocx-column-group-selection\n [selectedGroupKey]=\"selectedGroupKey\"\n [columns]=\"columns\"\n [defaultGroupKey]=\"defaultGroupKey\"\n [customGroupKey]=\"customGroupKey\"\n [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n ></ocx-column-group-selection>\n\n <ocx-custom-group-column-selector\n [columns]=\"columns\"\n [displayedColumns]=\"displayedColumns\"\n (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n [frozenActionColumn]=\"frozenActionColumn\"\n [actionColumnPosition]=\"actionColumnPosition\"\n (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n ></ocx-custom-group-column-selector>\n </div>\n </div>\n</div>\n<div class=\"p-3\">\n <ocx-data-view\n [columns]=\"displayedColumns\"\n [sortStates]=\"sortStates\"\n [sortField]=\"sortField\"\n [filters]=\"filters\"\n [data]=\"data\"\n [sortDirection]=\"sortDirection\"\n [titleLineId]=\"titleLineId\"\n [subtitleLineIds]=\"subtitleLineIds\"\n [clientSideSorting]=\"clientSideSorting\"\n [clientSideFiltering]=\"clientSideFiltering\"\n [pageSizes]=\"pageSizes\"\n [pageSize]=\"pageSize\"\n [emptyResultsMessage]=\"emptyResultsMessage\"\n [layout]=\"layout\"\n [name]=\"name\"\n [deletePermission]=\"deletePermission\"\n [editPermission]=\"editPermission\"\n [viewPermission]=\"viewPermission\"\n [deleteActionEnabledField]=\"deleteActionEnabledField\"\n [deleteActionVisibleField]=\"deleteActionVisibleField\"\n [editActionEnabledField]=\"editActionEnabledField\"\n [editActionVisibleField]=\"editActionVisibleField\"\n [viewActionEnabledField]=\"viewActionEnabledField\"\n [viewActionVisibleField]=\"viewActionVisibleField\"\n [additionalActions]=\"additionalActions\"\n [listGridPaginator]=\"listGridPaginator\"\n [tablePaginator]=\"tablePaginator\"\n [page]=\"page\"\n (pageChanged)=\"onPageChange($event)\"\n [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 (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [currentPageShowingKey]=\"currentPageShowingKey\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n [parentTemplates]=\"templates$ | async\"\n >\n </ocx-data-view>\n</div>\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableCell\"\n [ngTemplateOutlet]=\"_stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableDateCell\"\n [ngTemplateOutlet]=\"_tableDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableCell\"\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableRelativeDateCell\"\n [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableCell\"\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableCell\"\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableTranslationKeyCell\"\n [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableCell\"\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #gridItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_gridItemSubtitleLines\"\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container>\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_listItemSubtitleLines\"\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n></ng-template>\n<ng-template #gridItem let-item>\n <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n></ng-template>\n<ng-template #listItem let-item>\n <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n></ng-template>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_listValue\"\n [ngTemplateOutlet]=\"_listValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyListValue\"\n [ngTemplateOutlet]=\"_translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberListValue\"\n [ngTemplateOutlet]=\"_numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateListValue\"\n [ngTemplateOutlet]=\"_relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customListValue\"\n [ngTemplateOutlet]=\"_customListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringListValue\"\n [ngTemplateOutlet]=\"_stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateListValue\"\n [ngTemplateOutlet]=\"_dateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>" }]
|
|
3012
3580
|
}], propDecorators: { dataView: [{
|
|
3013
3581
|
type: ViewChild,
|
|
3014
3582
|
args: [DataViewComponent]
|
|
@@ -3135,6 +3703,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
3135
3703
|
}], topCenter: [{
|
|
3136
3704
|
type: ContentChild,
|
|
3137
3705
|
args: ['topCenter']
|
|
3706
|
+
}], listValue: [{
|
|
3707
|
+
type: ContentChild,
|
|
3708
|
+
args: ['listValue']
|
|
3709
|
+
}], translationKeyListValue: [{
|
|
3710
|
+
type: ContentChild,
|
|
3711
|
+
args: ['translationKeyListValue']
|
|
3712
|
+
}], numberListValue: [{
|
|
3713
|
+
type: ContentChild,
|
|
3714
|
+
args: ['numberListValue']
|
|
3715
|
+
}], relativeDateListValue: [{
|
|
3716
|
+
type: ContentChild,
|
|
3717
|
+
args: ['relativeDateListValue']
|
|
3718
|
+
}], customListValue: [{
|
|
3719
|
+
type: ContentChild,
|
|
3720
|
+
args: ['customListValue']
|
|
3721
|
+
}], stringListValue: [{
|
|
3722
|
+
type: ContentChild,
|
|
3723
|
+
args: ['stringListValue']
|
|
3724
|
+
}], dateListValue: [{
|
|
3725
|
+
type: ContentChild,
|
|
3726
|
+
args: ['dateListValue']
|
|
3727
|
+
}], templates: [{
|
|
3728
|
+
type: ContentChildren,
|
|
3729
|
+
args: [PrimeTemplate]
|
|
3138
3730
|
}], filtered: [{
|
|
3139
3731
|
type: Output
|
|
3140
3732
|
}], sorted: [{
|
|
@@ -3247,7 +3839,8 @@ class AngularAcceleratorPrimeNgModule {
|
|
|
3247
3839
|
ChartModule,
|
|
3248
3840
|
MultiSelectModule,
|
|
3249
3841
|
SkeletonModule,
|
|
3250
|
-
MessageModule
|
|
3842
|
+
MessageModule,
|
|
3843
|
+
SharedModule], exports: [BreadcrumbModule,
|
|
3251
3844
|
DropdownModule,
|
|
3252
3845
|
ButtonModule,
|
|
3253
3846
|
DialogModule,
|
|
@@ -3259,7 +3852,8 @@ class AngularAcceleratorPrimeNgModule {
|
|
|
3259
3852
|
ChartModule,
|
|
3260
3853
|
MultiSelectModule,
|
|
3261
3854
|
SkeletonModule,
|
|
3262
|
-
MessageModule
|
|
3855
|
+
MessageModule,
|
|
3856
|
+
SharedModule] }); }
|
|
3263
3857
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AngularAcceleratorPrimeNgModule, imports: [BreadcrumbModule,
|
|
3264
3858
|
DropdownModule,
|
|
3265
3859
|
ButtonModule,
|
|
@@ -3272,7 +3866,8 @@ class AngularAcceleratorPrimeNgModule {
|
|
|
3272
3866
|
ChartModule,
|
|
3273
3867
|
MultiSelectModule,
|
|
3274
3868
|
SkeletonModule,
|
|
3275
|
-
MessageModule,
|
|
3869
|
+
MessageModule,
|
|
3870
|
+
SharedModule, BreadcrumbModule,
|
|
3276
3871
|
DropdownModule,
|
|
3277
3872
|
ButtonModule,
|
|
3278
3873
|
DialogModule,
|
|
@@ -3284,7 +3879,8 @@ class AngularAcceleratorPrimeNgModule {
|
|
|
3284
3879
|
ChartModule,
|
|
3285
3880
|
MultiSelectModule,
|
|
3286
3881
|
SkeletonModule,
|
|
3287
|
-
MessageModule
|
|
3882
|
+
MessageModule,
|
|
3883
|
+
SharedModule] }); }
|
|
3288
3884
|
}
|
|
3289
3885
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AngularAcceleratorPrimeNgModule, decorators: [{
|
|
3290
3886
|
type: NgModule,
|
|
@@ -3302,7 +3898,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
3302
3898
|
ChartModule,
|
|
3303
3899
|
MultiSelectModule,
|
|
3304
3900
|
SkeletonModule,
|
|
3305
|
-
MessageModule
|
|
3901
|
+
MessageModule,
|
|
3902
|
+
SharedModule,
|
|
3306
3903
|
],
|
|
3307
3904
|
exports: [
|
|
3308
3905
|
BreadcrumbModule,
|
|
@@ -3317,7 +3914,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
3317
3914
|
ChartModule,
|
|
3318
3915
|
MultiSelectModule,
|
|
3319
3916
|
SkeletonModule,
|
|
3320
|
-
MessageModule
|
|
3917
|
+
MessageModule,
|
|
3918
|
+
SharedModule,
|
|
3321
3919
|
],
|
|
3322
3920
|
}]
|
|
3323
3921
|
}] });
|
|
@@ -3374,8 +3972,8 @@ class AngularAcceleratorModule {
|
|
|
3374
3972
|
IfBreakpointDirective,
|
|
3375
3973
|
SrcDirective,
|
|
3376
3974
|
OcxTimeAgoPipe,
|
|
3377
|
-
|
|
3378
|
-
|
|
3975
|
+
AdvancedDirective,
|
|
3976
|
+
TooltipOnOverflowDirective], imports: [CommonModule,
|
|
3379
3977
|
AngularAcceleratorPrimeNgModule,
|
|
3380
3978
|
TranslateModule,
|
|
3381
3979
|
FormsModule,
|
|
@@ -3396,8 +3994,8 @@ class AngularAcceleratorModule {
|
|
|
3396
3994
|
IfBreakpointDirective,
|
|
3397
3995
|
SrcDirective,
|
|
3398
3996
|
OcxTimeAgoPipe,
|
|
3399
|
-
|
|
3400
|
-
|
|
3997
|
+
AdvancedDirective,
|
|
3998
|
+
TooltipOnOverflowDirective] }); }
|
|
3401
3999
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AngularAcceleratorModule, providers: [
|
|
3402
4000
|
{
|
|
3403
4001
|
provide: LOCALE_ID,
|
|
@@ -3412,7 +4010,7 @@ class AngularAcceleratorModule {
|
|
|
3412
4010
|
provide: APP_INITIALIZER,
|
|
3413
4011
|
useFactory: appInitializer,
|
|
3414
4012
|
deps: [UserService],
|
|
3415
|
-
multi: true
|
|
4013
|
+
multi: true,
|
|
3416
4014
|
},
|
|
3417
4015
|
AppConfigService,
|
|
3418
4016
|
], imports: [CommonModule,
|
|
@@ -3452,8 +4050,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
3452
4050
|
IfBreakpointDirective,
|
|
3453
4051
|
SrcDirective,
|
|
3454
4052
|
OcxTimeAgoPipe,
|
|
3455
|
-
SrcDirective,
|
|
3456
4053
|
AdvancedDirective,
|
|
4054
|
+
TooltipOnOverflowDirective,
|
|
3457
4055
|
],
|
|
3458
4056
|
providers: [
|
|
3459
4057
|
{
|
|
@@ -3469,7 +4067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
3469
4067
|
provide: APP_INITIALIZER,
|
|
3470
4068
|
useFactory: appInitializer,
|
|
3471
4069
|
deps: [UserService],
|
|
3472
|
-
multi: true
|
|
4070
|
+
multi: true,
|
|
3473
4071
|
},
|
|
3474
4072
|
AppConfigService,
|
|
3475
4073
|
],
|
|
@@ -3490,8 +4088,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
3490
4088
|
IfBreakpointDirective,
|
|
3491
4089
|
SrcDirective,
|
|
3492
4090
|
OcxTimeAgoPipe,
|
|
3493
|
-
SrcDirective,
|
|
3494
4091
|
AdvancedDirective,
|
|
4092
|
+
TooltipOnOverflowDirective,
|
|
3495
4093
|
],
|
|
3496
4094
|
}]
|
|
3497
4095
|
}] });
|
|
@@ -3637,5 +4235,5 @@ function enumToDropdownOptions(translateService, enumType, translationKeyPrefix)
|
|
|
3637
4235
|
* Generated bundle index. Do not edit.
|
|
3638
4236
|
*/
|
|
3639
4237
|
|
|
3640
|
-
export { AdvancedDirective, AlwaysGrantPermissionChecker, AngularAcceleratorMissingTranslationHandler, AngularAcceleratorModule, AngularAcceleratorPrimeNgModule, AppConfigService, AsyncTranslateLoader, BreadcrumbService, CachingTranslateLoader, ColorUtils, ColumnGroupSelectionComponent, ColumnType, CustomGroupColumnSelectorComponent, DataLayoutSelectionComponent, DataListGridComponent, DataListGridSortingComponent, DataTableComponent, DataViewComponent, DateUtils, DiagramComponent, DynamicPipe, GroupByCountDiagramComponent, HAS_PERMISSION_CHECKER, IfBreakpointDirective, IfPermissionDirective, InteractiveDataViewComponent, ObjectUtils, OcxTimeAgoPipe, PageHeaderComponent, SearchConfigComponent, SearchHeaderComponent, SrcDirective, TranslateCombinedLoader, TranslationCacheService, createRemoteComponentTranslateLoader, createTranslateLoader, enumToDropdownOptions, flattenObject, isValidDate };
|
|
4238
|
+
export { AdvancedDirective, AlwaysGrantPermissionChecker, AngularAcceleratorMissingTranslationHandler, AngularAcceleratorModule, AngularAcceleratorPrimeNgModule, AppConfigService, AsyncTranslateLoader, BreadcrumbService, CachingTranslateLoader, ColorUtils, ColumnGroupSelectionComponent, ColumnType, CustomGroupColumnSelectorComponent, DataLayoutSelectionComponent, DataListGridComponent, DataListGridSortingComponent, DataTableComponent, DataViewComponent, DateUtils, DiagramComponent, DynamicPipe, GroupByCountDiagramComponent, HAS_PERMISSION_CHECKER, IfBreakpointDirective, IfPermissionDirective, InteractiveDataViewComponent, ObjectUtils, OcxTimeAgoPipe, PageHeaderComponent, SearchConfigComponent, SearchHeaderComponent, SrcDirective, TooltipOnOverflowDirective, TranslateCombinedLoader, TranslationCacheService, createRemoteComponentTranslateLoader, createTranslateLoader, enumToDropdownOptions, flattenObject, isValidDate };
|
|
3641
4239
|
//# sourceMappingURL=onecx-angular-accelerator.mjs.map
|