@fuentis/phoenix-ui 0.0.9-alpha.565 → 0.0.9-alpha.567
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/fuentis-phoenix-ui.mjs +861 -622
- package/fesm2022/fuentis-phoenix-ui.mjs.map +1 -1
- package/index.d.ts +151 -78
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Component, EventEmitter, Output, ViewEncapsulation, signal, Injectable, inject, input, output, ViewChild, ChangeDetectionStrategy, Pipe, DestroyRef, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef, Directive, forwardRef, HostListener, computed, InjectionToken, Optional, Inject } from '@angular/core';
|
|
2
|
+
import { Input, Component, EventEmitter, Output, ViewEncapsulation, signal, Injectable, inject, input, output, ViewChild, ChangeDetectionStrategy, ViewChildren, Pipe, DestroyRef, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef, Directive, forwardRef, HostListener, computed, InjectionToken, Optional, Inject } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule, LowerCasePipe, DatePipe } from '@angular/common';
|
|
5
5
|
import * as i2 from 'primeng/tooltip';
|
|
6
|
-
import { TooltipModule } from 'primeng/tooltip';
|
|
6
|
+
import { TooltipModule, Tooltip } from 'primeng/tooltip';
|
|
7
7
|
import * as i3 from 'primeng/button';
|
|
8
8
|
import { ButtonModule } from 'primeng/button';
|
|
9
9
|
import * as i1 from '@angular/router';
|
|
@@ -21,13 +21,13 @@ import { MessageService, FilterMatchMode } from 'primeng/api';
|
|
|
21
21
|
import * as i3$3 from 'primeng/accordion';
|
|
22
22
|
import { AccordionModule } from 'primeng/accordion';
|
|
23
23
|
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
24
|
-
import * as
|
|
24
|
+
import * as i3$4 from 'primeng/popover';
|
|
25
25
|
import { PopoverModule, Popover } from 'primeng/popover';
|
|
26
|
-
import * as i2$
|
|
26
|
+
import * as i2$1 from 'primeng/card';
|
|
27
27
|
import { CardModule } from 'primeng/card';
|
|
28
|
-
import * as i2$
|
|
28
|
+
import * as i2$3 from 'primeng/drawer';
|
|
29
29
|
import { DrawerModule, Drawer } from 'primeng/drawer';
|
|
30
|
-
import * as i3$
|
|
30
|
+
import * as i3$5 from 'primeng/inputtext';
|
|
31
31
|
import { InputTextModule } from 'primeng/inputtext';
|
|
32
32
|
import * as i8$1 from 'primeng/tabs';
|
|
33
33
|
import { TabsModule } from 'primeng/tabs';
|
|
@@ -36,10 +36,10 @@ import { IconFieldModule } from 'primeng/iconfield';
|
|
|
36
36
|
import * as i5 from 'primeng/inputicon';
|
|
37
37
|
import { InputIconModule } from 'primeng/inputicon';
|
|
38
38
|
import { MessageModule } from 'primeng/message';
|
|
39
|
-
import { Subject, debounceTime, switchMap, of, catchError, BehaviorSubject, combineLatestWith, distinctUntilChanged, combineLatest, merge, firstValueFrom } from 'rxjs';
|
|
39
|
+
import { Subject, debounceTime, switchMap, of, catchError, map, BehaviorSubject, combineLatestWith, distinctUntilChanged, combineLatest, merge, firstValueFrom } from 'rxjs';
|
|
40
40
|
import * as i4 from '@angular/common/http';
|
|
41
41
|
import { HttpParams } from '@angular/common/http';
|
|
42
|
-
import * as i2$
|
|
42
|
+
import * as i2$2 from '@angular/forms';
|
|
43
43
|
import { FormsModule, FormBuilder, FormGroup, FormControl, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
44
44
|
import * as i4$1 from 'primeng/checkbox';
|
|
45
45
|
import { CheckboxModule } from 'primeng/checkbox';
|
|
@@ -51,52 +51,52 @@ import * as i5$1 from 'primeng/toast';
|
|
|
51
51
|
import { ToastModule } from 'primeng/toast';
|
|
52
52
|
import { SplitButtonModule } from 'primeng/splitbutton';
|
|
53
53
|
import { TieredMenuModule } from 'primeng/tieredmenu';
|
|
54
|
-
import * as i2$
|
|
54
|
+
import * as i2$5 from 'primeng/table';
|
|
55
55
|
import { TableModule } from 'primeng/table';
|
|
56
56
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
57
|
-
import * as
|
|
57
|
+
import * as i5$2 from 'primeng/multiselect';
|
|
58
58
|
import { MultiSelectModule } from 'primeng/multiselect';
|
|
59
59
|
import * as i9 from 'primeng/skeleton';
|
|
60
60
|
import { SkeletonModule } from 'primeng/skeleton';
|
|
61
|
-
import * as i2$
|
|
61
|
+
import * as i2$4 from 'primeng/selectbutton';
|
|
62
62
|
import { SelectButtonModule } from 'primeng/selectbutton';
|
|
63
63
|
import * as i4$3 from 'primeng/badge';
|
|
64
64
|
import { BadgeModule } from 'primeng/badge';
|
|
65
65
|
import * as i16 from 'primeng/listbox';
|
|
66
66
|
import { ListboxModule } from 'primeng/listbox';
|
|
67
|
-
import * as i3$
|
|
67
|
+
import * as i3$6 from 'primeng/select';
|
|
68
68
|
import { SelectModule } from 'primeng/select';
|
|
69
|
-
import * as
|
|
69
|
+
import * as i9$1 from 'primeng/chip';
|
|
70
70
|
import { ChipModule } from 'primeng/chip';
|
|
71
71
|
import { PanelModule } from 'primeng/panel';
|
|
72
|
-
import * as
|
|
72
|
+
import * as i12 from 'primeng/overlaybadge';
|
|
73
73
|
import { OverlayBadgeModule } from 'primeng/overlaybadge';
|
|
74
|
-
import * as
|
|
74
|
+
import * as i13 from 'primeng/ripple';
|
|
75
75
|
import { RippleModule } from 'primeng/ripple';
|
|
76
|
-
import * as
|
|
76
|
+
import * as i14 from 'primeng/floatlabel';
|
|
77
77
|
import { FloatLabelModule } from 'primeng/floatlabel';
|
|
78
78
|
import jsPDF from 'jspdf';
|
|
79
79
|
import autoTable from 'jspdf-autotable';
|
|
80
80
|
import * as XLSX from 'xlsx';
|
|
81
81
|
import * as i1$2 from 'primeng/dynamicdialog';
|
|
82
82
|
import { DialogService } from 'primeng/dynamicdialog';
|
|
83
|
-
import * as i2$
|
|
83
|
+
import * as i2$6 from 'primeng/datepicker';
|
|
84
84
|
import { DatePickerModule } from 'primeng/datepicker';
|
|
85
|
-
import * as i2$
|
|
85
|
+
import * as i2$7 from 'primeng/colorpicker';
|
|
86
86
|
import { ColorPickerModule } from 'primeng/colorpicker';
|
|
87
|
-
import * as i3$
|
|
87
|
+
import * as i3$7 from 'primeng/inputnumber';
|
|
88
88
|
import { InputNumberModule } from 'primeng/inputnumber';
|
|
89
89
|
import * as i4$4 from 'primeng/keyfilter';
|
|
90
90
|
import { KeyFilterModule } from 'primeng/keyfilter';
|
|
91
|
-
import * as i2$
|
|
91
|
+
import * as i2$8 from 'primeng/password';
|
|
92
92
|
import { PasswordModule } from 'primeng/password';
|
|
93
|
-
import * as i3$
|
|
93
|
+
import * as i3$8 from 'primeng/toggleswitch';
|
|
94
94
|
import { ToggleSwitchModule } from 'primeng/toggleswitch';
|
|
95
|
-
import * as i3$
|
|
95
|
+
import * as i3$9 from 'primeng/textarea';
|
|
96
96
|
import { TextareaModule } from 'primeng/textarea';
|
|
97
97
|
import { schema, Editor, toHTML, NgxEditorComponent, NgxEditorMenuComponent } from 'ngx-editor';
|
|
98
98
|
import { Schema } from 'prosemirror-model';
|
|
99
|
-
import * as i2$
|
|
99
|
+
import * as i2$9 from 'primeng/fileupload';
|
|
100
100
|
import { FileUploadModule } from 'primeng/fileupload';
|
|
101
101
|
import * as i1$3 from '@angular/platform-browser';
|
|
102
102
|
|
|
@@ -544,7 +544,7 @@ class ActionsComponent {
|
|
|
544
544
|
}
|
|
545
545
|
}
|
|
546
546
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
547
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ActionsComponent, isStandalone: true, selector: "pho-actions", inputs: { actions: "actions" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n @for(action of actions; track action.actionId){
|
|
547
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ActionsComponent, isStandalone: true, selector: "pho-actions", inputs: { actions: "actions" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n @for (action of actions; track action.actionId) {\n @switch (action.type) {\n @case (\"BASIC\") {\n <p-button\n [attr.data-cy]=\"'action-button-basic'\"\n *ngIf=\"action.visible !== false\"\n [label]=\"action.label | translate\"\n [icon]=\"action.icon || ''\"\n [styleClass]=\"action.class || ''\"\n [severity]=\"action.severity ?? 'primary'\"\n [disabled]=\"\n action.disabled || actionStateService.isDisabled(action.actionId)\n \"\n [loading]=\"action.loading || false\"\n [pTooltip]=\"action.tooltip ?? '' | translate\"\n [id]=\"action.id\"\n (onClick)=\"onActionClick($event, action)\"\n size=\"small\"\n [iconPos]=\"action.iconPos ?? 'right'\"\n ></p-button>\n }\n @case (\"SELECT\") {\n <p-button\n [attr.data-cy]=\"'action-button-select'\"\n *ngIf=\"action.visible !== false\"\n [label]=\"action.label | translate\"\n [icon]=\"action.icon || ''\"\n [styleClass]=\"action.class || ''\"\n [severity]=\"action.severity ?? 'primary'\"\n [disabled]=\"\n action.disabled || actionStateService.isDisabled(action.actionId)\n \"\n [loading]=\"action.loading || false\"\n [id]=\"action.id\"\n (onClick)=\"onActionClick($event, action, menuRef)\"\n size=\"small\"\n [iconPos]=\"action.iconPos ?? 'right'\"\n ></p-button>\n\n <p-popover #menuRef [dismissable]=\"true\" class=\"actions-popover\">\n <p-menu styleClass=\"border-0\" [model]=\"action.items\">\n <ng-template pTemplate=\"item\" let-item>\n <div\n [attr.data-cy]=\"'action-button-popover-item-' + item?.actionId\"\n (click)=\"onActionClick($event, item)\"\n (keydown.enter)=\"onActionClick($event, item)\"\n (keydown.space)=\"onActionClick($event, item)\"\n pRipple\n tabindex=\"0\"\n role=\"button\"\n class=\"flex items-center p-menu-item-link cursor-pointer\"\n >\n <span [class]=\"item.icon\"></span>\n <span class=\"ml-2\">{{ item.label | translate }}</span>\n </div>\n </ng-template>\n </p-menu>\n </p-popover>\n }\n }\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i6.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
|
|
548
548
|
}
|
|
549
549
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ActionsComponent, decorators: [{
|
|
550
550
|
type: Component,
|
|
@@ -554,7 +554,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
554
554
|
MenuModule,
|
|
555
555
|
PopoverModule,
|
|
556
556
|
TranslateModule,
|
|
557
|
-
|
|
557
|
+
Tooltip,
|
|
558
|
+
], template: "<div class=\"flex align-items-center gap-2\">\n @for (action of actions; track action.actionId) {\n @switch (action.type) {\n @case (\"BASIC\") {\n <p-button\n [attr.data-cy]=\"'action-button-basic'\"\n *ngIf=\"action.visible !== false\"\n [label]=\"action.label | translate\"\n [icon]=\"action.icon || ''\"\n [styleClass]=\"action.class || ''\"\n [severity]=\"action.severity ?? 'primary'\"\n [disabled]=\"\n action.disabled || actionStateService.isDisabled(action.actionId)\n \"\n [loading]=\"action.loading || false\"\n [pTooltip]=\"action.tooltip ?? '' | translate\"\n [id]=\"action.id\"\n (onClick)=\"onActionClick($event, action)\"\n size=\"small\"\n [iconPos]=\"action.iconPos ?? 'right'\"\n ></p-button>\n }\n @case (\"SELECT\") {\n <p-button\n [attr.data-cy]=\"'action-button-select'\"\n *ngIf=\"action.visible !== false\"\n [label]=\"action.label | translate\"\n [icon]=\"action.icon || ''\"\n [styleClass]=\"action.class || ''\"\n [severity]=\"action.severity ?? 'primary'\"\n [disabled]=\"\n action.disabled || actionStateService.isDisabled(action.actionId)\n \"\n [loading]=\"action.loading || false\"\n [id]=\"action.id\"\n (onClick)=\"onActionClick($event, action, menuRef)\"\n size=\"small\"\n [iconPos]=\"action.iconPos ?? 'right'\"\n ></p-button>\n\n <p-popover #menuRef [dismissable]=\"true\" class=\"actions-popover\">\n <p-menu styleClass=\"border-0\" [model]=\"action.items\">\n <ng-template pTemplate=\"item\" let-item>\n <div\n [attr.data-cy]=\"'action-button-popover-item-' + item?.actionId\"\n (click)=\"onActionClick($event, item)\"\n (keydown.enter)=\"onActionClick($event, item)\"\n (keydown.space)=\"onActionClick($event, item)\"\n pRipple\n tabindex=\"0\"\n role=\"button\"\n class=\"flex items-center p-menu-item-link cursor-pointer\"\n >\n <span [class]=\"item.icon\"></span>\n <span class=\"ml-2\">{{ item.label | translate }}</span>\n </div>\n </ng-template>\n </p-menu>\n </p-popover>\n }\n }\n }\n</div>\n" }]
|
|
558
559
|
}], propDecorators: { actions: [{
|
|
559
560
|
type: Input
|
|
560
561
|
}], actionClick: [{
|
|
@@ -610,7 +611,7 @@ class CardComponent {
|
|
|
610
611
|
return title && title.length > 40;
|
|
611
612
|
}
|
|
612
613
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
613
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardComponent, isStandalone: true, selector: "phoenix-card", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: true, transformFunction: null }, cardActions: { classPropertyName: "cardActions", publicName: "cardActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardEventEmmiter: "cardEventEmmiter" }, viewQueries: [{ propertyName: "descEl", first: true, predicate: ["descEl"], descendants: true }], ngImport: i0, template: "<p-card\n styleClass=\"cursor-pointer pho-card hover:surface-100\"\n [style]=\"{ width: '25rem', overflow: 'hidden' }\"\n (click)=\"onCardClick(card(), 'NAVIGATE')\"\n [attr.data-cy]=\"'card-navigate-click'\"\n>\n <ng-template #header> </ng-template>\n <ng-template #title>\n <div class=\"flex justify-content-between\">\n <span\n class=\"font-semibold text-base card-title\"\n [pTooltip]=\"shouldShowTitleTooltip() ? card()['title'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n >\n {{ card()[\"title\"] }}</span\n >\n\n <pho-actions\n (actionClick)=\"onCardClick($event)\"\n [actions]=\"cardActions()\"\n ></pho-actions>\n </div>\n </ng-template>\n <ng-template #subtitle> </ng-template>\n <p\n #descEl\n class=\"text-500 text-sm\"\n [style]=\"{ height: '5rem', overflow: 'hidden' }\"\n [innerHTML]=\"card()['description'] || '--'\"\n [pTooltip]=\"showTooltip ? card()['description'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n ></p>\n <ng-content select=\"[custom]\"></ng-content>\n <ng-template #footer>\n <p-divider />\n <ng-content select=\"[footer]\"></ng-content>\n <div class=\"flex flex-wrap gap-1 justify-content-between\">\n @for(item of card()['footerData'] ; track item.key; let i = $index){\n @if(item?.value){\n <p-tag\n [icon]=\"item?.icon\"\n [severity]=\"item?.severity || 'info'\"\n [value]=\"item.value\"\n />}@else { <span>--</span> } }\n </div>\n </ng-template>\n</p-card>\n", styles: ["::ng-deep .phoenix-card-tooltip{max-width:500px!important;white-space:normal!important;word-wrap:break-word!important}.card-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$
|
|
614
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardComponent, isStandalone: true, selector: "phoenix-card", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: true, transformFunction: null }, cardActions: { classPropertyName: "cardActions", publicName: "cardActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardEventEmmiter: "cardEventEmmiter" }, viewQueries: [{ propertyName: "descEl", first: true, predicate: ["descEl"], descendants: true }], ngImport: i0, template: "<p-card\n styleClass=\"cursor-pointer pho-card hover:surface-100\"\n [style]=\"{ width: '25rem', overflow: 'hidden' }\"\n (click)=\"onCardClick(card(), 'NAVIGATE')\"\n [attr.data-cy]=\"'card-navigate-click'\"\n>\n <ng-template #header> </ng-template>\n <ng-template #title>\n <div class=\"flex justify-content-between\">\n <span\n class=\"font-semibold text-base card-title\"\n [pTooltip]=\"shouldShowTitleTooltip() ? card()['title'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n >\n {{ card()[\"title\"] }}</span\n >\n\n <pho-actions\n (actionClick)=\"onCardClick($event)\"\n [actions]=\"cardActions()\"\n ></pho-actions>\n </div>\n </ng-template>\n <ng-template #subtitle> </ng-template>\n <p\n #descEl\n class=\"text-500 text-sm\"\n [style]=\"{ height: '5rem', overflow: 'hidden' }\"\n [innerHTML]=\"card()['description'] || '--'\"\n [pTooltip]=\"showTooltip ? card()['description'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n ></p>\n <ng-content select=\"[custom]\"></ng-content>\n <ng-template #footer>\n <p-divider />\n <ng-content select=\"[footer]\"></ng-content>\n <div class=\"flex flex-wrap gap-1 justify-content-between\">\n @for(item of card()['footerData'] ; track item.key; let i = $index){\n @if(item?.value){\n <p-tag\n [icon]=\"item?.icon\"\n [severity]=\"item?.severity || 'info'\"\n [value]=\"item.value\"\n />}@else { <span>--</span> } }\n </div>\n </ng-template>\n</p-card>\n", styles: ["::ng-deep .phoenix-card-tooltip{max-width:500px!important;white-space:normal!important;word-wrap:break-word!important}.card-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: ActionsComponent, selector: "pho-actions", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i8.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] });
|
|
614
615
|
}
|
|
615
616
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardComponent, decorators: [{
|
|
616
617
|
type: Component,
|
|
@@ -677,7 +678,7 @@ class SearchCardComponent {
|
|
|
677
678
|
this.onSelectFilterEvent.emit(data);
|
|
678
679
|
}
|
|
679
680
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SearchCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
680
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SearchCardComponent, isStandalone: true, selector: "pho-serach-card", inputs: { searchData: "searchData", tab: "tab", mocekedFilters: "mocekedFilters", checkboxes: "checkboxes" }, outputs: { onScrollEvent: "onScrollEvent", onSelectLinkEvent: "onSelectLinkEvent", onSelectFilterEvent: "onSelectFilterEvent" }, ngImport: i0, template: "<ng-container>\n <div class=\"flex h-20rem\">\n <div\n [attr.data-cy]=\"'navigation-search-bar-tab-card-' + tab\"\n class=\"overflow-y-auto\"\n [style.width.vw]=\"35\"\n (scroll)=\"onScroll($event)\"\n *ngIf=\"searchData?.length > 0; else message\"\n >\n <ng-container *ngFor=\"let link of searchData\">\n <div\n [attr.data-cy]=\"'navigation-search-bar-tab-card-link-' + tab\"\n class=\"flex cursor-pointer mb-3 hover:surface-200 border-round-md\"\n (click)=\"setLinkUrl(link)\"\n >\n <p-image\n class=\"border-round-sm p-2 mt-1\"\n [src]=\"\n 'assets/object_types/pink/full/' + link.type.labelKey + '.svg'\n \"\n height=\"24\"\n width=\"27\"\n ></p-image>\n <div class=\"flex flex-column justify-content-around ml-2\">\n <span\n [pTooltip]=\"link.name\"\n tooltipPosition=\"bottom\"\n class=\"mt-1 font-light text-lg\"\n >\n <small class=\"mr-2 font-light text-lg\"\n >{{ link.title | slice : 0 : 50\n }}{{ link.title.length > 50 ? \"...\" : \"\" }}</small\n >\n\n {{ link.name | slice : 0 : 50\n }}{{ link.name.length > 50 ? \"...\" : \"\" }}\n\n <small class=\"font-light text-base text-400\">{{\n link.type?.labelKeyVal | slice : 0 : 20\n }}</small>\n </span>\n <div class=\"flex\">\n <span class=\"mb-1 text-sm\" [pTooltip]=\"link.entity.name\"\n >{{ \"LABELS.ENTITY\" | translate }}: {{\n link.entity.name | slice : 0 : 50\n }}{{ link.entity.name.length > 50 ? \"...\" : \"\" }}</span\n >\n <span\n [pTooltip]=\"link.asset.name\"\n *ngIf=\"link?.asset?.name\"\n class=\"ml-2 mb-1 text-sm\"\n >{{ \"LABELS.ASSET\" | translate }}: {{\n link.asset.name | slice : 0 : 50\n }}{{ link.asset.name.length > 50 ? \"...\" : \"\" }}</span\n >\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <ng-container\n *ngIf=\"mocekedFilters[0].checkboxes?.length > 0 && checkboxes\"\n >\n <p-divider layout=\"vertical\"></p-divider>\n <div\n class=\"flex flex-column overflow-y-auto h-40rem pl-3 justify-content-start\"\n >\n <ng-container *ngFor=\"let item of mocekedFilters\">\n <span class=\"mt-2 mb-3 font-semibold text-sm justify-content-start\"\n >{{ item.title | translate }}\n </span>\n <div class=\"h-25rem flex flex-column justify-content-start\">\n <ng-container *ngFor=\"let checkbox of item.checkboxes\">\n <div class=\"field-checkbox\" *ngIf=\"checkbox?.name\">\n <p-checkbox\n [attr.data-cy]=\"\n 'navigation-search-filter-checkbox-' + checkbox?.labelKey\n \"\n [(ngModel)]=\"checkboxes[checkbox?.labelKey]\"\n [binary]=\"true\"\n [inputId]=\"checkbox?.name\"\n (onChange)=\"onClick($event, checkbox?.labelKey)\"\n ></p-checkbox>\n\n <label class=\"text-sm\" [for]=\"checkbox?.name\">{{\n checkbox.name | translate\n }}</label>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n</ng-container>\n<ng-template #message>\n <div class=\"overflow-y-auto\" style=\"width: 35vw\">\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i8.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$
|
|
681
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SearchCardComponent, isStandalone: true, selector: "pho-serach-card", inputs: { searchData: "searchData", tab: "tab", mocekedFilters: "mocekedFilters", checkboxes: "checkboxes" }, outputs: { onScrollEvent: "onScrollEvent", onSelectLinkEvent: "onSelectLinkEvent", onSelectFilterEvent: "onSelectFilterEvent" }, ngImport: i0, template: "<ng-container>\n <div class=\"flex h-20rem\">\n <div\n [attr.data-cy]=\"'navigation-search-bar-tab-card-' + tab\"\n class=\"overflow-y-auto\"\n [style.width.vw]=\"35\"\n (scroll)=\"onScroll($event)\"\n *ngIf=\"searchData?.length > 0; else message\"\n >\n <ng-container *ngFor=\"let link of searchData\">\n <div\n [attr.data-cy]=\"'navigation-search-bar-tab-card-link-' + tab\"\n class=\"flex cursor-pointer mb-3 hover:surface-200 border-round-md\"\n (click)=\"setLinkUrl(link)\"\n >\n <p-image\n class=\"border-round-sm p-2 mt-1\"\n [src]=\"\n 'assets/object_types/pink/full/' + link.type.labelKey + '.svg'\n \"\n height=\"24\"\n width=\"27\"\n ></p-image>\n <div class=\"flex flex-column justify-content-around ml-2\">\n <span\n [pTooltip]=\"link.name\"\n tooltipPosition=\"bottom\"\n class=\"mt-1 font-light text-lg\"\n >\n <small class=\"mr-2 font-light text-lg\"\n >{{ link.title | slice : 0 : 50\n }}{{ link.title.length > 50 ? \"...\" : \"\" }}</small\n >\n\n {{ link.name | slice : 0 : 50\n }}{{ link.name.length > 50 ? \"...\" : \"\" }}\n\n <small class=\"font-light text-base text-400\">{{\n link.type?.labelKeyVal | slice : 0 : 20\n }}</small>\n </span>\n <div class=\"flex\">\n <span class=\"mb-1 text-sm\" [pTooltip]=\"link.entity.name\"\n >{{ \"LABELS.ENTITY\" | translate }}: {{\n link.entity.name | slice : 0 : 50\n }}{{ link.entity.name.length > 50 ? \"...\" : \"\" }}</span\n >\n <span\n [pTooltip]=\"link.asset.name\"\n *ngIf=\"link?.asset?.name\"\n class=\"ml-2 mb-1 text-sm\"\n >{{ \"LABELS.ASSET\" | translate }}: {{\n link.asset.name | slice : 0 : 50\n }}{{ link.asset.name.length > 50 ? \"...\" : \"\" }}</span\n >\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <ng-container\n *ngIf=\"mocekedFilters[0].checkboxes?.length > 0 && checkboxes\"\n >\n <p-divider layout=\"vertical\"></p-divider>\n <div\n class=\"flex flex-column overflow-y-auto h-40rem pl-3 justify-content-start\"\n >\n <ng-container *ngFor=\"let item of mocekedFilters\">\n <span class=\"mt-2 mb-3 font-semibold text-sm justify-content-start\"\n >{{ item.title | translate }}\n </span>\n <div class=\"h-25rem flex flex-column justify-content-start\">\n <ng-container *ngFor=\"let checkbox of item.checkboxes\">\n <div class=\"field-checkbox\" *ngIf=\"checkbox?.name\">\n <p-checkbox\n [attr.data-cy]=\"\n 'navigation-search-filter-checkbox-' + checkbox?.labelKey\n \"\n [(ngModel)]=\"checkboxes[checkbox?.labelKey]\"\n [binary]=\"true\"\n [inputId]=\"checkbox?.name\"\n (onChange)=\"onClick($event, checkbox?.labelKey)\"\n ></p-checkbox>\n\n <label class=\"text-sm\" [for]=\"checkbox?.name\">{{\n checkbox.name | translate\n }}</label>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n</ng-container>\n<ng-template #message>\n <div class=\"overflow-y-auto\" style=\"width: 35vw\">\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i8.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i6$1.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "preview", "showTransitionOptions", "hideTransitionOptions", "appendTo"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
|
|
681
682
|
}
|
|
682
683
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SearchCardComponent, decorators: [{
|
|
683
684
|
type: Component,
|
|
@@ -937,7 +938,7 @@ class SearchBarComponent {
|
|
|
937
938
|
this.reloadSubscription$?.unsubscribe();
|
|
938
939
|
}
|
|
939
940
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SearchBarComponent, deps: [{ token: i3$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
940
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SearchBarComponent, isStandalone: true, selector: "pho-search-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "op", first: true, predicate: ["op"], descendants: true }, { propertyName: "elm", first: true, predicate: ["elm"], descendants: true, static: true }], ngImport: i0, template: "<div\n (click)=\"onParentClick($event)\"\n class=\"p-input-icon-left ml-1\"\n #elm\n [attr.data-cy]=\"'navigation-search-bar'\"\n>\n <p-iconfield>\n <!-- styleClass deprecated -> class -->\n <p-inputicon class=\"pi pi-search\"></p-inputicon>\n\n <input\n [attr.data-cy]=\"'navigation-search-bar-input'\"\n [@openClose]=\"isOpen ? 'open' : 'closed'\"\n type=\"text\"\n pInputText\n placeholder=\"{{ 'SEARCH_PLACEHOLDERS.GLOBAL_SEARCH' | translate }}\"\n (input)=\"valueChanges.next($event)\"\n (focus)=\"onParentClick($event); expand()\"\n />\n </p-iconfield>\n</div>\n\n<p-popover\n [dismissable]=\"true\"\n [showTransitionOptions]=\"'.2s ease-out'\"\n [autoZIndex]=\"true\"\n #op\n [style]=\"{ width: '50vw', paddingLeft: '0' }\"\n styleClass=\"global-search\"\n (onHide)=\"isOpen = false\"\n>\n <div\n *ngIf=\"!inputText\"\n class=\"flex align-items-start gap-2 p-3 border-1 border-blue-300 surface-50 text-blue-700 border-round w-full\"\n >\n <i class=\"pi pi-info-circle mt-1 text-blue-500\"></i>\n <span class=\"text-sm\">{{ 'MESSAGES.START_TYPING' | translate }}</span>\n </div>\n\n <ng-template pTemplate=\"content\">\n @if (inputText) {\n <p-tabs [value]=\"tabIndex\">\n <p-tablist>\n @for (tab of tabs(); track tab.id) {\n <p-tab\n [value]=\"tab.id\"\n (click)=\"onTabClick(tab.id)\"\n [attr.data-cy]=\"'navigation-search-bar-tab-' + tab.id\"\n >\n <span>{{ tab.header }}</span>\n </p-tab>\n }\n </p-tablist>\n\n <p-tabpanels>\n @for (tab of tabs(); track tab.id) {\n <p-tabpanel [value]=\"tab.id\">\n <pho-serach-card\n [tab]=\"tab.id\"\n [mocekedFilters]=\"mocekedFilters\"\n [searchData]=\"searchData\"\n [checkboxes]=\"checkboxes\"\n (onScrollEvent)=\"onScroll($event)\"\n (onSelectLinkEvent)=\"setLinkUrl($event)\"\n (onSelectFilterEvent)=\"onClick($event)\"\n ></pho-serach-card>\n </p-tabpanel>\n }\n </p-tabpanels>\n </p-tabs>\n }\n </ng-template>\n</p-popover>", styles: [".p-popover:after,.p-popover:before{content:none!important}.p-popover-panel{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$
|
|
941
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SearchBarComponent, isStandalone: true, selector: "pho-search-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "op", first: true, predicate: ["op"], descendants: true }, { propertyName: "elm", first: true, predicate: ["elm"], descendants: true, static: true }], ngImport: i0, template: "<div\n (click)=\"onParentClick($event)\"\n class=\"p-input-icon-left ml-1\"\n #elm\n [attr.data-cy]=\"'navigation-search-bar'\"\n>\n <p-iconfield>\n <!-- styleClass deprecated -> class -->\n <p-inputicon class=\"pi pi-search\"></p-inputicon>\n\n <input\n [attr.data-cy]=\"'navigation-search-bar-input'\"\n [@openClose]=\"isOpen ? 'open' : 'closed'\"\n type=\"text\"\n pInputText\n placeholder=\"{{ 'SEARCH_PLACEHOLDERS.GLOBAL_SEARCH' | translate }}\"\n (input)=\"valueChanges.next($event)\"\n (focus)=\"onParentClick($event); expand()\"\n />\n </p-iconfield>\n</div>\n\n<p-popover\n [dismissable]=\"true\"\n [showTransitionOptions]=\"'.2s ease-out'\"\n [autoZIndex]=\"true\"\n #op\n [style]=\"{ width: '50vw', paddingLeft: '0' }\"\n styleClass=\"global-search\"\n (onHide)=\"isOpen = false\"\n>\n <div\n *ngIf=\"!inputText\"\n class=\"flex align-items-start gap-2 p-3 border-1 border-blue-300 surface-50 text-blue-700 border-round w-full\"\n >\n <i class=\"pi pi-info-circle mt-1 text-blue-500\"></i>\n <span class=\"text-sm\">{{ 'MESSAGES.START_TYPING' | translate }}</span>\n </div>\n\n <ng-template pTemplate=\"content\">\n @if (inputText) {\n <p-tabs [value]=\"tabIndex\">\n <p-tablist>\n @for (tab of tabs(); track tab.id) {\n <p-tab\n [value]=\"tab.id\"\n (click)=\"onTabClick(tab.id)\"\n [attr.data-cy]=\"'navigation-search-bar-tab-' + tab.id\"\n >\n <span>{{ tab.header }}</span>\n </p-tab>\n }\n </p-tablist>\n\n <p-tabpanels>\n @for (tab of tabs(); track tab.id) {\n <p-tabpanel [value]=\"tab.id\">\n <pho-serach-card\n [tab]=\"tab.id\"\n [mocekedFilters]=\"mocekedFilters\"\n [searchData]=\"searchData\"\n [checkboxes]=\"checkboxes\"\n (onScrollEvent)=\"onScroll($event)\"\n (onSelectLinkEvent)=\"setLinkUrl($event)\"\n (onSelectFilterEvent)=\"onClick($event)\"\n ></pho-serach-card>\n </p-tabpanel>\n }\n </p-tabpanels>\n </p-tabs>\n }\n </ng-template>\n</p-popover>", styles: [".p-popover:after,.p-popover:before{content:none!important}.p-popover-panel{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i4$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i5.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i8$1.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i8$1.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i8$1.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i8$1.TabList, selector: "p-tablist" }, { kind: "component", type: i8$1.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: SearchCardComponent, selector: "pho-serach-card", inputs: ["searchData", "tab", "mocekedFilters", "checkboxes"], outputs: ["onScrollEvent", "onSelectLinkEvent", "onSelectFilterEvent"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }], animations: [
|
|
941
942
|
trigger('openClose', [
|
|
942
943
|
state('open', style({
|
|
943
944
|
width: '50vw',
|
|
@@ -1244,7 +1245,7 @@ class TopbarComponent {
|
|
|
1244
1245
|
: `url('assets/default-user.png')`;
|
|
1245
1246
|
}
|
|
1246
1247
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1247
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TopbarComponent, isStandalone: true, selector: "pho-topbar", inputs: { homeUrl: { classPropertyName: "homeUrl", publicName: "homeUrl", isSignal: false, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: false, isRequired: false, transformFunction: null }, shortModuleName: { classPropertyName: "shortModuleName", publicName: "shortModuleName", isSignal: false, isRequired: false, transformFunction: null }, hidelogo: { classPropertyName: "hidelogo", publicName: "hidelogo", isSignal: false, isRequired: false, transformFunction: null }, topbarModulesMenu: { classPropertyName: "topbarModulesMenu", publicName: "topbarModulesMenu", isSignal: false, isRequired: false, transformFunction: null }, darkModeSelector: { classPropertyName: "darkModeSelector", publicName: "darkModeSelector", isSignal: false, isRequired: false, transformFunction: null }, urlConfig: { classPropertyName: "urlConfig", publicName: "urlConfig", isSignal: false, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: false, isRequired: false, transformFunction: null }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDarkModeSelect: "onDarkModeSelect", onUserPopoverAction: "onUserPopoverAction" }, providers: [MessageService], ngImport: i0, template: "<div\n class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n <!-- Title -->\n <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n @if (!hidelogo) {\n <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n }\n <!-- <p-tag\n [style]=\"{\n marginLeft: '5px',\n marginBottom: '8px',\n padding: '2px 6px',\n fontSize: '9px',\n border: '1px solid var(--text-color)',\n background: 'transparent',\n color: 'var(--text-color)'\n }\"\n severity=\"info\"\n [value]=\"shortModuleName\"\n /> -->\n </div>\n <!-- children -->\n <ng-content></ng-content>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Search Bar -->\n <pho-search-bar\n [pTooltip]=\"'TOPBAR_FUNCTIONS.SEARCH' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\n [tabs]=\"searchConfig()\"\n ></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n [pTooltip]=\"'TOPBAR_FUNCTIONS.THEME_SWITCH' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\n data-cy=\"theme-switch-button\"\n (onClick)=\"onDarkModeSelectEmit()\"\n [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n variant=\"outlined\"\n />\n\n <p-button\n data-cy=\"side-panel-togg-button\"\n data-cy=\"side-panel-togg-button\"\n (onClick)=\"op.toggle($event)\"\n icon=\"pi pi-th-large\"\n variant=\"outlined\"\n [pTooltip]=\"'TOPBAR_FUNCTIONS.APPLICATION_MENU' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\n />\n <!-- Side Panel (Opens Sidebar) -->\n <p-button\n data-cy=\"side-panel-togg-button\"\n data-cy=\"side-panel-togg-button\"\n (onClick)=\"openSidebarPanel()\"\n icon=\"pi pi-question-circle\"\n variant=\"outlined\"\n [pTooltip]=\"'TOPBAR_FUNCTIONS.HELP_CENTER' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\n />\n\n <!-- User Icon -->\n <pho-user\n [user]=\"user\"\n (actionEmmiter)=\"onUserPopoverAction.emit($event)\"\n [pTooltip]=\"'TOPBAR_FUNCTIONS.USER_MENU' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\n />\n </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n styleClass=\"w-25rem\"\n position=\"right\"\n [(visible)]=\"isSidebarVisible\"\n [closable]=\"false\"\n>\n <ng-template #header>\n <div class=\"flex align-items-center justify-content-between w-full\">\n <div class=\"flex\">\n <span class=\"font-bold text-xl\">\n {{ \"ACTION.HELP_CENTER\" | translate }}\n </span>\n </div>\n\n <p-button\n (onClick)=\"isSidebarVisible = false\"\n icon=\"pi pi-times\"\n [rounded]=\"true\"\n [text]=\"true\"\n />\n </div>\n </ng-template>\n <div class=\"p-1\">\n <div class=\"flex flex-wrap gap-4\">\n <!-- first -->\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-ticket text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.CREATE_TICKET\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.CREATE_TICKET_DESCRIPTION\" | translate }}\n </div>\n </div>\n <div class=\"w-full\">\n <p-button\n (onClick)=\"goToTicketCenter()\"\n [label]=\"'HELP_CENTER.CREATE_TICKET_BUTTON' | translate\"\n variant=\"outlined\"\n size=\"small\"\n />\n </div>\n </div>\n\n <!-- second -->\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-headphones text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.CALL_US\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.CALL_US_DESCRIPTION\" | translate }}\n </div>\n </div>\n <div class=\"w-full\">\n {{ \"HELP_CENTER.PHONE_NUMBER\" | translate }}\n </div>\n </div>\n\n <!-- third -->\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-envelope text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.SEND_EMAIL\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.SEND_EMAIL_DESCRIPTION\" | translate }}\n </div>\n </div>\n <div class=\"w-full\">\n <a href=\"mailto:support@fuentis.com\">\n {{ \"HELP_CENTER.SUPPORT_EMAIL\" | translate }}\n </a>\n </div>\n </div>\n\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n [ngClass]=\"{ 'opacity-30 pointer-events-none': urlConfig?.disabled }\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-file text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.REPORT_INCIDENT_TITLE\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.REPORT_INCIDENT_DESCRIPTION\" | translate }}\n </div>\n </div>\n\n <div class=\"w-full flex align-items-center gap-2\">\n <a\n class=\"no-underline\"\n [href]=\"urlConfig?.url || '#'\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <p-button\n [label]=\"'HELP_CENTER.REPORT_INCIDENT_ACTION' | translate\"\n variant=\"outlined\"\n size=\"small\"\n icon=\"pi pi-copy\"\n (onClick)=\"copyToClipboard($event, urlConfig?.url)\"\n [disabled]=\"urlConfig?.disabled || !urlConfig?.url\"\n />\n </a>\n </div>\n </div>\n </div>\n <!-- External Incident Report card -->\n\n <div class=\"mt-5 p-3\">\n <h4 class=\"\">\n {{ \"ACTION.BROWSE\" | translate }} <br />\n <a\n class=\"\"\n [href]=\"footerConfig.guideUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"flex align-items-center\">\n {{ \"ACTION.KNOWLEDGE_BASE\" | translate }}\n <span style=\"text-decoration: none\">\n <i\n style=\"font-size: 15px\"\n class=\"pi pi-graduation-cap p-2 no-underline\"\n ></i>\n </span>\n\n <!-- <i\n style=\"font-size: 11px\"\n class=\"pi pi-external-link p-2 no-underline\"\n ></i> -->\n </span>\n </a>\n </h4>\n </div>\n </div>\n <ng-template #footer>\n <div class=\"text-xs text-center text-600\">\n {{ \"HELP_CENTER.SUITE_DESCRIPTION\" | translate }}\n </div>\n </ng-template>\n</p-drawer>\n\n<!-- <p-popover #op>\n <div class=\"w-22rem\">\n <ng-container *ngFor=\"let moduleGroup of topbarModulesMenu\">\n <div class=\"grid\">\n <ng-container *ngIf=\"moduleGroup.layout === 'grid'\">\n <div\n *ngFor=\"let module of moduleGroup.items\"\n class=\"col-4 p-3 hover:surface-100 cursor-pointer p-0 m-0 sidebaritem\"\n [ngClass]=\"{ 'opacity-30 pointer-events-none': module?.disabled }\"\n >\n <a\n class=\"text-primary flex flex-column align-items-center gap-2\"\n [href]=\"module.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n [attr.data-cy]=\"'side-panel-menu-item-' + module.label\"\n >\n <div\n class=\"w-4rem border-round-sm flex justify-content-center align-items-center\"\n [style.backgroundColor]=\"\n moduleGroup.showIconBackground\n ? module.disabled\n ? '#ccc'\n : '#e74360'\n : 'transparent'\n \"\n >\n <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n </div>\n <span class=\"text-sm text-center\">{{\n module.label | translate\n }}</span>\n </a>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n</p-popover> -->\n<p-toast></p-toast>\n\n<!-- wait for restructure of the topbar modules menu -->\n<p-popover #op>\n <div class=\"w-25rem\">\n <ng-container *ngFor=\"let item of topbarModulesMenu\">\n <div\n class=\"p-0 m-0 hover:surface-100 cursor-pointer p-2\"\n [ngClass]=\"{ 'opacity-30 pointer-events-none': item?.disabled }\"\n >\n <a\n class=\"text-primary flex align-items-center\"\n [href]=\"item.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n [attr.data-cy]=\"'side-panel-menu-item-' + item.title\"\n >\n <div\n class=\"w-3rem h-3rem border-round-md flex justify-content-center align-items-center border-200 border-1\"\n style=\"margin-right: 10px\"\n >\n <img *ngIf=\"item.icon\" [src]=\"item.icon\" class=\"w-2rem\" />\n </div>\n <div class=\"\">\n <div class=\"font-semibold\">\n {{ item.title | translate }}\n </div>\n <div class=\"text-sm max-w-17rem text-600\">\n {{ item.description | translate }}\n </div>\n </div>\n </a>\n </div>\n </ng-container>\n </div>\n</p-popover>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchBarComponent, selector: "pho-search-bar", inputs: ["tabs"] }, { kind: "component", type: UserComponent, selector: "pho-user", inputs: ["user"], outputs: ["actionEmmiter"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$4.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ImageModule }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i5$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1248
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TopbarComponent, isStandalone: true, selector: "pho-topbar", inputs: { homeUrl: { classPropertyName: "homeUrl", publicName: "homeUrl", isSignal: false, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: false, isRequired: false, transformFunction: null }, shortModuleName: { classPropertyName: "shortModuleName", publicName: "shortModuleName", isSignal: false, isRequired: false, transformFunction: null }, hidelogo: { classPropertyName: "hidelogo", publicName: "hidelogo", isSignal: false, isRequired: false, transformFunction: null }, topbarModulesMenu: { classPropertyName: "topbarModulesMenu", publicName: "topbarModulesMenu", isSignal: false, isRequired: false, transformFunction: null }, darkModeSelector: { classPropertyName: "darkModeSelector", publicName: "darkModeSelector", isSignal: false, isRequired: false, transformFunction: null }, urlConfig: { classPropertyName: "urlConfig", publicName: "urlConfig", isSignal: false, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: false, isRequired: false, transformFunction: null }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDarkModeSelect: "onDarkModeSelect", onUserPopoverAction: "onUserPopoverAction" }, providers: [MessageService], ngImport: i0, template: "<div\n class=\"h-full px-2 justify-content-between w-full flex align-items-center shadow-1 topbar\"\n>\n <!-- Title -->\n <div class=\"flex align-items-center justify-content-center mb-2 ml-2\">\n @if (!hidelogo) {\n <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n }\n <!-- <p-tag\n [style]=\"{\n marginLeft: '5px',\n marginBottom: '8px',\n padding: '2px 6px',\n fontSize: '9px',\n border: '1px solid var(--text-color)',\n background: 'transparent',\n color: 'var(--text-color)'\n }\"\n severity=\"info\"\n [value]=\"shortModuleName\"\n /> -->\n </div>\n <!-- children -->\n <ng-content></ng-content>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Search Bar -->\n <pho-search-bar\n [pTooltip]=\"'TOPBAR_FUNCTIONS.SEARCH' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\n [tabs]=\"searchConfig()\"\n ></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n [pTooltip]=\"'TOPBAR_FUNCTIONS.THEME_SWITCH' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\n data-cy=\"theme-switch-button\"\n (onClick)=\"onDarkModeSelectEmit()\"\n [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n variant=\"outlined\"\n />\n\n <p-button\n data-cy=\"side-panel-togg-button\"\n data-cy=\"side-panel-togg-button\"\n (onClick)=\"op.toggle($event)\"\n icon=\"pi pi-th-large\"\n variant=\"outlined\"\n [pTooltip]=\"'TOPBAR_FUNCTIONS.APPLICATION_MENU' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\n />\n <!-- Side Panel (Opens Sidebar) -->\n <p-button\n data-cy=\"side-panel-togg-button\"\n data-cy=\"side-panel-togg-button\"\n (onClick)=\"openSidebarPanel()\"\n icon=\"pi pi-question-circle\"\n variant=\"outlined\"\n [pTooltip]=\"'TOPBAR_FUNCTIONS.HELP_CENTER' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\n />\n\n <!-- User Icon -->\n <pho-user\n [user]=\"user\"\n (actionEmmiter)=\"onUserPopoverAction.emit($event)\"\n [pTooltip]=\"'TOPBAR_FUNCTIONS.USER_MENU' | translate\"\n tooltipPosition=\"bottom\"\n showDelay=\"500\"\n />\n </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n styleClass=\"w-25rem\"\n position=\"right\"\n [(visible)]=\"isSidebarVisible\"\n [closable]=\"false\"\n>\n <ng-template #header>\n <div class=\"flex align-items-center justify-content-between w-full\">\n <div class=\"flex\">\n <span class=\"font-bold text-xl\">\n {{ \"ACTION.HELP_CENTER\" | translate }}\n </span>\n </div>\n\n <p-button\n (onClick)=\"isSidebarVisible = false\"\n icon=\"pi pi-times\"\n [rounded]=\"true\"\n [text]=\"true\"\n />\n </div>\n </ng-template>\n <div class=\"p-1\">\n <div class=\"flex flex-wrap gap-4\">\n <!-- first -->\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-ticket text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.CREATE_TICKET\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.CREATE_TICKET_DESCRIPTION\" | translate }}\n </div>\n </div>\n <div class=\"w-full\">\n <p-button\n (onClick)=\"goToTicketCenter()\"\n [label]=\"'HELP_CENTER.CREATE_TICKET_BUTTON' | translate\"\n variant=\"outlined\"\n size=\"small\"\n />\n </div>\n </div>\n\n <!-- second -->\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-headphones text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.CALL_US\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.CALL_US_DESCRIPTION\" | translate }}\n </div>\n </div>\n <div class=\"w-full\">\n {{ \"HELP_CENTER.PHONE_NUMBER\" | translate }}\n </div>\n </div>\n\n <!-- third -->\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-envelope text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.SEND_EMAIL\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.SEND_EMAIL_DESCRIPTION\" | translate }}\n </div>\n </div>\n <div class=\"w-full\">\n <a href=\"mailto:support@fuentis.com\">\n {{ \"HELP_CENTER.SUPPORT_EMAIL\" | translate }}\n </a>\n </div>\n </div>\n\n <div\n class=\"w-22rem border-round-md border-300 surface-100 pho-reverse p-3\"\n [ngClass]=\"{ 'opacity-30 pointer-events-none': urlConfig?.disabled }\"\n >\n <div\n style=\"width: 30px; height: 30px\"\n class=\"m-2 border-round-md bg-primary font-bold flex align-items-center justify-content-center\"\n >\n <i class=\"pi pi-file text-white\" style=\"font-size: 1.2rem\"></i>\n </div>\n\n <div>\n <div class=\"text-xl font-semibold mb-1\">\n {{ \"HELP_CENTER.REPORT_INCIDENT_TITLE\" | translate }}\n </div>\n <div class=\"text-sm mb-2\">\n {{ \"HELP_CENTER.REPORT_INCIDENT_DESCRIPTION\" | translate }}\n </div>\n </div>\n\n <div class=\"w-full flex align-items-center gap-2\">\n <a\n class=\"no-underline\"\n [href]=\"urlConfig?.url || '#'\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <p-button\n [label]=\"'HELP_CENTER.REPORT_INCIDENT_ACTION' | translate\"\n variant=\"outlined\"\n size=\"small\"\n icon=\"pi pi-copy\"\n (onClick)=\"copyToClipboard($event, urlConfig?.url)\"\n [disabled]=\"urlConfig?.disabled || !urlConfig?.url\"\n />\n </a>\n </div>\n </div>\n </div>\n <!-- External Incident Report card -->\n\n <div class=\"mt-5 p-3\">\n <h4 class=\"\">\n {{ \"ACTION.BROWSE\" | translate }} <br />\n <a\n class=\"\"\n [href]=\"footerConfig.guideUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"flex align-items-center\">\n {{ \"ACTION.KNOWLEDGE_BASE\" | translate }}\n <span style=\"text-decoration: none\">\n <i\n style=\"font-size: 15px\"\n class=\"pi pi-graduation-cap p-2 no-underline\"\n ></i>\n </span>\n\n <!-- <i\n style=\"font-size: 11px\"\n class=\"pi pi-external-link p-2 no-underline\"\n ></i> -->\n </span>\n </a>\n </h4>\n </div>\n </div>\n <ng-template #footer>\n <div class=\"text-xs text-center text-600\">\n {{ \"HELP_CENTER.SUITE_DESCRIPTION\" | translate }}\n </div>\n </ng-template>\n</p-drawer>\n\n<!-- <p-popover #op>\n <div class=\"w-22rem\">\n <ng-container *ngFor=\"let moduleGroup of topbarModulesMenu\">\n <div class=\"grid\">\n <ng-container *ngIf=\"moduleGroup.layout === 'grid'\">\n <div\n *ngFor=\"let module of moduleGroup.items\"\n class=\"col-4 p-3 hover:surface-100 cursor-pointer p-0 m-0 sidebaritem\"\n [ngClass]=\"{ 'opacity-30 pointer-events-none': module?.disabled }\"\n >\n <a\n class=\"text-primary flex flex-column align-items-center gap-2\"\n [href]=\"module.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n [attr.data-cy]=\"'side-panel-menu-item-' + module.label\"\n >\n <div\n class=\"w-4rem border-round-sm flex justify-content-center align-items-center\"\n [style.backgroundColor]=\"\n moduleGroup.showIconBackground\n ? module.disabled\n ? '#ccc'\n : '#e74360'\n : 'transparent'\n \"\n >\n <img *ngIf=\"module.icon\" [src]=\"module.icon\" class=\"w-2rem\" />\n </div>\n <span class=\"text-sm text-center\">{{\n module.label | translate\n }}</span>\n </a>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n</p-popover> -->\n<p-toast></p-toast>\n\n<!-- wait for restructure of the topbar modules menu -->\n<p-popover #op>\n <div class=\"w-25rem\">\n <ng-container *ngFor=\"let item of topbarModulesMenu\">\n <div\n class=\"p-0 m-0 hover:surface-100 cursor-pointer p-2\"\n [ngClass]=\"{ 'opacity-30 pointer-events-none': item?.disabled }\"\n >\n <a\n class=\"text-primary flex align-items-center\"\n [href]=\"item.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n [attr.data-cy]=\"'side-panel-menu-item-' + item.title\"\n >\n <div\n class=\"w-3rem h-3rem border-round-md flex justify-content-center align-items-center border-200 border-1\"\n style=\"margin-right: 10px\"\n >\n <img *ngIf=\"item.icon\" [src]=\"item.icon\" class=\"w-2rem\" />\n </div>\n <div class=\"\">\n <div class=\"font-semibold\">\n {{ item.title | translate }}\n </div>\n <div class=\"text-sm max-w-17rem text-600\">\n {{ item.description | translate }}\n </div>\n </div>\n </a>\n </div>\n </ng-container>\n </div>\n</p-popover>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchBarComponent, selector: "pho-search-bar", inputs: ["tabs"] }, { kind: "component", type: UserComponent, selector: "pho-user", inputs: ["user"], outputs: ["actionEmmiter"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$3.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ImageModule }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i5$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1248
1249
|
}
|
|
1249
1250
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TopbarComponent, decorators: [{
|
|
1250
1251
|
type: Component,
|
|
@@ -1520,6 +1521,17 @@ class ContexObjectComponent {
|
|
|
1520
1521
|
get ctxOtherInfo() {
|
|
1521
1522
|
return this.config?.otherInfo ?? [];
|
|
1522
1523
|
}
|
|
1524
|
+
tagPopovers;
|
|
1525
|
+
onTagPopoverEnter(event, currentPopover) {
|
|
1526
|
+
this.tagPopovers?.forEach((p) => {
|
|
1527
|
+
if (p !== currentPopover)
|
|
1528
|
+
p.hide();
|
|
1529
|
+
});
|
|
1530
|
+
currentPopover.show(event);
|
|
1531
|
+
}
|
|
1532
|
+
onTagPopoverLeave(event, currentPopover) {
|
|
1533
|
+
currentPopover.hide();
|
|
1534
|
+
}
|
|
1523
1535
|
onBackClick() {
|
|
1524
1536
|
const route = this.ctxBackRoute;
|
|
1525
1537
|
if (route?.length) {
|
|
@@ -1532,7 +1544,7 @@ class ContexObjectComponent {
|
|
|
1532
1544
|
return '/' + path.replace(/^\/+/, '');
|
|
1533
1545
|
}
|
|
1534
1546
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ContexObjectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1535
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ContexObjectComponent, isStandalone: true, selector: "phoenix-contex-object", inputs: { config: "config", dateFormat: "dateFormat", dateOnlyFormat: "dateOnlyFormat" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2 w-full\">\n @if (ctxBackRoute?.length) {\n <button\n pButton\n type=\"button\"\n icon=\"pi pi-arrow-left\"\n class=\"p-button-text ml-1\"\n (click)=\"onBackClick()\"\n ></button>\n } @if (ctxType) {\n <span class=\"text-xl font-semibold text-gray-500\"> {{ ctxType }} : </span>\n } @if (ctxName) {\n <span\n class=\"text-xl font-semibold text-primary\"\n [pTooltip]=\"ctxName.length > 40 ? ctxName : undefined\"\n >\n {{ ctxName.length > 60 ? (ctxName | slice : 0 : 60) + \"\u2026\" : ctxName }}\n </span>\n } @if (ctxTitle) {\n <span\n class=\"text-base text-gray-500\"\n [pTooltip]=\"ctxTitle.length > 20 ? ctxTitle : undefined\"\n >\n {{ ctxTitle.length > 20 ? (ctxTitle | slice : 0 : 20) + \"\u2026\" : ctxTitle }}\n </span>\n } @if (ctxTags.length) {\n <div class=\"flex align-items-center gap-2 ml-3\">\n @for (item of displayTags; track $index) {\n <div class=\"tag-group-wrapper\">\n <p-tag\n [pTooltip]=\"item.remainingCount === 0 ? tagTooltipContent : undefined\"\n tooltipPosition=\"bottom\"\n [value]=\"item.remainingCount > 0 ? item.tag.text + ' +' + item.remainingCount : item.tag.text\"\n [severity]=\"$any(item.tag.variant || 'info')\"\n [icon]=\"item.tag.icon\"\n [style]=\"{\n 'font-size': '11px',\n padding: '3px 8px',\n width: 'fit-content',\n cursor: item.remainingCount > 0 ? 'pointer' : 'default',\n }\"\n [ngStyle]=\"\n item.tag.color\n ? {\n 'background-color': item.tag.color + '36',\n color: item.tag.color,\n }\n : null\n \"\n ></p-tag>\n <!-- Hover popup showing all tags in the group -->\n @if (item.remainingCount > 0) {\n <div class=\"tag-group-popup\">\n @if (item.tag.label) {\n <div class=\"tag-group-popup-label\">{{ item.tag.label }}</div>\n }\n <div class=\"flex flex-wrap gap-1\">\n @for (gt of item.groupedTags; track $index) {\n <p-tag\n [value]=\"gt.text\"\n [severity]=\"$any(gt.variant || 'info')\"\n [icon]=\"gt.icon\"\n [style]=\"{\n 'font-size': '11px',\n padding: '3px 8px',\n width: 'fit-content',\n }\"\n [ngStyle]=\"\n gt.color\n ? {\n 'background-color': gt.color + '36',\n color: gt.color,\n }\n : null\n \"\n ></p-tag>\n }\n </div>\n </div>\n }\n <ng-template #tagTooltipContent>\n <div>\n <span>{{ item.tag.label ? item.tag.label + \": \" : \"\" }}</span>\n <span>{{ item.tag.text }} </span>\n </div>\n </ng-template>\n </div>\n } @for (label of ctxLabels; track label.text) {\n <span\n [style]=\"{\n 'font-size': '11px',\n padding: '3px 8px',\n width: 'fit-content',\n }\"\n >\n {{ label.text }}\n </span>\n }\n </div>\n\n }\n <!-- Other Info items -->\n <ng-container *ngFor=\"let attr of ctxOtherInfo\">\n <span\n class=\"cursor-pointer ml-3\"\n (mouseenter)=\"pop.toggle($event)\"\n (mouseleave)=\"pop.toggle($event)\"\n >\n <i class=\"pi pi-calendar text-blue-900 mr-1\"></i>\n <span class=\"text-sm\">{{\n attr.value | date : attr.dateFormat || dateOnlyFormat\n }}</span>\n </span>\n <p-popover #pop [style]=\"{ maxWidth: '400px' }\">\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div\n style=\"\n display: grid;\n grid-template-columns: max-content 1fr;\n column-gap: 1rem;\n row-gap: 0.5rem;\n align-items: start;\n width: 100%;\n \"\n >\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item?.type || statusTooltipType.TAG\">\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a\n *ngIf=\"item.value; else empty\"\n [href]=\"getFullUrl(item.value)\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ item.label || \"Open\" }}\n </a>\n </ng-container>\n\n <!-- STRING type: renders text with truncation and tooltip if too long -->\n <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n <div\n *ngIf=\"item.value; else empty\"\n class=\"text-sm\"\n style=\"\n white-space: normal;\n word-break: break-word;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n </ng-container>\n\n <!-- DATE type: formatted date or fallback -->\n <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n <span *ngIf=\"item.value; else empty\">\n {{ item.value | date : dateFormat }}\n </span>\n </ng-container>\n\n <!-- PERSON type: shows initial avatar and name if value exists -->\n <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n <ng-container *ngIf=\"item.value; else empty\">\n <span class=\"person-wrap flex items-center gap-1 truncate\">\n <div\n class=\"person-avatar small\"\n style=\"font-size: 0.875rem; line-height: 1\"\n >\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n </ng-container>\n </ng-container>\n\n <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"item.value; else empty\">\n <div class=\"flex gap-2\">\n <span> {{ item.value }} </span>\n <phoenix-tag\n [customColor]=\"item.value2 || ''\"\n [content]=\"item.value1 || ''\"\n >\n </phoenix-tag>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n <div>\n <!-- Label -->\n <div\n class=\"font-sm text-600 truncate mb-1\"\n [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n >\n {{ item.label }}\n </div>\n <!-- Avatar and person name/date -->\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div>\n <div\n class=\"text-blue-800 font-sm\"\n style=\"\n word-break: break-word;\n white-space: normal;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n <div class=\"text-sm\">\n {{ item.value1 | date : dateFormat }}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- Fallback for empty DATE_PERSON -->\n <ng-template #emptyDatePerson>\n <div class=\"text-sm\">--</div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Shared fallback for missing or empty values -->\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n </p-popover>\n </ng-container>\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}.tag-group-wrapper{position:relative;display:inline-flex;align-items:center}.tag-group-wrapper .tag-group-popup{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:1000;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:8px 10px;box-shadow:0 4px 12px #0000001f;min-width:120px;white-space:nowrap}.tag-group-wrapper .tag-group-popup .tag-group-popup-label{font-size:11px;font-weight:600;color:#666;margin-bottom:6px}.tag-group-wrapper:hover .tag-group-popup{display:block}.person-wrap{display:flex;align-items:center;padding:0}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1547
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ContexObjectComponent, isStandalone: true, selector: "phoenix-contex-object", inputs: { config: "config", dateFormat: "dateFormat", dateOnlyFormat: "dateOnlyFormat" }, viewQueries: [{ propertyName: "tagPopovers", predicate: ["tagPop"], descendants: true }], ngImport: i0, template: "<div class=\"flex align-items-center gap-2 w-full\">\n @if (ctxBackRoute?.length) {\n <button\n pButton\n type=\"button\"\n icon=\"pi pi-arrow-left\"\n class=\"p-button-text ml-1\"\n (click)=\"onBackClick()\"\n ></button>\n } @if (ctxType) {\n <span class=\"text-xl font-semibold text-gray-500\"> {{ ctxType }} : </span>\n } @if (ctxName) {\n <span\n class=\"text-xl font-semibold text-primary\"\n [pTooltip]=\"ctxName.length > 40 ? ctxName : undefined\"\n >\n {{ ctxName.length > 60 ? (ctxName | slice : 0 : 60) + \"\u2026\" : ctxName }}\n </span>\n } @if (ctxTitle) {\n <span\n class=\"text-base text-gray-500\"\n [pTooltip]=\"ctxTitle.length > 20 ? ctxTitle : undefined\"\n >\n {{ ctxTitle.length > 20 ? (ctxTitle | slice : 0 : 20) + \"\u2026\" : ctxTitle }}\n </span>\n } @if (ctxTags.length) {\n <div class=\"flex align-items-center gap-2 ml-3\">\n @for (item of displayTags; track $index) {\n <div class=\"tag-group-wrapper\">\n <div\n class=\"tag-popover-trigger\"\n (mouseenter)=\"onTagPopoverEnter($event, tagPop)\"\n (mouseleave)=\"onTagPopoverLeave($event, tagPop)\"\n >\n <p-tag\n [value]=\"item.remainingCount > 0 ? item.tag.text + ' +' + item.remainingCount : item.tag.text\"\n [severity]=\"$any(item.tag.variant || 'info')\"\n [icon]=\"item.tag.icon\"\n [style]=\"{\n 'font-size': '11px',\n padding: '3px 8px',\n width: 'fit-content',\n cursor: item.remainingCount > 0 ? 'pointer' : 'default',\n }\"\n [ngStyle]=\"\n item.tag.color\n ? {\n 'background-color': item.tag.color + '36',\n color: item.tag.color,\n }\n : null\n \"\n ></p-tag>\n </div>\n <p-popover #tagPop [style]=\"{ maxWidth: '400px' }\">\n @if (item.remainingCount === 0) {\n <div>\n <span>{{ item.tag.label ? item.tag.label + \": \" : \"\" }}</span>\n <span>{{ item.tag.text }} </span>\n </div>\n } @else {\n @if (item.tag.label) {\n <div class=\"tag-group-popup-label\">{{ item.tag.label }}</div>\n }\n <div class=\"flex flex-wrap gap-1\">\n @for (gt of item.groupedTags; track $index) {\n <p-tag\n [value]=\"gt.text\"\n [severity]=\"$any(gt.variant || 'info')\"\n [icon]=\"gt.icon\"\n [style]=\"{\n 'font-size': '11px',\n padding: '3px 8px',\n width: 'fit-content',\n }\"\n [ngStyle]=\"\n gt.color\n ? {\n 'background-color': gt.color + '36',\n color: gt.color,\n }\n : null\n \"\n ></p-tag>\n }\n </div>\n }\n </p-popover>\n </div>\n } @for (label of ctxLabels; track label.text) {\n <span\n [style]=\"{\n 'font-size': '11px',\n padding: '3px 8px',\n width: 'fit-content',\n }\"\n >\n {{ label.text }}\n </span>\n }\n </div>\n\n }\n <!-- Other Info items -->\n <ng-container *ngFor=\"let attr of ctxOtherInfo\">\n <span\n class=\"cursor-pointer ml-3\"\n (mouseenter)=\"pop.toggle($event)\"\n (mouseleave)=\"pop.toggle($event)\"\n >\n <i class=\"pi pi-calendar text-blue-900 mr-1\"></i>\n <span class=\"text-sm\">{{\n attr.value | date : attr.dateFormat || dateOnlyFormat\n }}</span>\n </span>\n <p-popover #pop [style]=\"{ maxWidth: '400px' }\">\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div\n style=\"\n display: grid;\n grid-template-columns: max-content 1fr;\n column-gap: 1rem;\n row-gap: 0.5rem;\n align-items: start;\n width: 100%;\n \"\n >\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item?.type || statusTooltipType.TAG\">\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a\n *ngIf=\"item.value; else empty\"\n [href]=\"getFullUrl(item.value)\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ item.label || \"Open\" }}\n </a>\n </ng-container>\n\n <!-- STRING type: renders text with truncation and tooltip if too long -->\n <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n <div\n *ngIf=\"item.value; else empty\"\n class=\"text-sm\"\n style=\"\n white-space: normal;\n word-break: break-word;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n </ng-container>\n\n <!-- DATE type: formatted date or fallback -->\n <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n <span *ngIf=\"item.value; else empty\">\n {{ item.value | date : dateFormat }}\n </span>\n </ng-container>\n\n <!-- PERSON type: shows initial avatar and name if value exists -->\n <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n <ng-container *ngIf=\"item.value; else empty\">\n <span class=\"person-wrap flex items-center gap-1 truncate\">\n <div\n class=\"person-avatar small\"\n style=\"font-size: 0.875rem; line-height: 1\"\n >\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n </ng-container>\n </ng-container>\n\n <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"item.value; else empty\">\n <div class=\"flex gap-2\">\n <span> {{ item.value }} </span>\n <phoenix-tag\n [customColor]=\"item.value2 || ''\"\n [content]=\"item.value1 || ''\"\n >\n </phoenix-tag>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n <div>\n <!-- Label -->\n <div\n class=\"font-sm text-600 truncate mb-1\"\n [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n >\n {{ item.label }}\n </div>\n <!-- Avatar and person name/date -->\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div>\n <div\n class=\"text-blue-800 font-sm\"\n style=\"\n word-break: break-word;\n white-space: normal;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n <div class=\"text-sm\">\n {{ item.value1 | date : dateFormat }}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- Fallback for empty DATE_PERSON -->\n <ng-template #emptyDatePerson>\n <div class=\"text-sm\">--</div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Shared fallback for missing or empty values -->\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n </p-popover>\n </ng-container>\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}.tag-group-wrapper{position:relative;display:inline-flex;align-items:center}.tag-group-wrapper .tag-popover-trigger{display:inline-flex;cursor:pointer}.tag-group-wrapper .tag-group-popup-label{font-size:11px;font-weight:600;color:#666;margin-bottom:6px}.person-wrap{display:flex;align-items:center;padding:0}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1536
1548
|
}
|
|
1537
1549
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ContexObjectComponent, decorators: [{
|
|
1538
1550
|
type: Component,
|
|
@@ -1545,13 +1557,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1545
1557
|
AvatarModule,
|
|
1546
1558
|
PopoverModule,
|
|
1547
1559
|
TagComponent,
|
|
1548
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center gap-2 w-full\">\n @if (ctxBackRoute?.length) {\n <button\n pButton\n type=\"button\"\n icon=\"pi pi-arrow-left\"\n class=\"p-button-text ml-1\"\n (click)=\"onBackClick()\"\n ></button>\n } @if (ctxType) {\n <span class=\"text-xl font-semibold text-gray-500\"> {{ ctxType }} : </span>\n } @if (ctxName) {\n <span\n class=\"text-xl font-semibold text-primary\"\n [pTooltip]=\"ctxName.length > 40 ? ctxName : undefined\"\n >\n {{ ctxName.length > 60 ? (ctxName | slice : 0 : 60) + \"\u2026\" : ctxName }}\n </span>\n } @if (ctxTitle) {\n <span\n class=\"text-base text-gray-500\"\n [pTooltip]=\"ctxTitle.length > 20 ? ctxTitle : undefined\"\n >\n {{ ctxTitle.length > 20 ? (ctxTitle | slice : 0 : 20) + \"\u2026\" : ctxTitle }}\n </span>\n } @if (ctxTags.length) {\n <div class=\"flex align-items-center gap-2 ml-3\">\n @for (item of displayTags; track $index) {\n <div class=\"tag-group-wrapper\">\n <p-tag\n [pTooltip]=\"item.remainingCount === 0 ? tagTooltipContent : undefined\"\n tooltipPosition=\"bottom\"\n [value]=\"item.remainingCount > 0 ? item.tag.text + ' +' + item.remainingCount : item.tag.text\"\n [severity]=\"$any(item.tag.variant || 'info')\"\n [icon]=\"item.tag.icon\"\n [style]=\"{\n 'font-size': '11px',\n padding: '3px 8px',\n width: 'fit-content',\n cursor: item.remainingCount > 0 ? 'pointer' : 'default',\n }\"\n [ngStyle]=\"\n item.tag.color\n ? {\n 'background-color': item.tag.color + '36',\n color: item.tag.color,\n }\n : null\n \"\n ></p-tag>\n <!-- Hover popup showing all tags in the group -->\n @if (item.remainingCount > 0) {\n <div class=\"tag-group-popup\">\n @if (item.tag.label) {\n <div class=\"tag-group-popup-label\">{{ item.tag.label }}</div>\n }\n <div class=\"flex flex-wrap gap-1\">\n @for (gt of item.groupedTags; track $index) {\n <p-tag\n [value]=\"gt.text\"\n [severity]=\"$any(gt.variant || 'info')\"\n [icon]=\"gt.icon\"\n [style]=\"{\n 'font-size': '11px',\n padding: '3px 8px',\n width: 'fit-content',\n }\"\n [ngStyle]=\"\n gt.color\n ? {\n 'background-color': gt.color + '36',\n color: gt.color,\n }\n : null\n \"\n ></p-tag>\n }\n </div>\n </div>\n }\n <ng-template #tagTooltipContent>\n <div>\n <span>{{ item.tag.label ? item.tag.label + \": \" : \"\" }}</span>\n <span>{{ item.tag.text }} </span>\n </div>\n </ng-template>\n </div>\n } @for (label of ctxLabels; track label.text) {\n <span\n [style]=\"{\n 'font-size': '11px',\n padding: '3px 8px',\n width: 'fit-content',\n }\"\n >\n {{ label.text }}\n </span>\n }\n </div>\n\n }\n <!-- Other Info items -->\n <ng-container *ngFor=\"let attr of ctxOtherInfo\">\n <span\n class=\"cursor-pointer ml-3\"\n (mouseenter)=\"pop.toggle($event)\"\n (mouseleave)=\"pop.toggle($event)\"\n >\n <i class=\"pi pi-calendar text-blue-900 mr-1\"></i>\n <span class=\"text-sm\">{{\n attr.value | date : attr.dateFormat || dateOnlyFormat\n }}</span>\n </span>\n <p-popover #pop [style]=\"{ maxWidth: '400px' }\">\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div\n style=\"\n display: grid;\n grid-template-columns: max-content 1fr;\n column-gap: 1rem;\n row-gap: 0.5rem;\n align-items: start;\n width: 100%;\n \"\n >\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item?.type || statusTooltipType.TAG\">\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a\n *ngIf=\"item.value; else empty\"\n [href]=\"getFullUrl(item.value)\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ item.label || \"Open\" }}\n </a>\n </ng-container>\n\n <!-- STRING type: renders text with truncation and tooltip if too long -->\n <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n <div\n *ngIf=\"item.value; else empty\"\n class=\"text-sm\"\n style=\"\n white-space: normal;\n word-break: break-word;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n </ng-container>\n\n <!-- DATE type: formatted date or fallback -->\n <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n <span *ngIf=\"item.value; else empty\">\n {{ item.value | date : dateFormat }}\n </span>\n </ng-container>\n\n <!-- PERSON type: shows initial avatar and name if value exists -->\n <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n <ng-container *ngIf=\"item.value; else empty\">\n <span class=\"person-wrap flex items-center gap-1 truncate\">\n <div\n class=\"person-avatar small\"\n style=\"font-size: 0.875rem; line-height: 1\"\n >\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n </ng-container>\n </ng-container>\n\n <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"item.value; else empty\">\n <div class=\"flex gap-2\">\n <span> {{ item.value }} </span>\n <phoenix-tag\n [customColor]=\"item.value2 || ''\"\n [content]=\"item.value1 || ''\"\n >\n </phoenix-tag>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n <div>\n <!-- Label -->\n <div\n class=\"font-sm text-600 truncate mb-1\"\n [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n >\n {{ item.label }}\n </div>\n <!-- Avatar and person name/date -->\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div>\n <div\n class=\"text-blue-800 font-sm\"\n style=\"\n word-break: break-word;\n white-space: normal;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n <div class=\"text-sm\">\n {{ item.value1 | date : dateFormat }}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- Fallback for empty DATE_PERSON -->\n <ng-template #emptyDatePerson>\n <div class=\"text-sm\">--</div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Shared fallback for missing or empty values -->\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n </p-popover>\n </ng-container>\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}.tag-group-wrapper{position:relative;display:inline-flex;align-items:center}.tag-group-wrapper .tag-group-popup{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:1000;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:8px 10px;box-shadow:0 4px 12px #0000001f;min-width:120px;white-space:nowrap}.tag-group-wrapper .tag-group-popup .tag-group-popup-label{font-size:11px;font-weight:600;color:#666;margin-bottom:6px}.tag-group-wrapper:hover .tag-group-popup{display:block}.person-wrap{display:flex;align-items:center;padding:0}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}\n"] }]
|
|
1560
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center gap-2 w-full\">\n @if (ctxBackRoute?.length) {\n <button\n pButton\n type=\"button\"\n icon=\"pi pi-arrow-left\"\n class=\"p-button-text ml-1\"\n (click)=\"onBackClick()\"\n ></button>\n } @if (ctxType) {\n <span class=\"text-xl font-semibold text-gray-500\"> {{ ctxType }} : </span>\n } @if (ctxName) {\n <span\n class=\"text-xl font-semibold text-primary\"\n [pTooltip]=\"ctxName.length > 40 ? ctxName : undefined\"\n >\n {{ ctxName.length > 60 ? (ctxName | slice : 0 : 60) + \"\u2026\" : ctxName }}\n </span>\n } @if (ctxTitle) {\n <span\n class=\"text-base text-gray-500\"\n [pTooltip]=\"ctxTitle.length > 20 ? ctxTitle : undefined\"\n >\n {{ ctxTitle.length > 20 ? (ctxTitle | slice : 0 : 20) + \"\u2026\" : ctxTitle }}\n </span>\n } @if (ctxTags.length) {\n <div class=\"flex align-items-center gap-2 ml-3\">\n @for (item of displayTags; track $index) {\n <div class=\"tag-group-wrapper\">\n <div\n class=\"tag-popover-trigger\"\n (mouseenter)=\"onTagPopoverEnter($event, tagPop)\"\n (mouseleave)=\"onTagPopoverLeave($event, tagPop)\"\n >\n <p-tag\n [value]=\"item.remainingCount > 0 ? item.tag.text + ' +' + item.remainingCount : item.tag.text\"\n [severity]=\"$any(item.tag.variant || 'info')\"\n [icon]=\"item.tag.icon\"\n [style]=\"{\n 'font-size': '11px',\n padding: '3px 8px',\n width: 'fit-content',\n cursor: item.remainingCount > 0 ? 'pointer' : 'default',\n }\"\n [ngStyle]=\"\n item.tag.color\n ? {\n 'background-color': item.tag.color + '36',\n color: item.tag.color,\n }\n : null\n \"\n ></p-tag>\n </div>\n <p-popover #tagPop [style]=\"{ maxWidth: '400px' }\">\n @if (item.remainingCount === 0) {\n <div>\n <span>{{ item.tag.label ? item.tag.label + \": \" : \"\" }}</span>\n <span>{{ item.tag.text }} </span>\n </div>\n } @else {\n @if (item.tag.label) {\n <div class=\"tag-group-popup-label\">{{ item.tag.label }}</div>\n }\n <div class=\"flex flex-wrap gap-1\">\n @for (gt of item.groupedTags; track $index) {\n <p-tag\n [value]=\"gt.text\"\n [severity]=\"$any(gt.variant || 'info')\"\n [icon]=\"gt.icon\"\n [style]=\"{\n 'font-size': '11px',\n padding: '3px 8px',\n width: 'fit-content',\n }\"\n [ngStyle]=\"\n gt.color\n ? {\n 'background-color': gt.color + '36',\n color: gt.color,\n }\n : null\n \"\n ></p-tag>\n }\n </div>\n }\n </p-popover>\n </div>\n } @for (label of ctxLabels; track label.text) {\n <span\n [style]=\"{\n 'font-size': '11px',\n padding: '3px 8px',\n width: 'fit-content',\n }\"\n >\n {{ label.text }}\n </span>\n }\n </div>\n\n }\n <!-- Other Info items -->\n <ng-container *ngFor=\"let attr of ctxOtherInfo\">\n <span\n class=\"cursor-pointer ml-3\"\n (mouseenter)=\"pop.toggle($event)\"\n (mouseleave)=\"pop.toggle($event)\"\n >\n <i class=\"pi pi-calendar text-blue-900 mr-1\"></i>\n <span class=\"text-sm\">{{\n attr.value | date : attr.dateFormat || dateOnlyFormat\n }}</span>\n </span>\n <p-popover #pop [style]=\"{ maxWidth: '400px' }\">\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div\n style=\"\n display: grid;\n grid-template-columns: max-content 1fr;\n column-gap: 1rem;\n row-gap: 0.5rem;\n align-items: start;\n width: 100%;\n \"\n >\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item?.type || statusTooltipType.TAG\">\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a\n *ngIf=\"item.value; else empty\"\n [href]=\"getFullUrl(item.value)\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ item.label || \"Open\" }}\n </a>\n </ng-container>\n\n <!-- STRING type: renders text with truncation and tooltip if too long -->\n <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n <div\n *ngIf=\"item.value; else empty\"\n class=\"text-sm\"\n style=\"\n white-space: normal;\n word-break: break-word;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n </ng-container>\n\n <!-- DATE type: formatted date or fallback -->\n <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n <span *ngIf=\"item.value; else empty\">\n {{ item.value | date : dateFormat }}\n </span>\n </ng-container>\n\n <!-- PERSON type: shows initial avatar and name if value exists -->\n <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n <ng-container *ngIf=\"item.value; else empty\">\n <span class=\"person-wrap flex items-center gap-1 truncate\">\n <div\n class=\"person-avatar small\"\n style=\"font-size: 0.875rem; line-height: 1\"\n >\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n </ng-container>\n </ng-container>\n\n <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"item.value; else empty\">\n <div class=\"flex gap-2\">\n <span> {{ item.value }} </span>\n <phoenix-tag\n [customColor]=\"item.value2 || ''\"\n [content]=\"item.value1 || ''\"\n >\n </phoenix-tag>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n <div>\n <!-- Label -->\n <div\n class=\"font-sm text-600 truncate mb-1\"\n [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n >\n {{ item.label }}\n </div>\n <!-- Avatar and person name/date -->\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div>\n <div\n class=\"text-blue-800 font-sm\"\n style=\"\n word-break: break-word;\n white-space: normal;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n <div class=\"text-sm\">\n {{ item.value1 | date : dateFormat }}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- Fallback for empty DATE_PERSON -->\n <ng-template #emptyDatePerson>\n <div class=\"text-sm\">--</div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Shared fallback for missing or empty values -->\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n </p-popover>\n </ng-container>\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}.tag-group-wrapper{position:relative;display:inline-flex;align-items:center}.tag-group-wrapper .tag-popover-trigger{display:inline-flex;cursor:pointer}.tag-group-wrapper .tag-group-popup-label{font-size:11px;font-weight:600;color:#666;margin-bottom:6px}.person-wrap{display:flex;align-items:center;padding:0}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}\n"] }]
|
|
1549
1561
|
}], propDecorators: { config: [{
|
|
1550
1562
|
type: Input
|
|
1551
1563
|
}], dateFormat: [{
|
|
1552
1564
|
type: Input
|
|
1553
1565
|
}], dateOnlyFormat: [{
|
|
1554
1566
|
type: Input
|
|
1567
|
+
}], tagPopovers: [{
|
|
1568
|
+
type: ViewChildren,
|
|
1569
|
+
args: ['tagPop']
|
|
1555
1570
|
}] } });
|
|
1556
1571
|
|
|
1557
1572
|
class ShellComponent {
|
|
@@ -1791,7 +1806,7 @@ class PhoenixDataTableActionComponent {
|
|
|
1791
1806
|
this.actionClick.emit({ action, rowData: this.rowData });
|
|
1792
1807
|
}
|
|
1793
1808
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PhoenixDataTableActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1794
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PhoenixDataTableActionComponent, isStandalone: true, selector: "phoenix-data-table-action", inputs: { actionConfig: "actionConfig", rowData: "rowData" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<p-popover #op>\n <ul class=\"list-none p-0 m-0\" [attr.data-cy]=\"'table-button-popover'\">\n <ng-container *ngFor=\"let item of btnConfig.items; let last = last\">\n <li\n class=\"cursor-pointer block\"\n [ngClass]=\"{ 'mb-3': !last, disabledAction: item.disabled }\"\n (click)=\"onActionClick(item)\"\n >\n <i class=\"mr-2\" [class]=\"item.icon\"></i> {{ item.label | translate }}\n </li>\n </ng-container>\n </ul>\n</p-popover>\n\n<p-button\n [attr.data-cy]=\"'table-button-' + actionConfig.type\"\n [label]=\"btnConfig.label | translate\"\n [text]=\"btnConfig.text\"\n [icon]=\"icon\"\n [disabled]=\"disabled\"\n [iconPos]=\"btnConfig.type === 'multiselect' ? 'right' : 'left'\"\n (click)=\"\n btnConfig.type === 'multiselect'\n ? op.toggle($event)\n : onActionClick(actionConfig)\n \"\n [outlined]=\"btnConfig.outlined\"\n [pTooltip]=\"actionConfig.label | translate\"\n tooltipPosition=\"bottom\"\n [class]=\"btnConfig.class\"\n [severity]=\"btnConfig.severity\"\n>\n</p-button>\n", styles: ["::ng-deep .p-column-filter-overlay-menu .p-column-filter-buttonbar{padding-top:0!important}::ng-deep .p-column-filter-overlay-menu .p-column-filter-buttonbar button{scale:.9!important}.disabledAction{pointer-events:none;opacity:.4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type:
|
|
1809
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PhoenixDataTableActionComponent, isStandalone: true, selector: "phoenix-data-table-action", inputs: { actionConfig: "actionConfig", rowData: "rowData" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<p-popover #op>\n <ul class=\"list-none p-0 m-0\" [attr.data-cy]=\"'table-button-popover'\">\n <ng-container *ngFor=\"let item of btnConfig.items; let last = last\">\n <li\n class=\"cursor-pointer block\"\n [ngClass]=\"{ 'mb-3': !last, disabledAction: item.disabled }\"\n (click)=\"onActionClick(item)\"\n >\n <i class=\"mr-2\" [class]=\"item.icon\"></i> {{ item.label | translate }}\n </li>\n </ng-container>\n </ul>\n</p-popover>\n\n<p-button\n [attr.data-cy]=\"'table-button-' + actionConfig.type\"\n [label]=\"btnConfig.label | translate\"\n [text]=\"btnConfig.text\"\n [icon]=\"icon\"\n [disabled]=\"disabled\"\n [iconPos]=\"btnConfig.type === 'multiselect' ? 'right' : 'left'\"\n (click)=\"\n btnConfig.type === 'multiselect'\n ? op.toggle($event)\n : onActionClick(actionConfig)\n \"\n [outlined]=\"btnConfig.outlined\"\n [pTooltip]=\"actionConfig.label | translate\"\n tooltipPosition=\"bottom\"\n [class]=\"btnConfig.class\"\n [severity]=\"btnConfig.severity\"\n>\n</p-button>\n", styles: ["::ng-deep .p-column-filter-overlay-menu .p-column-filter-buttonbar{padding-top:0!important}::ng-deep .p-column-filter-overlay-menu .p-column-filter-buttonbar button{scale:.9!important}.disabledAction{pointer-events:none;opacity:.4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
|
|
1795
1810
|
}
|
|
1796
1811
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PhoenixDataTableActionComponent, decorators: [{
|
|
1797
1812
|
type: Component,
|
|
@@ -1890,7 +1905,7 @@ class PhoenixDataTableTabsComponent {
|
|
|
1890
1905
|
this.actionClick.emit({ action: opt });
|
|
1891
1906
|
}
|
|
1892
1907
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PhoenixDataTableTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1893
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PhoenixDataTableTabsComponent, isStandalone: true, selector: "phoenix-data-table-tabs", inputs: { actions: "actions" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<p-selectButton\n [attr.data-cy]=\"'table-tab-select-button'\"\n [options]=\"actions\"\n optionValue=\"key\"\n [(ngModel)]=\"value\"\n optionLabel=\"icon\"\n [unselectable]=\"true\"\n (onChange)=\"onActionClick($event)\"\n>\n <ng-template #item let-item>\n <span>\n {{ item.label | translate }}\n </span>\n <span>\n <p-badge\n *ngIf=\"item.badgeCount\"\n [value]=\"item.badgeCount\"\n severity=\"danger\"\n badgeSize=\"small\"\n />\n </span>\n </ng-template>\n</p-selectButton>\n", styles: [":host ::ng-deep .p-selectbutton .p-button{margin-right:5px!important}:host ::ng-deep .p-selectbutton .p-button.p-highlight{background-color:#3f51b51f!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$
|
|
1908
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PhoenixDataTableTabsComponent, isStandalone: true, selector: "phoenix-data-table-tabs", inputs: { actions: "actions" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<p-selectButton\n [attr.data-cy]=\"'table-tab-select-button'\"\n [options]=\"actions\"\n optionValue=\"key\"\n [(ngModel)]=\"value\"\n optionLabel=\"icon\"\n [unselectable]=\"true\"\n (onChange)=\"onActionClick($event)\"\n>\n <ng-template #item let-item>\n <span>\n {{ item.label | translate }}\n </span>\n <span>\n <p-badge\n *ngIf=\"item.badgeCount\"\n [value]=\"item.badgeCount\"\n severity=\"danger\"\n badgeSize=\"small\"\n />\n </span>\n </ng-template>\n</p-selectButton>\n", styles: [":host ::ng-deep .p-selectbutton .p-button{margin-right:5px!important}:host ::ng-deep .p-selectbutton .p-button.p-highlight{background-color:#3f51b51f!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$4.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4$3.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
|
|
1894
1909
|
}
|
|
1895
1910
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PhoenixDataTableTabsComponent, decorators: [{
|
|
1896
1911
|
type: Component,
|
|
@@ -2350,9 +2365,9 @@ class PhoenixDataTableComponent {
|
|
|
2350
2365
|
this._selectedColumns = this.columns.filter((col) => val.some((v) => v.field === col.field));
|
|
2351
2366
|
}
|
|
2352
2367
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PhoenixDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2353
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PhoenixDataTableComponent, isStandalone: true, selector: "phoenix-data-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: true, transformFunction: null }, exportdData: { classPropertyName: "exportdData", publicName: "exportdData", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: true, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: false, isRequired: false, transformFunction: null }, tableConfiguration: { classPropertyName: "tableConfiguration", publicName: "tableConfiguration", isSignal: false, isRequired: true, transformFunction: resolveActions$1 }, exportData: { classPropertyName: "exportData", publicName: "exportData", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { actionClickEmmiter: "actionClickEmmiter", lazyLoadDataEmmiter: "lazyLoadDataEmmiter", onRowClickEmmiter: "onRowClickEmmiter", onRowCheckboxRadioClickEmmiter: "onRowCheckboxRadioClickEmmiter", onExportClickEmmiter: "onExportClickEmmiter", onSaveColumnsClickEmmiter: "onSaveColumnsClickEmmiter", onHeaderCheckboxToggleEmmiter: "onHeaderCheckboxToggleEmmiter" }, viewQueries: [{ propertyName: "overviewBtn", first: true, predicate: ["btn"], descendants: true }, { propertyName: "table", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- total records lazy???? -->\n<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <p-table\n #dt\n [selectionMode]=\"tableConfiguration.selectionMode\"\n [dataKey]=\"tableConfiguration.key ? tableConfiguration.key : 'id'\"\n [value]=\"data\"\n [rowSelectable]=\"isRowSelectable\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n [globalFilterFields]=\"globalFilterFields\"\n [resizableColumns]=\"true\"\n [size]=\"'small'\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [selectionPageOnly]=\"true\"\n [(selection)]=\"selectedData\"\n [scrollable]=\"true\"\n scrollHeight=\"400px\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"46\"\n [rowHover]=\"true\"\n (onHeaderCheckboxToggle)=\"onHeaderCheckboxToggle($event)\"\n >\n <!-- ********** CAPTION CAPTION CAPTION *********************** -->\n <ng-template pTemplate=\"caption\">\n <div class=\"flex justify-content-between\">\n <global-table-actions>\n <ng-container\n *ngFor=\"\n let action of tableConfiguration.globalActions;\n let i = index\n \"\n >\n <phoenix-data-table-action\n #btn\n [actionConfig]=\"action\"\n (actionClick)=\"actionClick($event)\"\n ></phoenix-data-table-action\n ></ng-container>\n <phoenix-data-table-tabs\n [attr.data-cy]=\"\n 'table-select-button-' + tableConfiguration.tabs?.key\n \"\n [actions]=\"tableConfiguration.tabs\"\n (actionClick)=\"actionClick($event)\"\n ></phoenix-data-table-tabs>\n </global-table-actions>\n <div class=\"flex align-items-center\">\n <p-button\n [attr.data-cy]=\"'table-button-filter'\"\n icon=\"pi pi-filter\"\n [rounded]=\"true\"\n label=\"Filter\"\n [text]=\"true\"\n severity=\"primary\"\n class=\"mr-2\"\n (onClick)=\"filters.toggle($event)\"\n />\n\n <p-button\n [attr.data-cy]=\"'table-button-toggle'\"\n icon=\"pi pi-sliders-v\"\n [rounded]=\"true\"\n [text]=\"true\"\n severity=\"primary\"\n label=\"Columns\"\n class=\"mr-2\"\n [attr.data-cy]=\"'table-togg-button'\"\n (onClick)=\"cols.toggle($event)\"\n />\n\n <span\n *ngIf=\"tableConfiguration.globalFilter\"\n class=\"p-input-icon-left ml-auto\"\n >\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n [attr.data-cy]=\"'table-global-search'\"\n type=\"text\"\n (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\"\n pInputText\n placeholder=\"{{\n 'SEARCH_PLACEHOLDERS.SEARCH_KEYWORD' | translate\n }}\"\n />\n </p-iconfield>\n </span>\n <p-button\n [attr.data-cy]=\"'table-button-export'\"\n icon=\"pi pi-ellipsis-v\"\n [rounded]=\"true\"\n [text]=\"true\"\n severity=\"primary\"\n (onClick)=\"export.toggle($event)\"\n class=\"ml-2\"\n />\n\n <bulk-table-actions>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n [selectedData]=\"selectedData\"\n (actionClick)=\"actionClick(action, selectedData)\"\n ></phoenix-data-table-action\n ></ng-container>\n </bulk-table-actions>\n </div>\n </div>\n </ng-template>\n <!-- ********** HEADER HEADER HEADER *********************** -->\n <ng-template pTemplate=\"header\">\n <tr style=\"height: 40px\" class=\"dt-header\">\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableHeaderCheckbox\n [attr.data-cy]=\"'table-header-checkbox'\"\n ></p-tableHeaderCheckbox>\n </th>\n <th\n class=\"custom-th\"\n *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n ></th>\n </ng-container>\n <!-- rest of columns -->\n <ng-container *ngFor=\"let col of selectedColumns; let i = index\">\n <th\n [attr.data-cy]=\"'table-col-' + i\"\n pResizableColumn\n class=\"custom-th font-bold\"\n [pSortableColumn]=\"\n col.filter === 'multiselect' && tableConfiguration.lazy != true\n ? col.field + '.name'\n : col.field\n \"\n >\n <!-- set sort icon visible by default -->\n <p-sortIcon\n [attr.data-cy]=\"'table-sort-' + col.field\"\n *ngIf=\"col.sortable === undefined ? true : col.sortable\"\n field=\"{{ col.field }}\"\n ></p-sortIcon>\n {{ col.header | translate }}\n </th>\n </ng-container>\n\n <!-- create empty th placeholders for actions -->\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n <!-- ********** BODY BODY BODY *********************** -->\n <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\">\n <ng-template #shimmer>\n <tr [attr.data-cy]=\"'table-row-' + rowIndex\">\n <td *ngFor=\"let col of columns; let even = even\">\n <p-skeleton\n [ngStyle]=\"{\n width: '60%',\n }\"\n ></p-skeleton>\n </td>\n\n <td>\n <p-skeleton\n [ngStyle]=\"{\n width: '20%',\n }\"\n ></p-skeleton>\n </td>\n </tr>\n </ng-template>\n <tr\n *ngIf=\"!loading(); else shimmer\"\n (click)=\"onRowClick($event, rowData)\"\n [pSelectableRow]=\"rowData\"\n [attr.data-cy]=\"'table-row-' + rowIndex\"\n >\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableCheckbox\n [attr.data-cy]=\"'table-checkbox'\"\n [disabled]=\"\n rowData?.canSelect !== undefined ? !rowData.canSelect : false\n \"\n [value]=\"rowData\"\n ></p-tableCheckbox>\n </td>\n <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n <p-tableRadioButton\n [value]=\"rowData\"\n [attr.data-cy]=\"'table-radio-button'\"\n ></p-tableRadioButton>\n </td>\n </ng-container>\n\n <ng-container *ngFor=\"let col of selectedColumns; let i = index\">\n <td class=\"cursor-pointer\">\n <ng-container\n *ngTemplateOutlet=\"\n cellValueTemp;\n context: { value: { rowData, col } }\n \"\n ></ng-container>\n </td>\n </ng-container>\n\n <!-- p-0 on td because buttons already have marign. so it makes row bigger -->\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-data-table-action\n *ngIf=\"\n action.notauthorized ||\n (rowData[action.type] != undefined &&\n rowData[action.type] != null)\n \"\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"actionClick($event, rowData)\"\n ></phoenix-data-table-action\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"paginatorright\" let-state>\n <!-- Total Records: {{ state.totalRecords }} -->\n <!-- <i class=\"pi pi-cog\" style=\"font-size: 1.2rem; color: grey\"></i> -->\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n</div>\n\n<!-- Celll value template -->\n\n<ng-template #cellValueTemp let-val=\"value\">\n <ng-container [ngSwitch]=\"val.col.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <!-- checking if there is a object instead of string. objects goes into non-lazy tables -> val.rowData[val.col.field].name || val.rowData[val.col.field] -->\n <p-tag\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.TAG | lowercase)\"\n [style]=\"{ 'background-color': val.rowData[val.col.field + 'Color'] }\"\n [value]=\"\n val.rowData[val.col.field].name || val.rowData[val.col.field]\n \"\n ></p-tag>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <p-avatar\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.PERSON | lowercase)\"\n [label]=\"val.rowData[val.col.field].name.charAt(0)\"\n styleClass=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n {{ val.rowData[val.col.field].name }}\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeEnum.DATE\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <div [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.DATE | lowercase)\">\n {{ val.rowData[val.col.field] | date : dateFormat }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.DATE_COMPLEX\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <div\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.DATE_COMPLEX | lowercase)\n \"\n >\n {{ val.rowData[val.col.field] | date : dateFormat + \" | HH:mm\" }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <ul\n *ngFor=\"let item of val.rowData[val.col.field]\"\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.LIST | lowercase)\"\n >\n <li>{{ item.name }}</li>\n </ul>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.RICH_TEXT\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <div\n [pTooltip]=\"val.rowData[val.col.field] | removeHTMLTags\"\n style=\"width: 200px\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.RICH_TEXT | lowercase)\n \"\n >\n {{ val.rowData[val.col.field] | removeHTMLTags }}\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <div\n [pTooltip]=\"val.rowData[val.col.field]\"\n style=\"width: 200px\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n \"\n >\n {{ val.rowData[val.col.field] }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <i\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\"\n class=\"pi\"\n [ngClass]=\"{\n 'text-green-500 pi-check-circle': val.rowData[val.col.field],\n }\"\n ></i>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.CUSTOM\">\n <span\n [innerHTML]=\"val.col.customRenderer(val.rowData)\"\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.CUSTOM | lowercase)\"\n ></span>\n </ng-container>\n\n <ng-container *ngSwitchDefault\n ><td [attr.data-cy]=\"'table-cell-text'\">\n {{ val.rowData[val.col.field] | cellValue : val.col }}\n </td>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #emptyCell> -- </ng-template>\n\n<!-- Overlays for Columns/Filters/Exports -->\n\n<p-popover #cols>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">Columns</div>\n <div>\n <p-button\n [attr.data-cy]=\"'table-cell-save-columns-button'\"\n icon=\"pi pi-save\"\n [text]=\"true\"\n [label]=\"'ACTION.SAVE' | translate\"\n class=\"mr-2\"\n (click)=\"saveColumns()\"\n [attr.data-cy]=\"'table-save-col-button'\"\n />\n <p-button\n [attr.data-cy]=\"'table-cell-reset-columns-button'\"\n icon=\"pi pi-undo\"\n [text]=\"true\"\n [label]=\"'ACTION.RESET_FILTERS' | translate\"\n class=\"mr-2\"\n (click)=\"resetColumns()\"\n [attr.data-cy]=\"'table-reset-col-button'\"\n />\n </div>\n </div>\n\n <p-listbox\n [options]=\"columns\"\n [(ngModel)]=\"selectedColumns\"\n [multiple]=\"true\"\n [metaKeySelection]=\"false\"\n [listStyle]=\"{ 'max-height': '420px' }\"\n [attr.data-cy]=\"'table-list-box'\"\n >\n <ng-template let-item pTemplate=\"item\">\n <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n <i\n *ngIf=\"!(item | isSelected : selectedColumns)\"\n class=\"pi pi-eye-slash\"\n ></i>\n <span class=\"ml-2\"> {{ item.header | translate }}</span>\n </ng-template>\n </p-listbox>\n </div>\n</p-popover>\n\n<p-popover #filters>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">Filter</div>\n <div>\n <p-button\n icon=\"pi pi-save\"\n [text]=\"true\"\n [label]=\"'ACTION.SAVE' | translate\"\n class=\"mr-2\"\n [attr.data-cy]=\"'table-save-col-button'\"\n />\n <p-button\n icon=\"pi pi-times\"\n [text]=\"true\"\n [label]=\"'Clear'\"\n class=\"mr-2\"\n (click)=\"resetFilters()\"\n [attr.data-cy]=\"'table-reset-col-button'\"\n />\n </div>\n </div>\n\n <div>\n <form [formGroup]=\"filtersForm\" [attr.data-cy]=\"'table-filter-form'\">\n @for(control of tableConfiguration.filterConfiguration; track\n control.key ){ @switch(control.type) { @case ('checkbox') {\n <div class=\"mb-4\">\n <p-checkbox\n [attr.data-cy]=\"'table-filter-form-checkbox'\"\n binary=\"true\"\n type=\"checkbox\"\n [formControlName]=\"control.key\"\n />\n <label class=\"ml-2\">{{ control.label }}</label>\n </div>\n\n } @case ('dropdown') {\n <div class=\"mb-4\">\n <label class=\"mb-2 block\">{{ control.label }}</label>\n <p-select\n [attr.data-cy]=\"'table-filter-form-dropdown'\"\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n />\n </div>\n\n } } }\n </form>\n </div>\n </div>\n</p-popover>\n\n<p-popover #export>\n <div class=\"flex flex-column gap-1\">\n <p-button\n pRipple\n text=\"true\"\n icon=\"pi pi-file-pdf\"\n (click)=\"onExportClickEmmiter.emit(exportType.PDF)\"\n class=\"mr-2\"\n [label]=\"'ACTION.EXPORT_TO_PDF' | translate\"\n [attr.data-cy]=\"'table-cell-export-pdf-button'\"\n ></p-button>\n\n <p-button\n pRipple\n text=\"true\"\n icon=\"pi pi-file-excel\"\n (click)=\"onExportClickEmmiter.emit(exportType.EXCEL)\"\n class=\"mr-2\"\n [label]=\"'ACTION.EXPORT_TO_XLS' | translate\"\n [attr.data-cy]=\"'table-cell-export-pdf-excel'\"\n ></p-button>\n </div>\n</p-popover>\n", styles: [".custom-th{background-color:var(--surface-100)!important}.dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}:is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$6.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i2$6.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$6.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i4$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i5.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type:
|
|
2368
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PhoenixDataTableComponent, isStandalone: true, selector: "phoenix-data-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: true, transformFunction: null }, exportdData: { classPropertyName: "exportdData", publicName: "exportdData", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: true, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: false, isRequired: false, transformFunction: null }, tableConfiguration: { classPropertyName: "tableConfiguration", publicName: "tableConfiguration", isSignal: false, isRequired: true, transformFunction: resolveActions$1 }, exportData: { classPropertyName: "exportData", publicName: "exportData", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { actionClickEmmiter: "actionClickEmmiter", lazyLoadDataEmmiter: "lazyLoadDataEmmiter", onRowClickEmmiter: "onRowClickEmmiter", onRowCheckboxRadioClickEmmiter: "onRowCheckboxRadioClickEmmiter", onExportClickEmmiter: "onExportClickEmmiter", onSaveColumnsClickEmmiter: "onSaveColumnsClickEmmiter", onHeaderCheckboxToggleEmmiter: "onHeaderCheckboxToggleEmmiter" }, viewQueries: [{ propertyName: "overviewBtn", first: true, predicate: ["btn"], descendants: true }, { propertyName: "table", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- total records lazy???? -->\n<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <p-table\n #dt\n [selectionMode]=\"tableConfiguration.selectionMode\"\n [dataKey]=\"tableConfiguration.key ? tableConfiguration.key : 'id'\"\n [value]=\"data\"\n [rowSelectable]=\"isRowSelectable\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n [globalFilterFields]=\"globalFilterFields\"\n [resizableColumns]=\"true\"\n [size]=\"'small'\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [selectionPageOnly]=\"true\"\n [(selection)]=\"selectedData\"\n [scrollable]=\"true\"\n scrollHeight=\"400px\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"46\"\n [rowHover]=\"true\"\n (onHeaderCheckboxToggle)=\"onHeaderCheckboxToggle($event)\"\n >\n <!-- ********** CAPTION CAPTION CAPTION *********************** -->\n <ng-template pTemplate=\"caption\">\n <div class=\"flex justify-content-between\">\n <global-table-actions>\n <ng-container\n *ngFor=\"\n let action of tableConfiguration.globalActions;\n let i = index\n \"\n >\n <phoenix-data-table-action\n #btn\n [actionConfig]=\"action\"\n (actionClick)=\"actionClick($event)\"\n ></phoenix-data-table-action\n ></ng-container>\n <phoenix-data-table-tabs\n [attr.data-cy]=\"\n 'table-select-button-' + tableConfiguration.tabs?.key\n \"\n [actions]=\"tableConfiguration.tabs\"\n (actionClick)=\"actionClick($event)\"\n ></phoenix-data-table-tabs>\n </global-table-actions>\n <div class=\"flex align-items-center\">\n <p-button\n [attr.data-cy]=\"'table-button-filter'\"\n icon=\"pi pi-filter\"\n [rounded]=\"true\"\n label=\"Filter\"\n [text]=\"true\"\n severity=\"primary\"\n class=\"mr-2\"\n (onClick)=\"filters.toggle($event)\"\n />\n\n <p-button\n [attr.data-cy]=\"'table-button-toggle'\"\n icon=\"pi pi-sliders-v\"\n [rounded]=\"true\"\n [text]=\"true\"\n severity=\"primary\"\n label=\"Columns\"\n class=\"mr-2\"\n [attr.data-cy]=\"'table-togg-button'\"\n (onClick)=\"cols.toggle($event)\"\n />\n\n <span\n *ngIf=\"tableConfiguration.globalFilter\"\n class=\"p-input-icon-left ml-auto\"\n >\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n [attr.data-cy]=\"'table-global-search'\"\n type=\"text\"\n (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\"\n pInputText\n placeholder=\"{{\n 'SEARCH_PLACEHOLDERS.SEARCH_KEYWORD' | translate\n }}\"\n />\n </p-iconfield>\n </span>\n <p-button\n [attr.data-cy]=\"'table-button-export'\"\n icon=\"pi pi-ellipsis-v\"\n [rounded]=\"true\"\n [text]=\"true\"\n severity=\"primary\"\n (onClick)=\"export.toggle($event)\"\n class=\"ml-2\"\n />\n\n <bulk-table-actions>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n [selectedData]=\"selectedData\"\n (actionClick)=\"actionClick(action, selectedData)\"\n ></phoenix-data-table-action\n ></ng-container>\n </bulk-table-actions>\n </div>\n </div>\n </ng-template>\n <!-- ********** HEADER HEADER HEADER *********************** -->\n <ng-template pTemplate=\"header\">\n <tr style=\"height: 40px\" class=\"dt-header\">\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableHeaderCheckbox\n [attr.data-cy]=\"'table-header-checkbox'\"\n ></p-tableHeaderCheckbox>\n </th>\n <th\n class=\"custom-th\"\n *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n ></th>\n </ng-container>\n <!-- rest of columns -->\n <ng-container *ngFor=\"let col of selectedColumns; let i = index\">\n <th\n [attr.data-cy]=\"'table-col-' + i\"\n pResizableColumn\n class=\"custom-th font-bold\"\n [pSortableColumn]=\"\n col.filter === 'multiselect' && tableConfiguration.lazy != true\n ? col.field + '.name'\n : col.field\n \"\n >\n <!-- set sort icon visible by default -->\n <p-sortIcon\n [attr.data-cy]=\"'table-sort-' + col.field\"\n *ngIf=\"col.sortable === undefined ? true : col.sortable\"\n field=\"{{ col.field }}\"\n ></p-sortIcon>\n {{ col.header | translate }}\n </th>\n </ng-container>\n\n <!-- create empty th placeholders for actions -->\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n <!-- ********** BODY BODY BODY *********************** -->\n <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\">\n <ng-template #shimmer>\n <tr [attr.data-cy]=\"'table-row-' + rowIndex\">\n <td *ngFor=\"let col of columns; let even = even\">\n <p-skeleton\n [ngStyle]=\"{\n width: '60%',\n }\"\n ></p-skeleton>\n </td>\n\n <td>\n <p-skeleton\n [ngStyle]=\"{\n width: '20%',\n }\"\n ></p-skeleton>\n </td>\n </tr>\n </ng-template>\n <tr\n *ngIf=\"!loading(); else shimmer\"\n (click)=\"onRowClick($event, rowData)\"\n [pSelectableRow]=\"rowData\"\n [attr.data-cy]=\"'table-row-' + rowIndex\"\n >\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableCheckbox\n [attr.data-cy]=\"'table-checkbox'\"\n [disabled]=\"\n rowData?.canSelect !== undefined ? !rowData.canSelect : false\n \"\n [value]=\"rowData\"\n ></p-tableCheckbox>\n </td>\n <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n <p-tableRadioButton\n [value]=\"rowData\"\n [attr.data-cy]=\"'table-radio-button'\"\n ></p-tableRadioButton>\n </td>\n </ng-container>\n\n <ng-container *ngFor=\"let col of selectedColumns; let i = index\">\n <td class=\"cursor-pointer\">\n <ng-container\n *ngTemplateOutlet=\"\n cellValueTemp;\n context: { value: { rowData, col } }\n \"\n ></ng-container>\n </td>\n </ng-container>\n\n <!-- p-0 on td because buttons already have marign. so it makes row bigger -->\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-data-table-action\n *ngIf=\"\n action.notauthorized ||\n (rowData[action.type] != undefined &&\n rowData[action.type] != null)\n \"\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"actionClick($event, rowData)\"\n ></phoenix-data-table-action\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"paginatorright\" let-state>\n <!-- Total Records: {{ state.totalRecords }} -->\n <!-- <i class=\"pi pi-cog\" style=\"font-size: 1.2rem; color: grey\"></i> -->\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n</div>\n\n<!-- Celll value template -->\n\n<ng-template #cellValueTemp let-val=\"value\">\n <ng-container [ngSwitch]=\"val.col.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <!-- checking if there is a object instead of string. objects goes into non-lazy tables -> val.rowData[val.col.field].name || val.rowData[val.col.field] -->\n <p-tag\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.TAG | lowercase)\"\n [style]=\"{ 'background-color': val.rowData[val.col.field + 'Color'] }\"\n [value]=\"\n val.rowData[val.col.field].name || val.rowData[val.col.field]\n \"\n ></p-tag>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <p-avatar\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.PERSON | lowercase)\"\n [label]=\"val.rowData[val.col.field].name.charAt(0)\"\n styleClass=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n {{ val.rowData[val.col.field].name }}\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeEnum.DATE\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <div [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.DATE | lowercase)\">\n {{ val.rowData[val.col.field] | date : dateFormat }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.DATE_COMPLEX\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <div\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.DATE_COMPLEX | lowercase)\n \"\n >\n {{ val.rowData[val.col.field] | date : dateFormat + \" | HH:mm\" }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <ul\n *ngFor=\"let item of val.rowData[val.col.field]\"\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.LIST | lowercase)\"\n >\n <li>{{ item.name }}</li>\n </ul>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.RICH_TEXT\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <div\n [pTooltip]=\"val.rowData[val.col.field] | removeHTMLTags\"\n style=\"width: 200px\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.RICH_TEXT | lowercase)\n \"\n >\n {{ val.rowData[val.col.field] | removeHTMLTags }}\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <div\n [pTooltip]=\"val.rowData[val.col.field]\"\n style=\"width: 200px\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n \"\n >\n {{ val.rowData[val.col.field] }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <i\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\"\n class=\"pi\"\n [ngClass]=\"{\n 'text-green-500 pi-check-circle': val.rowData[val.col.field],\n }\"\n ></i>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.CUSTOM\">\n <span\n [innerHTML]=\"val.col.customRenderer(val.rowData)\"\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.CUSTOM | lowercase)\"\n ></span>\n </ng-container>\n\n <ng-container *ngSwitchDefault\n ><td [attr.data-cy]=\"'table-cell-text'\">\n {{ val.rowData[val.col.field] | cellValue : val.col }}\n </td>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #emptyCell> -- </ng-template>\n\n<!-- Overlays for Columns/Filters/Exports -->\n\n<p-popover #cols>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">Columns</div>\n <div>\n <p-button\n [attr.data-cy]=\"'table-cell-save-columns-button'\"\n icon=\"pi pi-save\"\n [text]=\"true\"\n [label]=\"'ACTION.SAVE' | translate\"\n class=\"mr-2\"\n (click)=\"saveColumns()\"\n [attr.data-cy]=\"'table-save-col-button'\"\n />\n <p-button\n [attr.data-cy]=\"'table-cell-reset-columns-button'\"\n icon=\"pi pi-undo\"\n [text]=\"true\"\n [label]=\"'ACTION.RESET_FILTERS' | translate\"\n class=\"mr-2\"\n (click)=\"resetColumns()\"\n [attr.data-cy]=\"'table-reset-col-button'\"\n />\n </div>\n </div>\n\n <p-listbox\n [options]=\"columns\"\n [(ngModel)]=\"selectedColumns\"\n [multiple]=\"true\"\n [metaKeySelection]=\"false\"\n [listStyle]=\"{ 'max-height': '420px' }\"\n [attr.data-cy]=\"'table-list-box'\"\n >\n <ng-template let-item pTemplate=\"item\">\n <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n <i\n *ngIf=\"!(item | isSelected : selectedColumns)\"\n class=\"pi pi-eye-slash\"\n ></i>\n <span class=\"ml-2\"> {{ item.header | translate }}</span>\n </ng-template>\n </p-listbox>\n </div>\n</p-popover>\n\n<p-popover #filters>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">Filter</div>\n <div>\n <p-button\n icon=\"pi pi-save\"\n [text]=\"true\"\n [label]=\"'ACTION.SAVE' | translate\"\n class=\"mr-2\"\n [attr.data-cy]=\"'table-save-col-button'\"\n />\n <p-button\n icon=\"pi pi-times\"\n [text]=\"true\"\n [label]=\"'Clear'\"\n class=\"mr-2\"\n (click)=\"resetFilters()\"\n [attr.data-cy]=\"'table-reset-col-button'\"\n />\n </div>\n </div>\n\n <div>\n <form [formGroup]=\"filtersForm\" [attr.data-cy]=\"'table-filter-form'\">\n @for(control of tableConfiguration.filterConfiguration; track\n control.key ){ @switch(control.type) { @case ('checkbox') {\n <div class=\"mb-4\">\n <p-checkbox\n [attr.data-cy]=\"'table-filter-form-checkbox'\"\n binary=\"true\"\n type=\"checkbox\"\n [formControlName]=\"control.key\"\n />\n <label class=\"ml-2\">{{ control.label }}</label>\n </div>\n\n } @case ('dropdown') {\n <div class=\"mb-4\">\n <label class=\"mb-2 block\">{{ control.label }}</label>\n <p-select\n [attr.data-cy]=\"'table-filter-form-dropdown'\"\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n />\n </div>\n\n } } }\n </form>\n </div>\n </div>\n</p-popover>\n\n<p-popover #export>\n <div class=\"flex flex-column gap-1\">\n <p-button\n pRipple\n text=\"true\"\n icon=\"pi pi-file-pdf\"\n (click)=\"onExportClickEmmiter.emit(exportType.PDF)\"\n class=\"mr-2\"\n [label]=\"'ACTION.EXPORT_TO_PDF' | translate\"\n [attr.data-cy]=\"'table-cell-export-pdf-button'\"\n ></p-button>\n\n <p-button\n pRipple\n text=\"true\"\n icon=\"pi pi-file-excel\"\n (click)=\"onExportClickEmmiter.emit(exportType.EXCEL)\"\n class=\"mr-2\"\n [label]=\"'ACTION.EXPORT_TO_XLS' | translate\"\n [attr.data-cy]=\"'table-cell-export-pdf-excel'\"\n ></p-button>\n </div>\n</p-popover>\n", styles: [".custom-th{background-color:var(--surface-100)!important}.dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}:is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$5.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i2$5.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$5.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$5.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i4$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i5.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type:
|
|
2354
2369
|
///Custom components
|
|
2355
|
-
PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type:
|
|
2370
|
+
PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i16.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["hostName", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type:
|
|
2356
2371
|
// Pipes
|
|
2357
2372
|
CellValuePipe, name: "cellValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: RemoveHTMLTagsPipe, name: "removeHTMLTags" }] });
|
|
2358
2373
|
}
|
|
@@ -2498,297 +2513,307 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2498
2513
|
}] });
|
|
2499
2514
|
|
|
2500
2515
|
class TableCaptionComponent {
|
|
2516
|
+
filtersPopover;
|
|
2501
2517
|
columnsPopover;
|
|
2502
|
-
/** Table
|
|
2518
|
+
/** Table config (key, UI toggles, global actions, tabs, etc.) */
|
|
2503
2519
|
tableConfiguration;
|
|
2504
|
-
/**
|
|
2520
|
+
/** Available columns for "Columns" popover */
|
|
2505
2521
|
columns = [];
|
|
2506
|
-
/**
|
|
2507
|
-
searchQuery = '';
|
|
2508
|
-
/** Selected rows passed down from parent (used for bulk actions) */
|
|
2522
|
+
/** Selected items (for bulk actions, only passed through) */
|
|
2509
2523
|
selectedItems = [];
|
|
2510
2524
|
/**
|
|
2511
|
-
*
|
|
2512
|
-
*
|
|
2525
|
+
* Filters config (backward compatible):
|
|
2526
|
+
* - old style: [{ key, label }]
|
|
2527
|
+
* - new style: [{ key, label, type, options, isInCaption, ... }]
|
|
2513
2528
|
*/
|
|
2514
|
-
filters;
|
|
2515
|
-
/** Emits
|
|
2529
|
+
filters = [];
|
|
2530
|
+
/** Emits normalized filter values (no nulls/empties) */
|
|
2516
2531
|
applyFiltersEvent = new EventEmitter();
|
|
2517
|
-
/** Emits selected column field keys
|
|
2532
|
+
/** Emits selected column field keys (string[]) */
|
|
2518
2533
|
applyColumnsEvent = new EventEmitter();
|
|
2519
|
-
/** Emits global search
|
|
2534
|
+
/** Emits global search input changes */
|
|
2520
2535
|
searchChange = new EventEmitter();
|
|
2521
|
-
/** Emits
|
|
2536
|
+
/** Emits action clicks from tabs/global/more area */
|
|
2522
2537
|
actionClick = new EventEmitter();
|
|
2523
|
-
/** Services / utilities */
|
|
2524
|
-
translateService = inject(TranslateService);
|
|
2525
|
-
dr = inject(DestroyRef);
|
|
2526
2538
|
fb = inject(FormBuilder);
|
|
2527
|
-
|
|
2539
|
+
dr = inject(DestroyRef);
|
|
2540
|
+
translate = inject(TranslateService);
|
|
2541
|
+
/** Reactive form built from filters[] */
|
|
2528
2542
|
filtersForm = this.fb.group({});
|
|
2529
|
-
/**
|
|
2530
|
-
_selectedColumns;
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
/** LocalStorage keys for persisting filters/columns per table key */
|
|
2534
|
-
FILTER_KEY;
|
|
2535
|
-
COLUMN_KEY;
|
|
2536
|
-
/**
|
|
2537
|
-
* Called when the column selector list changes. We map the selected column
|
|
2538
|
-
* models back to field keys and notify parent to actually apply it.
|
|
2539
|
-
*/
|
|
2540
|
-
onColumnSelectionChange(newSelection) {
|
|
2541
|
-
this.selectedColumns = newSelection;
|
|
2542
|
-
this.applyColumns();
|
|
2543
|
+
/** Columns currently visible (kept in original order) */
|
|
2544
|
+
_selectedColumns = [];
|
|
2545
|
+
get columnsChanged() {
|
|
2546
|
+
return (this.columns?.length ?? 0) !== (this._selectedColumns?.length ?? 0);
|
|
2543
2547
|
}
|
|
2548
|
+
/** Local storage keys */
|
|
2549
|
+
FILTER_KEY = '';
|
|
2550
|
+
COLUMN_KEY = '';
|
|
2544
2551
|
/**
|
|
2545
|
-
*
|
|
2546
|
-
*
|
|
2547
|
-
* -
|
|
2548
|
-
* -
|
|
2549
|
-
* - build filter form (with defaults)
|
|
2550
|
-
* - compute global filter fields
|
|
2551
|
-
* - restore saved filters (overrides defaults)
|
|
2552
|
+
* Internal signature to avoid rebuilding form on every ngOnChanges.
|
|
2553
|
+
* We rebuild only if:
|
|
2554
|
+
* - table key changes OR
|
|
2555
|
+
* - set/order of filter keys changes
|
|
2552
2556
|
*/
|
|
2553
|
-
|
|
2554
|
-
|
|
2557
|
+
lastSignature = '';
|
|
2558
|
+
ngOnChanges(changes) {
|
|
2559
|
+
if (!this.tableConfiguration)
|
|
2555
2560
|
return;
|
|
2556
|
-
this.FILTER_KEY = `filters_${this.tableConfiguration.key}`;
|
|
2557
|
-
this.
|
|
2558
|
-
|
|
2559
|
-
|
|
2561
|
+
this.FILTER_KEY = `filters_${this.tableConfiguration.key ?? 'table'}`;
|
|
2562
|
+
this.COLUMN_KEY = `columns_${this.tableConfiguration.key ?? 'table'}`;
|
|
2563
|
+
// Default visible columns: all non-hidden columns
|
|
2564
|
+
this._selectedColumns = (this.columns ?? []).filter((c) => !c?.hidden);
|
|
2565
|
+
// Restore columns once when config/columns arrive
|
|
2566
|
+
if (this.tableConfiguration?.hasColumns) {
|
|
2560
2567
|
this.restoreColumnState();
|
|
2561
2568
|
}
|
|
2562
|
-
|
|
2563
|
-
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2594
|
-
|
|
2595
|
-
|
|
2596
|
-
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
this.storeTableState(initial, this.FILTER_KEY);
|
|
2609
|
-
}
|
|
2610
|
-
});
|
|
2611
|
-
}
|
|
2569
|
+
else {
|
|
2570
|
+
this.emitColumns(this._selectedColumns);
|
|
2571
|
+
}
|
|
2572
|
+
// Normalize filters (backward compatible) before building form
|
|
2573
|
+
const normalizedFilters = this.normalizeFilters(this.filters);
|
|
2574
|
+
const signature = this.buildSignature(this.tableConfiguration.key, normalizedFilters);
|
|
2575
|
+
if (signature !== this.lastSignature) {
|
|
2576
|
+
this.lastSignature = signature;
|
|
2577
|
+
this.buildFiltersForm(normalizedFilters);
|
|
2578
|
+
}
|
|
2579
|
+
}
|
|
2580
|
+
// ---------------------------------------------------------------------------
|
|
2581
|
+
// Filters form (performance-focused)
|
|
2582
|
+
// ---------------------------------------------------------------------------
|
|
2583
|
+
/**
|
|
2584
|
+
* Build reactive form only when signature changes.
|
|
2585
|
+
* Subscribes once, emits debounced normalized payload.
|
|
2586
|
+
*/
|
|
2587
|
+
buildFiltersForm(filtersCfg) {
|
|
2588
|
+
const fg = this.fb.group({});
|
|
2589
|
+
for (const f of filtersCfg) {
|
|
2590
|
+
const t = f.type ?? 'text';
|
|
2591
|
+
// We DO NOT store null for multiselect (we store []),
|
|
2592
|
+
// because null is the common cause of "everything selected" / broken filtering.
|
|
2593
|
+
const initialValue = t === 'multiselect' ? this.normalizeMultiInitial(f.selected) :
|
|
2594
|
+
t === 'checkbox' ? !!f.selected :
|
|
2595
|
+
f.selected ?? '';
|
|
2596
|
+
fg.addControl(f.key, this.fb.control(initialValue));
|
|
2597
|
+
}
|
|
2598
|
+
this.filtersForm = fg;
|
|
2599
|
+
// 1) Restore persisted values (but only valid keys)
|
|
2600
|
+
this.restoreFilterState(filtersCfg);
|
|
2601
|
+
// 2) Subscribe once with debounce and emit normalized payload
|
|
2602
|
+
this.filtersForm.valueChanges
|
|
2603
|
+
.pipe(takeUntilDestroyed(this.dr), debounceTime(120), map((raw) => this.normalizeOutgoingPayload(raw, filtersCfg)))
|
|
2604
|
+
.subscribe((payload) => {
|
|
2605
|
+
this.applyFiltersEvent.emit(payload);
|
|
2606
|
+
this.persistState(payload, this.FILTER_KEY);
|
|
2607
|
+
});
|
|
2608
|
+
// 3) Emit initial state (normalized) once
|
|
2609
|
+
queueMicrotask(() => {
|
|
2610
|
+
const raw = this.filtersForm.getRawValue();
|
|
2611
|
+
const payload = this.normalizeOutgoingPayload(raw, filtersCfg);
|
|
2612
|
+
this.applyFiltersEvent.emit(payload);
|
|
2613
|
+
this.persistState(payload, this.FILTER_KEY);
|
|
2614
|
+
});
|
|
2612
2615
|
}
|
|
2613
|
-
/**
|
|
2614
|
-
|
|
2615
|
-
|
|
2616
|
+
/**
|
|
2617
|
+
* Normalize filters to be fully usable even if user passes [{key,label}] only.
|
|
2618
|
+
* Rule:
|
|
2619
|
+
* - If no type: treat as 'text'
|
|
2620
|
+
* - If options exist: treat as 'dropdown' (single) unless explicitly multiselect
|
|
2621
|
+
*/
|
|
2622
|
+
normalizeFilters(filters) {
|
|
2623
|
+
const arr = Array.isArray(filters) ? filters : [];
|
|
2624
|
+
return arr.map((f) => {
|
|
2625
|
+
const hasOptions = Array.isArray(f.options) && f.options.length > 0;
|
|
2626
|
+
// Backward compatibility:
|
|
2627
|
+
// - old style: {key,label} => text input
|
|
2628
|
+
// - if options exist but no type => dropdown
|
|
2629
|
+
const type = f.type ?? (hasOptions ? 'dropdown' : 'text');
|
|
2630
|
+
return {
|
|
2631
|
+
...f,
|
|
2632
|
+
type,
|
|
2633
|
+
optionLabel: f.optionLabel ?? 'label',
|
|
2634
|
+
optionValue: f.optionValue ?? 'key',
|
|
2635
|
+
};
|
|
2636
|
+
});
|
|
2616
2637
|
}
|
|
2617
|
-
|
|
2618
|
-
|
|
2619
|
-
|
|
2620
|
-
|
|
2621
|
-
|
|
2638
|
+
buildSignature(tableKey, filtersCfg) {
|
|
2639
|
+
const keys = (filtersCfg ?? []).map((f) => f.key).join('|');
|
|
2640
|
+
return `${tableKey ?? 'table'}::${keys}`;
|
|
2641
|
+
}
|
|
2642
|
+
normalizeMultiInitial(selected) {
|
|
2643
|
+
if (selected == null)
|
|
2644
|
+
return [];
|
|
2645
|
+
return Array.isArray(selected) ? selected : [selected];
|
|
2646
|
+
}
|
|
2647
|
+
/**
|
|
2648
|
+
* Emit only meaningful values:
|
|
2649
|
+
* - text: '' removed
|
|
2650
|
+
* - dropdown: '' / null removed
|
|
2651
|
+
* - multiselect: [] removed
|
|
2652
|
+
* - checkbox: always included only if true (optional: keep false too if you prefer)
|
|
2653
|
+
*/
|
|
2654
|
+
normalizeOutgoingPayload(raw, cfg) {
|
|
2655
|
+
const out = {};
|
|
2656
|
+
const mapCfg = new Map(cfg.map((f) => [f.key, f]));
|
|
2657
|
+
for (const key of Object.keys(raw ?? {})) {
|
|
2658
|
+
const f = mapCfg.get(key);
|
|
2659
|
+
if (!f)
|
|
2660
|
+
continue;
|
|
2661
|
+
const t = f.type ?? 'text';
|
|
2662
|
+
const v = raw[key];
|
|
2663
|
+
if (t === 'multiselect') {
|
|
2664
|
+
const arr = Array.isArray(v) ? v.filter((x) => x != null && x !== '') : [];
|
|
2665
|
+
if (arr.length)
|
|
2666
|
+
out[key] = arr; // keep array of optionValue(s)
|
|
2667
|
+
continue;
|
|
2668
|
+
}
|
|
2669
|
+
if (t === 'checkbox') {
|
|
2670
|
+
if (!!v)
|
|
2671
|
+
out[key] = true; // keep only true (fast + clean)
|
|
2672
|
+
continue;
|
|
2673
|
+
}
|
|
2674
|
+
// dropdown or text:
|
|
2675
|
+
if (v != null && v !== '')
|
|
2676
|
+
out[key] = v;
|
|
2677
|
+
}
|
|
2678
|
+
return out;
|
|
2622
2679
|
}
|
|
2623
2680
|
/**
|
|
2624
|
-
* Restore
|
|
2625
|
-
*
|
|
2626
|
-
* then manually emits the current value once.
|
|
2681
|
+
* Restore persisted filters from localStorage.
|
|
2682
|
+
* We patchValue with emitEvent:false to avoid double emission.
|
|
2627
2683
|
*/
|
|
2628
|
-
restoreFilterState() {
|
|
2684
|
+
restoreFilterState(cfg) {
|
|
2629
2685
|
const stored = localStorage.getItem(this.FILTER_KEY);
|
|
2630
2686
|
if (!stored)
|
|
2631
2687
|
return;
|
|
2632
2688
|
try {
|
|
2633
2689
|
const parsed = JSON.parse(stored);
|
|
2634
|
-
|
|
2635
|
-
const validKeys = this.filters.map((f) => f.key);
|
|
2636
|
-
const filteredByKey = Object.keys(parsed)
|
|
2637
|
-
.filter((k) => validKeys.includes(k))
|
|
2638
|
-
.reduce((acc, k) => {
|
|
2639
|
-
acc[k] = parsed[k];
|
|
2640
|
-
return acc;
|
|
2641
|
-
}, {});
|
|
2642
|
-
const sanitized = this.sanitizeByOptions(filteredByKey, this.filters);
|
|
2643
|
-
this.filtersForm.patchValue(sanitized, { emitEvent: false });
|
|
2644
|
-
this.applyFiltersEvent.emit(this.filtersForm.getRawValue());
|
|
2645
|
-
}
|
|
2646
|
-
catch (e) {
|
|
2647
|
-
console.warn('Invalid filter state in localStorage:', e);
|
|
2648
|
-
}
|
|
2649
|
-
}
|
|
2650
|
-
// helper: remove all values that do not exist in the options for the given filter.key
|
|
2651
|
-
sanitizeByOptions(formValue, filtersCfg) {
|
|
2652
|
-
const cfgMap = new Map(filtersCfg.map((f) => [f.key, f]));
|
|
2653
|
-
const cleaned = {};
|
|
2654
|
-
Object.keys(formValue ?? {}).forEach((key) => {
|
|
2655
|
-
const cfg = cfgMap.get(key);
|
|
2656
|
-
if (!cfg)
|
|
2657
|
-
return;
|
|
2658
|
-
// checkboxes: just ensure boolean
|
|
2659
|
-
if (cfg.type === 'checkbox') {
|
|
2660
|
-
cleaned[key] = !!formValue[key];
|
|
2690
|
+
if (!parsed || typeof parsed !== 'object')
|
|
2661
2691
|
return;
|
|
2692
|
+
// allow only known keys
|
|
2693
|
+
const known = new Set(cfg.map((f) => f.key));
|
|
2694
|
+
const patch = {};
|
|
2695
|
+
for (const k of Object.keys(parsed)) {
|
|
2696
|
+
if (known.has(k))
|
|
2697
|
+
patch[k] = parsed[k];
|
|
2662
2698
|
}
|
|
2663
|
-
|
|
2664
|
-
const
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
if (
|
|
2673
|
-
|
|
2674
|
-
}
|
|
2675
|
-
else if (keep(val)) {
|
|
2676
|
-
cleaned[key] = val;
|
|
2699
|
+
// ensure multiselect never becomes null
|
|
2700
|
+
for (const f of cfg) {
|
|
2701
|
+
if (f.type === 'multiselect') {
|
|
2702
|
+
const val = patch[f.key];
|
|
2703
|
+
if (val == null)
|
|
2704
|
+
patch[f.key] = [];
|
|
2705
|
+
else if (!Array.isArray(val))
|
|
2706
|
+
patch[f.key] = [val];
|
|
2707
|
+
}
|
|
2708
|
+
if (f.type === 'checkbox')
|
|
2709
|
+
patch[f.key] = !!patch[f.key];
|
|
2677
2710
|
}
|
|
2678
|
-
|
|
2679
|
-
|
|
2711
|
+
this.filtersForm.patchValue(patch, { emitEvent: false });
|
|
2712
|
+
}
|
|
2713
|
+
catch {
|
|
2714
|
+
// ignore invalid state
|
|
2715
|
+
}
|
|
2716
|
+
}
|
|
2717
|
+
// ---------------------------------------------------------------------------
|
|
2718
|
+
// Columns
|
|
2719
|
+
// ---------------------------------------------------------------------------
|
|
2720
|
+
/** Called from listbox selection */
|
|
2721
|
+
onColumnSelectionChange(newSelection) {
|
|
2722
|
+
this.selectedColumns = newSelection;
|
|
2723
|
+
this.applyColumns();
|
|
2724
|
+
}
|
|
2725
|
+
/** Keep selection in original column order (stable UX) */
|
|
2726
|
+
get selectedColumns() {
|
|
2727
|
+
return this._selectedColumns;
|
|
2728
|
+
}
|
|
2729
|
+
set selectedColumns(val) {
|
|
2730
|
+
const wanted = new Set((val ?? []).map((v) => v.field));
|
|
2731
|
+
this._selectedColumns = (this.columns ?? []).filter((c) => wanted.has(c.field));
|
|
2732
|
+
}
|
|
2733
|
+
applyColumns() {
|
|
2734
|
+
this.emitColumns(this._selectedColumns);
|
|
2735
|
+
this.persistState(this._selectedColumns, this.COLUMN_KEY);
|
|
2736
|
+
}
|
|
2737
|
+
resetColumns() {
|
|
2738
|
+
this._selectedColumns = [...(this.columns ?? [])];
|
|
2739
|
+
this.applyColumns();
|
|
2740
|
+
}
|
|
2741
|
+
emitColumns(cols) {
|
|
2742
|
+
this.applyColumnsEvent.emit((cols ?? []).map((c) => c.field));
|
|
2680
2743
|
}
|
|
2681
|
-
/**
|
|
2682
|
-
* Restore previously saved visible columns set.
|
|
2683
|
-
* If saved state is invalid or outdated, fall back to default (all non-hidden).
|
|
2684
|
-
*/
|
|
2685
2744
|
restoreColumnState() {
|
|
2686
2745
|
const stored = localStorage.getItem(this.COLUMN_KEY);
|
|
2687
|
-
if (stored) {
|
|
2688
|
-
|
|
2689
|
-
|
|
2690
|
-
|
|
2691
|
-
|
|
2692
|
-
|
|
2693
|
-
|
|
2746
|
+
if (!stored) {
|
|
2747
|
+
this.emitColumns(this._selectedColumns);
|
|
2748
|
+
return;
|
|
2749
|
+
}
|
|
2750
|
+
try {
|
|
2751
|
+
const parsed = JSON.parse(stored);
|
|
2752
|
+
if (!Array.isArray(parsed)) {
|
|
2753
|
+
this.emitColumns(this._selectedColumns);
|
|
2694
2754
|
return;
|
|
2695
2755
|
}
|
|
2696
|
-
|
|
2697
|
-
|
|
2756
|
+
const valid = parsed.filter((sc) => (this.columns ?? []).some((c) => c.field === sc.field));
|
|
2757
|
+
if (!valid.length) {
|
|
2758
|
+
this.emitColumns(this._selectedColumns);
|
|
2759
|
+
return;
|
|
2698
2760
|
}
|
|
2761
|
+
this.selectedColumns = valid;
|
|
2762
|
+
this.emitColumns(this._selectedColumns);
|
|
2763
|
+
}
|
|
2764
|
+
catch {
|
|
2765
|
+
this.emitColumns(this._selectedColumns);
|
|
2699
2766
|
}
|
|
2700
|
-
// Fallback → use all non-hidden columns
|
|
2701
|
-
const defaultKeys = this._selectedColumns.map((col) => col.field);
|
|
2702
|
-
this.selectedColumns = this._selectedColumns;
|
|
2703
|
-
this.applyColumnsEvent.emit(defaultKeys);
|
|
2704
2767
|
}
|
|
2705
|
-
|
|
2768
|
+
// ---------------------------------------------------------------------------
|
|
2769
|
+
// UI actions
|
|
2770
|
+
// ---------------------------------------------------------------------------
|
|
2706
2771
|
emitSearch(query) {
|
|
2707
|
-
this.searchChange.emit(query);
|
|
2772
|
+
this.searchChange.emit(query ?? '');
|
|
2708
2773
|
}
|
|
2709
|
-
|
|
2710
|
-
|
|
2711
|
-
return Object.values(this.filtersForm.value).some((value) => value !== null && value !== undefined && value !== '');
|
|
2774
|
+
handleActionClick(actionPayload) {
|
|
2775
|
+
this.actionClick.emit(actionPayload);
|
|
2712
2776
|
}
|
|
2713
|
-
|
|
2777
|
+
// ---------------------------------------------------------------------------
|
|
2778
|
+
// Utilities
|
|
2779
|
+
// ---------------------------------------------------------------------------
|
|
2780
|
+
/**
|
|
2781
|
+
* Used by badge indicator to show "filters active".
|
|
2782
|
+
* It checks raw form value, not normalized payload.
|
|
2783
|
+
*/
|
|
2714
2784
|
hasFormValues() {
|
|
2715
|
-
|
|
2716
|
-
|
|
2785
|
+
const v = this.filtersForm?.value ?? {};
|
|
2786
|
+
return Object.values(v).some((x) => {
|
|
2787
|
+
if (x == null || x === '')
|
|
2717
2788
|
return false;
|
|
2718
|
-
if (Array.isArray(
|
|
2719
|
-
return
|
|
2720
|
-
if (typeof
|
|
2721
|
-
return Object.keys(
|
|
2789
|
+
if (Array.isArray(x))
|
|
2790
|
+
return x.length > 0;
|
|
2791
|
+
if (typeof x === 'object')
|
|
2792
|
+
return Object.keys(x).length > 0;
|
|
2722
2793
|
return true;
|
|
2723
2794
|
});
|
|
2724
2795
|
}
|
|
2725
|
-
|
|
2726
|
-
|
|
2727
|
-
|
|
2728
|
-
*/
|
|
2729
|
-
applyFilters() {
|
|
2730
|
-
this.applyFiltersEvent.emit(this.filtersForm.value);
|
|
2731
|
-
this.columnsPopover?.hide();
|
|
2732
|
-
if (this.hasValues()) {
|
|
2733
|
-
this.storeTableState(this.filtersForm.value, this.FILTER_KEY);
|
|
2734
|
-
}
|
|
2796
|
+
clearSelectFilter(key) {
|
|
2797
|
+
// Important: multiselect must be [] not null (prevents "selects everything" bugs)
|
|
2798
|
+
this.filtersForm.get(key)?.setValue([], { emitEvent: true });
|
|
2735
2799
|
}
|
|
2736
|
-
/**
|
|
2737
|
-
* Clear all filters: reset form, wipe persisted state, and emit.
|
|
2738
|
-
*/
|
|
2739
2800
|
resetFilters() {
|
|
2740
|
-
|
|
2741
|
-
this.
|
|
2742
|
-
this.
|
|
2743
|
-
|
|
2744
|
-
|
|
2745
|
-
|
|
2746
|
-
|
|
2747
|
-
|
|
2748
|
-
|
|
2749
|
-
|
|
2750
|
-
this.storeTableState(this.selectedColumns, this.COLUMN_KEY);
|
|
2751
|
-
}
|
|
2752
|
-
/** Reset visible columns to all available, then emit/persist. */
|
|
2753
|
-
resetColumns() {
|
|
2754
|
-
this._selectedColumns = [...this.columns];
|
|
2755
|
-
this.applyColumns();
|
|
2756
|
-
}
|
|
2757
|
-
/** Thin wrapper to persist a JSON-serializable state in localStorage */
|
|
2758
|
-
storeTableState(state, key) {
|
|
2759
|
-
const isEmpty = (v) => v == null ||
|
|
2760
|
-
(typeof v === 'object' &&
|
|
2761
|
-
!Array.isArray(v) &&
|
|
2762
|
-
Object.keys(v).length === 0) ||
|
|
2763
|
-
(Array.isArray(v) && v.length === 0);
|
|
2764
|
-
if (isEmpty(state)) {
|
|
2801
|
+
// Reset form -> then also clear persisted state
|
|
2802
|
+
this.filtersForm.reset({}, { emitEvent: true });
|
|
2803
|
+
localStorage.removeItem(this.FILTER_KEY);
|
|
2804
|
+
this.filtersPopover?.hide();
|
|
2805
|
+
}
|
|
2806
|
+
persistState(state, key) {
|
|
2807
|
+
const isEmpty = state == null ||
|
|
2808
|
+
(Array.isArray(state) && state.length === 0) ||
|
|
2809
|
+
(typeof state === 'object' && !Array.isArray(state) && Object.keys(state).length === 0);
|
|
2810
|
+
if (isEmpty)
|
|
2765
2811
|
localStorage.removeItem(key);
|
|
2766
|
-
|
|
2767
|
-
else {
|
|
2812
|
+
else
|
|
2768
2813
|
localStorage.setItem(key, JSON.stringify(state));
|
|
2769
|
-
}
|
|
2770
|
-
}
|
|
2771
|
-
/**
|
|
2772
|
-
* Handler for the PrimeNG MultiSelect clear button.
|
|
2773
|
-
* Ensures multiselect controls are set to empty arrays instead of null.
|
|
2774
|
-
*/
|
|
2775
|
-
clearSelectFilter(key) {
|
|
2776
|
-
this.filtersForm.get(key)?.setValue([]);
|
|
2777
|
-
this.storeTableState(this.filtersForm.value, this.FILTER_KEY);
|
|
2778
|
-
}
|
|
2779
|
-
/** Getter/Setter that keeps selectedColumns in the original column order */
|
|
2780
|
-
get selectedColumns() {
|
|
2781
|
-
return this._selectedColumns;
|
|
2782
|
-
}
|
|
2783
|
-
set selectedColumns(val) {
|
|
2784
|
-
this._selectedColumns = this.columns.filter((col) => val.some((v) => v.field === col.field));
|
|
2785
|
-
}
|
|
2786
|
-
/** Bubble up action clicks with the current selected items (for bulk actions) */
|
|
2787
|
-
handleActionClick(action) {
|
|
2788
|
-
this.actionClick.emit({ action, selectedItems: this.selectedItems });
|
|
2789
2814
|
}
|
|
2790
2815
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2791
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems", filters: "filters" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "columnsPopover", first: true, predicate: ["columnsPopover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n <!-- Global Actions & Tabs -->\n <div class=\"flex align-items-center gap-2\">\n <phoenix-data-table-tabs\n [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n [actions]=\"tableConfiguration.tabs\"\n (actionClick)=\"actionClick.emit($event)\"\n >\n </phoenix-data-table-tabs>\n <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"actionClick.emit($event)\"\n >\n </phoenix-data-table-action>\n </ng-container>\n </div>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Caption Filters (shown outside popover) -->\n @for(control of filters; track control.key) { @if(control.isInCaption) {\n @switch(control.type) { @case ('dropdown') {\n <p-select\n class=\"w-12rem\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControl]=\"$any(filtersForm.get(control.key))\"\n placeholder=\"{{ control.label | translate }}\"\n />\n } @case ('multiselect') {\n <p-multiselect\n class=\"w-12rem\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n optionValue=\"key\"\n [formControl]=\"$any(filtersForm.get(control.key))\"\n [showClear]=\"true\"\n placeholder=\"{{ control.label | translate }}\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n } } } }\n <!-- Filter, Columns, Search, More -->\n @if(tableConfiguration.hasFilter){ @if( hasFormValues() ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span\n pRipple\n class=\"cursor-pointer\"\n (click)=\"filtersPopover.toggle($event)\"\n >\n <i class=\"pi pi-filter\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span\n pRipple\n class=\"cursor-pointer p-2\"\n (click)=\"filtersPopover.toggle($event)\"\n >\n <i class=\"pi pi-filter\"></i>\n </span>\n } } @if(tableConfiguration.hasColumns){ @if( columns.length !=\n _selectedColumns.length ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span\n pRipple\n class=\"cursor-pointer\"\n (click)=\"columnsPopover.toggle($event)\"\n >\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span\n pRipple\n class=\"cursor-pointer p-2\"\n (click)=\"columnsPopover.toggle($event)\"\n >\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n\n } }\n\n <div class=\"flex\">\n @if(tableConfiguration.hasSearch){\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n type=\"text\"\n (input)=\"emitSearch($any($event.target).value)\"\n pInputText\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n />\n </p-iconfield>\n } @if(tableConfiguration.hasMore){\n <phoenix-data-table-action\n *ngIf=\"tableConfiguration?.hasMore && tableConfiguration?.moreActions\"\n [actionConfig]=\"tableConfiguration.moreActions\"\n (actionClick)=\"actionClick.emit($event)\"\n ></phoenix-data-table-action>\n }\n </div>\n </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.FILTERS\" | translate }}</div>\n <div>\n <!-- <p-button\n icon=\"pi pi-save\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SAVE' | translate }}\"\n class=\"mr-2\"\n (click)=\"applyFilters()\"\n /> -->\n\n <p-button\n icon=\"pi pi-refresh\n \"\n [text]=\"true\"\n label=\"{{ 'ACTION.CLEAR' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetFilters()\"\n />\n </div>\n </div>\n\n <form [formGroup]=\"filtersForm\">\n @for(control of filters; track control.key) { @if(!control.isInCaption) {\n @switch(control.type) { @case ('checkbox') {\n <div class=\"mb-2\">\n <p-checkbox\n binary=\"true\"\n type=\"checkbox\"\n [formControlName]=\"control.key\"\n />\n <label class=\"ml-2\">{{ control.label | translate }}</label>\n </div>\n } @case ('dropdown') {\n <div class=\"mb-2\">\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-select\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n </div>\n } @case ('multiselect') {\n <div class=\"mb-2\">\n <p-floatlabel variant=\"on\">\n <p-multiselect\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n optionValue=\"key\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n <label for=\"username\">{{ control.label | translate }}</label>\n </p-floatlabel>\n <!-- <label class=\"mb-2 block\">{{ control.label }}</label> -->\n </div>\n } @case ('person-dropdown'){\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-multiselect\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n class=\"w-full\"\n [showClear]=\"true\"\n >\n <ng-template #selectedItem let-selectedOption>\n <div class=\"flex items-center gap-2\" *ngIf=\"selectedOption\">\n <p-avatar\n [label]=\"selectedOption.label.charAt(0).toUpperCase()\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n <div>{{ selectedOption.label | translate }}</div>\n </div>\n </ng-template>\n <ng-template let-person #item>\n <div class=\"flex align-items-center gap-2\">\n <p-avatar\n [label]=\"person.label.charAt(0).toUpperCase()\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n <div>{{ person.label | translate }}</div>\n </div>\n </ng-template>\n <ng-template #dropdownicon>\n <i class=\"pi pi-user\"></i>\n </ng-template>\n <!-- <ng-template #header>\n <div class=\"font-medium p-3\">Available Countries</div>\n </ng-template> -->\n <!-- <ng-template #footer>\n <div class=\"p-3\">\n <p-button label=\"Add New\" fluid severity=\"secondary\" text size=\"small\" icon=\"pi pi-plus\" />\n </div>\n </ng-template> -->\n </p-multiselect>\n } @default{\n <div>{{ control.type }}</div>\n } } } }\n </form>\n </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.COLUMNS\" | translate }}</div>\n <div>\n <p-button\n icon=\"pi pi-eye\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SHOW_ALL' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetColumns()\"\n />\n </div>\n </div>\n\n <p-listbox\n [options]=\"columns\"\n [ngModel]=\"_selectedColumns\"\n (ngModelChange)=\"onColumnSelectionChange($event)\"\n [multiple]=\"true\"\n [metaKeySelection]=\"false\"\n [listStyle]=\"{ 'max-height': '420px' }\"\n [attr.data-cy]=\"'table-list-box'\"\n >\n <ng-template let-item pTemplate=\"item\">\n <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n <i\n *ngIf=\"!(item | isSelected : selectedColumns)\"\n class=\"pi pi-eye-slash\"\n ></i>\n <span class=\"ml-2\"> {{ item.header | translate }}</span>\n </ng-template>\n </p-listbox>\n </div>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i5.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i4$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i10.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i16.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["hostName", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i13.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i14.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i15.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }] });
|
|
2816
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", selectedItems: "selectedItems", filters: "filters" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "filtersPopover", first: true, predicate: ["filtersPopover"], descendants: true }, { propertyName: "columnsPopover", first: true, predicate: ["columnsPopover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n <!-- Left: Tabs + Global actions -->\n <div class=\"flex align-items-center gap-2\">\n <phoenix-data-table-tabs\n [attr.data-cy]=\"'table-select-button-' + (tableConfiguration?.tabs?.key ?? 'tabs')\"\n [actions]=\"tableConfiguration?.tabs\"\n (actionClick)=\"actionClick.emit($event)\"\n />\n\n @for (action of (tableConfiguration?.globalActions ?? []); track action?.key ?? $index) {\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"actionClick.emit($event)\"\n />\n }\n </div>\n\n <!-- Right: caption filters + icons + search + more -->\n <div class=\"flex align-items-center gap-2\">\n <!-- Filters in caption row -->\n @for (control of (filters ?? []); track control.key) {\n @if (control.isInCaption) {\n @switch (control.type ?? (control.options?.length ? 'dropdown' : 'text')) {\n @case ('dropdown') {\n <p-select\n class=\"w-12rem\"\n [options]=\"control.options ?? []\"\n [optionLabel]=\"control.optionLabel ?? 'label'\"\n [optionValue]=\"control.optionValue ?? 'key'\"\n [formControl]=\"$any(filtersForm.get(control.key))\"\n [showClear]=\"true\"\n placeholder=\"{{ control.label | translate }}\"\n (onClear)=\"filtersForm.get(control.key)?.setValue('')\"\n />\n }\n @case ('multiselect') {\n <p-multiselect\n class=\"w-12rem\"\n [options]=\"control.options ?? []\"\n [optionLabel]=\"control.optionLabel ?? 'label'\"\n [optionValue]=\"control.optionValue ?? 'key'\"\n [formControl]=\"$any(filtersForm.get(control.key))\"\n [showClear]=\"true\"\n placeholder=\"{{ control.label | translate }}\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n }\n @case ('checkbox') {\n <p-checkbox\n binary=\"true\"\n [formControl]=\"$any(filtersForm.get(control.key))\"\n />\n }\n @default {\n <!-- text -->\n <input\n class=\"w-12rem\"\n pInputText\n [formControl]=\"$any(filtersForm.get(control.key))\"\n placeholder=\"{{ control.label | translate }}\"\n />\n }\n }\n }\n }\n\n <!-- Filter icon -->\n @if (tableConfiguration?.hasFilter) {\n @if (hasFormValues()) {\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span pRipple class=\"cursor-pointer\" (click)=\"filtersPopover?.toggle($event)\">\n <i class=\"pi pi-filter\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span pRipple class=\"cursor-pointer p-2\" (click)=\"filtersPopover?.toggle($event)\">\n <i class=\"pi pi-filter\"></i>\n </span>\n }\n }\n\n <!-- Columns icon -->\n @if (tableConfiguration?.hasColumns) {\n @if (columnsChanged) {\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span pRipple class=\"cursor-pointer\" (click)=\"columnsPopover?.toggle($event)\">\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span pRipple class=\"cursor-pointer p-2\" (click)=\"columnsPopover?.toggle($event)\">\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n }\n }\n\n <!-- Search + More -->\n <div class=\"flex\">\n @if (tableConfiguration?.hasSearch) {\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n type=\"text\"\n pInputText\n (input)=\"emitSearch($any($event.target).value)\"\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n />\n </p-iconfield>\n }\n\n @if (tableConfiguration?.hasMore && tableConfiguration?.moreActions) {\n <phoenix-data-table-action\n [actionConfig]=\"tableConfiguration.moreActions\"\n (actionClick)=\"actionClick.emit($event)\"\n />\n }\n </div>\n </div>\n</div>\n\n<!-- Filters Popover -->\n<p-popover #filtersPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ 'LABELS.FILTERS' | translate }}</div>\n <p-button\n icon=\"pi pi-refresh\"\n [text]=\"true\"\n label=\"{{ 'ACTION.CLEAR' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetFilters()\"\n />\n </div>\n\n <form [formGroup]=\"filtersForm\">\n @for (control of (filters ?? []); track control.key) {\n @if (!control.isInCaption) {\n @switch (control.type ?? (control.options?.length ? 'dropdown' : 'text')) {\n @case ('checkbox') {\n <div class=\"mb-2\">\n <p-checkbox binary=\"true\" [formControlName]=\"control.key\" />\n <label class=\"ml-2\">{{ control.label | translate }}</label>\n </div>\n }\n @case ('dropdown') {\n <div class=\"mb-2\">\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-select\n class=\"w-full\"\n [options]=\"control.options ?? []\"\n [optionLabel]=\"control.optionLabel ?? 'label'\"\n [optionValue]=\"control.optionValue ?? 'key'\"\n [showClear]=\"true\"\n [formControlName]=\"control.key\"\n (onClear)=\"filtersForm.get(control.key)?.setValue('')\"\n />\n </div>\n }\n @case ('multiselect') {\n <div class=\"mb-2\">\n <p-floatlabel variant=\"on\">\n <p-multiselect\n class=\"w-full\"\n [options]=\"control.options ?? []\"\n [optionLabel]=\"control.optionLabel ?? 'label'\"\n [optionValue]=\"control.optionValue ?? 'key'\"\n [showClear]=\"true\"\n [formControlName]=\"control.key\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n <label>{{ control.label | translate }}</label>\n </p-floatlabel>\n </div>\n }\n @default {\n <div class=\"mb-2\">\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <input\n class=\"w-full\"\n pInputText\n [formControlName]=\"control.key\"\n placeholder=\"{{ control.label | translate }}\"\n />\n </div>\n }\n }\n }\n }\n </form>\n </div>\n</p-popover>\n\n<!-- Columns Popover -->\n<p-popover #columnsPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ 'LABELS.COLUMNS' | translate }}</div>\n <p-button\n icon=\"pi pi-eye\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SHOW_ALL' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetColumns()\"\n />\n </div>\n\n <p-listbox\n [options]=\"columns\"\n [ngModel]=\"_selectedColumns\"\n (ngModelChange)=\"onColumnSelectionChange($event)\"\n [multiple]=\"true\"\n [metaKeySelection]=\"false\"\n [listStyle]=\"{ 'max-height': '420px' }\"\n [attr.data-cy]=\"'table-list-box'\"\n >\n <ng-template pTemplate=\"item\" let-item>\n @if (item | isSelected : selectedColumns) {\n <i class=\"pi pi-eye\"></i>\n } @else {\n <i class=\"pi pi-eye-slash\"></i>\n }\n <span class=\"ml-2\">{{ item.header | translate }}</span>\n </ng-template>\n </p-listbox>\n </div>\n</p-popover>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i5$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i5.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i4$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i16.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["hostName", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i12.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i13.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i14.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }] });
|
|
2792
2817
|
}
|
|
2793
2818
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableCaptionComponent, decorators: [{
|
|
2794
2819
|
type: Component,
|
|
@@ -2797,33 +2822,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2797
2822
|
PopoverModule,
|
|
2798
2823
|
ButtonModule,
|
|
2799
2824
|
SelectModule,
|
|
2825
|
+
MultiSelectModule,
|
|
2800
2826
|
InputTextModule,
|
|
2801
2827
|
FormsModule,
|
|
2802
2828
|
ReactiveFormsModule,
|
|
2803
2829
|
InputIconModule,
|
|
2804
2830
|
IconFieldModule,
|
|
2805
|
-
MultiSelectModule,
|
|
2806
|
-
PhoenixDataTableActionComponent,
|
|
2807
|
-
PhoenixDataTableTabsComponent,
|
|
2808
2831
|
ListboxModule,
|
|
2809
|
-
|
|
2810
|
-
IsSelectedPipe,
|
|
2811
|
-
AvatarModule,
|
|
2812
|
-
BadgeModule,
|
|
2832
|
+
CheckboxModule,
|
|
2813
2833
|
OverlayBadgeModule,
|
|
2814
2834
|
RippleModule,
|
|
2815
2835
|
FloatLabelModule,
|
|
2816
|
-
|
|
2817
|
-
|
|
2818
|
-
|
|
2836
|
+
TranslateModule,
|
|
2837
|
+
PhoenixDataTableActionComponent,
|
|
2838
|
+
PhoenixDataTableTabsComponent,
|
|
2839
|
+
IsSelectedPipe,
|
|
2840
|
+
], template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n <!-- Left: Tabs + Global actions -->\n <div class=\"flex align-items-center gap-2\">\n <phoenix-data-table-tabs\n [attr.data-cy]=\"'table-select-button-' + (tableConfiguration?.tabs?.key ?? 'tabs')\"\n [actions]=\"tableConfiguration?.tabs\"\n (actionClick)=\"actionClick.emit($event)\"\n />\n\n @for (action of (tableConfiguration?.globalActions ?? []); track action?.key ?? $index) {\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"actionClick.emit($event)\"\n />\n }\n </div>\n\n <!-- Right: caption filters + icons + search + more -->\n <div class=\"flex align-items-center gap-2\">\n <!-- Filters in caption row -->\n @for (control of (filters ?? []); track control.key) {\n @if (control.isInCaption) {\n @switch (control.type ?? (control.options?.length ? 'dropdown' : 'text')) {\n @case ('dropdown') {\n <p-select\n class=\"w-12rem\"\n [options]=\"control.options ?? []\"\n [optionLabel]=\"control.optionLabel ?? 'label'\"\n [optionValue]=\"control.optionValue ?? 'key'\"\n [formControl]=\"$any(filtersForm.get(control.key))\"\n [showClear]=\"true\"\n placeholder=\"{{ control.label | translate }}\"\n (onClear)=\"filtersForm.get(control.key)?.setValue('')\"\n />\n }\n @case ('multiselect') {\n <p-multiselect\n class=\"w-12rem\"\n [options]=\"control.options ?? []\"\n [optionLabel]=\"control.optionLabel ?? 'label'\"\n [optionValue]=\"control.optionValue ?? 'key'\"\n [formControl]=\"$any(filtersForm.get(control.key))\"\n [showClear]=\"true\"\n placeholder=\"{{ control.label | translate }}\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n }\n @case ('checkbox') {\n <p-checkbox\n binary=\"true\"\n [formControl]=\"$any(filtersForm.get(control.key))\"\n />\n }\n @default {\n <!-- text -->\n <input\n class=\"w-12rem\"\n pInputText\n [formControl]=\"$any(filtersForm.get(control.key))\"\n placeholder=\"{{ control.label | translate }}\"\n />\n }\n }\n }\n }\n\n <!-- Filter icon -->\n @if (tableConfiguration?.hasFilter) {\n @if (hasFormValues()) {\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span pRipple class=\"cursor-pointer\" (click)=\"filtersPopover?.toggle($event)\">\n <i class=\"pi pi-filter\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span pRipple class=\"cursor-pointer p-2\" (click)=\"filtersPopover?.toggle($event)\">\n <i class=\"pi pi-filter\"></i>\n </span>\n }\n }\n\n <!-- Columns icon -->\n @if (tableConfiguration?.hasColumns) {\n @if (columnsChanged) {\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span pRipple class=\"cursor-pointer\" (click)=\"columnsPopover?.toggle($event)\">\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span pRipple class=\"cursor-pointer p-2\" (click)=\"columnsPopover?.toggle($event)\">\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n }\n }\n\n <!-- Search + More -->\n <div class=\"flex\">\n @if (tableConfiguration?.hasSearch) {\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n type=\"text\"\n pInputText\n (input)=\"emitSearch($any($event.target).value)\"\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n />\n </p-iconfield>\n }\n\n @if (tableConfiguration?.hasMore && tableConfiguration?.moreActions) {\n <phoenix-data-table-action\n [actionConfig]=\"tableConfiguration.moreActions\"\n (actionClick)=\"actionClick.emit($event)\"\n />\n }\n </div>\n </div>\n</div>\n\n<!-- Filters Popover -->\n<p-popover #filtersPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ 'LABELS.FILTERS' | translate }}</div>\n <p-button\n icon=\"pi pi-refresh\"\n [text]=\"true\"\n label=\"{{ 'ACTION.CLEAR' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetFilters()\"\n />\n </div>\n\n <form [formGroup]=\"filtersForm\">\n @for (control of (filters ?? []); track control.key) {\n @if (!control.isInCaption) {\n @switch (control.type ?? (control.options?.length ? 'dropdown' : 'text')) {\n @case ('checkbox') {\n <div class=\"mb-2\">\n <p-checkbox binary=\"true\" [formControlName]=\"control.key\" />\n <label class=\"ml-2\">{{ control.label | translate }}</label>\n </div>\n }\n @case ('dropdown') {\n <div class=\"mb-2\">\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-select\n class=\"w-full\"\n [options]=\"control.options ?? []\"\n [optionLabel]=\"control.optionLabel ?? 'label'\"\n [optionValue]=\"control.optionValue ?? 'key'\"\n [showClear]=\"true\"\n [formControlName]=\"control.key\"\n (onClear)=\"filtersForm.get(control.key)?.setValue('')\"\n />\n </div>\n }\n @case ('multiselect') {\n <div class=\"mb-2\">\n <p-floatlabel variant=\"on\">\n <p-multiselect\n class=\"w-full\"\n [options]=\"control.options ?? []\"\n [optionLabel]=\"control.optionLabel ?? 'label'\"\n [optionValue]=\"control.optionValue ?? 'key'\"\n [showClear]=\"true\"\n [formControlName]=\"control.key\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n <label>{{ control.label | translate }}</label>\n </p-floatlabel>\n </div>\n }\n @default {\n <div class=\"mb-2\">\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <input\n class=\"w-full\"\n pInputText\n [formControlName]=\"control.key\"\n placeholder=\"{{ control.label | translate }}\"\n />\n </div>\n }\n }\n }\n }\n </form>\n </div>\n</p-popover>\n\n<!-- Columns Popover -->\n<p-popover #columnsPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ 'LABELS.COLUMNS' | translate }}</div>\n <p-button\n icon=\"pi pi-eye\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SHOW_ALL' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetColumns()\"\n />\n </div>\n\n <p-listbox\n [options]=\"columns\"\n [ngModel]=\"_selectedColumns\"\n (ngModelChange)=\"onColumnSelectionChange($event)\"\n [multiple]=\"true\"\n [metaKeySelection]=\"false\"\n [listStyle]=\"{ 'max-height': '420px' }\"\n [attr.data-cy]=\"'table-list-box'\"\n >\n <ng-template pTemplate=\"item\" let-item>\n @if (item | isSelected : selectedColumns) {\n <i class=\"pi pi-eye\"></i>\n } @else {\n <i class=\"pi pi-eye-slash\"></i>\n }\n <span class=\"ml-2\">{{ item.header | translate }}</span>\n </ng-template>\n </p-listbox>\n </div>\n</p-popover>" }]
|
|
2841
|
+
}], propDecorators: { filtersPopover: [{
|
|
2842
|
+
type: ViewChild,
|
|
2843
|
+
args: ['filtersPopover']
|
|
2844
|
+
}], columnsPopover: [{
|
|
2819
2845
|
type: ViewChild,
|
|
2820
2846
|
args: ['columnsPopover']
|
|
2821
2847
|
}], tableConfiguration: [{
|
|
2822
2848
|
type: Input
|
|
2823
2849
|
}], columns: [{
|
|
2824
2850
|
type: Input
|
|
2825
|
-
}], searchQuery: [{
|
|
2826
|
-
type: Input
|
|
2827
2851
|
}], selectedItems: [{
|
|
2828
2852
|
type: Input
|
|
2829
2853
|
}], filters: [{
|
|
@@ -3213,97 +3237,280 @@ function buildFileName(baseKey, ext = 'xlsx') {
|
|
|
3213
3237
|
return `${baseKey}_${yyyy}-${MM}-${dd}_${hh}-${mm}.${ext}`;
|
|
3214
3238
|
}
|
|
3215
3239
|
|
|
3240
|
+
/**
|
|
3241
|
+
* Default "More" dropdown actions used when tableConfiguration.moreActions is missing.
|
|
3242
|
+
* Keeps behavior consistent across tables.
|
|
3243
|
+
*/
|
|
3216
3244
|
const DEFAULT_MORE_ACTIONS = {
|
|
3217
3245
|
context: tableButtonContext.MORE,
|
|
3218
3246
|
type: 'menu',
|
|
3219
3247
|
buttonType: 'multiselect',
|
|
3220
3248
|
items: [
|
|
3221
3249
|
{ key: 'EXPORT_PDF', label: 'ACTION.EXPORT_PDF', icon: 'pi pi-file-pdf' },
|
|
3222
|
-
{
|
|
3223
|
-
key: 'EXPORT_EXCEL',
|
|
3224
|
-
label: 'ACTION.EXPORT_EXCEL',
|
|
3225
|
-
icon: 'pi pi-file-excel',
|
|
3226
|
-
},
|
|
3250
|
+
{ key: 'EXPORT_EXCEL', label: 'ACTION.EXPORT_EXCEL', icon: 'pi pi-file-excel' },
|
|
3227
3251
|
],
|
|
3228
3252
|
};
|
|
3229
3253
|
class TableComponent {
|
|
3254
|
+
/** PrimeNG Table reference (used for sort meta + virtual scroll helpers). */
|
|
3230
3255
|
dt;
|
|
3231
|
-
/** Input data for the table. Automatically updates original and derived states. */
|
|
3232
|
-
set data(value) {
|
|
3233
|
-
this.originalData = value ?? [];
|
|
3234
|
-
this.allData = [...value];
|
|
3235
|
-
this.totalRecords = this.allData.length;
|
|
3236
|
-
this.loadLazyData({ first: 0, rows: 100 });
|
|
3237
|
-
}
|
|
3238
|
-
/** Column definitions provided by the parent. */
|
|
3239
|
-
columns = [];
|
|
3240
|
-
/** Preselected columns (used to restore user preferences). */
|
|
3241
|
-
selectedColumnsInput = [];
|
|
3242
|
-
/** Table configuration (key, toggles, options). */
|
|
3243
|
-
tableConfiguration;
|
|
3244
|
-
/** Dynamic filters passed from parent. */
|
|
3245
|
-
filters;
|
|
3246
|
-
/** Emits when a row-level or global action is triggered. */
|
|
3247
|
-
actionClick = new EventEmitter();
|
|
3248
|
-
/** Emits when a row is clicked or selected. */
|
|
3249
|
-
rowSelection = new EventEmitter();
|
|
3250
|
-
/** Emits when checkbox selection changes. */
|
|
3251
|
-
checkBoxSelection = new EventEmitter();
|
|
3252
|
-
/** Emits when columns are saved or changed. */
|
|
3253
|
-
saveColumns = new EventEmitter();
|
|
3254
|
-
/** i18n translation service. */
|
|
3255
3256
|
translateService = inject(TranslateService);
|
|
3256
|
-
/** Change detection reference for delayed updates. */
|
|
3257
3257
|
cdr = inject(ChangeDetectorRef);
|
|
3258
|
-
|
|
3259
|
-
|
|
3260
|
-
|
|
3258
|
+
// ============================================================
|
|
3259
|
+
// DATASETS
|
|
3260
|
+
// ============================================================
|
|
3261
|
+
/**
|
|
3262
|
+
* originalData:
|
|
3263
|
+
* The raw dataset received through @Input() set data().
|
|
3264
|
+
* We never mutate this array; it is the "source of truth".
|
|
3265
|
+
*/
|
|
3261
3266
|
originalData = [];
|
|
3262
|
-
/**
|
|
3267
|
+
/**
|
|
3268
|
+
* allData:
|
|
3269
|
+
* The dataset after applying filters and global search.
|
|
3270
|
+
* This is the "base dataset" that sorting runs on.
|
|
3271
|
+
*/
|
|
3272
|
+
allData = [];
|
|
3273
|
+
/**
|
|
3274
|
+
* tableData:
|
|
3275
|
+
* The final dataset rendered by the table.
|
|
3276
|
+
* IMPORTANT: This is still the full array; PrimeNG virtual scroll renders only visible rows.
|
|
3277
|
+
*/
|
|
3263
3278
|
tableData = [];
|
|
3264
|
-
/**
|
|
3279
|
+
/** Total record count shown (used in footer and table metadata). */
|
|
3280
|
+
totalRecords = 0;
|
|
3281
|
+
// ============================================================
|
|
3282
|
+
// SELECTION / COLUMNS
|
|
3283
|
+
// ============================================================
|
|
3284
|
+
/** Selected rows (signal so UI updates fast). */
|
|
3265
3285
|
selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
|
|
3266
|
-
/**
|
|
3286
|
+
/** Currently visible columns (based on table-caption selection). */
|
|
3267
3287
|
selectedColumns = [];
|
|
3268
|
-
/** Text from global search input. */
|
|
3269
3288
|
searchQuery = '';
|
|
3270
|
-
/** Indicates if multiple rows are selected. */
|
|
3271
3289
|
bulkMode = false;
|
|
3272
|
-
/** Number of records after filtering/search. */
|
|
3273
|
-
totalRecords = 0;
|
|
3274
|
-
/** Index of the last record loaded (for virtual scroll). */
|
|
3275
|
-
lastLoadedIndex = 0;
|
|
3276
|
-
/** Enum references for templates. */
|
|
3277
3290
|
selectionTypeEnum = tableSelectionType;
|
|
3278
3291
|
columnTypeEnum = tableColumnType;
|
|
3279
|
-
/**
|
|
3280
|
-
dateFormat;
|
|
3281
|
-
/** Active filter state. */
|
|
3292
|
+
/** Latest active filters coming from table-caption. */
|
|
3282
3293
|
currentFilters = {};
|
|
3283
|
-
/**
|
|
3294
|
+
/**
|
|
3295
|
+
* columnTypeMap:
|
|
3296
|
+
* field -> columnType (DATE/BOOLEAN/TEXT/etc).
|
|
3297
|
+
* The sort worker uses this to normalize values correctly (e.g., DATE parsing, BOOLEAN 0/1).
|
|
3298
|
+
*/
|
|
3284
3299
|
columnTypeMap = {};
|
|
3300
|
+
dateFormat = 'dd.MM.yyyy';
|
|
3301
|
+
// ============================================================
|
|
3302
|
+
// INPUTS
|
|
3303
|
+
// ============================================================
|
|
3304
|
+
columns = [];
|
|
3305
|
+
selectedColumnsInput = [];
|
|
3306
|
+
tableConfiguration;
|
|
3307
|
+
filters;
|
|
3308
|
+
// ============================================================
|
|
3309
|
+
// OUTPUTS
|
|
3310
|
+
// ============================================================
|
|
3311
|
+
actionClick = new EventEmitter();
|
|
3312
|
+
rowSelection = new EventEmitter();
|
|
3313
|
+
checkBoxSelection = new EventEmitter();
|
|
3314
|
+
saveColumns = new EventEmitter();
|
|
3315
|
+
// ============================================================
|
|
3316
|
+
// WORKER SORT (OFF-MAIN THREAD)
|
|
3317
|
+
// ============================================================
|
|
3318
|
+
sortWorker = null;
|
|
3319
|
+
/**
|
|
3320
|
+
* reqId counters ensure we can ignore outdated results
|
|
3321
|
+
* if user triggers multiple sorts quickly.
|
|
3322
|
+
*/
|
|
3323
|
+
workerReqId = 0;
|
|
3324
|
+
latestWorkerReqId = 0;
|
|
3325
|
+
/**
|
|
3326
|
+
* lastSortKey prevents re-sorting when PrimeNG emits same multiSortMeta repeatedly.
|
|
3327
|
+
*/
|
|
3328
|
+
lastSortKey = '';
|
|
3329
|
+
/** Ensures initial sort runs only once per dataset/config change */
|
|
3330
|
+
initialSortApplied = false;
|
|
3331
|
+
/** Remembers which field was used last time for initial sort (optional safety) */
|
|
3332
|
+
initialSortFieldApplied = null;
|
|
3333
|
+
/** True while initial sort is running to avoid "flash" of unsorted data */
|
|
3334
|
+
initialSortLoading = false;
|
|
3335
|
+
/** How many skeleton rows to render while initial sort/data is loading */
|
|
3336
|
+
skeletonRowCount = 8;
|
|
3337
|
+
/** Array used by Angular @for (must be iterable) */
|
|
3338
|
+
skeletonRows = Array.from({ length: this.skeletonRowCount });
|
|
3339
|
+
createSortWorkerInline() {
|
|
3340
|
+
const code = `
|
|
3341
|
+
const compareStringsNatural = (a,b) => a.localeCompare(b, undefined, { numeric:true, sensitivity:'base' });
|
|
3342
|
+
|
|
3343
|
+
const getNestedValue = (obj, path) => {
|
|
3344
|
+
try {
|
|
3345
|
+
if (!obj || !path) return undefined;
|
|
3346
|
+
if (Object.prototype.hasOwnProperty.call(obj, path)) {
|
|
3347
|
+
const v = obj[path];
|
|
3348
|
+
return (v && v.key !== undefined) ? v.key : v;
|
|
3349
|
+
}
|
|
3350
|
+
return path.split('.').reduce((acc, k) => (acc == null ? undefined : acc[k]), obj);
|
|
3351
|
+
} catch { return undefined; }
|
|
3352
|
+
};
|
|
3353
|
+
|
|
3354
|
+
const getComparableValue = (val, field, columnTypeMap, dateTypeKey='DATE') => {
|
|
3355
|
+
if (val === null || val === undefined) return '';
|
|
3356
|
+
const columnType = columnTypeMap?.[field];
|
|
3357
|
+
|
|
3358
|
+
if ((columnType || '').toString().toUpperCase() === 'BOOLEAN') {
|
|
3359
|
+
if (typeof val === 'boolean') return val ? 1 : 0;
|
|
3360
|
+
if (typeof val === 'number') return val ? 1 : 0;
|
|
3361
|
+
if (typeof val === 'string') {
|
|
3362
|
+
const s = val.trim().toLowerCase();
|
|
3363
|
+
if (['true','1','yes'].includes(s)) return 1;
|
|
3364
|
+
if (['false','0','no'].includes(s)) return 0;
|
|
3365
|
+
return '';
|
|
3366
|
+
}
|
|
3367
|
+
if (typeof val === 'object') {
|
|
3368
|
+
const v = val.value ?? val.key ?? val.enabled ?? val.checked;
|
|
3369
|
+
return getComparableValue(v, field, columnTypeMap, dateTypeKey);
|
|
3370
|
+
}
|
|
3371
|
+
return '';
|
|
3372
|
+
}
|
|
3373
|
+
|
|
3374
|
+
if (typeof val === 'number') return val;
|
|
3375
|
+
|
|
3376
|
+
if (typeof val === 'string') {
|
|
3377
|
+
if (columnType === dateTypeKey) {
|
|
3378
|
+
const t = Date.parse(val);
|
|
3379
|
+
return Number.isNaN(t) ? val.toLowerCase() : t;
|
|
3380
|
+
}
|
|
3381
|
+
return val.toLowerCase();
|
|
3382
|
+
}
|
|
3383
|
+
|
|
3384
|
+
if (val instanceof Date) return val.getTime();
|
|
3385
|
+
|
|
3386
|
+
if (typeof val === 'object') {
|
|
3387
|
+
if (val.from && val.to) {
|
|
3388
|
+
const from = Date.parse(val.from);
|
|
3389
|
+
const to = Date.parse(val.to);
|
|
3390
|
+
return (Number.isNaN(from) || Number.isNaN(to)) ? '' : (from + to);
|
|
3391
|
+
}
|
|
3392
|
+
if (Array.isArray(val) && val.length) return getComparableValue(val[0], field, columnTypeMap, dateTypeKey);
|
|
3393
|
+
|
|
3394
|
+
for (const k of ['name','value','label','key','date']) {
|
|
3395
|
+
if (val[k] !== undefined && val[k] !== null) return getComparableValue(val[k], field, columnTypeMap, dateTypeKey);
|
|
3396
|
+
}
|
|
3397
|
+
for (const v of Object.values(val)) {
|
|
3398
|
+
if (typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean') {
|
|
3399
|
+
return getComparableValue(v, field, columnTypeMap, dateTypeKey);
|
|
3400
|
+
}
|
|
3401
|
+
}
|
|
3402
|
+
}
|
|
3403
|
+
return '';
|
|
3404
|
+
};
|
|
3405
|
+
|
|
3406
|
+
const sortData = (data, meta, columnTypeMap, dateTypeKey='DATE') => {
|
|
3407
|
+
const sorted = (data || []).slice();
|
|
3408
|
+
if (!meta?.length) return sorted;
|
|
3409
|
+
|
|
3410
|
+
sorted.sort((a,b) => {
|
|
3411
|
+
for (const s of meta) {
|
|
3412
|
+
const field = s.field;
|
|
3413
|
+
const order = s.order ?? 1;
|
|
3414
|
+
|
|
3415
|
+
const A = getComparableValue(getNestedValue(a, field), field, columnTypeMap, dateTypeKey);
|
|
3416
|
+
const B = getComparableValue(getNestedValue(b, field), field, columnTypeMap, dateTypeKey);
|
|
3417
|
+
|
|
3418
|
+
if (typeof A === 'string' && typeof B === 'string') {
|
|
3419
|
+
const c = compareStringsNatural(A,B);
|
|
3420
|
+
if (c !== 0) return c * order;
|
|
3421
|
+
} else {
|
|
3422
|
+
if (A < B) return -1 * order;
|
|
3423
|
+
if (A > B) return 1 * order;
|
|
3424
|
+
}
|
|
3425
|
+
}
|
|
3426
|
+
return 0;
|
|
3427
|
+
});
|
|
3428
|
+
|
|
3429
|
+
return sorted;
|
|
3430
|
+
};
|
|
3431
|
+
|
|
3432
|
+
self.addEventListener('message', (ev) => {
|
|
3433
|
+
const data = ev.data || {};
|
|
3434
|
+
const sorted = sortData(data.data, data.multiSortMeta, data.columnTypeMap, data.dateTypeKey || 'DATE');
|
|
3435
|
+
self.postMessage({ reqId: data.reqId, sorted });
|
|
3436
|
+
});
|
|
3437
|
+
`;
|
|
3438
|
+
const blob = new Blob([code], { type: 'text/javascript' });
|
|
3439
|
+
const url = URL.createObjectURL(blob);
|
|
3440
|
+
return new Worker(url); // classic worker, nema module MIME problema
|
|
3441
|
+
}
|
|
3442
|
+
constructor() {
|
|
3443
|
+
/**
|
|
3444
|
+
* Create sorting worker if supported.
|
|
3445
|
+
* Fallback is synchronous sort (still works, but can freeze on huge arrays).
|
|
3446
|
+
*/
|
|
3447
|
+
if (typeof Worker !== 'undefined') {
|
|
3448
|
+
this.sortWorker = this.createSortWorkerInline();
|
|
3449
|
+
this.sortWorker.onmessage = (e) => {
|
|
3450
|
+
const { reqId, sorted } = e.data ?? {};
|
|
3451
|
+
if (reqId !== this.latestWorkerReqId)
|
|
3452
|
+
return;
|
|
3453
|
+
this.tableData = Array.isArray(sorted) ? sorted : [];
|
|
3454
|
+
this.totalRecords = this.tableData.length;
|
|
3455
|
+
// initial sort done → stop loading
|
|
3456
|
+
this.initialSortLoading = false;
|
|
3457
|
+
try {
|
|
3458
|
+
this.dt?.scrollToVirtualIndex?.(0);
|
|
3459
|
+
}
|
|
3460
|
+
catch { }
|
|
3461
|
+
this.cdr.markForCheck();
|
|
3462
|
+
};
|
|
3463
|
+
this.sortWorker.onerror = (err) => console.error('Sort worker error:', err);
|
|
3464
|
+
}
|
|
3465
|
+
}
|
|
3466
|
+
ngOnDestroy() {
|
|
3467
|
+
this.sortWorker?.terminate();
|
|
3468
|
+
this.sortWorker = null;
|
|
3469
|
+
}
|
|
3470
|
+
// ============================================================
|
|
3471
|
+
// DATA INPUT
|
|
3472
|
+
// ============================================================
|
|
3285
3473
|
/**
|
|
3286
|
-
*
|
|
3287
|
-
* Resets selection, maps columns, sets defaults for actions.
|
|
3474
|
+
* Whenever parent sets data, we reset base datasets and invalidate sort cache.
|
|
3288
3475
|
*/
|
|
3476
|
+
set data(value) {
|
|
3477
|
+
this.originalData = value ?? [];
|
|
3478
|
+
this.allData = [...this.originalData];
|
|
3479
|
+
this.lastSortKey = '';
|
|
3480
|
+
// allow re-applying initial sort for new dataset
|
|
3481
|
+
this.initialSortApplied = false;
|
|
3482
|
+
this.initialSortFieldApplied = null;
|
|
3483
|
+
// Do NOT immediately render unsorted data.
|
|
3484
|
+
// We'll render after initial sort finishes (or immediately if no sort will run).
|
|
3485
|
+
this.tableData = [];
|
|
3486
|
+
this.totalRecords = this.allData.length;
|
|
3487
|
+
// show loading only if we expect initial sort
|
|
3488
|
+
this.initialSortLoading = true;
|
|
3489
|
+
this.cdr.markForCheck();
|
|
3490
|
+
// try to run initial sort ASAP (if columns are already present)
|
|
3491
|
+
this.applyInitialSortIfNeeded();
|
|
3492
|
+
}
|
|
3493
|
+
// ============================================================
|
|
3494
|
+
// CONFIG / COLUMNS CHANGES
|
|
3495
|
+
// ============================================================
|
|
3289
3496
|
ngOnChanges(changes) {
|
|
3497
|
+
// clear selection on inputs update (safe default behavior)
|
|
3290
3498
|
this.selectedItems.set([]);
|
|
3291
|
-
//
|
|
3499
|
+
// Build columnTypeMap for sorting normalization
|
|
3292
3500
|
if (this.columns?.length > 0) {
|
|
3293
3501
|
this.columnTypeMap = {};
|
|
3294
|
-
for (const col of this.columns)
|
|
3502
|
+
for (const col of this.columns)
|
|
3295
3503
|
this.columnTypeMap[col.field] = col.columnType;
|
|
3296
|
-
|
|
3297
|
-
|
|
3298
|
-
? this.selectedColumnsInput
|
|
3299
|
-
: this.columns;
|
|
3300
|
-
// Defer update to avoid NG0100 errors
|
|
3504
|
+
const nextSelected = this.selectedColumnsInput?.length ? this.selectedColumnsInput : this.columns;
|
|
3505
|
+
// microtask to avoid change detection timing issues
|
|
3301
3506
|
Promise.resolve().then(() => {
|
|
3302
3507
|
this.selectedColumns = [...nextSelected];
|
|
3303
3508
|
this.cdr.markForCheck();
|
|
3509
|
+
// run initial sort after columns are ready
|
|
3510
|
+
this.applyInitialSortIfNeeded();
|
|
3304
3511
|
});
|
|
3305
3512
|
}
|
|
3306
|
-
//
|
|
3513
|
+
// Ensure "more actions" exist
|
|
3307
3514
|
if (!this.tableConfiguration?.moreActions) {
|
|
3308
3515
|
const cfg = this.tableConfiguration;
|
|
3309
3516
|
Promise.resolve().then(() => {
|
|
@@ -3312,118 +3519,188 @@ class TableComponent {
|
|
|
3312
3519
|
});
|
|
3313
3520
|
}
|
|
3314
3521
|
}
|
|
3522
|
+
// ============================================================
|
|
3523
|
+
// PRIME CUSTOM SORT (WORKER)
|
|
3524
|
+
// ============================================================
|
|
3315
3525
|
/**
|
|
3316
|
-
*
|
|
3317
|
-
*
|
|
3318
|
-
*/
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
|
|
3324
|
-
|
|
3325
|
-
|
|
3326
|
-
|
|
3327
|
-
|
|
3328
|
-
|
|
3329
|
-
const valueA = this.getComparableValue(this.getNestedValue(a, field), field);
|
|
3330
|
-
const valueB = this.getComparableValue(this.getNestedValue(b, field), field);
|
|
3331
|
-
if (typeof valueA === 'string' && typeof valueB === 'string') {
|
|
3332
|
-
const c = this.compareStringsNatural(valueA, valueB);
|
|
3333
|
-
if (c !== 0)
|
|
3334
|
-
return c * order;
|
|
3335
|
-
}
|
|
3336
|
-
else {
|
|
3337
|
-
if (valueA < valueB)
|
|
3338
|
-
return -1 * order;
|
|
3339
|
-
if (valueA > valueB)
|
|
3340
|
-
return 1 * order;
|
|
3341
|
-
}
|
|
3342
|
-
}
|
|
3343
|
-
return 0;
|
|
3344
|
-
});
|
|
3526
|
+
* PrimeNG calls this when sorting changes.
|
|
3527
|
+
* We run worker sort only when meta changes.
|
|
3528
|
+
*/
|
|
3529
|
+
onCustomSort(event) {
|
|
3530
|
+
const meta = (event.multiSortMeta ?? []);
|
|
3531
|
+
const sortKey = JSON.stringify(meta ?? []);
|
|
3532
|
+
// If sort is removed -> return to base dataset (filtered/searched)
|
|
3533
|
+
if (!meta.length) {
|
|
3534
|
+
this.tableData = this.allData;
|
|
3535
|
+
this.totalRecords = this.tableData.length;
|
|
3536
|
+
this.lastSortKey = '';
|
|
3537
|
+
this.cdr.markForCheck();
|
|
3538
|
+
return;
|
|
3345
3539
|
}
|
|
3346
|
-
|
|
3347
|
-
|
|
3348
|
-
|
|
3540
|
+
// Avoid re-sorting if meta didn't change
|
|
3541
|
+
if (sortKey === this.lastSortKey)
|
|
3542
|
+
return;
|
|
3543
|
+
this.lastSortKey = sortKey;
|
|
3544
|
+
this.runWorkerSort(meta);
|
|
3349
3545
|
}
|
|
3350
3546
|
/**
|
|
3351
|
-
*
|
|
3352
|
-
* Handles numbers, strings, dates, ranges, arrays, and objects.
|
|
3547
|
+
* Dispatches sort request to the worker (or sync fallback).
|
|
3353
3548
|
*/
|
|
3354
|
-
|
|
3355
|
-
if (
|
|
3356
|
-
|
|
3357
|
-
|
|
3358
|
-
|
|
3359
|
-
|
|
3360
|
-
|
|
3361
|
-
if (columnType === this.columnTypeEnum.DATE) {
|
|
3362
|
-
const parsedDate = Date.parse(val);
|
|
3363
|
-
return isNaN(parsedDate) ? val.toLowerCase() : parsedDate;
|
|
3364
|
-
}
|
|
3365
|
-
return val.toLowerCase();
|
|
3549
|
+
runWorkerSort(multiSortMeta) {
|
|
3550
|
+
if (!this.sortWorker) {
|
|
3551
|
+
this.tableData = this.sortSync(this.allData, multiSortMeta);
|
|
3552
|
+
this.totalRecords = this.tableData.length;
|
|
3553
|
+
this.initialSortLoading = false;
|
|
3554
|
+
this.cdr.markForCheck();
|
|
3555
|
+
return;
|
|
3366
3556
|
}
|
|
3367
|
-
|
|
3368
|
-
|
|
3369
|
-
|
|
3370
|
-
|
|
3371
|
-
|
|
3372
|
-
|
|
3373
|
-
|
|
3374
|
-
|
|
3375
|
-
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
|
|
3379
|
-
|
|
3380
|
-
|
|
3381
|
-
|
|
3382
|
-
|
|
3383
|
-
|
|
3384
|
-
|
|
3557
|
+
const meta = (multiSortMeta ?? [])
|
|
3558
|
+
.filter((m) => !!m?.field)
|
|
3559
|
+
.map((m) => ({ field: m.field, order: (m.order ?? 1) }));
|
|
3560
|
+
const reqId = ++this.workerReqId;
|
|
3561
|
+
this.latestWorkerReqId = reqId;
|
|
3562
|
+
const payload = {
|
|
3563
|
+
reqId,
|
|
3564
|
+
data: this.allData,
|
|
3565
|
+
multiSortMeta: meta,
|
|
3566
|
+
columnTypeMap: this.columnTypeMap,
|
|
3567
|
+
dateTypeKey: this.columnTypeEnum.DATE,
|
|
3568
|
+
};
|
|
3569
|
+
this.sortWorker.postMessage(payload);
|
|
3570
|
+
}
|
|
3571
|
+
/**
|
|
3572
|
+
* Synchronous sort fallback (used if WebWorker is not available).
|
|
3573
|
+
* Uses the same normalization logic as your worker approach.
|
|
3574
|
+
*/
|
|
3575
|
+
sortSync(data, multiSortMeta) {
|
|
3576
|
+
const sorted = [...data];
|
|
3577
|
+
if (!multiSortMeta?.length)
|
|
3578
|
+
return sorted;
|
|
3579
|
+
sorted.sort((a, b) => {
|
|
3580
|
+
for (const s of multiSortMeta) {
|
|
3581
|
+
const field = s.field;
|
|
3582
|
+
const order = s.order ?? 1;
|
|
3583
|
+
const A = this.getComparableValue(this.getNestedValue(a, field), field);
|
|
3584
|
+
const B = this.getComparableValue(this.getNestedValue(b, field), field);
|
|
3585
|
+
if (typeof A === 'string' && typeof B === 'string') {
|
|
3586
|
+
const c = this.compareStringsNatural(A, B);
|
|
3587
|
+
if (c !== 0)
|
|
3588
|
+
return c * order;
|
|
3385
3589
|
}
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
|
-
|
|
3389
|
-
|
|
3390
|
-
|
|
3590
|
+
else {
|
|
3591
|
+
if (A < B)
|
|
3592
|
+
return -1 * order;
|
|
3593
|
+
if (A > B)
|
|
3594
|
+
return 1 * order;
|
|
3391
3595
|
}
|
|
3392
3596
|
}
|
|
3597
|
+
return 0;
|
|
3598
|
+
});
|
|
3599
|
+
return sorted;
|
|
3600
|
+
}
|
|
3601
|
+
/**
|
|
3602
|
+
* Applies initial sort once:
|
|
3603
|
+
* - Uses tableConfiguration.initialSortField if provided
|
|
3604
|
+
* - Otherwise uses the first available column field
|
|
3605
|
+
* - Always ASC (order = 1)
|
|
3606
|
+
*
|
|
3607
|
+
* Runs only when:
|
|
3608
|
+
* - we have data
|
|
3609
|
+
* - we have columns/selectedColumns
|
|
3610
|
+
* - it hasn't been applied yet for current dataset
|
|
3611
|
+
*/
|
|
3612
|
+
applyInitialSortIfNeeded() {
|
|
3613
|
+
if (this.initialSortApplied)
|
|
3614
|
+
return;
|
|
3615
|
+
// if no data, just render empty fast and stop loading
|
|
3616
|
+
if (!this.allData?.length) {
|
|
3617
|
+
this.tableData = [];
|
|
3618
|
+
this.totalRecords = 0;
|
|
3619
|
+
this.initialSortLoading = false;
|
|
3620
|
+
this.initialSortApplied = true;
|
|
3621
|
+
return;
|
|
3393
3622
|
}
|
|
3394
|
-
|
|
3623
|
+
const cols = (this.selectedColumns?.length ? this.selectedColumns : this.columns) ?? [];
|
|
3624
|
+
if (!cols.length)
|
|
3625
|
+
return; // columns not ready yet (ngOnChanges will call again)
|
|
3626
|
+
// pick configured or fallback
|
|
3627
|
+
const configuredField = this.tableConfiguration?.initialSortField;
|
|
3628
|
+
const fallbackField = cols[0]?.field;
|
|
3629
|
+
const field = configuredField || fallbackField;
|
|
3630
|
+
const exists = cols.some((c) => c?.field === field);
|
|
3631
|
+
const finalField = exists ? field : fallbackField;
|
|
3632
|
+
// if still no field, just render base
|
|
3633
|
+
if (!finalField) {
|
|
3634
|
+
this.tableData = this.allData;
|
|
3635
|
+
this.totalRecords = this.tableData.length;
|
|
3636
|
+
this.initialSortLoading = false;
|
|
3637
|
+
this.initialSortApplied = true;
|
|
3638
|
+
this.cdr.markForCheck();
|
|
3639
|
+
return;
|
|
3640
|
+
}
|
|
3641
|
+
const meta = [{ field: finalField, order: 1 }];
|
|
3642
|
+
try {
|
|
3643
|
+
if (this.dt)
|
|
3644
|
+
this.dt.multiSortMeta = meta;
|
|
3645
|
+
}
|
|
3646
|
+
catch { }
|
|
3647
|
+
this.lastSortKey = JSON.stringify(meta);
|
|
3648
|
+
this.initialSortApplied = true;
|
|
3649
|
+
this.initialSortFieldApplied = finalField;
|
|
3650
|
+
// keep loading true until worker returns
|
|
3651
|
+
this.runWorkerSort(meta);
|
|
3395
3652
|
}
|
|
3653
|
+
// ============================================================
|
|
3654
|
+
// SEARCH / FILTER
|
|
3655
|
+
// ============================================================
|
|
3396
3656
|
/**
|
|
3397
|
-
*
|
|
3398
|
-
*
|
|
3657
|
+
* Applies global search over the currently filtered dataset.
|
|
3658
|
+
* Then re-applies sort if any sort is active.
|
|
3399
3659
|
*/
|
|
3400
|
-
/**
|
|
3401
|
-
* Executes global search ONLY across visible table columns.
|
|
3402
|
-
* Preserves active filters if applied.
|
|
3403
|
-
*/
|
|
3404
3660
|
onSearch(query) {
|
|
3405
3661
|
const trimmed = (query ?? '').trim().toLowerCase();
|
|
3406
3662
|
this.searchQuery = trimmed;
|
|
3407
|
-
const baseData = Object.keys(this.currentFilters).length > 0
|
|
3408
|
-
? this.getFilteredData()
|
|
3409
|
-
: this.originalData;
|
|
3410
|
-
// uzmi samo validna polja iz kolona
|
|
3663
|
+
const baseData = Object.keys(this.currentFilters).length > 0 ? this.getFilteredData() : this.originalData;
|
|
3411
3664
|
const searchableFields = (this.columns ?? [])
|
|
3412
3665
|
.map((c) => (c?.field ?? '').trim())
|
|
3413
|
-
.filter((f) => !!f);
|
|
3666
|
+
.filter((f) => !!f);
|
|
3414
3667
|
if (!trimmed) {
|
|
3415
3668
|
this.allData = [...baseData];
|
|
3416
3669
|
}
|
|
3417
3670
|
else {
|
|
3418
|
-
this.allData = baseData.filter((row) => searchableFields.some((field) =>
|
|
3419
|
-
const value = this.getValueByPath(row, field);
|
|
3420
|
-
return this.matchesQuery(value, trimmed);
|
|
3421
|
-
}));
|
|
3671
|
+
this.allData = baseData.filter((row) => searchableFields.some((field) => this.matchesQuery(this.getValueByPath(row, field), trimmed)));
|
|
3422
3672
|
}
|
|
3423
|
-
this.
|
|
3424
|
-
|
|
3673
|
+
this.applyCurrentSortOrReset();
|
|
3674
|
+
}
|
|
3675
|
+
/**
|
|
3676
|
+
* Called from table-caption when filter form changes.
|
|
3677
|
+
* Rebuilds allData and re-applies current sorting.
|
|
3678
|
+
*/
|
|
3679
|
+
applyFilters(filters) {
|
|
3680
|
+
this.currentFilters = { ...filters };
|
|
3681
|
+
this.allData = this.getFilteredData();
|
|
3682
|
+
this.applyCurrentSortOrReset();
|
|
3683
|
+
}
|
|
3684
|
+
/**
|
|
3685
|
+
* If table is currently sorted, re-run sort on new base dataset.
|
|
3686
|
+
* Otherwise just render base dataset.
|
|
3687
|
+
*/
|
|
3688
|
+
applyCurrentSortOrReset() {
|
|
3689
|
+
const meta = (this.dt?.multiSortMeta ?? []);
|
|
3690
|
+
const sortKey = JSON.stringify(meta ?? []);
|
|
3691
|
+
if (meta?.length) {
|
|
3692
|
+
this.lastSortKey = sortKey;
|
|
3693
|
+
this.runWorkerSort(meta);
|
|
3694
|
+
return;
|
|
3695
|
+
}
|
|
3696
|
+
this.tableData = this.allData;
|
|
3697
|
+
this.totalRecords = this.tableData.length;
|
|
3698
|
+
this.lastSortKey = '';
|
|
3699
|
+
this.cdr.markForCheck();
|
|
3425
3700
|
}
|
|
3426
|
-
|
|
3701
|
+
// ============================================================
|
|
3702
|
+
// SEARCH HELPERS
|
|
3703
|
+
// ============================================================
|
|
3427
3704
|
getValueByPath(obj, path) {
|
|
3428
3705
|
if (!obj || !path)
|
|
3429
3706
|
return undefined;
|
|
@@ -3431,176 +3708,129 @@ class TableComponent {
|
|
|
3431
3708
|
return obj[path];
|
|
3432
3709
|
return path.split('.').reduce((acc, key) => (acc == null ? undefined : acc[key]), obj);
|
|
3433
3710
|
}
|
|
3434
|
-
/** Checks if a value matches the global search query. */
|
|
3435
3711
|
matchesQuery(value, query) {
|
|
3436
3712
|
if (value === null || value === undefined)
|
|
3437
3713
|
return false;
|
|
3438
|
-
if (typeof value === 'string' || typeof value === 'number')
|
|
3714
|
+
if (typeof value === 'string' || typeof value === 'number')
|
|
3439
3715
|
return value.toString().toLowerCase().includes(query);
|
|
3440
|
-
|
|
3441
|
-
if (Array.isArray(value)) {
|
|
3716
|
+
if (Array.isArray(value))
|
|
3442
3717
|
return value.some((item) => this.matchesQuery(item, query));
|
|
3443
|
-
|
|
3444
|
-
if (typeof value === 'object') {
|
|
3445
|
-
// npr. scopes: [{uuid,name}] → pretraži po vrednostima objekta
|
|
3718
|
+
if (typeof value === 'object')
|
|
3446
3719
|
return Object.values(value).some((val) => this.matchesQuery(val, query));
|
|
3447
|
-
}
|
|
3448
3720
|
return false;
|
|
3449
3721
|
}
|
|
3722
|
+
// ============================================================
|
|
3723
|
+
// FILTER IMPLEMENTATION
|
|
3724
|
+
// ============================================================
|
|
3450
3725
|
/**
|
|
3451
|
-
*
|
|
3452
|
-
*
|
|
3726
|
+
* Applies currentFilters to originalData and returns the filtered result.
|
|
3727
|
+
* Supports:
|
|
3728
|
+
* - single value (primitive or {key,...})
|
|
3729
|
+
* - multi-select arrays (primitives or objects with .key)
|
|
3730
|
+
* - empty filters mean "match all"
|
|
3453
3731
|
*/
|
|
3454
3732
|
getFilteredData() {
|
|
3455
3733
|
return this.originalData.filter((item) => {
|
|
3456
3734
|
return Object.keys(this.currentFilters).every((key) => {
|
|
3457
3735
|
const filterValue = this.currentFilters[key];
|
|
3458
|
-
if (!filterValue ||
|
|
3459
|
-
(Array.isArray(filterValue) && filterValue.length === 0)) {
|
|
3736
|
+
if (!filterValue || (Array.isArray(filterValue) && filterValue.length === 0))
|
|
3460
3737
|
return true;
|
|
3461
|
-
}
|
|
3462
3738
|
const itemValue = this.getNestedValue(item, key);
|
|
3463
3739
|
if (Array.isArray(filterValue)) {
|
|
3464
3740
|
return filterValue.some((option) => {
|
|
3465
3741
|
const optionKey = option?.key || option;
|
|
3466
|
-
return
|
|
3467
|
-
optionKey?.toString().toLowerCase());
|
|
3742
|
+
return itemValue?.toString().toLowerCase() === optionKey?.toString().toLowerCase();
|
|
3468
3743
|
});
|
|
3469
3744
|
}
|
|
3470
3745
|
const singleFilterValue = filterValue?.key || filterValue;
|
|
3471
3746
|
return singleFilterValue
|
|
3472
|
-
? itemValue?.toString().toLowerCase() ===
|
|
3473
|
-
singleFilterValue.toString().toLowerCase()
|
|
3747
|
+
? itemValue?.toString().toLowerCase() === singleFilterValue.toString().toLowerCase()
|
|
3474
3748
|
: true;
|
|
3475
3749
|
});
|
|
3476
3750
|
});
|
|
3477
3751
|
}
|
|
3478
3752
|
/**
|
|
3479
|
-
*
|
|
3480
|
-
* Handles primitives, objects, and LIST columns (arrays of values).
|
|
3753
|
+
* Reads nested values using dot paths and unwraps `.key` when present.
|
|
3481
3754
|
*/
|
|
3482
|
-
applyFilters(filters) {
|
|
3483
|
-
const isEmpty = (v) => v === null ||
|
|
3484
|
-
v === undefined ||
|
|
3485
|
-
(typeof v === 'string' && v.trim() === '') ||
|
|
3486
|
-
(Array.isArray(v) && v.length === 0);
|
|
3487
|
-
const extractKey = (v) => v && typeof v === 'object' && 'key' in v ? v.key : v;
|
|
3488
|
-
const toPrimitive = (v) => {
|
|
3489
|
-
if (typeof v === 'string') {
|
|
3490
|
-
const s = v.trim().toLowerCase();
|
|
3491
|
-
if (s === 'true')
|
|
3492
|
-
return true;
|
|
3493
|
-
if (s === 'false')
|
|
3494
|
-
return false;
|
|
3495
|
-
const n = Number(v);
|
|
3496
|
-
if (!Number.isNaN(n) && v !== '')
|
|
3497
|
-
return n;
|
|
3498
|
-
return s;
|
|
3499
|
-
}
|
|
3500
|
-
return v;
|
|
3501
|
-
};
|
|
3502
|
-
const eq = (a, b) => {
|
|
3503
|
-
const A = toPrimitive(a);
|
|
3504
|
-
const B = toPrimitive(b);
|
|
3505
|
-
if (typeof A === 'boolean' || typeof B === 'boolean')
|
|
3506
|
-
return A === B;
|
|
3507
|
-
if (typeof A === 'number' || typeof B === 'number')
|
|
3508
|
-
return Number(A) === Number(B);
|
|
3509
|
-
return String(A ?? '').toLowerCase() === String(B ?? '').toLowerCase();
|
|
3510
|
-
};
|
|
3511
|
-
// Normalize LIST values for consistent comparison
|
|
3512
|
-
const normalizeListValues = (arr) => {
|
|
3513
|
-
return arr
|
|
3514
|
-
.map((it) => {
|
|
3515
|
-
if (it == null)
|
|
3516
|
-
return null;
|
|
3517
|
-
if (typeof it !== 'object')
|
|
3518
|
-
return it;
|
|
3519
|
-
return (it.name ??
|
|
3520
|
-
it.label ??
|
|
3521
|
-
it.value ??
|
|
3522
|
-
it.uuid ??
|
|
3523
|
-
it.id ??
|
|
3524
|
-
JSON.stringify(it));
|
|
3525
|
-
})
|
|
3526
|
-
.filter((x) => x !== null && x !== undefined && x !== '');
|
|
3527
|
-
};
|
|
3528
|
-
this.currentFilters = { ...filters };
|
|
3529
|
-
this.allData = this.originalData.filter((item) => Object.keys(filters).every((key) => {
|
|
3530
|
-
const fv = filters[key];
|
|
3531
|
-
if (isEmpty(fv))
|
|
3532
|
-
return true;
|
|
3533
|
-
const itemValue = this.getNestedValue(item, key);
|
|
3534
|
-
if (Array.isArray(fv)) {
|
|
3535
|
-
const selected = fv.map(extractKey);
|
|
3536
|
-
if (Array.isArray(itemValue)) {
|
|
3537
|
-
const flat = normalizeListValues(itemValue);
|
|
3538
|
-
return selected.some((opt) => flat.some((v) => eq(v, opt)));
|
|
3539
|
-
}
|
|
3540
|
-
return selected.some((opt) => eq(itemValue, opt));
|
|
3541
|
-
}
|
|
3542
|
-
const single = extractKey(fv);
|
|
3543
|
-
if (Array.isArray(itemValue)) {
|
|
3544
|
-
const flat = normalizeListValues(itemValue);
|
|
3545
|
-
return flat.some((v) => eq(v, single));
|
|
3546
|
-
}
|
|
3547
|
-
return eq(itemValue, single);
|
|
3548
|
-
}));
|
|
3549
|
-
this.totalRecords = this.allData.length;
|
|
3550
|
-
this.lastLoadedIndex = 0;
|
|
3551
|
-
this.tableData = [];
|
|
3552
|
-
this.loadLazyData({ first: 0, rows: 100 });
|
|
3553
|
-
}
|
|
3554
|
-
/** Determines if a row can be selected based on `canSelect`. */
|
|
3555
|
-
isRowSelectable(event) {
|
|
3556
|
-
return typeof event.data?.canSelect === 'boolean'
|
|
3557
|
-
? event.data.canSelect
|
|
3558
|
-
: true;
|
|
3559
|
-
}
|
|
3560
|
-
/** Retrieves a nested value from an object given a dot-path. */
|
|
3561
3755
|
getNestedValue(obj, path) {
|
|
3562
3756
|
try {
|
|
3563
|
-
if (obj && Object.prototype.hasOwnProperty.call(obj, path))
|
|
3757
|
+
if (obj && Object.prototype.hasOwnProperty.call(obj, path))
|
|
3564
3758
|
return obj[path]?.key || obj[path];
|
|
3565
|
-
}
|
|
3566
3759
|
const keys = path.split('.');
|
|
3567
3760
|
let current = obj;
|
|
3568
3761
|
for (const key of keys) {
|
|
3569
|
-
if (current && typeof current === 'object' && key in current)
|
|
3762
|
+
if (current && typeof current === 'object' && key in current)
|
|
3570
3763
|
current = current[key];
|
|
3571
|
-
|
|
3572
|
-
else {
|
|
3764
|
+
else
|
|
3573
3765
|
return undefined;
|
|
3574
|
-
}
|
|
3575
3766
|
}
|
|
3576
|
-
return current?.key
|
|
3767
|
+
return current?.key ?? current;
|
|
3577
3768
|
}
|
|
3578
3769
|
catch {
|
|
3579
3770
|
return undefined;
|
|
3580
3771
|
}
|
|
3581
3772
|
}
|
|
3582
|
-
/**
|
|
3583
|
-
|
|
3584
|
-
|
|
3585
|
-
|
|
3586
|
-
|
|
3587
|
-
|
|
3588
|
-
|
|
3773
|
+
/**
|
|
3774
|
+
* Produces comparable primitives for sorting (sync fallback).
|
|
3775
|
+
* The worker uses its own copy of this logic.
|
|
3776
|
+
*/
|
|
3777
|
+
getComparableValue(val, field) {
|
|
3778
|
+
if (val === null || val === undefined)
|
|
3779
|
+
return '';
|
|
3780
|
+
const columnType = field ? this.columnTypeMap[field] : null;
|
|
3781
|
+
if (typeof val === 'number')
|
|
3782
|
+
return val;
|
|
3783
|
+
if (typeof val === 'string') {
|
|
3784
|
+
if (columnType === this.columnTypeEnum.DATE) {
|
|
3785
|
+
const parsedDate = Date.parse(val);
|
|
3786
|
+
return isNaN(parsedDate) ? val.toLowerCase() : parsedDate;
|
|
3787
|
+
}
|
|
3788
|
+
return val.toLowerCase();
|
|
3789
|
+
}
|
|
3790
|
+
if (val instanceof Date)
|
|
3791
|
+
return val.getTime();
|
|
3792
|
+
if (typeof val === 'object') {
|
|
3793
|
+
if (val.from && val.to) {
|
|
3794
|
+
const from = Date.parse(val.from);
|
|
3795
|
+
const to = Date.parse(val.to);
|
|
3796
|
+
return isNaN(from) || isNaN(to) ? '' : from + to;
|
|
3797
|
+
}
|
|
3798
|
+
if (Array.isArray(val) && val.length > 0)
|
|
3799
|
+
return this.getComparableValue(val[0], field);
|
|
3800
|
+
const priorityFields = ['name', 'value', 'label', 'key', 'date'];
|
|
3801
|
+
for (const key of priorityFields) {
|
|
3802
|
+
if (val[key] !== undefined && val[key] !== null) {
|
|
3803
|
+
return this.getComparableValue(val[key], field);
|
|
3804
|
+
}
|
|
3805
|
+
}
|
|
3806
|
+
for (const v of Object.values(val)) {
|
|
3807
|
+
if (typeof v === 'string' || typeof v === 'number')
|
|
3808
|
+
return this.getComparableValue(v, field);
|
|
3809
|
+
}
|
|
3810
|
+
}
|
|
3811
|
+
return '';
|
|
3589
3812
|
}
|
|
3590
|
-
|
|
3591
|
-
|
|
3592
|
-
event.stopPropagation();
|
|
3593
|
-
this.rowSelection.emit(rowData);
|
|
3813
|
+
compareStringsNatural(a, b) {
|
|
3814
|
+
return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
|
|
3594
3815
|
}
|
|
3595
|
-
|
|
3816
|
+
// ============================================================
|
|
3817
|
+
// SELECTION / UI ACTIONS
|
|
3818
|
+
// ============================================================
|
|
3596
3819
|
onSelectionChange(selected) {
|
|
3597
3820
|
this.selectedItems.set(selected);
|
|
3598
|
-
this.bulkMode = selected
|
|
3821
|
+
this.bulkMode = (selected?.length ?? 0) > 0;
|
|
3599
3822
|
this.checkBoxSelection.emit(selected);
|
|
3600
3823
|
}
|
|
3824
|
+
onRowClick(event, rowData) {
|
|
3825
|
+
event.stopPropagation();
|
|
3826
|
+
this.rowSelection.emit(rowData);
|
|
3827
|
+
}
|
|
3828
|
+
clearSelection() {
|
|
3829
|
+
this.selectedItems.set([]);
|
|
3830
|
+
this.bulkMode = false;
|
|
3831
|
+
}
|
|
3601
3832
|
/**
|
|
3602
|
-
* Handles
|
|
3603
|
-
* Supports PDF/CSV exports with localized labels.
|
|
3833
|
+
* Handles export actions locally, otherwise bubbles up to parent.
|
|
3604
3834
|
*/
|
|
3605
3835
|
handleActionClick(event) {
|
|
3606
3836
|
if (event?.action?.key === 'EXPORT_PDF') {
|
|
@@ -3619,36 +3849,46 @@ class TableComponent {
|
|
|
3619
3849
|
}
|
|
3620
3850
|
this.actionClick.emit(event);
|
|
3621
3851
|
}
|
|
3622
|
-
/**
|
|
3623
|
-
|
|
3624
|
-
|
|
3625
|
-
|
|
3626
|
-
|
|
3627
|
-
clearSelection() {
|
|
3628
|
-
this.selectedItems.set([]);
|
|
3629
|
-
this.bulkMode = false;
|
|
3852
|
+
/**
|
|
3853
|
+
* Used by checkbox template to disable selection on specific rows.
|
|
3854
|
+
*/
|
|
3855
|
+
isRowSelectable(event) {
|
|
3856
|
+
return typeof event.data?.canSelect === 'boolean' ? event.data.canSelect : true;
|
|
3630
3857
|
}
|
|
3631
|
-
|
|
3858
|
+
/**
|
|
3859
|
+
* Some tables allow click on first N columns to open details.
|
|
3860
|
+
*/
|
|
3632
3861
|
isColumnClickable(columnIndex) {
|
|
3633
|
-
return (columnIndex < (this.tableConfiguration
|
|
3634
|
-
this.tableConfiguration
|
|
3862
|
+
return (columnIndex < (this.tableConfiguration?.clickableColumnCount ?? 1) &&
|
|
3863
|
+
this.tableConfiguration?.hasCellClick);
|
|
3864
|
+
}
|
|
3865
|
+
/**
|
|
3866
|
+
* Utility for copy icons inside cells (prevents row-click).
|
|
3867
|
+
*/
|
|
3868
|
+
copyToClipboard(event, text) {
|
|
3869
|
+
event.stopPropagation();
|
|
3870
|
+
navigator.clipboard.writeText(text);
|
|
3635
3871
|
}
|
|
3636
|
-
|
|
3872
|
+
/**
|
|
3873
|
+
* Generic nested getter used by templates (flags etc).
|
|
3874
|
+
*/
|
|
3637
3875
|
getNested(obj, path) {
|
|
3638
3876
|
if (!obj || !path)
|
|
3639
3877
|
return null;
|
|
3640
3878
|
return path.split('.').reduce((o, k) => (o != null ? o[k] : null), obj);
|
|
3641
3879
|
}
|
|
3642
|
-
/**
|
|
3643
|
-
|
|
3644
|
-
|
|
3645
|
-
|
|
3646
|
-
|
|
3647
|
-
|
|
3648
|
-
|
|
3880
|
+
/**
|
|
3881
|
+
* Applies column selection coming from table-caption (array of field names).
|
|
3882
|
+
*/
|
|
3883
|
+
applyColumns(selected) {
|
|
3884
|
+
const next = this.columns.filter((col) => selected.includes(col.field));
|
|
3885
|
+
Promise.resolve().then(() => {
|
|
3886
|
+
this.selectedColumns = next;
|
|
3887
|
+
this.cdr.markForCheck();
|
|
3888
|
+
});
|
|
3649
3889
|
}
|
|
3650
3890
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3651
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n @if (selectedItems().length === 0) {\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [filters]=\"filters\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n ></table-caption>\n } @else {\n <div\n style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n >\n <div>\n @if (tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX) {\n <span>\n {{ selectedItems().length }}\n {{\n selectedItems().length === 1\n ? (\"LABELS.ITEM_SELECTED\" | translate)\n : (\"LABELS.ITEMS_SELECTED\" | translate)\n }}\n </span>\n }\n </div>\n\n <div>\n @for (\n action of tableConfiguration.bulkActions;\n track action?.key ?? $index\n ) {\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems(),\n });\n clearSelection()\n \"\n ></phoenix-data-table-action>\n }\n\n <button\n [attr.data-cy]=\"'clear-selection-button'\"\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"clearSelection()\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n }\n <div\n class=\"table-host\"\n [style.height]=\"tableConfiguration.scrollHeight ?? null\"\n >\n <p-table\n #dt\n [columns]=\"selectedColumns\"\n [value]=\"tableData\"\n [size]=\"'small'\"\n scrollable=\"true\"\n scrollHeight=\"flex\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"40\"\n [lazy]=\"true\"\n [rowSelectable]=\"isRowSelectable\"\n [totalRecords]=\"totalRecords\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <th class=\"custom-th\">\n <p-tableHeaderCheckbox\n [attr.data-cy]=\"'table-header-checkbox'\"\n ></p-tableHeaderCheckbox>\n </th>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <th class=\"custom-th\"></th>\n }\n }\n @for (\n col of columns;\n track col.field ?? col.header ?? $index;\n let colIdx = $index\n ) {\n <th\n pResizableColumn\n class=\"custom-th text-primary font-bold\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon\n [field]=\"col.field\"\n [attr.data-cy]=\"'sort-button-' + col.header\"\n ></p-sortIcon>\n </th>\n }\n\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-rowData\n let-columns=\"columns\"\n let-rowIndex=\"rowIndex\"\n >\n <tr>\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <td class=\"w-2rem\">\n <p-tableCheckbox\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \"\n [disabled]=\"\n rowData?.canSelect !== undefined\n ? !rowData.canSelect\n : false\n \"\n [value]=\"rowData\"\n ></p-tableCheckbox>\n </td>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <td>\n <p-tableRadioButton\n [value]=\"rowData\"\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"\n ></p-tableRadioButton>\n </td>\n }\n }\n @for (\n col of columns;\n track col.field ?? col.header ?? $index;\n let i = $index\n ) {\n <td\n (click)=\"\n isColumnClickable(i) ? onRowClick($event, rowData) : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer': isColumnClickable(i),\n }\"\n >\n @switch (col.columnType) {\n @case (columnTypeEnum.TAG) {\n @if (rowData[col.field]) {\n <div\n class=\"border-round-md font-semibold\"\n [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field + 'Color'] || '#ccc') + '56',\n color: rowData[col.field + 'Color'],\n }\"\n >\n {{\n rowData[col.field]?.name ||\n (rowData[col.field] | translate)\n }}\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.LIST_TAG) {\n @if (rowData[col.field]) {\n @for (item of rowData[col.field]; track $index) {\n <p-badge severity=\"warn\" class=\"mr-1\" [value]=\"item\" />\n }\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.OBJ_TAG) {\n @if (rowData[col.field]) {\n <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.OBJ_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field].color || '#ccc') + '56',\n color: rowData[col.field].color,\n }\"\n [value]=\"rowData[col.field]?.value | translate\"\n ></p-tag>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.PERSON) {\n @if (rowData[col.field]) {\n <p-avatar\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.PERSON +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [label]=\"rowData[col.field]?.name | initials\"\n class=\"cursor-pointer\"\n [style]=\"{\n 'background-color': '#9c27b0',\n color: '#ffffff',\n 'font-size': '0.8rem!important',\n }\"\n shape=\"circle\"\n (click)=\"personPop.toggle($event)\"\n ></p-avatar>\n\n <p-popover #personPop [dismissable]=\"true\">\n <div>\n <span class=\"text-lg\">{{\n rowData[col.field].name\n }}</span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ rowData[col.field].email ?? \" --\" }}\n </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-phone text-500\"></i>\n {{ rowData[col.field].phone ?? \" --\" }}\n </span>\n </div>\n </p-popover>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.LIST) {\n @if (rowData[col.field]?.length) {\n @if (rowData[col.field].length > 1) {\n <div\n class=\"cursor-pointer\"\n (click)=\"listPop.toggle($event)\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span class=\"mr-1\">{{\n rowData[col.field][0].name\n }}</span>\n <p-chip\n class=\"text-sm font-semibold p-1 m-0\"\n [label]=\"'+' + (rowData[col.field].length - 1)\"\n />\n </div>\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n\n <p-popover #listPop [dismissable]=\"true\">\n @for (\n item of rowData[col.field];\n track item.name;\n let isFirst = $first\n ) {\n @if (!isFirst) {\n <ul class=\"list-none m-0 p-0\">\n <li>{{ item.name }}</li>\n </ul>\n }\n }\n </p-popover>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.BOOLEAN) {\n @if (rowData[col.field] | isBoolean) {\n <i\n [pTooltip]=\"rowData?.[col.field + 'Tooltip']\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.BOOLEAN +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n class=\"pi\"\n [ngClass]=\"\n rowData[col.field]\n ? 'text-green-500 pi-check-circle'\n : 'text-red-500 pi-times-circle'\n \"\n ></i>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.TEXT_AREA) {\n @if (rowData[col.field]) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT_AREA +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field]\"\n >\n {{\n rowData[col.field].length > (col.maxLength ?? 50)\n ? (rowData[col.field]\n | slice: 0 : col.maxLength ?? 50) + \"...\"\n : rowData[col.field]\n }}\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.EMAIL) {\n @if (rowData[col.field]) {\n <div\n class=\"email-cell\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.EMAIL +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span>{{ rowData[col.field] }}</span>\n <i\n class=\"pi pi-copy email-copy-icon\"\n (click)=\"copyToClipboard($event, rowData[col.field])\"\n [pTooltip]=\"'LABELS.COPY_EMAIL' | translate\"\n >\n </i>\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.TIMEPERIOD) {\n @if (rowData[col.field]) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TIMEPERIOD +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field] | timePeriod\"\n style=\"max-width: 200px\"\n >\n {{ rowData[col.field] | timePeriod }}\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @default {\n @if (col.flag && getNested(rowData, col.flagCodeField)) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n class=\"flex align-items-center gap-2\"\n style=\"max-width: 200px\"\n [pTooltip]=\"rowData | cell: col : dateFormat\"\n >\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"\n 'flag flag-' +\n (getNested(rowData, col.flagCodeField) || '')\n .toString()\n .toLowerCase()\n \"\n style=\"width: 22px\"\n alt=\"\"\n />\n <span\n [innerHTML]=\"rowData | cell: col : dateFormat\"\n ></span>\n </div>\n } @else {\n @if (rowData | cell: col : dateFormat) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData | cell: col : dateFormat\"\n style=\"max-width: 200px\"\n [innerHTML]=\"rowData | cell: col : dateFormat\"\n ></div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n }\n }\n </td>\n }\n\n <td class=\"p-0\">\n @for (\n action of tableConfiguration.rowActions;\n track action?.key ?? $index\n ) {\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"\n ></phoenix-data-table-action>\n }\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell let-dataCy=\"dataCy\">\n <span [attr.data-cy]=\"dataCy\">--</span>\n </ng-template>\n\n <!-- <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 40px\">\n @for (col of columns; track $index) {\n <td>\n <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n </td>\n }\n <td>\n <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n </td>\n </tr>\n </ng-template> -->\n\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n </div>\n </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$6.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$6.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i8$2.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4$3.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }, { kind: "pipe", type: IsBooleanPipe, name: "isBoolean" }] });
|
|
3891
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters", data: "data" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n @if (selectedItems().length === 0) {\n <table-caption [columns]=\"columns\" [tableConfiguration]=\"tableConfiguration\" [filters]=\"filters\"\n [selectedItems]=\"selectedItems()\" (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\" (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"></table-caption>\n } @else {\n <div style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\">\n <div>\n @if (tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX) {\n <span>\n {{ selectedItems().length }}\n {{\n selectedItems().length === 1\n ? (\"LABELS.ITEM_SELECTED\" | translate)\n : (\"LABELS.ITEMS_SELECTED\" | translate)\n }}\n </span>\n }\n </div>\n\n <div>\n @for (\n action of tableConfiguration.bulkActions;\n track action?.key ?? $index\n ) {\n <phoenix-data-table-action [actionConfig]=\"action\" (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems(),\n });\n clearSelection()\n \"></phoenix-data-table-action>\n }\n\n <button [attr.data-cy]=\"'clear-selection-button'\" class=\"p-button p-button-text p-button-plain\"\n (click)=\"clearSelection()\" aria-label=\"Clear Selection\">\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n }\n <div class=\"table-host\" [style.height]=\"tableConfiguration.scrollHeight ?? null\">\n <p-table #dt [columns]=\"selectedColumns\" [value]=\"tableData\" [size]=\"'small'\" scrollable=\"true\" scrollHeight=\"flex\"\n [virtualScroll]=\"true\" [virtualScrollItemSize]=\"40\" [virtualScrollDelay]=\"80\" [totalRecords]=\"totalRecords\"\n [sortMode]=\"'multiple'\" [customSort]=\"true\" (sortFunction)=\"onCustomSort($event)\" [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\" [resizableColumns]=\"true\" columnResizeMode=\"expand\" [loading]=\"initialSortLoading\">\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <th class=\"custom-th\">\n <p-tableHeaderCheckbox [attr.data-cy]=\"'table-header-checkbox'\"></p-tableHeaderCheckbox>\n </th>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <th class=\"custom-th\"></th>\n }\n }\n @for (\n col of columns;\n track col.field ?? col.header ?? $index;\n let colIdx = $index\n ) {\n <th pResizableColumn class=\"custom-th text-primary font-bold\" [pSortableColumn]=\"col.field\">\n {{ col.header | translate }}\n <p-sortIcon [field]=\"col.field\" [attr.data-cy]=\"'sort-button-' + col.header\"></p-sortIcon>\n </th>\n }\n\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template #body let-rowData let-columns=\"columns\" let-rowIndex=\"rowIndex\">\n <tr>\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <td class=\"w-2rem\">\n <p-tableCheckbox [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \" [disabled]=\"\n rowData?.canSelect !== undefined\n ? !rowData.canSelect\n : false\n \" [value]=\"rowData\"></p-tableCheckbox>\n </td>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <td>\n <p-tableRadioButton [value]=\"rowData\" [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"></p-tableRadioButton>\n </td>\n }\n }\n @for (\n col of columns;\n track col.field ?? col.header ?? $index;\n let i = $index\n ) {\n <td (click)=\"\n isColumnClickable(i) ? onRowClick($event, rowData) : null\n \" [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer': isColumnClickable(i),\n }\">\n @switch (col.columnType) {\n @case (columnTypeEnum.TAG) {\n @if (rowData[col.field]) {\n <div class=\"border-round-md font-semibold\" [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field + 'Color'] || '#ccc') + '56',\n color: rowData[col.field + 'Color'],\n }\">\n {{\n rowData[col.field]?.name ||\n (rowData[col.field] | translate)\n }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n @case (columnTypeEnum.LIST_TAG) {\n @if (rowData[col.field]) {\n @for (item of rowData[col.field]; track $index) {\n <p-badge severity=\"warn\" class=\"mr-1\" [value]=\"item\" />\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n @case (columnTypeEnum.OBJ_TAG) {\n @if (rowData[col.field]) {\n <p-tag [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.OBJ_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field].color || '#ccc') + '56',\n color: rowData[col.field].color,\n }\" [value]=\"rowData[col.field]?.value | translate\"></p-tag>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n @case (columnTypeEnum.PERSON) {\n @if (rowData[col.field]) {\n <p-avatar [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.PERSON +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [label]=\"rowData[col.field]?.name | initials\" class=\"cursor-pointer\" [style]=\"{\n 'background-color': '#9c27b0',\n color: '#ffffff',\n 'font-size': '0.8rem!important',\n }\" shape=\"circle\" (click)=\"personPop.toggle($event)\"></p-avatar>\n\n <p-popover #personPop [dismissable]=\"true\">\n <div>\n <span class=\"text-lg\">{{\n rowData[col.field].name\n }}</span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ rowData[col.field].email ?? \" --\" }}\n </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-phone text-500\"></i>\n {{ rowData[col.field].phone ?? \" --\" }}\n </span>\n </div>\n </p-popover>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n @case (columnTypeEnum.LIST) {\n @if (rowData[col.field]?.length) {\n @if (rowData[col.field].length > 1) {\n <div class=\"cursor-pointer\" (click)=\"listPop.toggle($event)\" [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \">\n <span class=\"mr-1\">{{\n rowData[col.field][0].name\n }}</span>\n <p-chip class=\"text-sm font-semibold p-1 m-0\" [label]=\"'+' + (rowData[col.field].length - 1)\" />\n </div>\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n\n <p-popover #listPop [dismissable]=\"true\">\n @for (\n item of rowData[col.field];\n track item.name;\n let isFirst = $first\n ) {\n @if (!isFirst) {\n <ul class=\"list-none m-0 p-0\">\n <li>{{ item.name }}</li>\n </ul>\n }\n }\n </p-popover>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n @case (columnTypeEnum.BOOLEAN) {\n @if (rowData[col.field] | isBoolean) {\n <i [pTooltip]=\"rowData?.[col.field + 'Tooltip']\" [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.BOOLEAN +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" class=\"pi\" [ngClass]=\"\n rowData[col.field]\n ? 'text-green-500 pi-check-circle'\n : 'text-red-500 pi-times-circle'\n \"></i>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n @case (columnTypeEnum.TEXT_AREA) {\n @if (rowData[col.field]) {\n <div [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT_AREA +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [pTooltip]=\"rowData[col.field]\">\n {{\n rowData[col.field].length > (col.maxLength ?? 50)\n ? (rowData[col.field]\n | slice: 0 : col.maxLength ?? 50) + \"...\"\n : rowData[col.field]\n }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n @case (columnTypeEnum.EMAIL) {\n @if (rowData[col.field]) {\n <div class=\"email-cell\" [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.EMAIL +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \">\n <span>{{ rowData[col.field] }}</span>\n <i class=\"pi pi-copy email-copy-icon\" (click)=\"copyToClipboard($event, rowData[col.field])\"\n [pTooltip]=\"'LABELS.COPY_EMAIL' | translate\">\n </i>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n @case (columnTypeEnum.TIMEPERIOD) {\n @if (rowData[col.field]) {\n <div [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TIMEPERIOD +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [pTooltip]=\"rowData[col.field] | timePeriod\" style=\"max-width: 200px\">\n {{ rowData[col.field] | timePeriod }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n @default {\n @if (col.flag && getNested(rowData, col.flagCodeField)) {\n <div [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" class=\"flex align-items-center gap-2\" style=\"max-width: 200px\"\n [pTooltip]=\"rowData | cell: col : dateFormat\">\n <img src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\" [class]=\"\n 'flag flag-' +\n (getNested(rowData, col.flagCodeField) || '')\n .toString()\n .toLowerCase()\n \" style=\"width: 22px\" alt=\"\" />\n <span [innerHTML]=\"rowData | cell: col : dateFormat\"></span>\n </div>\n } @else {\n @if (rowData | cell: col : dateFormat) {\n <div [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [pTooltip]=\"rowData | cell: col : dateFormat\" style=\"max-width: 200px\"\n [innerHTML]=\"rowData | cell: col : dateFormat\"></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n }\n }\n </td>\n }\n\n <td class=\"p-0\">\n @for (\n action of tableConfiguration.rowActions;\n track action?.key ?? $index\n ) {\n <phoenix-data-table-action [actionConfig]=\"action\" [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"></phoenix-data-table-action>\n }\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n @for (_ of skeletonRows; track $index; let rowIdx = $index) {\n <tr style=\"height: 40px\">\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <td class=\"w-2rem\">\n <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n </td>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <td class=\"w-2rem\">\n <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n </td>\n }\n }\n\n @for (col of columns; track col.field ?? col.header ?? $index) {\n <td>\n <p-skeleton\n [ngStyle]=\"{\n width: (60 + (rowIdx % 3) * 10) + '%',\n height: '1rem'\n }\"\n ></p-skeleton>\n </td>\n }\n\n <!-- actions col -->\n <td>\n <p-skeleton width=\"2rem\" height=\"1rem\"></p-skeleton>\n </td>\n </tr>\n }\n </ng-template>\n\n <ng-template #emptyCell let-dataCy=\"dataCy\">\n <span [attr.data-cy]=\"dataCy\">--</span>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n </div>\n </div>\n</div>", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}:host ::ng-deep .p-datatable-loading-overlay{display:none!important}:host ::ng-deep .p-datatable-mask{display:none!important}:host ::ng-deep .p-datatable.p-datatable-loading{opacity:1!important;pointer-events:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$5.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$5.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$5.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i9$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4$3.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }, { kind: "pipe", type: IsBooleanPipe, name: "isBoolean" }] });
|
|
3652
3892
|
}
|
|
3653
3893
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, decorators: [{
|
|
3654
3894
|
type: Component,
|
|
@@ -3670,12 +3910,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3670
3910
|
TimePeriodPipe,
|
|
3671
3911
|
IsBooleanPipe,
|
|
3672
3912
|
BadgeModule,
|
|
3673
|
-
], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n @if (selectedItems().length === 0) {\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [filters]=\"filters\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n ></table-caption>\n } @else {\n <div\n style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n >\n <div>\n @if (tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX) {\n <span>\n {{ selectedItems().length }}\n {{\n selectedItems().length === 1\n ? (\"LABELS.ITEM_SELECTED\" | translate)\n : (\"LABELS.ITEMS_SELECTED\" | translate)\n }}\n </span>\n }\n </div>\n\n <div>\n @for (\n action of tableConfiguration.bulkActions;\n track action?.key ?? $index\n ) {\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems(),\n });\n clearSelection()\n \"\n ></phoenix-data-table-action>\n }\n\n <button\n [attr.data-cy]=\"'clear-selection-button'\"\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"clearSelection()\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n }\n <div\n class=\"table-host\"\n [style.height]=\"tableConfiguration.scrollHeight ?? null\"\n >\n <p-table\n #dt\n [columns]=\"selectedColumns\"\n [value]=\"tableData\"\n [size]=\"'small'\"\n scrollable=\"true\"\n scrollHeight=\"flex\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"40\"\n [lazy]=\"true\"\n [rowSelectable]=\"isRowSelectable\"\n [totalRecords]=\"totalRecords\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <th class=\"custom-th\">\n <p-tableHeaderCheckbox\n [attr.data-cy]=\"'table-header-checkbox'\"\n ></p-tableHeaderCheckbox>\n </th>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <th class=\"custom-th\"></th>\n }\n }\n @for (\n col of columns;\n track col.field ?? col.header ?? $index;\n let colIdx = $index\n ) {\n <th\n pResizableColumn\n class=\"custom-th text-primary font-bold\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon\n [field]=\"col.field\"\n [attr.data-cy]=\"'sort-button-' + col.header\"\n ></p-sortIcon>\n </th>\n }\n\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-rowData\n let-columns=\"columns\"\n let-rowIndex=\"rowIndex\"\n >\n <tr>\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <td class=\"w-2rem\">\n <p-tableCheckbox\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \"\n [disabled]=\"\n rowData?.canSelect !== undefined\n ? !rowData.canSelect\n : false\n \"\n [value]=\"rowData\"\n ></p-tableCheckbox>\n </td>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <td>\n <p-tableRadioButton\n [value]=\"rowData\"\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"\n ></p-tableRadioButton>\n </td>\n }\n }\n @for (\n col of columns;\n track col.field ?? col.header ?? $index;\n let i = $index\n ) {\n <td\n (click)=\"\n isColumnClickable(i) ? onRowClick($event, rowData) : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer': isColumnClickable(i),\n }\"\n >\n @switch (col.columnType) {\n @case (columnTypeEnum.TAG) {\n @if (rowData[col.field]) {\n <div\n class=\"border-round-md font-semibold\"\n [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field + 'Color'] || '#ccc') + '56',\n color: rowData[col.field + 'Color'],\n }\"\n >\n {{\n rowData[col.field]?.name ||\n (rowData[col.field] | translate)\n }}\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.LIST_TAG) {\n @if (rowData[col.field]) {\n @for (item of rowData[col.field]; track $index) {\n <p-badge severity=\"warn\" class=\"mr-1\" [value]=\"item\" />\n }\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.OBJ_TAG) {\n @if (rowData[col.field]) {\n <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.OBJ_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field].color || '#ccc') + '56',\n color: rowData[col.field].color,\n }\"\n [value]=\"rowData[col.field]?.value | translate\"\n ></p-tag>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.PERSON) {\n @if (rowData[col.field]) {\n <p-avatar\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.PERSON +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [label]=\"rowData[col.field]?.name | initials\"\n class=\"cursor-pointer\"\n [style]=\"{\n 'background-color': '#9c27b0',\n color: '#ffffff',\n 'font-size': '0.8rem!important',\n }\"\n shape=\"circle\"\n (click)=\"personPop.toggle($event)\"\n ></p-avatar>\n\n <p-popover #personPop [dismissable]=\"true\">\n <div>\n <span class=\"text-lg\">{{\n rowData[col.field].name\n }}</span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ rowData[col.field].email ?? \" --\" }}\n </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-phone text-500\"></i>\n {{ rowData[col.field].phone ?? \" --\" }}\n </span>\n </div>\n </p-popover>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.LIST) {\n @if (rowData[col.field]?.length) {\n @if (rowData[col.field].length > 1) {\n <div\n class=\"cursor-pointer\"\n (click)=\"listPop.toggle($event)\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span class=\"mr-1\">{{\n rowData[col.field][0].name\n }}</span>\n <p-chip\n class=\"text-sm font-semibold p-1 m-0\"\n [label]=\"'+' + (rowData[col.field].length - 1)\"\n />\n </div>\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n\n <p-popover #listPop [dismissable]=\"true\">\n @for (\n item of rowData[col.field];\n track item.name;\n let isFirst = $first\n ) {\n @if (!isFirst) {\n <ul class=\"list-none m-0 p-0\">\n <li>{{ item.name }}</li>\n </ul>\n }\n }\n </p-popover>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.BOOLEAN) {\n @if (rowData[col.field] | isBoolean) {\n <i\n [pTooltip]=\"rowData?.[col.field + 'Tooltip']\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.BOOLEAN +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n class=\"pi\"\n [ngClass]=\"\n rowData[col.field]\n ? 'text-green-500 pi-check-circle'\n : 'text-red-500 pi-times-circle'\n \"\n ></i>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.TEXT_AREA) {\n @if (rowData[col.field]) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT_AREA +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field]\"\n >\n {{\n rowData[col.field].length > (col.maxLength ?? 50)\n ? (rowData[col.field]\n | slice: 0 : col.maxLength ?? 50) + \"...\"\n : rowData[col.field]\n }}\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.EMAIL) {\n @if (rowData[col.field]) {\n <div\n class=\"email-cell\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.EMAIL +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span>{{ rowData[col.field] }}</span>\n <i\n class=\"pi pi-copy email-copy-icon\"\n (click)=\"copyToClipboard($event, rowData[col.field])\"\n [pTooltip]=\"'LABELS.COPY_EMAIL' | translate\"\n >\n </i>\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.TIMEPERIOD) {\n @if (rowData[col.field]) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TIMEPERIOD +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field] | timePeriod\"\n style=\"max-width: 200px\"\n >\n {{ rowData[col.field] | timePeriod }}\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @default {\n @if (col.flag && getNested(rowData, col.flagCodeField)) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n class=\"flex align-items-center gap-2\"\n style=\"max-width: 200px\"\n [pTooltip]=\"rowData | cell: col : dateFormat\"\n >\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"\n 'flag flag-' +\n (getNested(rowData, col.flagCodeField) || '')\n .toString()\n .toLowerCase()\n \"\n style=\"width: 22px\"\n alt=\"\"\n />\n <span\n [innerHTML]=\"rowData | cell: col : dateFormat\"\n ></span>\n </div>\n } @else {\n @if (rowData | cell: col : dateFormat) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData | cell: col : dateFormat\"\n style=\"max-width: 200px\"\n [innerHTML]=\"rowData | cell: col : dateFormat\"\n ></div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n }\n }\n </td>\n }\n\n <td class=\"p-0\">\n @for (\n action of tableConfiguration.rowActions;\n track action?.key ?? $index\n ) {\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"\n ></phoenix-data-table-action>\n }\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell let-dataCy=\"dataCy\">\n <span [attr.data-cy]=\"dataCy\">--</span>\n </ng-template>\n\n <!-- <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 40px\">\n @for (col of columns; track $index) {\n <td>\n <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n </td>\n }\n <td>\n <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n </td>\n </tr>\n </ng-template> -->\n\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n </div>\n </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}\n"] }]
|
|
3674
|
-
}], propDecorators: { dt: [{
|
|
3913
|
+
], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n @if (selectedItems().length === 0) {\n <table-caption [columns]=\"columns\" [tableConfiguration]=\"tableConfiguration\" [filters]=\"filters\"\n [selectedItems]=\"selectedItems()\" (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\" (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"></table-caption>\n } @else {\n <div style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\">\n <div>\n @if (tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX) {\n <span>\n {{ selectedItems().length }}\n {{\n selectedItems().length === 1\n ? (\"LABELS.ITEM_SELECTED\" | translate)\n : (\"LABELS.ITEMS_SELECTED\" | translate)\n }}\n </span>\n }\n </div>\n\n <div>\n @for (\n action of tableConfiguration.bulkActions;\n track action?.key ?? $index\n ) {\n <phoenix-data-table-action [actionConfig]=\"action\" (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems(),\n });\n clearSelection()\n \"></phoenix-data-table-action>\n }\n\n <button [attr.data-cy]=\"'clear-selection-button'\" class=\"p-button p-button-text p-button-plain\"\n (click)=\"clearSelection()\" aria-label=\"Clear Selection\">\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n }\n <div class=\"table-host\" [style.height]=\"tableConfiguration.scrollHeight ?? null\">\n <p-table #dt [columns]=\"selectedColumns\" [value]=\"tableData\" [size]=\"'small'\" scrollable=\"true\" scrollHeight=\"flex\"\n [virtualScroll]=\"true\" [virtualScrollItemSize]=\"40\" [virtualScrollDelay]=\"80\" [totalRecords]=\"totalRecords\"\n [sortMode]=\"'multiple'\" [customSort]=\"true\" (sortFunction)=\"onCustomSort($event)\" [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\" [resizableColumns]=\"true\" columnResizeMode=\"expand\" [loading]=\"initialSortLoading\">\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <th class=\"custom-th\">\n <p-tableHeaderCheckbox [attr.data-cy]=\"'table-header-checkbox'\"></p-tableHeaderCheckbox>\n </th>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <th class=\"custom-th\"></th>\n }\n }\n @for (\n col of columns;\n track col.field ?? col.header ?? $index;\n let colIdx = $index\n ) {\n <th pResizableColumn class=\"custom-th text-primary font-bold\" [pSortableColumn]=\"col.field\">\n {{ col.header | translate }}\n <p-sortIcon [field]=\"col.field\" [attr.data-cy]=\"'sort-button-' + col.header\"></p-sortIcon>\n </th>\n }\n\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template #body let-rowData let-columns=\"columns\" let-rowIndex=\"rowIndex\">\n <tr>\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <td class=\"w-2rem\">\n <p-tableCheckbox [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \" [disabled]=\"\n rowData?.canSelect !== undefined\n ? !rowData.canSelect\n : false\n \" [value]=\"rowData\"></p-tableCheckbox>\n </td>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <td>\n <p-tableRadioButton [value]=\"rowData\" [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"></p-tableRadioButton>\n </td>\n }\n }\n @for (\n col of columns;\n track col.field ?? col.header ?? $index;\n let i = $index\n ) {\n <td (click)=\"\n isColumnClickable(i) ? onRowClick($event, rowData) : null\n \" [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer': isColumnClickable(i),\n }\">\n @switch (col.columnType) {\n @case (columnTypeEnum.TAG) {\n @if (rowData[col.field]) {\n <div class=\"border-round-md font-semibold\" [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field + 'Color'] || '#ccc') + '56',\n color: rowData[col.field + 'Color'],\n }\">\n {{\n rowData[col.field]?.name ||\n (rowData[col.field] | translate)\n }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n @case (columnTypeEnum.LIST_TAG) {\n @if (rowData[col.field]) {\n @for (item of rowData[col.field]; track $index) {\n <p-badge severity=\"warn\" class=\"mr-1\" [value]=\"item\" />\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n @case (columnTypeEnum.OBJ_TAG) {\n @if (rowData[col.field]) {\n <p-tag [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.OBJ_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field].color || '#ccc') + '56',\n color: rowData[col.field].color,\n }\" [value]=\"rowData[col.field]?.value | translate\"></p-tag>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n @case (columnTypeEnum.PERSON) {\n @if (rowData[col.field]) {\n <p-avatar [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.PERSON +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [label]=\"rowData[col.field]?.name | initials\" class=\"cursor-pointer\" [style]=\"{\n 'background-color': '#9c27b0',\n color: '#ffffff',\n 'font-size': '0.8rem!important',\n }\" shape=\"circle\" (click)=\"personPop.toggle($event)\"></p-avatar>\n\n <p-popover #personPop [dismissable]=\"true\">\n <div>\n <span class=\"text-lg\">{{\n rowData[col.field].name\n }}</span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ rowData[col.field].email ?? \" --\" }}\n </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-phone text-500\"></i>\n {{ rowData[col.field].phone ?? \" --\" }}\n </span>\n </div>\n </p-popover>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n @case (columnTypeEnum.LIST) {\n @if (rowData[col.field]?.length) {\n @if (rowData[col.field].length > 1) {\n <div class=\"cursor-pointer\" (click)=\"listPop.toggle($event)\" [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \">\n <span class=\"mr-1\">{{\n rowData[col.field][0].name\n }}</span>\n <p-chip class=\"text-sm font-semibold p-1 m-0\" [label]=\"'+' + (rowData[col.field].length - 1)\" />\n </div>\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n\n <p-popover #listPop [dismissable]=\"true\">\n @for (\n item of rowData[col.field];\n track item.name;\n let isFirst = $first\n ) {\n @if (!isFirst) {\n <ul class=\"list-none m-0 p-0\">\n <li>{{ item.name }}</li>\n </ul>\n }\n }\n </p-popover>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n @case (columnTypeEnum.BOOLEAN) {\n @if (rowData[col.field] | isBoolean) {\n <i [pTooltip]=\"rowData?.[col.field + 'Tooltip']\" [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.BOOLEAN +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" class=\"pi\" [ngClass]=\"\n rowData[col.field]\n ? 'text-green-500 pi-check-circle'\n : 'text-red-500 pi-times-circle'\n \"></i>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n @case (columnTypeEnum.TEXT_AREA) {\n @if (rowData[col.field]) {\n <div [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT_AREA +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [pTooltip]=\"rowData[col.field]\">\n {{\n rowData[col.field].length > (col.maxLength ?? 50)\n ? (rowData[col.field]\n | slice: 0 : col.maxLength ?? 50) + \"...\"\n : rowData[col.field]\n }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n @case (columnTypeEnum.EMAIL) {\n @if (rowData[col.field]) {\n <div class=\"email-cell\" [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.EMAIL +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \">\n <span>{{ rowData[col.field] }}</span>\n <i class=\"pi pi-copy email-copy-icon\" (click)=\"copyToClipboard($event, rowData[col.field])\"\n [pTooltip]=\"'LABELS.COPY_EMAIL' | translate\">\n </i>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n @case (columnTypeEnum.TIMEPERIOD) {\n @if (rowData[col.field]) {\n <div [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TIMEPERIOD +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [pTooltip]=\"rowData[col.field] | timePeriod\" style=\"max-width: 200px\">\n {{ rowData[col.field] | timePeriod }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n @default {\n @if (col.flag && getNested(rowData, col.flagCodeField)) {\n <div [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" class=\"flex align-items-center gap-2\" style=\"max-width: 200px\"\n [pTooltip]=\"rowData | cell: col : dateFormat\">\n <img src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\" [class]=\"\n 'flag flag-' +\n (getNested(rowData, col.flagCodeField) || '')\n .toString()\n .toLowerCase()\n \" style=\"width: 22px\" alt=\"\" />\n <span [innerHTML]=\"rowData | cell: col : dateFormat\"></span>\n </div>\n } @else {\n @if (rowData | cell: col : dateFormat) {\n <div [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [pTooltip]=\"rowData | cell: col : dateFormat\" style=\"max-width: 200px\"\n [innerHTML]=\"rowData | cell: col : dateFormat\"></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\" />\n }\n }\n }\n }\n </td>\n }\n\n <td class=\"p-0\">\n @for (\n action of tableConfiguration.rowActions;\n track action?.key ?? $index\n ) {\n <phoenix-data-table-action [actionConfig]=\"action\" [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"></phoenix-data-table-action>\n }\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n @for (_ of skeletonRows; track $index; let rowIdx = $index) {\n <tr style=\"height: 40px\">\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <td class=\"w-2rem\">\n <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n </td>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <td class=\"w-2rem\">\n <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n </td>\n }\n }\n\n @for (col of columns; track col.field ?? col.header ?? $index) {\n <td>\n <p-skeleton\n [ngStyle]=\"{\n width: (60 + (rowIdx % 3) * 10) + '%',\n height: '1rem'\n }\"\n ></p-skeleton>\n </td>\n }\n\n <!-- actions col -->\n <td>\n <p-skeleton width=\"2rem\" height=\"1rem\"></p-skeleton>\n </td>\n </tr>\n }\n </ng-template>\n\n <ng-template #emptyCell let-dataCy=\"dataCy\">\n <span [attr.data-cy]=\"dataCy\">--</span>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n </div>\n </div>\n</div>", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}:host ::ng-deep .p-datatable-loading-overlay{display:none!important}:host ::ng-deep .p-datatable-mask{display:none!important}:host ::ng-deep .p-datatable.p-datatable-loading{opacity:1!important;pointer-events:auto!important}\n"] }]
|
|
3914
|
+
}], ctorParameters: () => [], propDecorators: { dt: [{
|
|
3675
3915
|
type: ViewChild,
|
|
3676
3916
|
args: ['dt']
|
|
3677
|
-
}], data: [{
|
|
3678
|
-
type: Input
|
|
3679
3917
|
}], columns: [{
|
|
3680
3918
|
type: Input
|
|
3681
3919
|
}], selectedColumnsInput: [{
|
|
@@ -3692,6 +3930,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3692
3930
|
type: Output
|
|
3693
3931
|
}], saveColumns: [{
|
|
3694
3932
|
type: Output
|
|
3933
|
+
}], data: [{
|
|
3934
|
+
type: Input
|
|
3695
3935
|
}] } });
|
|
3696
3936
|
|
|
3697
3937
|
function startDueDateValidator(control) {
|
|
@@ -3990,12 +4230,12 @@ class MetaFormAbstract {
|
|
|
3990
4230
|
if (this.formSub$)
|
|
3991
4231
|
this.formSub$.unsubscribe();
|
|
3992
4232
|
}
|
|
3993
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormAbstract, deps: [{ token: i2$
|
|
4233
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormAbstract, deps: [{ token: i2$2.FormBuilder }, { token: MetaFormService }, { token: i3$2.TranslateService }, { token: i4.HttpClient }], target: i0.ɵɵFactoryTarget.Directive });
|
|
3994
4234
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: MetaFormAbstract, isStandalone: true, inputs: { metaForm: "metaForm", metaFormValues: "metaFormValues", metaFormControls: "metaFormControls", loading: "loading", disableForm: "disableForm", formButtons: "formButtons", groupForm: "groupForm", formStyle: "formStyle" }, outputs: { onFormSubmit: "onFormSubmit", onFormCancel: "onFormCancel" }, ngImport: i0 });
|
|
3995
4235
|
}
|
|
3996
4236
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormAbstract, decorators: [{
|
|
3997
4237
|
type: Directive
|
|
3998
|
-
}], ctorParameters: () => [{ type: i2$
|
|
4238
|
+
}], ctorParameters: () => [{ type: i2$2.FormBuilder }, { type: MetaFormService }, { type: i3$2.TranslateService }, { type: i4.HttpClient }], propDecorators: { metaForm: [{
|
|
3999
4239
|
type: Input
|
|
4000
4240
|
}], metaFormValues: [{
|
|
4001
4241
|
type: Input
|
|
@@ -4137,7 +4377,7 @@ class ObjectItemDialogComponent {
|
|
|
4137
4377
|
selectionType: tableSelectionType.RADIO_BTN,
|
|
4138
4378
|
};
|
|
4139
4379
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ObjectItemDialogComponent, deps: [{ token: i1$2.DynamicDialogRef }, { token: i1$2.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component });
|
|
4140
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ObjectItemDialogComponent, isStandalone: true, selector: "phoenix-object-item-dialog", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<div style=\"overflow: hidden; padding-bottom: 50px\">\n <phoenix-table\n #table\n [data]=\"tableData\"\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n (checkBoxSelection)=\"onSelectionChanged($event)\"\n >\n </phoenix-table>\n</div>\n<div class=\"absolute bottom-0 right-0 p-4\">\n <div class=\"flex gap-2\">\n <ng-container *ngFor=\"let action of actions\">\n <p-button\n [label]=\"action.label | translate\"\n [icon]=\"action.icon || ''\"\n [severity]=\"action.severity || 'primary'\"\n [disabled]=\"action.id === 'assign' && !hasSelection\"\n [id]=\"action.id\"\n (onClick)=\"actionClick(action.id)\"\n size=\"small\"\n ></p-button>\n </ng-container>\n</div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["
|
|
4380
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ObjectItemDialogComponent, isStandalone: true, selector: "phoenix-object-item-dialog", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<div style=\"overflow: hidden; padding-bottom: 50px\">\n <phoenix-table\n #table\n [data]=\"tableData\"\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n (checkBoxSelection)=\"onSelectionChanged($event)\"\n >\n </phoenix-table>\n</div>\n<div class=\"absolute bottom-0 right-0 p-4\">\n <div class=\"flex gap-2\">\n <ng-container *ngFor=\"let action of actions\">\n <p-button\n [label]=\"action.label | translate\"\n [icon]=\"action.icon || ''\"\n [severity]=\"action.severity || 'primary'\"\n [disabled]=\"action.id === 'assign' && !hasSelection\"\n [id]=\"action.id\"\n (onClick)=\"actionClick(action.id)\"\n size=\"small\"\n ></p-button>\n </ng-container>\n</div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["columns", "selectedColumnsInput", "tableConfiguration", "filters", "data"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
|
|
4141
4381
|
}
|
|
4142
4382
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ObjectItemDialogComponent, decorators: [{
|
|
4143
4383
|
type: Component,
|
|
@@ -4320,7 +4560,7 @@ class MetaAssignResponsibleComponent {
|
|
|
4320
4560
|
[text]="true"
|
|
4321
4561
|
></p-button>
|
|
4322
4562
|
</div>
|
|
4323
|
-
`, isInline: true, styles: ["::ng-deep .p-popover-content{padding:0!important}.person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:10px;width:200px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#e94260;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type:
|
|
4563
|
+
`, isInline: true, styles: ["::ng-deep .p-popover-content{padding:0!important}.person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:10px;width:200px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#e94260;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: PanelModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
|
|
4324
4564
|
}
|
|
4325
4565
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaAssignResponsibleComponent, decorators: [{
|
|
4326
4566
|
type: Component,
|
|
@@ -4728,7 +4968,7 @@ class MetaCalendarComponent extends BaseMetaField {
|
|
|
4728
4968
|
|
|
4729
4969
|
<phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
|
|
4730
4970
|
</div>
|
|
4731
|
-
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$
|
|
4971
|
+
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$6.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }] });
|
|
4732
4972
|
}
|
|
4733
4973
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaCalendarComponent, decorators: [{
|
|
4734
4974
|
type: Component,
|
|
@@ -4814,7 +5054,7 @@ class MetaCheckboxColorPickerComponent extends BaseMetaField {
|
|
|
4814
5054
|
[attr.data-cy]="'checkbox-' + control?.id"
|
|
4815
5055
|
(click)="popover.toggle($event)"
|
|
4816
5056
|
></div>
|
|
4817
|
-
`, isInline: true, styles: ["::ng-deep .p-popover-content{padding:0!important}.color-picker{display:flex;flex-direction:column;padding:10px}.color-row{display:flex;justify-content:center;gap:8px}.color-box{margin:2px;width:30px;height:30px;cursor:pointer;border-radius:4px}.color-box:hover{transform:scale(1.1);opacity:.9;box-shadow:0 0 5px #0003}.selected-color{width:35px;height:35px;border:2px solid #ccc;cursor:pointer;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type:
|
|
5057
|
+
`, isInline: true, styles: ["::ng-deep .p-popover-content{padding:0!important}.color-picker{display:flex;flex-direction:column;padding:10px}.color-row{display:flex;justify-content:center;gap:8px}.color-box{margin:2px;width:30px;height:30px;cursor:pointer;border-radius:4px}.color-box:hover{transform:scale(1.1);opacity:.9;box-shadow:0 0 5px #0003}.selected-color{width:35px;height:35px;border:2px solid #ccc;cursor:pointer;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }] });
|
|
4818
5058
|
}
|
|
4819
5059
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaCheckboxColorPickerComponent, decorators: [{
|
|
4820
5060
|
type: Component,
|
|
@@ -4887,7 +5127,7 @@ class MetaCheckboxComponent extends BaseMetaField {
|
|
|
4887
5127
|
{{ control | fieldLabel: currentLang | translate }}
|
|
4888
5128
|
<span *ngIf="control.mandatory" class="red-asterisk">*</span></label
|
|
4889
5129
|
>
|
|
4890
|
-
</div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$
|
|
5130
|
+
</div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: FieldLabelPipe, name: "fieldLabel" }] });
|
|
4891
5131
|
}
|
|
4892
5132
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaCheckboxComponent, decorators: [{
|
|
4893
5133
|
type: Component,
|
|
@@ -4943,7 +5183,7 @@ class MetaColorPickerComponent extends BaseMetaField {
|
|
|
4943
5183
|
@if (!control?.hidden) {
|
|
4944
5184
|
<phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
|
|
4945
5185
|
}
|
|
4946
|
-
`, isInline: true, styles: [":host ::ng-deep .color-swatch.p-colorpicker{width:35px;height:35px;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important}:host ::ng-deep .color-swatch .p-colorpicker-preview{width:35px!important;height:35px!important;border:none!important;border-radius:6px!important;box-shadow:none!important}:host ::ng-deep .color-swatch .p-colorpicker-preview:focus,:host ::ng-deep .color-swatch .p-colorpicker-preview:focus-visible{outline:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$
|
|
5186
|
+
`, isInline: true, styles: [":host ::ng-deep .color-swatch.p-colorpicker{width:35px;height:35px;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important}:host ::ng-deep .color-swatch .p-colorpicker-preview{width:35px!important;height:35px!important;border:none!important;border-radius:6px!important;box-shadow:none!important}:host ::ng-deep .color-swatch .p-colorpicker-preview:focus,:host ::ng-deep .color-swatch .p-colorpicker-preview:focus-visible{outline:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i2$7.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "inline", "format", "tabindex", "inputId", "autoZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus", "defaultColor", "appendTo"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }] });
|
|
4947
5187
|
}
|
|
4948
5188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaColorPickerComponent, decorators: [{
|
|
4949
5189
|
type: Component,
|
|
@@ -5028,7 +5268,7 @@ class MetaCurrencyComponent extends BaseMetaField {
|
|
|
5028
5268
|
[ctrl]="ctrl"
|
|
5029
5269
|
></phoenix-inline-field-error>
|
|
5030
5270
|
</div>
|
|
5031
|
-
`, isInline: true, styles: [":host ::ng-deep p-inputnumber input{width:100%!important;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$
|
|
5271
|
+
`, isInline: true, styles: [":host ::ng-deep p-inputnumber input{width:100%!important;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$7.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }] });
|
|
5032
5272
|
}
|
|
5033
5273
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaCurrencyComponent, decorators: [{
|
|
5034
5274
|
type: Component,
|
|
@@ -5105,7 +5345,7 @@ class MetaMultipleSelectComponent extends BaseMetaField {
|
|
|
5105
5345
|
*ngIf="!control?.hidden"
|
|
5106
5346
|
[ctrl]="ctrl"
|
|
5107
5347
|
></phoenix-inline-field-error>
|
|
5108
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$
|
|
5348
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i5$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: TranslateModule }] });
|
|
5109
5349
|
}
|
|
5110
5350
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaMultipleSelectComponent, decorators: [{
|
|
5111
5351
|
type: Component,
|
|
@@ -5176,7 +5416,7 @@ class MetaNumberComponent extends BaseMetaField {
|
|
|
5176
5416
|
[ctrl]="ctrl"
|
|
5177
5417
|
></phoenix-inline-field-error>
|
|
5178
5418
|
</div>
|
|
5179
|
-
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$
|
|
5419
|
+
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$7.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "ngmodule", type: InputTextModule }] });
|
|
5180
5420
|
}
|
|
5181
5421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaNumberComponent, decorators: [{
|
|
5182
5422
|
type: Component,
|
|
@@ -5246,7 +5486,7 @@ class MetaPasswordFeildComponent extends BaseMetaField {
|
|
|
5246
5486
|
<phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
|
|
5247
5487
|
}
|
|
5248
5488
|
</div>
|
|
5249
|
-
`, isInline: true, styles: [":host ::ng-deep .p-component{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$
|
|
5489
|
+
`, isInline: true, styles: [":host ::ng-deep .p-component{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i2$8.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }] });
|
|
5250
5490
|
}
|
|
5251
5491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaPasswordFeildComponent, decorators: [{
|
|
5252
5492
|
type: Component,
|
|
@@ -5313,7 +5553,7 @@ class MetaSelectButtonComponent extends BaseMetaField {
|
|
|
5313
5553
|
[ctrl]="ctrl"
|
|
5314
5554
|
></phoenix-inline-field-error>
|
|
5315
5555
|
</div>
|
|
5316
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$
|
|
5556
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$4.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }] });
|
|
5317
5557
|
}
|
|
5318
5558
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaSelectButtonComponent, decorators: [{
|
|
5319
5559
|
type: Component,
|
|
@@ -5470,7 +5710,7 @@ class MetaSingleSelectObjectBasedComponent extends BaseMetaField {
|
|
|
5470
5710
|
@if (!control?.hidden) {
|
|
5471
5711
|
<phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
|
|
5472
5712
|
}
|
|
5473
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$
|
|
5713
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "pipe", type: TranslateDropdownData, name: "translateDropdownData" }] });
|
|
5474
5714
|
}
|
|
5475
5715
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaSingleSelectObjectBasedComponent, decorators: [{
|
|
5476
5716
|
type: Component,
|
|
@@ -5774,7 +6014,7 @@ class MetaSingleSelectComponent extends BaseMetaField {
|
|
|
5774
6014
|
*ngIf="!control?.hidden"
|
|
5775
6015
|
[ctrl]="ctrl"
|
|
5776
6016
|
></phoenix-inline-field-error>
|
|
5777
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$
|
|
6017
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "pipe", type: TranslateDropdownData, name: "translateDropdownData" }] });
|
|
5778
6018
|
}
|
|
5779
6019
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaSingleSelectComponent, decorators: [{
|
|
5780
6020
|
type: Component,
|
|
@@ -6027,7 +6267,7 @@ class MetaStartDueDateComponent {
|
|
|
6027
6267
|
</div>
|
|
6028
6268
|
<phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
|
|
6029
6269
|
</div>
|
|
6030
|
-
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$
|
|
6270
|
+
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$6.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
|
|
6031
6271
|
}
|
|
6032
6272
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaStartDueDateComponent, decorators: [{
|
|
6033
6273
|
type: Component,
|
|
@@ -6118,7 +6358,7 @@ class MetaSwitchComponent extends BaseMetaField {
|
|
|
6118
6358
|
[ctrl]="ctrl"
|
|
6119
6359
|
></phoenix-inline-field-error>
|
|
6120
6360
|
</div>
|
|
6121
|
-
`, isInline: true, styles: [":host ::ng-deep .p-toggleswitch{margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$
|
|
6361
|
+
`, isInline: true, styles: [":host ::ng-deep .p-toggleswitch{margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$8.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
6122
6362
|
}
|
|
6123
6363
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaSwitchComponent, decorators: [{
|
|
6124
6364
|
type: Component,
|
|
@@ -6217,7 +6457,7 @@ class MetaTextAreaComponent extends BaseMetaField {
|
|
|
6217
6457
|
*ngIf="!control?.hidden"
|
|
6218
6458
|
[ctrl]="ctrl"
|
|
6219
6459
|
></phoenix-inline-field-error>
|
|
6220
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$
|
|
6460
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }] });
|
|
6221
6461
|
}
|
|
6222
6462
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaTextAreaComponent, decorators: [{
|
|
6223
6463
|
type: Component,
|
|
@@ -6427,7 +6667,7 @@ class MetaTextEditorComponent extends BaseMetaField {
|
|
|
6427
6667
|
></phoenix-inline-field-error>
|
|
6428
6668
|
</div>
|
|
6429
6669
|
</div>
|
|
6430
|
-
`, isInline: true, styles: [":is() .NgxEditor__Wrapper,:is() .NgxEditor__Content{min-height:120px}:is() .NgxEditor__MenuItem--IconContainer[title=\"Insert Image\"]{display:none!important}:is() .font-monospace{font-family:Courier New,Courier,monospace;font-size:13px}:is() .html-preview-content{padding:.75rem;background:var(--surface-ground);border:1px solid var(--surface-border);border-radius:var(--border-radius);min-height:50px}:is() .html-preview-content p{margin:0 0 .5rem}:is() .html-preview-content p:last-child{margin-bottom:0}:is() .html-preview-content ul,:is() .html-preview-content ol{margin:.5rem 0;padding-left:1.5rem}:is() .html-preview-content strong{font-weight:700}:is() .html-preview-content em{font-style:italic}:is() .html-preview-content h1,:is() .html-preview-content h2,:is() .html-preview-content h3,:is() .html-preview-content h4,:is() .html-preview-content h5,:is() .html-preview-content h6{margin:.5rem 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$
|
|
6670
|
+
`, isInline: true, styles: [":is() .NgxEditor__Wrapper,:is() .NgxEditor__Content{min-height:120px}:is() .NgxEditor__MenuItem--IconContainer[title=\"Insert Image\"]{display:none!important}:is() .font-monospace{font-family:Courier New,Courier,monospace;font-size:13px}:is() .html-preview-content{padding:.75rem;background:var(--surface-ground);border:1px solid var(--surface-border);border-radius:var(--border-radius);min-height:50px}:is() .html-preview-content p{margin:0 0 .5rem}:is() .html-preview-content p:last-child{margin-bottom:0}:is() .html-preview-content ul,:is() .html-preview-content ol{margin:.5rem 0;padding-left:1.5rem}:is() .html-preview-content strong{font-weight:700}:is() .html-preview-content em{font-style:italic}:is() .html-preview-content h1,:is() .html-preview-content h2,:is() .html-preview-content h3,:is() .html-preview-content h4,:is() .html-preview-content h5,:is() .html-preview-content h6{margin:.5rem 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: NgxEditorMenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }] });
|
|
6431
6671
|
}
|
|
6432
6672
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaTextEditorComponent, decorators: [{
|
|
6433
6673
|
type: Component,
|
|
@@ -6535,7 +6775,7 @@ class MetaTextInputComponent extends BaseMetaField {
|
|
|
6535
6775
|
[ctrl]="ctrl"
|
|
6536
6776
|
></phoenix-inline-field-error>
|
|
6537
6777
|
</div>
|
|
6538
|
-
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$
|
|
6778
|
+
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }] });
|
|
6539
6779
|
}
|
|
6540
6780
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaTextInputComponent, decorators: [{
|
|
6541
6781
|
type: Component,
|
|
@@ -6638,7 +6878,7 @@ class MetaTimeperiodComponent {
|
|
|
6638
6878
|
[ctrl]="ctrl"
|
|
6639
6879
|
></phoenix-inline-field-error>
|
|
6640
6880
|
</div>
|
|
6641
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$
|
|
6881
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }] });
|
|
6642
6882
|
}
|
|
6643
6883
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaTimeperiodComponent, decorators: [{
|
|
6644
6884
|
type: Component,
|
|
@@ -6735,7 +6975,7 @@ class MetaUploadComponent extends BaseMetaField {
|
|
|
6735
6975
|
[ctrl]="ctrl"
|
|
6736
6976
|
></phoenix-inline-field-error>
|
|
6737
6977
|
</div>
|
|
6738
|
-
`, isInline: true, styles: ["input[type=file]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$
|
|
6978
|
+
`, isInline: true, styles: ["input[type=file]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "directive", type: i4$4.KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
|
|
6739
6979
|
}
|
|
6740
6980
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaUploadComponent, decorators: [{
|
|
6741
6981
|
type: Component,
|
|
@@ -7052,7 +7292,7 @@ class ReadOnlyInputComponent {
|
|
|
7052
7292
|
return textarea.value;
|
|
7053
7293
|
}
|
|
7054
7294
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ReadOnlyInputComponent, deps: [{ token: i1$3.DomSanitizer }, { token: i3$2.TranslateService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7055
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ReadOnlyInputComponent, isStandalone: true, selector: "phoenix-read-only-input", inputs: { control: "control", metaform: "metaform" }, ngImport: i0, template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n@switch (control.configuration.type) {\n @case (ctrlType.TEXT_EDITOR) {\n @if (value) {\n <div\n [attr.data-cy]=\"'editor-' + control?.id\"\n class=\"read-only-editor-content\"\n [innerHTML]=\"value\"\n ></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.TEXT_AREA) {\n <div\n class=\"w-full mt-3 mb-2 font-semibold text-500 whitespace-pre-line\"\n [attr.data-cy]=\"'textarea-' + control?.id\"\n [hidden]=\"control?.hidden\"\n [innerText]=\"value\"\n ></div>\n }\n\n @case (ctrlType.SWITCH) {\n @if (value?.isBoolean) {\n <p-toggleSwitch\n [attr.data-cy]=\"'switch-' + control?.id\"\n styleClass=\"mt-2 ml-1 mr-1\"\n [disabled]=\"true\"\n [(ngModel)]=\"value.res\"\n ></p-toggleSwitch>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.DATE) {\n @if (value) {\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | date }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.START_DUE_DATE) {\n @if (value?.startDate) {\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n class=\"flex font-semibold text-500 mt-3 mb-2\"\n >\n <span style=\"padding-top: 3px\">{{ value.startDate | date }}</span>\n <div class=\"flex align-items-center p-2\">\n <i class=\"pi pi-arrow-right text-sm\" style=\"color: 'var(--surface-600)'\"></i>\n </div>\n <span style=\"padding-top: 3px\">{{ value.endDate | date }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.CHECKBOX) {\n @if (value) {\n <p-checkbox\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n styleClass=\"mt-3\"\n [(ngModel)]=\"value\"\n [binary]=\"true\"\n inputId=\"binary\"\n [disabled]=\"true\"\n ></p-checkbox>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.LINKS_DATA) {\n @if (value) {\n <div\n class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n [attr.data-cy]=\"'link-' + control?.id\"\n >\n @for (item of value; track item) {\n <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.ASSIGN) {\n @if (value?.name) {\n <div [attr.data-cy]=\"'number-' + control?.id\">\n <div>\n <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n <div class=\"person-wrap\">\n <div class=\"person-avatar\">\n {{ value?.name?.toUpperCase().charAt(0) }}\n </div>\n <div>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ value?.name }}\n </p>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ value?.function }}\n </p>\n </div>\n </div>\n </p-button>\n\n <p-popover #op [dismissable]=\"true\">\n <div>\n <span class=\"block mb-2\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ value.email ?? ' --' }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i>{{ value.phone ?? ' --' }}\n </p>\n </div>\n </p-popover>\n </div>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.CURRENCY) {\n @if (value) {\n <div\n [attr.data-cy]=\"'currency-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }} €\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.PASSWORD) {\n @if (value) {\n <div\n [attr.data-cy]=\"'password-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n <p-password\n class=\"ng-invalid ng-dirty\"\n [disabled]=\"true\"\n [(ngModel)]=\"value\"\n [feedback]=\"false\"\n ></p-password>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.SS_OPTION_OBJECT_BASED) {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value.value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.MS_OPTION) {\n @if (value) {\n <div\n [attr.data-cy]=\"'MS-OPTION-OBJECT-BASED-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 white-space-nowrap overflow-hidden\"\n >\n {{ value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.SS_OPTION) {\n @if (control?.configuration?.flagMode) {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 flex align-items-center gap-2\"\n >\n @if (value?.key) {\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + value.key.toLowerCase()\"\n style=\"width: 22px\"\n alt=\"\"\n />\n }\n <span>{{ value.userFriendlyMessage }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n } @else {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n }\n\n @case (ctrlType.NUMBER) {\n @if (value != null) {\n <div\n [attr.data-cy]=\"'number-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @default {\n @if (value) {\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | stripHtml }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n}\n\n<ng-template #fallBack>\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n --\n </div>\n</ng-template>", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .read-only-editor-content{margin-top:.75rem;margin-bottom:.5rem;font-weight:600;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$7.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i2$9.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: StripHtmlPipe, name: "stripHtml" }] });
|
|
7295
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ReadOnlyInputComponent, isStandalone: true, selector: "phoenix-read-only-input", inputs: { control: "control", metaform: "metaform" }, ngImport: i0, template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n@switch (control.configuration.type) {\n @case (ctrlType.TEXT_EDITOR) {\n @if (value) {\n <div\n [attr.data-cy]=\"'editor-' + control?.id\"\n class=\"read-only-editor-content\"\n [innerHTML]=\"value\"\n ></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.TEXT_AREA) {\n <div\n class=\"w-full mt-3 mb-2 font-semibold text-500 whitespace-pre-line\"\n [attr.data-cy]=\"'textarea-' + control?.id\"\n [hidden]=\"control?.hidden\"\n [innerText]=\"value\"\n ></div>\n }\n\n @case (ctrlType.SWITCH) {\n @if (value?.isBoolean) {\n <p-toggleSwitch\n [attr.data-cy]=\"'switch-' + control?.id\"\n styleClass=\"mt-2 ml-1 mr-1\"\n [disabled]=\"true\"\n [(ngModel)]=\"value.res\"\n ></p-toggleSwitch>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.DATE) {\n @if (value) {\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | date }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.START_DUE_DATE) {\n @if (value?.startDate) {\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n class=\"flex font-semibold text-500 mt-3 mb-2\"\n >\n <span style=\"padding-top: 3px\">{{ value.startDate | date }}</span>\n <div class=\"flex align-items-center p-2\">\n <i class=\"pi pi-arrow-right text-sm\" style=\"color: 'var(--surface-600)'\"></i>\n </div>\n <span style=\"padding-top: 3px\">{{ value.endDate | date }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.CHECKBOX) {\n @if (value) {\n <p-checkbox\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n styleClass=\"mt-3\"\n [(ngModel)]=\"value\"\n [binary]=\"true\"\n inputId=\"binary\"\n [disabled]=\"true\"\n ></p-checkbox>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.LINKS_DATA) {\n @if (value) {\n <div\n class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n [attr.data-cy]=\"'link-' + control?.id\"\n >\n @for (item of value; track item) {\n <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.ASSIGN) {\n @if (value?.name) {\n <div [attr.data-cy]=\"'number-' + control?.id\">\n <div>\n <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n <div class=\"person-wrap\">\n <div class=\"person-avatar\">\n {{ value?.name?.toUpperCase().charAt(0) }}\n </div>\n <div>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ value?.name }}\n </p>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ value?.function }}\n </p>\n </div>\n </div>\n </p-button>\n\n <p-popover #op [dismissable]=\"true\">\n <div>\n <span class=\"block mb-2\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ value.email ?? ' --' }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i>{{ value.phone ?? ' --' }}\n </p>\n </div>\n </p-popover>\n </div>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.CURRENCY) {\n @if (value) {\n <div\n [attr.data-cy]=\"'currency-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }} €\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.PASSWORD) {\n @if (value) {\n <div\n [attr.data-cy]=\"'password-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n <p-password\n class=\"ng-invalid ng-dirty\"\n [disabled]=\"true\"\n [(ngModel)]=\"value\"\n [feedback]=\"false\"\n ></p-password>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.SS_OPTION_OBJECT_BASED) {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value.value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.MS_OPTION) {\n @if (value) {\n <div\n [attr.data-cy]=\"'MS-OPTION-OBJECT-BASED-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 white-space-nowrap overflow-hidden\"\n >\n {{ value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.SS_OPTION) {\n @if (control?.configuration?.flagMode) {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 flex align-items-center gap-2\"\n >\n @if (value?.key) {\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + value.key.toLowerCase()\"\n style=\"width: 22px\"\n alt=\"\"\n />\n }\n <span>{{ value.userFriendlyMessage }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n } @else {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n }\n\n @case (ctrlType.NUMBER) {\n @if (value != null) {\n <div\n [attr.data-cy]=\"'number-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @default {\n @if (value) {\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | stripHtml }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n}\n\n<ng-template #fallBack>\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n --\n </div>\n</ng-template>", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .read-only-editor-content{margin-top:.75rem;margin-bottom:.5rem;font-weight:600;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$8.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i2$8.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: StripHtmlPipe, name: "stripHtml" }] });
|
|
7056
7296
|
}
|
|
7057
7297
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ReadOnlyInputComponent, decorators: [{
|
|
7058
7298
|
type: Component,
|
|
@@ -7228,7 +7468,7 @@ class MetaAssignAssetComponent {
|
|
|
7228
7468
|
></p-button>
|
|
7229
7469
|
}
|
|
7230
7470
|
</div>
|
|
7231
|
-
`, isInline: true, styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#e94260;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type:
|
|
7471
|
+
`, isInline: true, styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#e94260;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: PanelModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
|
|
7232
7472
|
}
|
|
7233
7473
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaAssignAssetComponent, decorators: [{
|
|
7234
7474
|
type: Component,
|
|
@@ -7468,7 +7708,7 @@ class MetaUploadComponentDragDrop extends BaseMetaField {
|
|
|
7468
7708
|
[ctrl]="ctrl"
|
|
7469
7709
|
></phoenix-inline-field-error>
|
|
7470
7710
|
</div>
|
|
7471
|
-
`, isInline: true, styles: ["input[type=file]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i2$
|
|
7711
|
+
`, isInline: true, styles: ["input[type=file]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i2$9.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
|
|
7472
7712
|
}
|
|
7473
7713
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaUploadComponentDragDrop, decorators: [{
|
|
7474
7714
|
type: Component,
|
|
@@ -7589,8 +7829,8 @@ class MetaFormComponent extends MetaFormAbstract {
|
|
|
7589
7829
|
this.metaService.setFormDirtyStatus(this.metaForm.dirty);
|
|
7590
7830
|
}
|
|
7591
7831
|
}
|
|
7592
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormComponent, deps: [{ token: i2$
|
|
7593
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormComponent, isStandalone: true, selector: "phoenix-meta-form", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n <div class=\"grid\">\n @for (control of metaFormControls; track control?.id) {\n @switch (control.configuration.type) {\n @case (ControlType.TEXT) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-text-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-input>\n }\n </div>\n }\n\n @case (ControlType.NUMBER) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'number-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-number-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-number-input>\n }\n </div>\n }\n\n @case (ControlType.TIMEPERIOD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'timeperiod-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-timeperiod\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-timeperiod>\n }\n </div>\n }\n\n @case (ControlType.CURRENCY) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'currency-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-currency\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-currency>\n }\n </div>\n }\n\n @case (ControlType.TEXT_AREA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-area-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-text-area\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-area>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ss-option-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-single-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION_OBJECT_BASED) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ss-option-object-based-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-single-select-object-based\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select-object-based>\n }\n </div>\n }\n\n @case (ControlType.MS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ms-option-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-multiple-select\n [attr.data-cy]=\"'multiSelect-' + control?.id\"\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-multiple-select>\n }\n </div>\n }\n\n @case (ControlType.START_DUE_DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'start-due-date-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-start-due-date\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-start-due-date>\n }\n </div>\n }\n\n @case (ControlType.DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'date-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-calendar\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-calendar>\n }\n </div>\n }\n\n @case (ControlType.TEXT_EDITOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-editor-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-text-editor\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-editor>\n }\n </div>\n }\n\n @case (ControlType.CHECKBOX) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column justify-content-end\"\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-checkbox\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox>\n }\n </div>\n }\n\n @case (ControlType.CHECKBOX_COLOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column justify-content-end\"\n [attr.data-cy]=\"'CHECKBOX_COLOR-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-checkbox-color-picker\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox-color-picker>\n }\n </div>\n }\n\n @case (ControlType.SWITCH) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'switch-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-switch\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-switch>\n }\n </div>\n }\n\n @case (ControlType.SELECT_BUTTON) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'select-button-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-select-button\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-select-button>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-assign-responsible\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-responsible>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN_ASSET) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-assign-asset\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-asset>\n }\n </div>\n }\n\n @case (ControlType.LINKS_DATA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control | fieldCol\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'links-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <!-- <phoenix-meta-object-links\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-object-links> -->\n }\n </div>\n }\n\n @case (ControlType.PASSWORD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'password-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-password-feild\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-password-feild>\n }\n </div>\n }\n\n @case (ControlType.COLOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'color-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-color-picker\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-color-picker>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD) {\n <div\n [style]=\"{ order: control.order }\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD_DRAG_DROP) {\n <div\n [style]=\"{ order: control.order }\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload-dragdrop\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload-dragdrop>\n }\n </div>\n }\n\n @case (ControlType.SLOT) {\n <ng-content\n [select]=\"[control.configuration.key]\"\n ></ng-content>\n }\n }\n }\n </div>\n\n @if (formButtons) {\n <div class=\"flex justify-content-end\">\n <p-button\n class=\"mr-1\"\n [disabled]=\"!metaForm.valid || disableForm\"\n type=\"submit\"\n label=\"{{ 'ACTION.SAVE' | translate }}\"\n [attr.data-cy]=\"'submit-button'\"\n [loading]=\"loading\"\n ></p-button>\n\n <p-button\n [disabled]=\"disableForm\"\n styleClass=\"p-button-link\"\n [text]=\"true\"\n (onClick)=\"onCancel()\"\n label=\"{{ 'ACTION.CANCEL' | translate }}\"\n [attr.data-cy]=\"'cancel-button'\"\n ></p-button>\n </div>\n }\n</form>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type:
|
|
7832
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormComponent, deps: [{ token: i2$2.FormBuilder }, { token: MetaFormService }, { token: i3$2.TranslateService }, { token: i4.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
7833
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormComponent, isStandalone: true, selector: "phoenix-meta-form", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n <div class=\"grid\">\n @for (control of metaFormControls; track control?.id) {\n @switch (control.configuration.type) {\n @case (ControlType.TEXT) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-text-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-input>\n }\n </div>\n }\n\n @case (ControlType.NUMBER) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'number-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-number-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-number-input>\n }\n </div>\n }\n\n @case (ControlType.TIMEPERIOD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'timeperiod-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-timeperiod\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-timeperiod>\n }\n </div>\n }\n\n @case (ControlType.CURRENCY) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'currency-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-currency\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-currency>\n }\n </div>\n }\n\n @case (ControlType.TEXT_AREA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-area-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-text-area\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-area>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ss-option-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-single-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION_OBJECT_BASED) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ss-option-object-based-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-single-select-object-based\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select-object-based>\n }\n </div>\n }\n\n @case (ControlType.MS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ms-option-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-multiple-select\n [attr.data-cy]=\"'multiSelect-' + control?.id\"\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-multiple-select>\n }\n </div>\n }\n\n @case (ControlType.START_DUE_DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'start-due-date-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-start-due-date\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-start-due-date>\n }\n </div>\n }\n\n @case (ControlType.DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'date-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-calendar\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-calendar>\n }\n </div>\n }\n\n @case (ControlType.TEXT_EDITOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-editor-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-text-editor\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-editor>\n }\n </div>\n }\n\n @case (ControlType.CHECKBOX) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column justify-content-end\"\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-checkbox\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox>\n }\n </div>\n }\n\n @case (ControlType.CHECKBOX_COLOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column justify-content-end\"\n [attr.data-cy]=\"'CHECKBOX_COLOR-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-checkbox-color-picker\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox-color-picker>\n }\n </div>\n }\n\n @case (ControlType.SWITCH) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'switch-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-switch\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-switch>\n }\n </div>\n }\n\n @case (ControlType.SELECT_BUTTON) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'select-button-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-select-button\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-select-button>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-assign-responsible\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-responsible>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN_ASSET) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-assign-asset\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-asset>\n }\n </div>\n }\n\n @case (ControlType.LINKS_DATA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control | fieldCol\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'links-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <!-- <phoenix-meta-object-links\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-object-links> -->\n }\n </div>\n }\n\n @case (ControlType.PASSWORD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'password-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-password-feild\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-password-feild>\n }\n </div>\n }\n\n @case (ControlType.COLOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'color-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-color-picker\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-color-picker>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD) {\n <div\n [style]=\"{ order: control.order }\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD_DRAG_DROP) {\n <div\n [style]=\"{ order: control.order }\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload-dragdrop\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload-dragdrop>\n }\n </div>\n }\n\n @case (ControlType.SLOT) {\n <ng-content\n [select]=\"[control.configuration.key]\"\n ></ng-content>\n }\n }\n }\n </div>\n\n @if (formButtons) {\n <div class=\"flex justify-content-end\">\n <p-button\n class=\"mr-1\"\n [disabled]=\"!metaForm.valid || disableForm\"\n type=\"submit\"\n label=\"{{ 'ACTION.SAVE' | translate }}\"\n [attr.data-cy]=\"'submit-button'\"\n [loading]=\"loading\"\n ></p-button>\n\n <p-button\n [disabled]=\"disableForm\"\n styleClass=\"p-button-link\"\n [text]=\"true\"\n (onClick)=\"onCancel()\"\n label=\"{{ 'ACTION.CANCEL' | translate }}\"\n [attr.data-cy]=\"'cancel-button'\"\n ></p-button>\n </div>\n }\n</form>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type:
|
|
7594
7834
|
//metafields -> to one module and than import here
|
|
7595
7835
|
MetaTextEditorComponent, selector: "phoenix-meta-text-editor", inputs: ["previewMode", "hideLabel"] }, { kind: "component", type: MetaCheckboxComponent, selector: "phoenix-meta-checkbox" }, { kind: "component", type: MetaTextInputComponent, selector: "phoenix-meta-text-input" }, { kind: "component", type: MetaSingleSelectComponent, selector: "phoenix-meta-single-select" }, { kind: "component", type: MetaStartDueDateComponent, selector: "phoenix-meta-start-due-date", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaTextAreaComponent, selector: "phoenix-meta-text-area" }, { kind: "component", type: MetaMultipleSelectComponent, selector: "phoenix-meta-multiple-select" }, { kind: "component", type: MetaCalendarComponent, selector: "phoenix-meta-calendar" }, { kind: "component", type: MetaUploadComponentDragDrop, selector: "phoenix-meta-upload-dragdrop" }, { kind: "component", type: MetaSwitchComponent, selector: "phoenix-meta-switch" }, { kind: "component", type: MetaPasswordFeildComponent, selector: "phoenix-meta-password-feild" }, { kind: "component", type: MetaTimeperiodComponent, selector: "phoenix-meta-timeperiod", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaCurrencyComponent, selector: "phoenix-meta-currency" }, { kind: "component", type: MetaNumberComponent, selector: "phoenix-meta-number-input" }, { kind: "component", type: MetaAssignResponsibleComponent, selector: "phoenix-meta-assign-responsible", inputs: ["control", "parentForm", "disable"] }, { kind: "component", type: MetaAssignAssetComponent, selector: "phoenix-meta-assign-asset", inputs: ["control", "parentForm", "disable"] }, { kind: "component", type: MetaColorPickerComponent, selector: "phoenix-meta-color-picker" }, { kind: "component", type: ReadOnlyInputComponent, selector: "phoenix-read-only-input", inputs: ["control", "metaform"] }, { kind: "component", type: MetaSelectButtonComponent, selector: "phoenix-meta-select-button" }, { kind: "component", type: MetaUploadComponent, selector: "phoenix-meta-upload" }, { kind: "component", type: MetaSingleSelectObjectBasedComponent, selector: "phoenix-meta-single-select-object-based" }, { kind: "component", type: MetaCheckboxColorPickerComponent, selector: "phoenix-meta-checkbox-color-picker" }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }], encapsulation: i0.ViewEncapsulation.None });
|
|
7596
7836
|
}
|
|
@@ -7628,7 +7868,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7628
7868
|
MetaSingleSelectObjectBasedComponent,
|
|
7629
7869
|
MetaCheckboxColorPickerComponent,
|
|
7630
7870
|
], encapsulation: ViewEncapsulation.None, template: "<form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n <div class=\"grid\">\n @for (control of metaFormControls; track control?.id) {\n @switch (control.configuration.type) {\n @case (ControlType.TEXT) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-text-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-input>\n }\n </div>\n }\n\n @case (ControlType.NUMBER) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'number-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-number-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-number-input>\n }\n </div>\n }\n\n @case (ControlType.TIMEPERIOD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'timeperiod-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-timeperiod\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-timeperiod>\n }\n </div>\n }\n\n @case (ControlType.CURRENCY) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'currency-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-currency\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-currency>\n }\n </div>\n }\n\n @case (ControlType.TEXT_AREA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-area-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-text-area\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-area>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ss-option-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-single-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION_OBJECT_BASED) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ss-option-object-based-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-single-select-object-based\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select-object-based>\n }\n </div>\n }\n\n @case (ControlType.MS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ms-option-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-multiple-select\n [attr.data-cy]=\"'multiSelect-' + control?.id\"\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-multiple-select>\n }\n </div>\n }\n\n @case (ControlType.START_DUE_DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'start-due-date-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-start-due-date\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-start-due-date>\n }\n </div>\n }\n\n @case (ControlType.DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'date-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-calendar\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-calendar>\n }\n </div>\n }\n\n @case (ControlType.TEXT_EDITOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-editor-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-text-editor\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-editor>\n }\n </div>\n }\n\n @case (ControlType.CHECKBOX) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column justify-content-end\"\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-checkbox\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox>\n }\n </div>\n }\n\n @case (ControlType.CHECKBOX_COLOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column justify-content-end\"\n [attr.data-cy]=\"'CHECKBOX_COLOR-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-checkbox-color-picker\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox-color-picker>\n }\n </div>\n }\n\n @case (ControlType.SWITCH) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'switch-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-switch\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-switch>\n }\n </div>\n }\n\n @case (ControlType.SELECT_BUTTON) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'select-button-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-select-button\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-select-button>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-assign-responsible\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-responsible>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN_ASSET) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-assign-asset\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-asset>\n }\n </div>\n }\n\n @case (ControlType.LINKS_DATA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control | fieldCol\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'links-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <!-- <phoenix-meta-object-links\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-object-links> -->\n }\n </div>\n }\n\n @case (ControlType.PASSWORD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'password-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-password-feild\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-password-feild>\n }\n </div>\n }\n\n @case (ControlType.COLOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'color-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-color-picker\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-color-picker>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD) {\n <div\n [style]=\"{ order: control.order }\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD_DRAG_DROP) {\n <div\n [style]=\"{ order: control.order }\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload-dragdrop\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload-dragdrop>\n }\n </div>\n }\n\n @case (ControlType.SLOT) {\n <ng-content\n [select]=\"[control.configuration.key]\"\n ></ng-content>\n }\n }\n }\n </div>\n\n @if (formButtons) {\n <div class=\"flex justify-content-end\">\n <p-button\n class=\"mr-1\"\n [disabled]=\"!metaForm.valid || disableForm\"\n type=\"submit\"\n label=\"{{ 'ACTION.SAVE' | translate }}\"\n [attr.data-cy]=\"'submit-button'\"\n [loading]=\"loading\"\n ></p-button>\n\n <p-button\n [disabled]=\"disableForm\"\n styleClass=\"p-button-link\"\n [text]=\"true\"\n (onClick)=\"onCancel()\"\n label=\"{{ 'ACTION.CANCEL' | translate }}\"\n [attr.data-cy]=\"'cancel-button'\"\n ></p-button>\n </div>\n }\n</form>" }]
|
|
7631
|
-
}], ctorParameters: () => [{ type: i2$
|
|
7871
|
+
}], ctorParameters: () => [{ type: i2$2.FormBuilder }, { type: MetaFormService }, { type: i3$2.TranslateService }, { type: i4.HttpClient }] });
|
|
7632
7872
|
|
|
7633
7873
|
class MetaFormButtonsComponent {
|
|
7634
7874
|
metaFormService;
|
|
@@ -7663,7 +7903,7 @@ class MetaFormButtonsComponent {
|
|
|
7663
7903
|
this.sub$?.unsubscribe();
|
|
7664
7904
|
}
|
|
7665
7905
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormButtonsComponent, deps: [{ token: MetaFormService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7666
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: MetaFormButtonsComponent, isStandalone: true, selector: "phoenix-meta-form-buttons", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isCreateAnother: { classPropertyName: "isCreateAnother", publicName: "isCreateAnother", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleSave: "handleSave", handleCancel: "handleCancel" }, providers: [], ngImport: i0, template: "<!-- <ng-template *ngIf=\"formActive$ | async as formState\" pTemplate=\"footer\">\n <div *ngIf=\"!formState\" class=\"flex justify-content-end p-2\"> -->\n<div *ngIf=\"display\" class=\"flex justify-content-end p-2\">\n <p-checkbox\n *ngIf=\"isCreateAnother()\"\n id=\"dialog-buttons-checkbox\"\n data-cy=\"dialog-buttons-checkbox-cy\"\n [(ngModel)]=\"createAnother\"\n [binary]=\"true\"\n inputId=\"binary\"\n class=\"mr-3\"\n ></p-checkbox>\n\n <button\n class=\"mr-2\"\n pButton\n [disabled]=\"isDisabled()\"\n [loading]=\"isLoading()\"\n (click)=\"handleSave.emit({ isAnother: createAnother })\"\n [attr.data-cy]=\"'submit-button'\"\n >\n <span class=\"mx-1\">{{ \"ACTION.SAVE\" | translate }}</span>\n </button>\n\n <p-button\n [text]=\"true\"\n (click)=\"handleCancel.emit('CANCEL')\"\n [attr.data-cy]=\"'cancel-button'\"\n >\n {{ \"ACTION.CANCEL\" | translate }}\n </p-button>\n</div>\n<!-- </div>\n</ng-template> -->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$
|
|
7906
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: MetaFormButtonsComponent, isStandalone: true, selector: "phoenix-meta-form-buttons", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isCreateAnother: { classPropertyName: "isCreateAnother", publicName: "isCreateAnother", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleSave: "handleSave", handleCancel: "handleCancel" }, providers: [], ngImport: i0, template: "<!-- <ng-template *ngIf=\"formActive$ | async as formState\" pTemplate=\"footer\">\n <div *ngIf=\"!formState\" class=\"flex justify-content-end p-2\"> -->\n<div *ngIf=\"display\" class=\"flex justify-content-end p-2\">\n <p-checkbox\n *ngIf=\"isCreateAnother()\"\n id=\"dialog-buttons-checkbox\"\n data-cy=\"dialog-buttons-checkbox-cy\"\n [(ngModel)]=\"createAnother\"\n [binary]=\"true\"\n inputId=\"binary\"\n class=\"mr-3\"\n ></p-checkbox>\n\n <button\n class=\"mr-2\"\n pButton\n [disabled]=\"isDisabled()\"\n [loading]=\"isLoading()\"\n (click)=\"handleSave.emit({ isAnother: createAnother })\"\n [attr.data-cy]=\"'submit-button'\"\n >\n <span class=\"mx-1\">{{ \"ACTION.SAVE\" | translate }}</span>\n </button>\n\n <p-button\n [text]=\"true\"\n (click)=\"handleCancel.emit('CANCEL')\"\n [attr.data-cy]=\"'cancel-button'\"\n >\n {{ \"ACTION.CANCEL\" | translate }}\n </p-button>\n</div>\n<!-- </div>\n</ng-template> -->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
|
|
7667
7907
|
}
|
|
7668
7908
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormButtonsComponent, decorators: [{
|
|
7669
7909
|
type: Component,
|
|
@@ -7696,7 +7936,7 @@ class GroupsFormComponent extends MetaFormAbstract {
|
|
|
7696
7936
|
}
|
|
7697
7937
|
}
|
|
7698
7938
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GroupsFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
7699
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GroupsFormComponent, isStandalone: true, selector: "phoenix-groups-form", inputs: { activePanelsIndex: "activePanelsIndex" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-accordion [multiple]=\"true\" [(value)]=\"activePanelsIndex\">\n @if (metaFormControls?.length) {\n <form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n @for (group of metaFormControls; track group.groupName; let idx = $index) {\n <div [style]=\"{ order: group.order }\" class=\"w-full\">\n <p-accordion-panel\n [value]=\"idx\"\n [attr.data-cy]=\"'table-accordion-header-' + group.groupName\"\n >\n <p-accordion-header>\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i class=\"pi pi-minus-circle\"></i>\n } @else {\n <i class=\"pi pi-plus-circle\"></i>\n }\n </ng-template>\n {{ group.groupName | translate }}\n </p-accordion-header>\n\n <p-accordion-content>\n <div [style]=\"formStyle\" class=\"grid align-items-end\">\n @for (control of group.ctrl; track (control?.id ?? control?.configuration?.key)) {\n @switch (control.configuration.type) {\n\n @case (ControlType.TEXT) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-text-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-input>\n }\n </div>\n }\n\n @case (ControlType.NUMBER) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-number-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-number-input>\n }\n </div>\n }\n\n @case (ControlType.TIMEPERIOD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-timeperiod\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-timeperiod>\n }\n </div>\n }\n\n @case (ControlType.CURRENCY) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-currency\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-currency>\n }\n </div>\n }\n\n @case (ControlType.TEXT_AREA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-text-area\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-area>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-single-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION_OBJECT_BASED) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-single-select-object-based\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select-object-based>\n }\n </div>\n }\n\n @case (ControlType.MS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-multiple-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-multiple-select>\n }\n </div>\n }\n\n @case (ControlType.START_DUE_DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-start-due-date\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-start-due-date>\n }\n </div>\n }\n\n @case (ControlType.DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-calendar\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-calendar>\n }\n </div>\n }\n\n @case (ControlType.TEXT_EDITOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-text-editor\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-editor>\n }\n </div>\n }\n\n @case (ControlType.CHECKBOX) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-checkbox\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox>\n </div>\n }\n\n @case (ControlType.SWITCH) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-switch\n [disable]=\"true\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-switch>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-assign-responsible\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-responsible>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN_ASSET) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-assign-asset\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-asset>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD) {\n <div\n [style]=\"{ order: control.order }\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD_DRAG_DROP) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload-dragdrop\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload-dragdrop>\n }\n </div>\n }\n\n @case (ControlType.LINKS_DATA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control | fieldCol\"\n class=\"flex flex-column\"\n >\n </div>\n }\n\n @case (ControlType.PASSWORD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-password-feild\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-password-feild>\n </div>\n }\n\n @default {\n }\n }\n }\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </div>\n }\n </form>\n }\n</p-accordion>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type:
|
|
7939
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GroupsFormComponent, isStandalone: true, selector: "phoenix-groups-form", inputs: { activePanelsIndex: "activePanelsIndex" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-accordion [multiple]=\"true\" [(value)]=\"activePanelsIndex\">\n @if (metaFormControls?.length) {\n <form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n @for (group of metaFormControls; track group.groupName; let idx = $index) {\n <div [style]=\"{ order: group.order }\" class=\"w-full\">\n <p-accordion-panel\n [value]=\"idx\"\n [attr.data-cy]=\"'table-accordion-header-' + group.groupName\"\n >\n <p-accordion-header>\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i class=\"pi pi-minus-circle\"></i>\n } @else {\n <i class=\"pi pi-plus-circle\"></i>\n }\n </ng-template>\n {{ group.groupName | translate }}\n </p-accordion-header>\n\n <p-accordion-content>\n <div [style]=\"formStyle\" class=\"grid align-items-end\">\n @for (control of group.ctrl; track (control?.id ?? control?.configuration?.key)) {\n @switch (control.configuration.type) {\n\n @case (ControlType.TEXT) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-text-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-input>\n }\n </div>\n }\n\n @case (ControlType.NUMBER) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-number-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-number-input>\n }\n </div>\n }\n\n @case (ControlType.TIMEPERIOD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-timeperiod\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-timeperiod>\n }\n </div>\n }\n\n @case (ControlType.CURRENCY) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-currency\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-currency>\n }\n </div>\n }\n\n @case (ControlType.TEXT_AREA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-text-area\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-area>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-single-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION_OBJECT_BASED) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-single-select-object-based\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select-object-based>\n }\n </div>\n }\n\n @case (ControlType.MS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-multiple-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-multiple-select>\n }\n </div>\n }\n\n @case (ControlType.START_DUE_DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-start-due-date\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-start-due-date>\n }\n </div>\n }\n\n @case (ControlType.DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-calendar\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-calendar>\n }\n </div>\n }\n\n @case (ControlType.TEXT_EDITOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-text-editor\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-editor>\n }\n </div>\n }\n\n @case (ControlType.CHECKBOX) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-checkbox\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox>\n </div>\n }\n\n @case (ControlType.SWITCH) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-switch\n [disable]=\"true\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-switch>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-assign-responsible\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-responsible>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN_ASSET) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-assign-asset\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-asset>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD) {\n <div\n [style]=\"{ order: control.order }\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD_DRAG_DROP) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload-dragdrop\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload-dragdrop>\n }\n </div>\n }\n\n @case (ControlType.LINKS_DATA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control | fieldCol\"\n class=\"flex flex-column\"\n >\n </div>\n }\n\n @case (ControlType.PASSWORD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-password-feild\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-password-feild>\n </div>\n }\n\n @default {\n }\n }\n }\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </div>\n }\n </form>\n }\n</p-accordion>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type:
|
|
7700
7940
|
// InputTextModule,
|
|
7701
7941
|
// InputTextareaModule,
|
|
7702
7942
|
// DatePickerModule,
|
|
@@ -7824,7 +8064,7 @@ class StatusAttributeDisplayComponent {
|
|
|
7824
8064
|
return (attr?.value?.charAt(0) || '-').toUpperCase();
|
|
7825
8065
|
}
|
|
7826
8066
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusAttributeDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7827
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: StatusAttributeDisplayComponent, isStandalone: true, selector: "phoenix-status-attribute-display", inputs: { attr: "attr", dateFormat: "dateFormat" }, outputs: { listItemClick: "listItemClick" }, ngImport: i0, template: "<div class=\"attribute flex justify-content-start align-items-start\">\n <div class=\"flex flex-column\">\n <!-- LABEL + ICON -->\n <div class=\"flex align-items-start gap-1\">\n <label\n class=\"font-semibold text-500\"\n [ngClass]=\"{\n 'wrap-label': isMultiWordLabel(attr.label | translate),\n 'nowrap-label': !isMultiWordLabel(attr.label | translate)\n }\"\n >\n {{ attr.label | translate }}\n </label>\n <i\n [attr.data-cy]=\"'status-togg-button-item'\"\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n style=\"font-size: 0.875rem; line-height: 1\"\n (mouseenter)=\"popover.toggle($event)\"\n (mouseleave)=\"popover.toggle($event)\"\n >\n </i>\n </div>\n\n <!-- VALUE -->\n <div\n *ngIf=\"attr?.value; else empty\"\n [ngSwitch]=\"attr.type\"\n style=\"white-space: nowrap\"\n >\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"'STRING'\">\n <!-- If URL exist, render as link -->\n <a\n *ngIf=\"attr.url; else plainText\"\n [href]=\"attr.url\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n >\n {{ attr.value | textLength : 20 }}\n <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n </a>\n <!-- Pnly text if url doesn't exist -->\n <ng-template #plainText>\n <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n {{ attr.value | textLength : 20 }}\n </span>\n </ng-template>\n </ng-container>\n\n <!-- DATE -->\n <span *ngSwitchCase=\"'DATE'\">\n <i class=\"pi pi-calendar text-blue-900\"></i>\n {{\n attr.value\n ? (attr.value | date : attr.dateFormat ?? dateFormat)\n : \"--\"\n }}\n </span>\n\n <!-- LINK -->\n\n <a\n *ngSwitchCase=\"'LINK'\"\n [href]=\"attr.url\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ attr.value || \"--\" }} <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n </a>\n\n <!-- PERSON -->\n <div\n class=\"person-wrap flex align-items-center gap-2\"\n *ngSwitchCase=\"'PERSON'\"\n >\n <div class=\"person-avatar\">\n {{ getPersonInitial(attr) }}\n </div>\n\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n [pTooltip]=\"getPersonTooltip(attr)\"\n >\n {{ getPersonDisplayName(attr) }}\n </div>\n </div>\n\n <!-- COUNTRY -->\n <span *ngSwitchCase=\"'COUNTRY'\">\n <span class=\"flex align-items-center gap-2\">\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + attr.value?.code.toLowerCase()\"\n style=\"width: 22px\"\n />\n <span\n [pTooltip]=\"attr.value?.name?.length > 20 ? attr.value?.name : null\"\n >\n {{ attr.value?.name || attr.value?.code || \"--\" }}\n </span>\n </span>\n </span>\n\n <!-- LIST -->\n <ul\n *ngSwitchCase=\"'LIST'\"\n class=\"list overflow-x-hidden\"\n style=\"margin-top: 0.25rem\"\n >\n <li\n *ngFor=\"let item of attr.value\"\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1 cursor-pointer\"\n (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n >\n <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n {{ item.name | textLength : 20 }}\n </span>\n <i class=\"pi pi-link ml-1 text-sm\"></i>\n </li>\n </ul>\n\n <!-- DEFAULT -->\n <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n {{ attr.value || \"--\" }}\n </span>\n </div>\n\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n </div>\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div\n style=\"\n display: grid;\n grid-template-columns: max-content 1fr;\n column-gap: 1rem;\n row-gap: 0.5rem;\n align-items: start;\n width: 100%;\n \"\n >\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item?.type || statusTooltipType.TAG\">\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a\n *ngIf=\"item.value; else empty\"\n [href]=\"getFullUrl(item.value)\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ item.label || \"Open\" }}\n </a>\n </ng-container>\n\n <!-- STRING type: renders text with truncation and tooltip if too long -->\n <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n <div\n *ngIf=\"item.value; else empty\"\n class=\"text-sm\"\n style=\"\n white-space: normal;\n word-break: break-word;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n </ng-container>\n\n <!-- DATE type: formatted date or fallback -->\n <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n <span *ngIf=\"item.value; else empty\">\n {{ item.value | date : dateFormat }}\n </span>\n </ng-container>\n\n <!-- PERSON type: shows initial avatar and name if value exists -->\n <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n <ng-container *ngIf=\"item.value; else empty\">\n <span class=\"person-wrap flex items-center gap-1 truncate\">\n <div\n class=\"person-avatar small\"\n style=\"font-size: 0.875rem; line-height: 1\"\n >\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n </ng-container>\n </ng-container>\n\n <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"item.value; else empty\">\n <div class=\"flex gap-2\">\n <span> {{ item.value }} </span>\n <phoenix-tag\n [customColor]=\"item.value2 || ''\"\n [content]=\"item.value1 || ''\"\n >\n </phoenix-tag>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n <div>\n <!-- Label -->\n <div\n class=\"font-sm text-600 truncate mb-1\"\n [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n >\n {{ item.label }}\n </div>\n <!-- Avatar and person name/date -->\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div>\n <div\n class=\"text-blue-800 font-sm\"\n style=\"\n word-break: break-word;\n white-space: normal;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n <div class=\"text-sm\">{{ item.value1 | date : dateFormat }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- Fallback for empty DATE_PERSON -->\n <ng-template #emptyDatePerson>\n <div class=\"text-sm\">--</div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Shared fallback for missing or empty values -->\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.status-bar-attributes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.status-bar-attribute-item{flex-shrink:0}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TextLength, name: "textLength" }] });
|
|
8067
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: StatusAttributeDisplayComponent, isStandalone: true, selector: "phoenix-status-attribute-display", inputs: { attr: "attr", dateFormat: "dateFormat" }, outputs: { listItemClick: "listItemClick" }, ngImport: i0, template: "<div class=\"attribute flex justify-content-start align-items-start\">\n <div class=\"flex flex-column\">\n <!-- LABEL + ICON -->\n <div class=\"flex align-items-start gap-1\">\n <label\n class=\"font-semibold text-500\"\n [ngClass]=\"{\n 'wrap-label': isMultiWordLabel(attr.label | translate),\n 'nowrap-label': !isMultiWordLabel(attr.label | translate)\n }\"\n >\n {{ attr.label | translate }}\n </label>\n <i\n [attr.data-cy]=\"'status-togg-button-item'\"\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n style=\"font-size: 0.875rem; line-height: 1\"\n (mouseenter)=\"popover.toggle($event)\"\n (mouseleave)=\"popover.toggle($event)\"\n >\n </i>\n </div>\n\n <!-- VALUE -->\n <div\n *ngIf=\"attr?.value; else empty\"\n [ngSwitch]=\"attr.type\"\n style=\"white-space: nowrap\"\n >\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"'STRING'\">\n <!-- If URL exist, render as link -->\n <a\n *ngIf=\"attr.url; else plainText\"\n [href]=\"attr.url\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n >\n {{ attr.value | textLength : 20 }}\n <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n </a>\n <!-- Pnly text if url doesn't exist -->\n <ng-template #plainText>\n <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n {{ attr.value | textLength : 20 }}\n </span>\n </ng-template>\n </ng-container>\n\n <!-- DATE -->\n <span *ngSwitchCase=\"'DATE'\">\n <i class=\"pi pi-calendar text-blue-900\"></i>\n {{\n attr.value\n ? (attr.value | date : attr.dateFormat ?? dateFormat)\n : \"--\"\n }}\n </span>\n\n <!-- LINK -->\n\n <a\n *ngSwitchCase=\"'LINK'\"\n [href]=\"attr.url\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ attr.value || \"--\" }} <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n </a>\n\n <!-- PERSON -->\n <div\n class=\"person-wrap flex align-items-center gap-2\"\n *ngSwitchCase=\"'PERSON'\"\n >\n <div class=\"person-avatar\">\n {{ getPersonInitial(attr) }}\n </div>\n\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n [pTooltip]=\"getPersonTooltip(attr)\"\n >\n {{ getPersonDisplayName(attr) }}\n </div>\n </div>\n\n <!-- COUNTRY -->\n <span *ngSwitchCase=\"'COUNTRY'\">\n <span class=\"flex align-items-center gap-2\">\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + attr.value?.code.toLowerCase()\"\n style=\"width: 22px\"\n />\n <span\n [pTooltip]=\"attr.value?.name?.length > 20 ? attr.value?.name : null\"\n >\n {{ attr.value?.name || attr.value?.code || \"--\" }}\n </span>\n </span>\n </span>\n\n <!-- LIST -->\n <ul\n *ngSwitchCase=\"'LIST'\"\n class=\"list overflow-x-hidden\"\n style=\"margin-top: 0.25rem\"\n >\n <li\n *ngFor=\"let item of attr.value\"\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1 cursor-pointer\"\n (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n >\n <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n {{ item.name | textLength : 20 }}\n </span>\n <i class=\"pi pi-link ml-1 text-sm\"></i>\n </li>\n </ul>\n\n <!-- DEFAULT -->\n <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n {{ attr.value || \"--\" }}\n </span>\n </div>\n\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n </div>\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div\n style=\"\n display: grid;\n grid-template-columns: max-content 1fr;\n column-gap: 1rem;\n row-gap: 0.5rem;\n align-items: start;\n width: 100%;\n \"\n >\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item?.type || statusTooltipType.TAG\">\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a\n *ngIf=\"item.value; else empty\"\n [href]=\"getFullUrl(item.value)\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ item.label || \"Open\" }}\n </a>\n </ng-container>\n\n <!-- STRING type: renders text with truncation and tooltip if too long -->\n <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n <div\n *ngIf=\"item.value; else empty\"\n class=\"text-sm\"\n style=\"\n white-space: normal;\n word-break: break-word;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n </ng-container>\n\n <!-- DATE type: formatted date or fallback -->\n <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n <span *ngIf=\"item.value; else empty\">\n {{ item.value | date : dateFormat }}\n </span>\n </ng-container>\n\n <!-- PERSON type: shows initial avatar and name if value exists -->\n <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n <ng-container *ngIf=\"item.value; else empty\">\n <span class=\"person-wrap flex items-center gap-1 truncate\">\n <div\n class=\"person-avatar small\"\n style=\"font-size: 0.875rem; line-height: 1\"\n >\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n </ng-container>\n </ng-container>\n\n <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"item.value; else empty\">\n <div class=\"flex gap-2\">\n <span> {{ item.value }} </span>\n <phoenix-tag\n [customColor]=\"item.value2 || ''\"\n [content]=\"item.value1 || ''\"\n >\n </phoenix-tag>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n <div>\n <!-- Label -->\n <div\n class=\"font-sm text-600 truncate mb-1\"\n [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n >\n {{ item.label }}\n </div>\n <!-- Avatar and person name/date -->\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div>\n <div\n class=\"text-blue-800 font-sm\"\n style=\"\n word-break: break-word;\n white-space: normal;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n <div class=\"text-sm\">{{ item.value1 | date : dateFormat }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- Fallback for empty DATE_PERSON -->\n <ng-template #emptyDatePerson>\n <div class=\"text-sm\">--</div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Shared fallback for missing or empty values -->\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>\n", styles: [".description{flex-grow:1;min-width:300px;max-width:350px}.status-bar-attributes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.status-bar-attribute-item{flex-shrink:0}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TagComponent, selector: "phoenix-tag", inputs: ["key", "content", "customColor"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TextLength, name: "textLength" }] });
|
|
7828
8068
|
}
|
|
7829
8069
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusAttributeDisplayComponent, decorators: [{
|
|
7830
8070
|
type: Component,
|
|
@@ -7836,7 +8076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7836
8076
|
TranslateModule,
|
|
7837
8077
|
AvatarModule,
|
|
7838
8078
|
TextLength,
|
|
7839
|
-
], template: "<div class=\"attribute flex justify-content-start align-items-start\">\n <div class=\"flex flex-column\">\n <!-- LABEL + ICON -->\n <div class=\"flex align-items-start gap-1\">\n <label\n class=\"font-semibold text-500\"\n [ngClass]=\"{\n 'wrap-label': isMultiWordLabel(attr.label | translate),\n 'nowrap-label': !isMultiWordLabel(attr.label | translate)\n }\"\n >\n {{ attr.label | translate }}\n </label>\n <i\n [attr.data-cy]=\"'status-togg-button-item'\"\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n style=\"font-size: 0.875rem; line-height: 1\"\n (mouseenter)=\"popover.toggle($event)\"\n (mouseleave)=\"popover.toggle($event)\"\n >\n </i>\n </div>\n\n <!-- VALUE -->\n <div\n *ngIf=\"attr?.value; else empty\"\n [ngSwitch]=\"attr.type\"\n style=\"white-space: nowrap\"\n >\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"'STRING'\">\n <!-- If URL exist, render as link -->\n <a\n *ngIf=\"attr.url; else plainText\"\n [href]=\"attr.url\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n >\n {{ attr.value | textLength : 20 }}\n <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n </a>\n <!-- Pnly text if url doesn't exist -->\n <ng-template #plainText>\n <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n {{ attr.value | textLength : 20 }}\n </span>\n </ng-template>\n </ng-container>\n\n <!-- DATE -->\n <span *ngSwitchCase=\"'DATE'\">\n <i class=\"pi pi-calendar text-blue-900\"></i>\n {{\n attr.value\n ? (attr.value | date : attr.dateFormat ?? dateFormat)\n : \"--\"\n }}\n </span>\n\n <!-- LINK -->\n\n <a\n *ngSwitchCase=\"'LINK'\"\n [href]=\"attr.url\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ attr.value || \"--\" }} <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n </a>\n\n <!-- PERSON -->\n <div\n class=\"person-wrap flex align-items-center gap-2\"\n *ngSwitchCase=\"'PERSON'\"\n >\n <div class=\"person-avatar\">\n {{ getPersonInitial(attr) }}\n </div>\n\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n [pTooltip]=\"getPersonTooltip(attr)\"\n >\n {{ getPersonDisplayName(attr) }}\n </div>\n </div>\n\n <!-- COUNTRY -->\n <span *ngSwitchCase=\"'COUNTRY'\">\n <span class=\"flex align-items-center gap-2\">\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + attr.value?.code.toLowerCase()\"\n style=\"width: 22px\"\n />\n <span\n [pTooltip]=\"attr.value?.name?.length > 20 ? attr.value?.name : null\"\n >\n {{ attr.value?.name || attr.value?.code || \"--\" }}\n </span>\n </span>\n </span>\n\n <!-- LIST -->\n <ul\n *ngSwitchCase=\"'LIST'\"\n class=\"list overflow-x-hidden\"\n style=\"margin-top: 0.25rem\"\n >\n <li\n *ngFor=\"let item of attr.value\"\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1 cursor-pointer\"\n (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n >\n <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n {{ item.name | textLength : 20 }}\n </span>\n <i class=\"pi pi-link ml-1 text-sm\"></i>\n </li>\n </ul>\n\n <!-- DEFAULT -->\n <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n {{ attr.value || \"--\" }}\n </span>\n </div>\n\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n </div>\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div\n style=\"\n display: grid;\n grid-template-columns: max-content 1fr;\n column-gap: 1rem;\n row-gap: 0.5rem;\n align-items: start;\n width: 100%;\n \"\n >\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item?.type || statusTooltipType.TAG\">\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a\n *ngIf=\"item.value; else empty\"\n [href]=\"getFullUrl(item.value)\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ item.label || \"Open\" }}\n </a>\n </ng-container>\n\n <!-- STRING type: renders text with truncation and tooltip if too long -->\n <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n <div\n *ngIf=\"item.value; else empty\"\n class=\"text-sm\"\n style=\"\n white-space: normal;\n word-break: break-word;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n </ng-container>\n\n <!-- DATE type: formatted date or fallback -->\n <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n <span *ngIf=\"item.value; else empty\">\n {{ item.value | date : dateFormat }}\n </span>\n </ng-container>\n\n <!-- PERSON type: shows initial avatar and name if value exists -->\n <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n <ng-container *ngIf=\"item.value; else empty\">\n <span class=\"person-wrap flex items-center gap-1 truncate\">\n <div\n class=\"person-avatar small\"\n style=\"font-size: 0.875rem; line-height: 1\"\n >\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n </ng-container>\n </ng-container>\n\n <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"item.value; else empty\">\n <div class=\"flex gap-2\">\n <span> {{ item.value }} </span>\n <phoenix-tag\n [customColor]=\"item.value2 || ''\"\n [content]=\"item.value1 || ''\"\n >\n </phoenix-tag>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n <div>\n <!-- Label -->\n <div\n class=\"font-sm text-600 truncate mb-1\"\n [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n >\n {{ item.label }}\n </div>\n <!-- Avatar and person name/date -->\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div>\n <div\n class=\"text-blue-800 font-sm\"\n style=\"\n word-break: break-word;\n white-space: normal;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n <div class=\"text-sm\">{{ item.value1 | date : dateFormat }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- Fallback for empty DATE_PERSON -->\n <ng-template #emptyDatePerson>\n <div class=\"text-sm\">--</div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Shared fallback for missing or empty values -->\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>\n", styles: [".status-bar-wrapper{display:flex;padding-left:0;transition:.4s cubic-bezier(.86,0,.07,1)}.description{flex-grow:1;min-width:300px;max-width:350px}.status-bar-attributes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.status-bar-attribute-item{flex-shrink:0}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"] }]
|
|
8079
|
+
], template: "<div class=\"attribute flex justify-content-start align-items-start\">\n <div class=\"flex flex-column\">\n <!-- LABEL + ICON -->\n <div class=\"flex align-items-start gap-1\">\n <label\n class=\"font-semibold text-500\"\n [ngClass]=\"{\n 'wrap-label': isMultiWordLabel(attr.label | translate),\n 'nowrap-label': !isMultiWordLabel(attr.label | translate)\n }\"\n >\n {{ attr.label | translate }}\n </label>\n <i\n [attr.data-cy]=\"'status-togg-button-item'\"\n *ngIf=\"attr?.tooltip?.length\"\n class=\"pi pi-info-circle text-blue-500 cursor-pointer\"\n style=\"font-size: 0.875rem; line-height: 1\"\n (mouseenter)=\"popover.toggle($event)\"\n (mouseleave)=\"popover.toggle($event)\"\n >\n </i>\n </div>\n\n <!-- VALUE -->\n <div\n *ngIf=\"attr?.value; else empty\"\n [ngSwitch]=\"attr.type\"\n style=\"white-space: nowrap\"\n >\n <!-- STRING -->\n <ng-container *ngSwitchCase=\"'STRING'\">\n <!-- If URL exist, render as link -->\n <a\n *ngIf=\"attr.url; else plainText\"\n [href]=\"attr.url\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\"\n >\n {{ attr.value | textLength : 20 }}\n <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n </a>\n <!-- Pnly text if url doesn't exist -->\n <ng-template #plainText>\n <span [pTooltip]=\"attr.value?.length > 20 ? attr.value : null\">\n {{ attr.value | textLength : 20 }}\n </span>\n </ng-template>\n </ng-container>\n\n <!-- DATE -->\n <span *ngSwitchCase=\"'DATE'\">\n <i class=\"pi pi-calendar text-blue-900\"></i>\n {{\n attr.value\n ? (attr.value | date : attr.dateFormat ?? dateFormat)\n : \"--\"\n }}\n </span>\n\n <!-- LINK -->\n\n <a\n *ngSwitchCase=\"'LINK'\"\n [href]=\"attr.url\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ attr.value || \"--\" }} <i class=\"ml-1\" [class]=\"attr.icon\"></i>\n </a>\n\n <!-- PERSON -->\n <div\n class=\"person-wrap flex align-items-center gap-2\"\n *ngSwitchCase=\"'PERSON'\"\n >\n <div class=\"person-avatar\">\n {{ getPersonInitial(attr) }}\n </div>\n\n <div\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n [pTooltip]=\"getPersonTooltip(attr)\"\n >\n {{ getPersonDisplayName(attr) }}\n </div>\n </div>\n\n <!-- COUNTRY -->\n <span *ngSwitchCase=\"'COUNTRY'\">\n <span class=\"flex align-items-center gap-2\">\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + attr.value?.code.toLowerCase()\"\n style=\"width: 22px\"\n />\n <span\n [pTooltip]=\"attr.value?.name?.length > 20 ? attr.value?.name : null\"\n >\n {{ attr.value?.name || attr.value?.code || \"--\" }}\n </span>\n </span>\n </span>\n\n <!-- LIST -->\n <ul\n *ngSwitchCase=\"'LIST'\"\n class=\"list overflow-x-hidden\"\n style=\"margin-top: 0.25rem\"\n >\n <li\n *ngFor=\"let item of attr.value\"\n [ngClass]=\"item?.disabled ? 'disableLinks' : ''\"\n class=\"white-space-nowrap mb-1 cursor-pointer\"\n (click)=\"!item?.disabled ? listItemClick.emit(item) : null\"\n >\n <span [pTooltip]=\"item?.name?.length > 20 ? item.name : null\">\n {{ item.name | textLength : 20 }}\n </span>\n <i class=\"pi pi-link ml-1 text-sm\"></i>\n </li>\n </ul>\n\n <!-- DEFAULT -->\n <span *ngSwitchDefault [style.color]=\"attr.color\" class=\"text-xl\">\n {{ attr.value || \"--\" }}\n </span>\n </div>\n\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n </div>\n</div>\n\n<p-popover #popover [style]=\"{ maxWidth: '400px' }\">\n <!-- GRID layout for all tooltip items except DATE_PERSON -->\n <div\n style=\"\n display: grid;\n grid-template-columns: max-content 1fr;\n column-gap: 1rem;\n row-gap: 0.5rem;\n align-items: start;\n width: 100%;\n \"\n >\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type !== statusTooltipType.DATE_PERSON\">\n <!-- Tooltip label -->\n <div class=\"text-sm text-600 text-left\">{{ item.label }}:</div>\n\n <!-- Tooltip value rendering -->\n <div class=\"text-sm text-left break-words\">\n <ng-container [ngSwitch]=\"item?.type || statusTooltipType.TAG\">\n <!-- LINK type: renders as a clickable hyperlink if value exists -->\n <ng-container *ngSwitchCase=\"'LINK'\">\n <a\n *ngIf=\"item.value; else empty\"\n [href]=\"getFullUrl(item.value)\"\n target=\"_blank\"\n rel=\"noopener\"\n class=\"text-blue-500 underline\"\n >\n {{ item.label || \"Open\" }}\n </a>\n </ng-container>\n\n <!-- STRING type: renders text with truncation and tooltip if too long -->\n <ng-container *ngSwitchCase=\"statusTooltipType.STRING\">\n <div\n *ngIf=\"item.value; else empty\"\n class=\"text-sm\"\n style=\"\n white-space: normal;\n word-break: break-word;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n </ng-container>\n\n <!-- DATE type: formatted date or fallback -->\n <ng-container *ngSwitchCase=\"statusTooltipType.DATE\">\n <span *ngIf=\"item.value; else empty\">\n {{ item.value | date : dateFormat }}\n </span>\n </ng-container>\n\n <!-- PERSON type: shows initial avatar and name if value exists -->\n <ng-container *ngSwitchCase=\"statusTooltipType.PERSON\">\n <ng-container *ngIf=\"item.value; else empty\">\n <span class=\"person-wrap flex items-center gap-1 truncate\">\n <div\n class=\"person-avatar small\"\n style=\"font-size: 0.875rem; line-height: 1\"\n >\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <span class=\"truncate\">\n {{ item.value }} {{ item.value1 }}\n </span>\n </span>\n </ng-container>\n </ng-container>\n\n <!-- TAG or unknown type: uses phoenix-tag if value exists -->\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"item.value; else empty\">\n <div class=\"flex gap-2\">\n <span> {{ item.value }} </span>\n <phoenix-tag\n [customColor]=\"item.value2 || ''\"\n [content]=\"item.value1 || ''\"\n >\n </phoenix-tag>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Separate layout for DATE_PERSON entries (includes avatar and date) -->\n <ng-container *ngFor=\"let item of attr?.tooltip\">\n <ng-container *ngIf=\"item.type === statusTooltipType.DATE_PERSON\">\n <ng-container *ngIf=\"item.value; else emptyDatePerson\">\n <div>\n <!-- Label -->\n <div\n class=\"font-sm text-600 truncate mb-1\"\n [pTooltip]=\"item.label.length > 20 ? item.label : undefined\"\n >\n {{ item.label }}\n </div>\n <!-- Avatar and person name/date -->\n <div class=\"flex items-center gap-2 person-wrap\">\n <div class=\"person-avatar\">\n {{ item?.value?.charAt(0)?.toUpperCase() }}\n </div>\n <div>\n <div\n class=\"text-blue-800 font-sm\"\n style=\"\n word-break: break-word;\n white-space: normal;\n overflow-wrap: break-word;\n \"\n >\n {{ item.value }}\n </div>\n <div class=\"text-sm\">{{ item.value1 | date : dateFormat }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- Fallback for empty DATE_PERSON -->\n <ng-template #emptyDatePerson>\n <div class=\"text-sm\">--</div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Shared fallback for missing or empty values -->\n <ng-template #empty>\n <span>--</span>\n </ng-template>\n</p-popover>\n\n<ng-template #empty><span>--</span></ng-template>\n", styles: [".description{flex-grow:1;min-width:300px;max-width:350px}.status-bar-attributes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.status-bar-attribute-item{flex-shrink:0}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"] }]
|
|
7840
8080
|
}], propDecorators: { attr: [{
|
|
7841
8081
|
type: Input
|
|
7842
8082
|
}], dateFormat: [{
|
|
@@ -7852,14 +8092,13 @@ class StatusBarComponent {
|
|
|
7852
8092
|
description = true;
|
|
7853
8093
|
dateFormat = 'dd.MM.yyyy | HH:mm';
|
|
7854
8094
|
onListItemClick = new EventEmitter();
|
|
7855
|
-
isCollapsed = false;
|
|
7856
8095
|
StatusColType = StatusColType;
|
|
7857
8096
|
iconStyle = {
|
|
7858
8097
|
height: 40,
|
|
7859
8098
|
width: 40,
|
|
7860
8099
|
};
|
|
7861
8100
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7862
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: StatusBarComponent, isStandalone: true, selector: "phoenix-status-bar", inputs: { statusBarConfig: "statusBarConfig", iconEnable: "iconEnable", enableClosing: "enableClosing", description: "description", dateFormat: "dateFormat" }, outputs: { onListItemClick: "onListItemClick" }, ngImport: i0, template: "<!-- status-bar.component.html -->\n<div class=\"p-2 pt-0\">\n @if (statusBarConfig) {\n <div class=\"
|
|
8101
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: StatusBarComponent, isStandalone: true, selector: "phoenix-status-bar", inputs: { statusBarConfig: "statusBarConfig", iconEnable: "iconEnable", enableClosing: "enableClosing", description: "description", dateFormat: "dateFormat" }, outputs: { onListItemClick: "onListItemClick" }, ngImport: i0, template: "<!-- status-bar.component.html -->\n<div class=\"p-2 pt-0 pb-3\">\n @if (statusBarConfig) {\n <div class=\"flex\">\n @if (description) {\n <div class=\"description flex\">\n @if (statusBarConfig.icon) {\n <div\n class=\"type-icon flex justify-content-center align-items-center mr-3\"\n [style.height]=\"iconStyle.height + 20 + 'px'\"\n [style.width]=\"iconStyle.width + 20 + 'px'\"\n >\n <p-image\n [src]=\"\n 'assets/object_types/white/' +\n (statusBarConfig.icon || 'UNDEFINED') +\n '.svg'\n \"\n [height]=\"iconStyle.height.toString()\"\n [width]=\"iconStyle.width.toString()\"\n ></p-image>\n </div>\n }\n\n <ul>\n @for (attr of statusBarConfig.description; track attr.label) {\n <li class=\"text-sm flex mb-1\">\n <span class=\"mr-1 text-600 font-semibold\"\n >{{ attr.label | translate }}:</span\n >\n @if (attr.value) {\n <span>\n @if (attr.icon) {\n <i\n class=\"{{ attr.icon }} mr-1\"\n style=\"font-size: 0.8em\"\n ></i>\n }\n @switch (attr.type) {\n @case (\"DATE\") {\n <span>{{ attr.value | date: dateFormat }}</span>\n }\n @default {\n <span\n pTooltip=\"{{\n attr?.value?.length > 20 ? attr.value : ''\n }}\"\n >\n {{ attr.value | textLength: 20 }}\n </span>\n }\n }\n </span>\n } @else {\n <span>--</span>\n }\n </li>\n }\n </ul>\n </div>\n }\n <div class=\"status-bar-attributes w-full flex gap-5\">\n @for (attr of statusBarConfig.attributes; track attr.label) {\n <div class=\"status-bar-attribute-item\">\n <phoenix-status-attribute-display\n [attr]=\"attr\"\n [dateFormat]=\"dateFormat\"\n (listItemClick)=\"onListItemClick.emit($event)\"\n ></phoenix-status-attribute-display>\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".description{flex-grow:1;min-width:300px;max-width:350px}.status-bar-attributes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.status-bar-attribute-item{flex-shrink:0}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i6$1.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "preview", "showTransitionOptions", "hideTransitionOptions", "appendTo"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: StatusAttributeDisplayComponent, selector: "phoenix-status-attribute-display", inputs: ["attr", "dateFormat"], outputs: ["listItemClick"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TextLength, name: "textLength" }] });
|
|
7863
8102
|
}
|
|
7864
8103
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusBarComponent, decorators: [{
|
|
7865
8104
|
type: Component,
|
|
@@ -7873,7 +8112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7873
8112
|
TextLength,
|
|
7874
8113
|
ButtonModule,
|
|
7875
8114
|
StatusAttributeDisplayComponent,
|
|
7876
|
-
], template: "<!-- status-bar.component.html -->\n<div class=\"p-2 pt-0\">\n @if (statusBarConfig) {\n <div class=\"
|
|
8115
|
+
], template: "<!-- status-bar.component.html -->\n<div class=\"p-2 pt-0 pb-3\">\n @if (statusBarConfig) {\n <div class=\"flex\">\n @if (description) {\n <div class=\"description flex\">\n @if (statusBarConfig.icon) {\n <div\n class=\"type-icon flex justify-content-center align-items-center mr-3\"\n [style.height]=\"iconStyle.height + 20 + 'px'\"\n [style.width]=\"iconStyle.width + 20 + 'px'\"\n >\n <p-image\n [src]=\"\n 'assets/object_types/white/' +\n (statusBarConfig.icon || 'UNDEFINED') +\n '.svg'\n \"\n [height]=\"iconStyle.height.toString()\"\n [width]=\"iconStyle.width.toString()\"\n ></p-image>\n </div>\n }\n\n <ul>\n @for (attr of statusBarConfig.description; track attr.label) {\n <li class=\"text-sm flex mb-1\">\n <span class=\"mr-1 text-600 font-semibold\"\n >{{ attr.label | translate }}:</span\n >\n @if (attr.value) {\n <span>\n @if (attr.icon) {\n <i\n class=\"{{ attr.icon }} mr-1\"\n style=\"font-size: 0.8em\"\n ></i>\n }\n @switch (attr.type) {\n @case (\"DATE\") {\n <span>{{ attr.value | date: dateFormat }}</span>\n }\n @default {\n <span\n pTooltip=\"{{\n attr?.value?.length > 20 ? attr.value : ''\n }}\"\n >\n {{ attr.value | textLength: 20 }}\n </span>\n }\n }\n </span>\n } @else {\n <span>--</span>\n }\n </li>\n }\n </ul>\n </div>\n }\n <div class=\"status-bar-attributes w-full flex gap-5\">\n @for (attr of statusBarConfig.attributes; track attr.label) {\n <div class=\"status-bar-attribute-item\">\n <phoenix-status-attribute-display\n [attr]=\"attr\"\n [dateFormat]=\"dateFormat\"\n (listItemClick)=\"onListItemClick.emit($event)\"\n ></phoenix-status-attribute-display>\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".description{flex-grow:1;min-width:300px;max-width:350px}.status-bar-attributes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.status-bar-attribute-item{flex-shrink:0}.attribute{margin-left:10px;margin-right:10px;max-width:250px;min-width:100px}.attribute:last-child{margin-right:0}ul{list-style:none;padding:0;margin:0}.type-icon{background-color:#e94260;border-radius:3px}label{display:inline-block;margin-right:5px;margin-bottom:5px}.wrap-label{white-space:normal;word-break:break-word;max-width:10rem;line-height:1.2}.nowrap-label{white-space:nowrap}.list{overflow:auto;height:57px}.list li{cursor:pointer;color:var(--blue-500)}.list li:hover{color:#e94260}.toggler{position:relative}.toggler button{padding:2px 7px 0}.toggler button .pi{padding:0!important;font-size:.8rem}.toggler:after{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);opacity:.4;position:absolute;top:50%;left:40px}.toggler:before{content:\"\";display:block;height:1px;width:30px;background:var(--gray-400);position:absolute;opacity:.4;top:50%;left:-37px}.disableLinks{color:#77787b!important;cursor:not-allowed!important;opacity:.5;text-decoration:none}.collapsed{height:0px;padding:0;transition:.4s cubic-bezier(.86,0,.07,1)}.person-wrap{display:flex;align-items:center;padding:0;width:150px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:22px;height:22px;min-width:22px;min-height:22px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:.8rem}.person-wrap .person-avatar.small{width:16px;height:16px;min-width:16px;min-height:16px;margin-right:4px;padding:0;font-size:.65rem;line-height:1}.person-wrap .person-name :first-child{font-size:1.2rem}::ng-deep .wide-popover .p-popover-panel{max-width:400px!important;width:auto!important;word-break:break-word;white-space:normal}.flag-emoji{font-size:1.5rem;line-height:1;display:inline-block;transform:translateY(2px)}\n"] }]
|
|
7877
8116
|
}], propDecorators: { statusBarConfig: [{
|
|
7878
8117
|
type: Input
|
|
7879
8118
|
}], iconEnable: [{
|
|
@@ -7919,7 +8158,7 @@ class QuickPickSidePanelComponent {
|
|
|
7919
8158
|
this.onRowClick.emit(row);
|
|
7920
8159
|
}
|
|
7921
8160
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickPickSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7922
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: QuickPickSidePanelComponent, isStandalone: true, selector: "phoenix-quick-pick-sidepanel", inputs: { title: "title", data: "data", columns: "columns", tableConfiguration: "tableConfiguration", widthClass: "widthClass", isFullScreen: "isFullScreen", panelState: "panelState" }, outputs: { panelStateChange: "panelStateChange", onRowClick: "onRowClick", lazyLoadData: "lazyLoadData", handlePanelFullScreen: "handlePanelFullScreen" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<p-drawer\n #drawer\n [visible]=\"drawerVisible()\"\n (visibleChange)=\"visibleChange($event)\"\n [header]=\"title | translate\"\n appendTo=\"body\"\n position=\"right\"\n [styleClass]=\"widthClass\"\n>\n <!-- Content -->\n <ng-container *ngIf=\"tableConfiguration\">\n <div class=\"px-2\">\n <phoenix-table\n [data]=\"data\"\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n (rowSelection)=\"onTableRowClick($event)\"\n ></phoenix-table>\n </div>\n </ng-container>\n</p-drawer>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$
|
|
8161
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: QuickPickSidePanelComponent, isStandalone: true, selector: "phoenix-quick-pick-sidepanel", inputs: { title: "title", data: "data", columns: "columns", tableConfiguration: "tableConfiguration", widthClass: "widthClass", isFullScreen: "isFullScreen", panelState: "panelState" }, outputs: { panelStateChange: "panelStateChange", onRowClick: "onRowClick", lazyLoadData: "lazyLoadData", handlePanelFullScreen: "handlePanelFullScreen" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<p-drawer\n #drawer\n [visible]=\"drawerVisible()\"\n (visibleChange)=\"visibleChange($event)\"\n [header]=\"title | translate\"\n appendTo=\"body\"\n position=\"right\"\n [styleClass]=\"widthClass\"\n>\n <!-- Content -->\n <ng-container *ngIf=\"tableConfiguration\">\n <div class=\"px-2\">\n <phoenix-table\n [data]=\"data\"\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n (rowSelection)=\"onTableRowClick($event)\"\n ></phoenix-table>\n </div>\n </ng-container>\n</p-drawer>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$3.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["columns", "selectedColumnsInput", "tableConfiguration", "filters", "data"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
|
|
7923
8162
|
}
|
|
7924
8163
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickPickSidePanelComponent, decorators: [{
|
|
7925
8164
|
type: Component,
|
|
@@ -8197,7 +8436,7 @@ class ReadOnlyInputV2Component {
|
|
|
8197
8436
|
return String(v);
|
|
8198
8437
|
}, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
|
|
8199
8438
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ReadOnlyInputV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8200
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ReadOnlyInputV2Component, isStandalone: true, selector: "phoenix-read-only-input-v2", inputs: { field: "field", form: "form" }, ngImport: i0, template: "@switch (type) {\n\n @case ('TEXT_EDITOR') {\n @if (displayText()) {\n <div class=\"read-only-editor-content\" [innerHTML]=\"displayText()\"></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('TEXT_AREA') {\n @if (displayText()) {\n <div class=\"w-full mt-2 mb-2 font-semibold text-500 whitespace-pre-line\">\n {{ displayText() | stripHtmlSafe }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('SWITCH') {\n @if (bool() !== null) {\n <div class=\"mt-2 mb-2 font-semibold text-500\">\n {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('CHECKBOX') {\n @if (bool() !== null) {\n <div class=\"mt-2 mb-2 font-semibold text-500\">\n {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('DATE') {\n @if (dateValue()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ dateValue() | date }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('START_DUE_DATE') {\n @if (startDue()) {\n <div class=\"flex font-semibold text-500 mt-2 mb-2\">\n <span style=\"padding-top: 3px\">{{ startDue()?.startDate | date }}</span>\n <div class=\"flex align-items-center p-2\">\n <i class=\"pi pi-arrow-right text-sm\"></i>\n </div>\n <span style=\"padding-top: 3px\">{{ startDue()?.endDate | date }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('ASSIGN') {\n @if (assign()?.name) {\n <div>\n <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n <div class=\"person-wrap\">\n <div class=\"person-avatar\">\n {{ (assign()?.name ?? '')!.toUpperCase().charAt(0) }}\n </div>\n <div>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ assign()?.name }}\n </p>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ assign()?.function ?? '--' }}\n </p>\n </div>\n </div>\n </p-button>\n\n <p-popover #op [dismissable]=\"true\">\n <div>\n <span class=\"block mb-2\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ assign()?.email ?? '--' }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i>\n {{ assign()?.phone ?? '--' }}\n </p>\n </div>\n </p-popover>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('UPLOAD') {\n @if (upload()?.fileName) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ upload()?.fileName }}\n @if (upload()?.size) {\n <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('UPLOAD_DRAG_DROP') {\n @if (upload()?.fileName) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ upload()?.fileName }}\n @if (upload()?.size) {\n <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('SS_OPTION') {\n @if (ssLabel()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ ssLabel() | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('SS_OPTION_OBJECT_BASED') {\n @if (ssLabel()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ ssLabel() | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('MS_OPTION') {\n @if (msLabel()) {\n <div class=\"font-semibold text-500 mt-2 mb-2 white-space-nowrap overflow-hidden\">\n {{ msLabel() }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n @case ('PASSWORD') {\n @if (displayText()) {\n <input\n pInputText\n type=\"password\"\n class=\"w-full p-inputtext\"\n [disabled]=\"true\"\n [value]=\"displayText() ?? ''\"\n autocomplete=\"off\"\n aria-label=\"password\"\n />\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @default {\n @if (displayText()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ displayText() | stripHtmlSafe }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n}\n\n<ng-template #fallBack>\n <div class=\"font-semibold text-500 mt-2 mb-2\">--</div>\n</ng-template>", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .read-only-editor-content{margin-top:.75rem;margin-bottom:.5rem;font-weight:600;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type:
|
|
8439
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ReadOnlyInputV2Component, isStandalone: true, selector: "phoenix-read-only-input-v2", inputs: { field: "field", form: "form" }, ngImport: i0, template: "@switch (type) {\n\n @case ('TEXT_EDITOR') {\n @if (displayText()) {\n <div class=\"read-only-editor-content\" [innerHTML]=\"displayText()\"></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('TEXT_AREA') {\n @if (displayText()) {\n <div class=\"w-full mt-2 mb-2 font-semibold text-500 whitespace-pre-line\">\n {{ displayText() | stripHtmlSafe }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('SWITCH') {\n @if (bool() !== null) {\n <div class=\"mt-2 mb-2 font-semibold text-500\">\n {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('CHECKBOX') {\n @if (bool() !== null) {\n <div class=\"mt-2 mb-2 font-semibold text-500\">\n {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('DATE') {\n @if (dateValue()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ dateValue() | date }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('START_DUE_DATE') {\n @if (startDue()) {\n <div class=\"flex font-semibold text-500 mt-2 mb-2\">\n <span style=\"padding-top: 3px\">{{ startDue()?.startDate | date }}</span>\n <div class=\"flex align-items-center p-2\">\n <i class=\"pi pi-arrow-right text-sm\"></i>\n </div>\n <span style=\"padding-top: 3px\">{{ startDue()?.endDate | date }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('ASSIGN') {\n @if (assign()?.name) {\n <div>\n <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n <div class=\"person-wrap\">\n <div class=\"person-avatar\">\n {{ (assign()?.name ?? '')!.toUpperCase().charAt(0) }}\n </div>\n <div>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ assign()?.name }}\n </p>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ assign()?.function ?? '--' }}\n </p>\n </div>\n </div>\n </p-button>\n\n <p-popover #op [dismissable]=\"true\">\n <div>\n <span class=\"block mb-2\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ assign()?.email ?? '--' }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i>\n {{ assign()?.phone ?? '--' }}\n </p>\n </div>\n </p-popover>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('UPLOAD') {\n @if (upload()?.fileName) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ upload()?.fileName }}\n @if (upload()?.size) {\n <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('UPLOAD_DRAG_DROP') {\n @if (upload()?.fileName) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ upload()?.fileName }}\n @if (upload()?.size) {\n <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('SS_OPTION') {\n @if (ssLabel()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ ssLabel() | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('SS_OPTION_OBJECT_BASED') {\n @if (ssLabel()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ ssLabel() | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('MS_OPTION') {\n @if (msLabel()) {\n <div class=\"font-semibold text-500 mt-2 mb-2 white-space-nowrap overflow-hidden\">\n {{ msLabel() }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n @case ('PASSWORD') {\n @if (displayText()) {\n <input\n pInputText\n type=\"password\"\n class=\"w-full p-inputtext\"\n [disabled]=\"true\"\n [value]=\"displayText() ?? ''\"\n autocomplete=\"off\"\n aria-label=\"password\"\n />\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @default {\n @if (displayText()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ displayText() | stripHtmlSafe }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n}\n\n<ng-template #fallBack>\n <div class=\"font-semibold text-500 mt-2 mb-2\">--</div>\n</ng-template>", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .read-only-editor-content{margin-top:.75rem;margin-bottom:.5rem;font-weight:600;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: StripHtmlSafePipe, name: "stripHtmlSafe" }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8201
8440
|
}
|
|
8202
8441
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ReadOnlyInputV2Component, decorators: [{
|
|
8203
8442
|
type: Component,
|
|
@@ -8408,7 +8647,7 @@ class MetaAssignResponsibleV2Component {
|
|
|
8408
8647
|
[disabled]="disabled"
|
|
8409
8648
|
></p-button>
|
|
8410
8649
|
}
|
|
8411
|
-
`, isInline: true, styles: ["::ng-deep .p-popover-content{padding:0!important}.person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:10px;width:200px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#e94260;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type:
|
|
8650
|
+
`, isInline: true, styles: ["::ng-deep .p-popover-content{padding:0!important}.person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:10px;width:200px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#e94260;padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
|
|
8412
8651
|
}
|
|
8413
8652
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaAssignResponsibleV2Component, decorators: [{
|
|
8414
8653
|
type: Component,
|
|
@@ -8610,7 +8849,7 @@ class MetaColorPickerV2Component {
|
|
|
8610
8849
|
[disabled]="disabled"
|
|
8611
8850
|
[appendTo]="'body'"
|
|
8612
8851
|
></p-colorPicker>
|
|
8613
|
-
`, isInline: true, styles: [":host ::ng-deep .color-swatch.p-colorpicker{width:35px;height:35px;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important}:host ::ng-deep .color-swatch .p-colorpicker-preview{width:35px!important;height:35px!important;border:none!important;border-radius:6px!important;box-shadow:none!important}:host ::ng-deep .color-swatch .p-colorpicker-preview:focus,:host ::ng-deep .color-swatch .p-colorpicker-preview:focus-visible{outline:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$
|
|
8852
|
+
`, isInline: true, styles: [":host ::ng-deep .color-swatch.p-colorpicker{width:35px;height:35px;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important}:host ::ng-deep .color-swatch .p-colorpicker-preview{width:35px!important;height:35px!important;border:none!important;border-radius:6px!important;box-shadow:none!important}:host ::ng-deep .color-swatch .p-colorpicker-preview:focus,:host ::ng-deep .color-swatch .p-colorpicker-preview:focus-visible{outline:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i2$7.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "inline", "format", "tabindex", "inputId", "autoZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus", "defaultColor", "appendTo"], outputs: ["onChange", "onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8614
8853
|
}
|
|
8615
8854
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaColorPickerV2Component, decorators: [{
|
|
8616
8855
|
type: Component,
|
|
@@ -8803,7 +9042,7 @@ class MetaCheckboxColorPickerV2Component {
|
|
|
8803
9042
|
(click)="toggle(popover, $event)"
|
|
8804
9043
|
aria-label="Select color"
|
|
8805
9044
|
></button>
|
|
8806
|
-
`, isInline: true, styles: [":host ::ng-deep .p-popover-content{padding:0!important}.color-picker{display:flex;flex-direction:column;padding:10px}.color-row{display:flex;justify-content:center;gap:8px}.mb-2{margin-bottom:8px}.color-box{margin:2px;width:30px;height:30px;cursor:pointer;border-radius:4px;border:0;padding:0;background:transparent}.color-box:hover:not(:disabled){transform:scale(1.1);opacity:.9;box-shadow:0 0 5px #0003}.color-box:disabled{cursor:not-allowed;opacity:.6}.selected-color{width:35px;height:35px;border:2px solid #ccc;cursor:pointer;border-radius:6px;padding:0;background:transparent}.selected-color:disabled{cursor:not-allowed;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type:
|
|
9045
|
+
`, isInline: true, styles: [":host ::ng-deep .p-popover-content{padding:0!important}.color-picker{display:flex;flex-direction:column;padding:10px}.color-row{display:flex;justify-content:center;gap:8px}.mb-2{margin-bottom:8px}.color-box{margin:2px;width:30px;height:30px;cursor:pointer;border-radius:4px;border:0;padding:0;background:transparent}.color-box:hover:not(:disabled){transform:scale(1.1);opacity:.9;box-shadow:0 0 5px #0003}.color-box:disabled{cursor:not-allowed;opacity:.6}.selected-color{width:35px;height:35px;border:2px solid #ccc;cursor:pointer;border-radius:6px;padding:0;background:transparent}.selected-color:disabled{cursor:not-allowed;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8807
9046
|
}
|
|
8808
9047
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaCheckboxColorPickerV2Component, decorators: [{
|
|
8809
9048
|
type: Component,
|
|
@@ -9042,7 +9281,7 @@ class MetaStartDueDateV2Component {
|
|
|
9042
9281
|
</div>
|
|
9043
9282
|
</div>
|
|
9044
9283
|
</div>
|
|
9045
|
-
`, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$
|
|
9284
|
+
`, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$6.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9046
9285
|
}
|
|
9047
9286
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaStartDueDateV2Component, decorators: [{
|
|
9048
9287
|
type: Component,
|
|
@@ -9230,7 +9469,7 @@ class MetaSwitchV2Component {
|
|
|
9230
9469
|
[hidden]="hidden"
|
|
9231
9470
|
[attr.data-cy]="dataCy ?? null"
|
|
9232
9471
|
></p-toggleSwitch>
|
|
9233
|
-
`, isInline: true, styles: [":host ::ng-deep .p-toggleswitch{margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$
|
|
9472
|
+
`, isInline: true, styles: [":host ::ng-deep .p-toggleswitch{margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$8.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9234
9473
|
}
|
|
9235
9474
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaSwitchV2Component, decorators: [{
|
|
9236
9475
|
type: Component,
|
|
@@ -9449,7 +9688,7 @@ class MetaPasswordFieldV2Component {
|
|
|
9449
9688
|
[attr.data-cy]="dataCy ?? null"
|
|
9450
9689
|
></p-password>
|
|
9451
9690
|
</div>
|
|
9452
|
-
`, isInline: true, styles: [":host ::ng-deep .p-component{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$
|
|
9691
|
+
`, isInline: true, styles: [":host ::ng-deep .p-component{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i2$8.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo"], outputs: ["onFocus", "onBlur", "onClear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9453
9692
|
}
|
|
9454
9693
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaPasswordFieldV2Component, decorators: [{
|
|
9455
9694
|
type: Component,
|
|
@@ -9769,9 +10008,9 @@ class MetaFormFieldV2Component {
|
|
|
9769
10008
|
return this.type === this.MetaFieldType.CHECKBOX;
|
|
9770
10009
|
}
|
|
9771
10010
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormFieldV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9772
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormFieldV2Component, isStandalone: true, selector: "phoenix-meta-form-field-v2", inputs: { field: "field", form: "form", readOnly: "readOnly", disableForm: "disableForm" }, ngImport: i0, template: "<div [formGroup]=\"form\">\n @if (!field.hidden) {\n <div\n class=\"meta-field flex gap-2\"\n [class.flex-column]=\"!isCheckbox()\"\n [class.align-items-center]=\"isCheckbox()\"\n [style.order]=\"field.order ?? null\"\n [attr.data-cy]=\"'meta-field-' + key\"\n >\n\n @if (userFriendlyMessage() && !isCheckbox()) {\n <label class=\"meta-label\" [attr.for]=\"key\">\n {{ userFriendlyMessage()! | translate }}\n @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n </label>\n }\n\n <!-- READ ONLY (page-level ili field-level) -->\n @if (isReadOnly()) {\n <phoenix-read-only-input-v2 [field]=\"field\" [form]=\"form\"></phoenix-read-only-input-v2>\n } @else {\n @switch (type) {\n\n @case (MetaFieldType.TEXT) {\n <input pInputText [id]=\"key\" [formControlName]=\"key\"\n [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n }\n\n @case (MetaFieldType.URL) {\n <input pInputText [id]=\"key\" [formControlName]=\"key\"\n [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n }\n\n @case (MetaFieldType.PASSWORD) {\n <phoenix-meta-password-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\">\n </phoenix-meta-password-field-v2>\n }\n\n @case (MetaFieldType.TEXT_AREA) {\n <textarea pTextarea class=\"meta-textarea\" [id]=\"key\" [formControlName]=\"key\" fluid [autoResize]=\"false\" rows=\"5\"\n [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n </textarea>\n }\n\n @case (MetaFieldType.NUMBER) {\n <p-inputNumber [inputId]=\"key\" [formControlName]=\"key\">\n </p-inputNumber>\n }\n\n @case (MetaFieldType.DATE) {\n <p-datepicker [inputId]=\"key\" [formControlName]=\"key\" [showIcon]=\"true\">\n </p-datepicker>\n }\n\n @case (MetaFieldType.SS_OPTION) {\n <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n [formControlName]=\"key\" [showClear]=\"false\">\n </p-select>\n }\n\n @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" [formControlName]=\"key\"\n [showClear]=\"true\">\n </p-select>\n }\n\n @case (MetaFieldType.MS_OPTION) {\n <p-multiselect [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n [formControlName]=\"key\" [showClear]=\"false\" display=\"chip\">\n </p-multiselect>\n }\n\n @case (MetaFieldType.CHECKBOX) {\n <p-checkbox\n [inputId]=\"key\"\n [binary]=\"true\"\n [formControlName]=\"key\"\n [disabled]=\"isDisabled()\"\n ></p-checkbox>\n\n <label class=\"meta-inline-label\" [attr.for]=\"key\">\n {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n </label>\n }\n\n <!-- advanced: preko postoje\u0107ih komponenti -->\n @case (MetaFieldType.TIMEPERIOD) {\n <phoenix-meta-timeperiod [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\"></phoenix-meta-timeperiod>\n }\n\n @case (MetaFieldType.CURRENCY) {\n <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-currency>\n }\n\n @case (MetaFieldType.START_DUE_DATE) {\n <phoenix-meta-start-due-date-v2\n [formControlName]=\"key\"\n [attr.data-cy]=\"'start-due-' + key\">\n </phoenix-meta-start-due-date-v2>\n }\n\n @case (MetaFieldType.TEXT_EDITOR) {\n <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-text-editor>\n }\n\n @case (MetaFieldType.CHECKBOX_COLOR) {\n <phoenix-meta-checkbox-color-picker-v2\n [formControlName]=\"key\"\n [options]=\"(field.configuration.extra?.['colorGrid'] ?? [])\"\n [disable]=\"isDisabled()\">\n </phoenix-meta-checkbox-color-picker-v2>\n }\n\n @case (MetaFieldType.SWITCH) {\n <phoenix-meta-switch-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [hidden]=\"field.hidden ?? false\"\n [dataCy]=\"'switch-' + key\"></phoenix-meta-switch-v2>\n }\n\n @case (MetaFieldType.SELECT_BUTTON) {\n <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-select-button>\n }\n\n @case (MetaFieldType.ASSIGN) {\n <phoenix-meta-assign-responsible-v2\n [formControlName]=\"key\"\n [items]=\"(field.configuration.extra?.['items'] ?? [])\"\n [dialogHeaderKey]=\"(field.configuration.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n ></phoenix-meta-assign-responsible-v2>\n }\n\n <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-assign-asset>\n } -->\n\n @case (MetaFieldType.COLOR) {\n <phoenix-meta-color-picker-v2\n [formControlName]=\"key\"\n [disable]=\"isDisabled()\">\n </phoenix-meta-color-picker-v2>\n }\n\n @case (MetaFieldType.UPLOAD) {\n <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-upload>\n }\n\n @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-upload-dragdrop>\n }\n\n @case (MetaFieldType.LINKS_DATA) {\n <!-- <input pInputText [id]=\"key\" [formControlName]=\"key\" [readonly]=\"true\"> -->\n }\n\n @case (MetaFieldType.SLOT) { }\n\n @default {\n <input pInputText [id]=\"key\" [formControlName]=\"key\">\n }\n }\n\n @if (field.configuration.extra?.['dividerAfter']) {\n <div\n class=\"meta-divider\"\n [style.margin]=\"field.configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n ></div>\n }\n }\n\n\n @if (!readOnly && showError()) {\n <small class=\"p-error block mt-1\">\n <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n </small>\n }\n </div>\n }\n</div>", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9;margin:0;cursor:pointer}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$
|
|
10011
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormFieldV2Component, isStandalone: true, selector: "phoenix-meta-form-field-v2", inputs: { field: "field", form: "form", readOnly: "readOnly", disableForm: "disableForm" }, ngImport: i0, template: "<div [formGroup]=\"form\">\n @if (!field.hidden) {\n <div\n class=\"meta-field flex gap-2\"\n [class.flex-column]=\"!isCheckbox()\"\n [class.align-items-center]=\"isCheckbox()\"\n [style.order]=\"field.order ?? null\"\n [attr.data-cy]=\"'meta-field-' + key\"\n >\n\n @if (userFriendlyMessage() && !isCheckbox()) {\n <label class=\"meta-label\" [attr.for]=\"key\">\n {{ userFriendlyMessage()! | translate }}\n @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n </label>\n }\n\n <!-- READ ONLY (page-level ili field-level) -->\n @if (isReadOnly()) {\n <phoenix-read-only-input-v2 [field]=\"field\" [form]=\"form\"></phoenix-read-only-input-v2>\n } @else {\n @switch (type) {\n\n @case (MetaFieldType.TEXT) {\n <input pInputText [id]=\"key\" [formControlName]=\"key\"\n [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n }\n\n @case (MetaFieldType.URL) {\n <input pInputText [id]=\"key\" [formControlName]=\"key\"\n [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n }\n\n @case (MetaFieldType.PASSWORD) {\n <phoenix-meta-password-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\">\n </phoenix-meta-password-field-v2>\n }\n\n @case (MetaFieldType.TEXT_AREA) {\n <textarea pTextarea class=\"meta-textarea\" [id]=\"key\" [formControlName]=\"key\" fluid [autoResize]=\"false\" rows=\"5\"\n [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n </textarea>\n }\n\n @case (MetaFieldType.NUMBER) {\n <p-inputNumber [inputId]=\"key\" [formControlName]=\"key\">\n </p-inputNumber>\n }\n\n @case (MetaFieldType.DATE) {\n <p-datepicker [inputId]=\"key\" [formControlName]=\"key\" [showIcon]=\"true\">\n </p-datepicker>\n }\n\n @case (MetaFieldType.SS_OPTION) {\n <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n [formControlName]=\"key\" [showClear]=\"false\">\n </p-select>\n }\n\n @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" [formControlName]=\"key\"\n [showClear]=\"true\">\n </p-select>\n }\n\n @case (MetaFieldType.MS_OPTION) {\n <p-multiselect [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n [formControlName]=\"key\" [showClear]=\"false\" display=\"chip\">\n </p-multiselect>\n }\n\n @case (MetaFieldType.CHECKBOX) {\n <p-checkbox\n [inputId]=\"key\"\n [binary]=\"true\"\n [formControlName]=\"key\"\n [disabled]=\"isDisabled()\"\n ></p-checkbox>\n\n <label class=\"meta-inline-label\" [attr.for]=\"key\">\n {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n </label>\n }\n\n <!-- advanced: preko postoje\u0107ih komponenti -->\n @case (MetaFieldType.TIMEPERIOD) {\n <phoenix-meta-timeperiod [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\"></phoenix-meta-timeperiod>\n }\n\n @case (MetaFieldType.CURRENCY) {\n <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-currency>\n }\n\n @case (MetaFieldType.START_DUE_DATE) {\n <phoenix-meta-start-due-date-v2\n [formControlName]=\"key\"\n [attr.data-cy]=\"'start-due-' + key\">\n </phoenix-meta-start-due-date-v2>\n }\n\n @case (MetaFieldType.TEXT_EDITOR) {\n <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-text-editor>\n }\n\n @case (MetaFieldType.CHECKBOX_COLOR) {\n <phoenix-meta-checkbox-color-picker-v2\n [formControlName]=\"key\"\n [options]=\"(field.configuration.extra?.['colorGrid'] ?? [])\"\n [disable]=\"isDisabled()\">\n </phoenix-meta-checkbox-color-picker-v2>\n }\n\n @case (MetaFieldType.SWITCH) {\n <phoenix-meta-switch-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [hidden]=\"field.hidden ?? false\"\n [dataCy]=\"'switch-' + key\"></phoenix-meta-switch-v2>\n }\n\n @case (MetaFieldType.SELECT_BUTTON) {\n <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-select-button>\n }\n\n @case (MetaFieldType.ASSIGN) {\n <phoenix-meta-assign-responsible-v2\n [formControlName]=\"key\"\n [items]=\"(field.configuration.extra?.['items'] ?? [])\"\n [dialogHeaderKey]=\"(field.configuration.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n ></phoenix-meta-assign-responsible-v2>\n }\n\n <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-assign-asset>\n } -->\n\n @case (MetaFieldType.COLOR) {\n <phoenix-meta-color-picker-v2\n [formControlName]=\"key\"\n [disable]=\"isDisabled()\">\n </phoenix-meta-color-picker-v2>\n }\n\n @case (MetaFieldType.UPLOAD) {\n <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-upload>\n }\n\n @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-upload-dragdrop>\n }\n\n @case (MetaFieldType.LINKS_DATA) {\n <!-- <input pInputText [id]=\"key\" [formControlName]=\"key\" [readonly]=\"true\"> -->\n }\n\n @case (MetaFieldType.SLOT) { }\n\n @default {\n <input pInputText [id]=\"key\" [formControlName]=\"key\">\n }\n }\n\n @if (field.configuration.extra?.['dividerAfter']) {\n <div\n class=\"meta-divider\"\n [style.margin]=\"field.configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n ></div>\n }\n }\n\n\n @if (!readOnly && showError()) {\n <small class=\"p-error block mt-1\">\n <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n </small>\n }\n </div>\n }\n</div>", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9;margin:0;cursor:pointer}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type:
|
|
9773
10012
|
// PrimeNG 20 base inputs
|
|
9774
|
-
InputTextModule }, { kind: "directive", type: i3$
|
|
10013
|
+
InputTextModule }, { kind: "directive", type: i3$5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$7.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i5$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$6.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type:
|
|
9775
10014
|
// Advanced / custom Phoenix fields
|
|
9776
10015
|
MetaTimeperiodComponent, selector: "phoenix-meta-timeperiod", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaCurrencyComponent, selector: "phoenix-meta-currency" }, { kind: "component", type: MetaStartDueDateV2Component, selector: "phoenix-meta-start-due-date-v2", inputs: ["dataCy", "disable"] }, { kind: "component", type: MetaTextEditorComponent, selector: "phoenix-meta-text-editor", inputs: ["previewMode", "hideLabel"] }, { kind: "component", type: MetaCheckboxColorPickerV2Component, selector: "phoenix-meta-checkbox-color-picker-v2", inputs: ["options", "disable"] }, { kind: "component", type: MetaSwitchV2Component, selector: "phoenix-meta-switch-v2", inputs: ["disable", "hidden", "dataCy"] }, { kind: "component", type: MetaSelectButtonComponent, selector: "phoenix-meta-select-button" }, { kind: "component", type: MetaAssignResponsibleV2Component, selector: "phoenix-meta-assign-responsible-v2", inputs: ["items", "dialogHeaderKey"] }, { kind: "component", type:
|
|
9777
10016
|
// MetaAssignAssetComponent,
|
|
@@ -9828,7 +10067,7 @@ class MetaFormGroupV2Component {
|
|
|
9828
10067
|
form;
|
|
9829
10068
|
readOnly = false;
|
|
9830
10069
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormGroupV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9831
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormGroupV2Component, isStandalone: true, selector: "phoenix-meta-form-group-v2", inputs: { group: "group", form: "form", readOnly: "readOnly" }, ngImport: i0, template: "<div class=\"pho-group\" [formGroup]=\"form\">\n <div class=\"grid\">\n @for (f of group.ctrl; track f?.configuration?.key) {\n <div [ngClass]=\"f.style.colWidth || 'col-12 md:col-6'\">\n <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-field-v2>\n </div>\n }\n </div>\n\n</div>", styles: [".pho-group{margin-bottom:16px}.pho-group__title{font-weight:700;margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$
|
|
10070
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormGroupV2Component, isStandalone: true, selector: "phoenix-meta-form-group-v2", inputs: { group: "group", form: "form", readOnly: "readOnly" }, ngImport: i0, template: "<div class=\"pho-group\" [formGroup]=\"form\">\n <div class=\"grid\">\n @for (f of group.ctrl; track f?.configuration?.key) {\n <div [ngClass]=\"f.style.colWidth || 'col-12 md:col-6'\">\n <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-field-v2>\n </div>\n }\n </div>\n\n</div>", styles: [".pho-group{margin-bottom:16px}.pho-group__title{font-weight:700;margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MetaFormFieldV2Component, selector: "phoenix-meta-form-field-v2", inputs: ["field", "form", "readOnly", "disableForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9832
10071
|
}
|
|
9833
10072
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormGroupV2Component, decorators: [{
|
|
9834
10073
|
type: Component,
|
|
@@ -10552,7 +10791,7 @@ class MetaFormV2Component {
|
|
|
10552
10791
|
this.depCleanup?.();
|
|
10553
10792
|
}
|
|
10554
10793
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10555
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormV2Component, isStandalone: true, selector: "phoenix-meta-form-v2", inputs: { form: "form", config: "config", readOnly: "readOnly", contentStyle: "contentStyle", contentClass: "contentClass" }, usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"form\">\n @if (hasControls) {\n\n @if (isGrouped) {\n <p-accordion\n [multiple]=\"true\"\n [value]=\"expandedGroupIds\"\n (valueChange)=\"onAccordionValueChange($event)\"\n >\n @for (g of groupedControls; track groupTrack(g, $index)) {\n <p-accordion-panel [value]=\"panelValue(g)\">\n <p-accordion-header>\n\n <!-- plus/minus toggle icon -->\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i class=\"pi pi-minus-circle\"></i>\n } @else {\n <i class=\"pi pi-plus-circle\"></i>\n }\n </ng-template>\n\n {{ g?.groupName | translate }}\n </p-accordion-header>\n \n <p-accordion-content>\n <div [ngStyle]=\"contentStyle\" [ngClass]=\"contentClass\">\n <phoenix-meta-form-group-v2 [group]=\"g\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-group-v2>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n\n } @else {\n <div class=\"grid\">\n @for (f of flatControls; track f.configuration.key) {\n <div [ngClass]=\"f.style.colWidth ?? 'col-12 md:col-6'\">\n <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-field-v2>\n </div>\n }\n </div>\n }\n\n }\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$
|
|
10794
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormV2Component, isStandalone: true, selector: "phoenix-meta-form-v2", inputs: { form: "form", config: "config", readOnly: "readOnly", contentStyle: "contentStyle", contentClass: "contentClass" }, usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"form\">\n @if (hasControls) {\n\n @if (isGrouped) {\n <p-accordion\n [multiple]=\"true\"\n [value]=\"expandedGroupIds\"\n (valueChange)=\"onAccordionValueChange($event)\"\n >\n @for (g of groupedControls; track groupTrack(g, $index)) {\n <p-accordion-panel [value]=\"panelValue(g)\">\n <p-accordion-header>\n\n <!-- plus/minus toggle icon -->\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i class=\"pi pi-minus-circle\"></i>\n } @else {\n <i class=\"pi pi-plus-circle\"></i>\n }\n </ng-template>\n\n {{ g?.groupName | translate }}\n </p-accordion-header>\n \n <p-accordion-content>\n <div [ngStyle]=\"contentStyle\" [ngClass]=\"contentClass\">\n <phoenix-meta-form-group-v2 [group]=\"g\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-group-v2>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n\n } @else {\n <div class=\"grid\">\n @for (f of flatControls; track f.configuration.key) {\n <div [ngClass]=\"f.style.colWidth ?? 'col-12 md:col-6'\">\n <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-field-v2>\n </div>\n }\n </div>\n }\n\n }\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3$3.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i3$3.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i3$3.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i3$3.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MetaFormFieldV2Component, selector: "phoenix-meta-form-field-v2", inputs: ["field", "form", "readOnly", "disableForm"] }, { kind: "component", type: MetaFormGroupV2Component, selector: "phoenix-meta-form-group-v2", inputs: ["group", "form", "readOnly"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10556
10795
|
}
|
|
10557
10796
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormV2Component, decorators: [{
|
|
10558
10797
|
type: Component,
|
|
@@ -10612,7 +10851,7 @@ class MetaFormButtonsV2Component {
|
|
|
10612
10851
|
this.handleCancel.emit('CANCEL');
|
|
10613
10852
|
}
|
|
10614
10853
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormButtonsV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10615
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormButtonsV2Component, isStandalone: true, selector: "phoenix-meta-form-buttons-v2", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isCreateAnother: { classPropertyName: "isCreateAnother", publicName: "isCreateAnother", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleSave: "handleSave", handleCancel: "handleCancel" }, ngImport: i0, template: "<div class=\"flex justify-content-end p-2\">\n @if (isCreateAnother()) {\n <p-checkbox\n id=\"dialog-buttons-checkbox\"\n data-cy=\"dialog-buttons-checkbox-cy\"\n [(ngModel)]=\"createAnother\"\n [binary]=\"true\"\n inputId=\"binary\"\n class=\"mr-3\"\n ></p-checkbox>\n }\n\n <button\n class=\"mr-2\"\n pButton\n [disabled]=\"isDisabled()\"\n [loading]=\"isLoading()\"\n (click)=\"onSaveClick()\"\n [attr.data-cy]=\"'submit-button'\"\n >\n <span class=\"mx-1\">{{ 'ACTION.SAVE' | translate }}</span>\n </button>\n\n <p-button\n [text]=\"true\"\n (click)=\"onCancelClick()\"\n [attr.data-cy]=\"'cancel-button'\"\n >\n {{ 'ACTION.CANCEL' | translate }}\n </p-button>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$
|
|
10854
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormButtonsV2Component, isStandalone: true, selector: "phoenix-meta-form-buttons-v2", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isCreateAnother: { classPropertyName: "isCreateAnother", publicName: "isCreateAnother", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleSave: "handleSave", handleCancel: "handleCancel" }, ngImport: i0, template: "<div class=\"flex justify-content-end p-2\">\n @if (isCreateAnother()) {\n <p-checkbox\n id=\"dialog-buttons-checkbox\"\n data-cy=\"dialog-buttons-checkbox-cy\"\n [(ngModel)]=\"createAnother\"\n [binary]=\"true\"\n inputId=\"binary\"\n class=\"mr-3\"\n ></p-checkbox>\n }\n\n <button\n class=\"mr-2\"\n pButton\n [disabled]=\"isDisabled()\"\n [loading]=\"isLoading()\"\n (click)=\"onSaveClick()\"\n [attr.data-cy]=\"'submit-button'\"\n >\n <span class=\"mx-1\">{{ 'ACTION.SAVE' | translate }}</span>\n </button>\n\n <p-button\n [text]=\"true\"\n (click)=\"onCancelClick()\"\n [attr.data-cy]=\"'cancel-button'\"\n >\n {{ 'ACTION.CANCEL' | translate }}\n </p-button>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
|
|
10616
10855
|
}
|
|
10617
10856
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormButtonsV2Component, decorators: [{
|
|
10618
10857
|
type: Component,
|