@fuentis/phoenix-ui 0.0.9-alpha.486 → 0.0.9-alpha.488
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.
|
@@ -18,16 +18,16 @@ import * as i4 from 'primeng/divider';
|
|
|
18
18
|
import { DividerModule } from 'primeng/divider';
|
|
19
19
|
import * as i3$1 from 'primeng/api';
|
|
20
20
|
import { MessageService, FilterMatchMode } from 'primeng/api';
|
|
21
|
-
import * as
|
|
21
|
+
import * as i3$2 from 'primeng/accordion';
|
|
22
22
|
import { AccordionModule } from 'primeng/accordion';
|
|
23
23
|
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
24
24
|
import * as i5 from 'primeng/popover';
|
|
25
25
|
import { PopoverModule, Popover } from 'primeng/popover';
|
|
26
26
|
import * as i2$2 from 'primeng/card';
|
|
27
27
|
import { CardModule } from 'primeng/card';
|
|
28
|
-
import * as i3$
|
|
28
|
+
import * as i3$4 from 'primeng/drawer';
|
|
29
29
|
import { DrawerModule, Drawer } from 'primeng/drawer';
|
|
30
|
-
import * as i3$
|
|
30
|
+
import * as i3$3 from 'primeng/inputtext';
|
|
31
31
|
import { InputTextModule } from 'primeng/inputtext';
|
|
32
32
|
import { MessageModule } from 'primeng/message';
|
|
33
33
|
import * as i6 from 'primeng/tabs';
|
|
@@ -43,7 +43,7 @@ import * as i7$2 from 'primeng/iconfield';
|
|
|
43
43
|
import { IconFieldModule } from 'primeng/iconfield';
|
|
44
44
|
import * as i8$1 from 'primeng/inputicon';
|
|
45
45
|
import { InputIconModule } from 'primeng/inputicon';
|
|
46
|
-
import * as i4$
|
|
46
|
+
import * as i4$1 from '@angular/common/http';
|
|
47
47
|
import { HttpParams } from '@angular/common/http';
|
|
48
48
|
import * as i6$2 from 'primeng/avatar';
|
|
49
49
|
import { Avatar, AvatarModule } from 'primeng/avatar';
|
|
@@ -68,7 +68,7 @@ import * as i12 from 'primeng/select';
|
|
|
68
68
|
import { SelectModule } from 'primeng/select';
|
|
69
69
|
import * as i10$1 from 'primeng/chip';
|
|
70
70
|
import { ChipModule } from 'primeng/chip';
|
|
71
|
-
import * as i4$
|
|
71
|
+
import * as i4$2 from 'primeng/overlaypanel';
|
|
72
72
|
import { OverlayPanelModule } from 'primeng/overlaypanel';
|
|
73
73
|
import { PanelModule } from 'primeng/panel';
|
|
74
74
|
import * as i14 from 'primeng/overlaybadge';
|
|
@@ -81,28 +81,28 @@ import jsPDF from 'jspdf';
|
|
|
81
81
|
import autoTable from 'jspdf-autotable';
|
|
82
82
|
import * as XLSX from 'xlsx';
|
|
83
83
|
import { CalendarModule } from 'primeng/calendar';
|
|
84
|
-
import * as i3$
|
|
84
|
+
import * as i3$8 from 'primeng/dropdown';
|
|
85
85
|
import { DropdownModule } from 'primeng/dropdown';
|
|
86
86
|
import { EditorModule } from 'primeng/editor';
|
|
87
87
|
import * as i1$2 from 'primeng/dynamicdialog';
|
|
88
88
|
import { DialogService } from 'primeng/dynamicdialog';
|
|
89
89
|
import * as i2$6 from 'primeng/datepicker';
|
|
90
90
|
import { DatePickerModule } from 'primeng/datepicker';
|
|
91
|
-
import * as i3$
|
|
91
|
+
import * as i3$5 from 'primeng/colorpicker';
|
|
92
92
|
import { ColorPickerModule } from 'primeng/colorpicker';
|
|
93
|
-
import * as i3$
|
|
93
|
+
import * as i3$6 from 'primeng/inputnumber';
|
|
94
94
|
import { InputNumberModule } from 'primeng/inputnumber';
|
|
95
95
|
import * as i5$3 from 'primeng/keyfilter';
|
|
96
96
|
import { KeyFilterModule } from 'primeng/keyfilter';
|
|
97
|
-
import * as i3$
|
|
97
|
+
import * as i3$9 from 'primeng/inputswitch';
|
|
98
98
|
import { InputSwitchModule } from 'primeng/inputswitch';
|
|
99
|
-
import * as i3$
|
|
99
|
+
import * as i3$7 from 'primeng/password';
|
|
100
100
|
import { PasswordModule } from 'primeng/password';
|
|
101
|
-
import * as i3$
|
|
101
|
+
import * as i3$a from 'primeng/textarea';
|
|
102
102
|
import { TextareaModule } from 'primeng/textarea';
|
|
103
103
|
import { schema, Editor, toHTML, NgxEditorComponent, NgxEditorMenuComponent } from 'ngx-editor';
|
|
104
104
|
import { Schema } from 'prosemirror-model';
|
|
105
|
-
import * as i3$
|
|
105
|
+
import * as i3$b from 'primeng/fileupload';
|
|
106
106
|
import { FileUploadModule } from 'primeng/fileupload';
|
|
107
107
|
import * as i1$3 from '@angular/platform-browser';
|
|
108
108
|
import { MessagesModule } from 'primeng/messages';
|
|
@@ -461,7 +461,7 @@ class SidebarComponent {
|
|
|
461
461
|
this.toggleSidebar.emit(this.isSlim);
|
|
462
462
|
}
|
|
463
463
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
464
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SidebarComponent, isStandalone: true, selector: "pho-sidebar", inputs: { classname: "classname", mainItems: "mainItems", footerItem: "footerItem" }, outputs: { toggleSidebar: "toggleSidebar", sliderClick: "sliderClick" }, ngImport: i0, template: "@if(isSlim){\n<div\n
|
|
464
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SidebarComponent, isStandalone: true, selector: "pho-sidebar", inputs: { classname: "classname", mainItems: "mainItems", footerItem: "footerItem" }, outputs: { toggleSidebar: "toggleSidebar", sliderClick: "sliderClick" }, ngImport: i0, template: "@if (isSlim) {\n <div\n [@hoverState]=\"hoverState\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n class=\"relative shadow-3 h-full sidebar overflow-hidden\"\n >\n <div class=\"flex flex-column h-full\" style=\"scroll-padding-bottom: 5rem\">\n <div class=\"ml-1 mr-1\">\n <pho-sidebar-item\n (sliderClick)=\"sliderClick.emit($event)\"\n [item]=\"mainItems[0].items[0]\"\n />\n </div>\n\n <p-accordion [value]=\"[0, 1, 2, 3]\" [multiple]=\"true\">\n @for (itemGroup of mainItems; track $index) {\n <p-accordion-panel [value]=\"$index\">\n <p-accordion-header>\n <div class=\"flex align-items-center\">\n <img class=\"mr-2\" width=\"28\" [src]=\"itemGroup.icon\" alt=\"\" />\n <span class=\"text-primary font-bold\">\n {{ itemGroup.module | translate }}\n </span>\n </div>\n\n <ng-template #toggleicon let-active=\"active\">\n @if (active) { } @else { }\n </ng-template>\n </p-accordion-header>\n\n <p-accordion-content>\n @if (isHovered) {\n @for (item of itemGroup.items.slice(1); track $index) {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n }\n }\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n\n <!-- footer list (slim hover state) -->\n @if (footerItem) {\n <div class=\"absolute bottom-0 left-0 flex flex-column w-full\">\n\n <pho-sidebar-item [item]=\"footerItem\" class=\"group-item\" />\n <!-- <ul class=\"flex flex-column gap-3 mb-2 p-0 m-0\">\n @for (item of footerItem; track $index) {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n }\n </ul> -->\n </div>\n }\n </div>\n\n <!-- bottom actions (ALWAYS stable layout) -->\n <div class=\"absolute bottom-0 left-0 flex justify-content-between align-items-center w-full p-1\">\n <!-- settings -->\n @if (footerItem) {\n <div\n class=\"flex align-items-center\"\n [pTooltip]=\"footerItem.tooltip | translate\"\n [tooltipPosition]=\"'top'\"\n >\n <a\n [routerLink]=\"footerItem?.path\"\n pButton\n icon=\"pi pi-cog\"\n [text]=\"true\"\n size=\"large\"\n class=\"m-1 no-underline\"\n style=\"min-width: fit-content\"\n [attr.data-cy]=\"'navigation-settings-button'\"\n ></a>\n </div>\n } @else {\n <div></div>\n }\n\n <!-- toggle -->\n <p-button\n (onClick)=\"onToggleSidebar()\"\n [text]=\"true\"\n class=\"m-1\"\n [style.transform]=\"isSlim ? 'rotate(180deg)' : ''\"\n [attr.data-cy]=\"'navigation-toggle-button'\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 17 15\"\n fill=\"none\"\n class=\"opacity-70\"\n [style.marginTop.px]=\"2\"\n [style.width.px]=\"14\"\n [style.height.px]=\"12\"\n >\n <path\n d=\"M7.071 0L8.485 1.414L3.828 6.071H13V8.071H3.828L8.485 12.728L7.071 14.142L0 7.071L7.071 0ZM15.001 14.071V0.0710001H17.001V14.071H15.001Z\"\n fill=\"black\"\n />\n </svg>\n </p-button>\n </div>\n </div>\n} @else {\n <div class=\"relative shadow-3 h-full sidebar overflow-hidden pr-1\">\n <div class=\"flex flex-column h-full\" style=\"scroll-padding-bottom: 5rem\">\n <div class=\"ml-1 mr-1\">\n <pho-sidebar-item\n [item]=\"mainItems[0].items[0]\"\n (sliderClick)=\"sliderClick.emit($event)\"\n />\n </div>\n\n <p-accordion [value]=\"[0, 1, 2, 3]\" [multiple]=\"true\">\n @for (itemGroup of mainItems; track $index) {\n <p-accordion-panel [value]=\"$index\">\n <p-accordion-header>\n <div class=\"flex align-items-center\">\n <img class=\"mr-2\" width=\"28\" [src]=\"itemGroup.icon\" alt=\"\" />\n <span class=\"text-primary font-bold\">\n {{ itemGroup.module | translate }}\n </span>\n </div>\n\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i\n style=\"font-size: 0.7rem; padding-right: 12px\"\n class=\"pi pi-sort-up-fill opacity-70\"\n ></i>\n } @else {\n <i\n style=\"font-size: 0.7rem; padding-right: 12px\"\n class=\"pi pi-sort-down-fill opacity-70\"\n ></i>\n }\n </ng-template>\n </p-accordion-header>\n\n <p-accordion-content>\n @for (item of itemGroup.items.slice(1); track $index) {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n }\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n </div>\n\n <!-- bottom actions (ALWAYS stable layout) -->\n <div class=\"absolute bottom-0 left-0 flex justify-content-between align-items-center w-full p-1\">\n <!-- settings -->\n @if (footerItem) {\n <div\n class=\"flex align-items-center\"\n [pTooltip]=\"footerItem?.tooltip | translate\"\n [tooltipPosition]=\"'top'\"\n >\n <a\n [routerLink]=\"footerItem?.path\"\n pButton\n icon=\"pi pi-cog\"\n [text]=\"true\"\n size=\"large\"\n class=\"m-1 no-underline\"\n style=\"min-width: fit-content\"\n [attr.data-cy]=\"'navigation-settings-button'\"\n ></a>\n </div>\n } @else {\n <div></div>\n }\n\n <!-- toggle -->\n <p-button\n (onClick)=\"onToggleSidebar()\"\n [text]=\"true\"\n class=\"m-1\"\n [attr.data-cy]=\"'navigation-toggle-button'\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 17 15\"\n fill=\"none\"\n class=\"arrow-icon\"\n [style.marginTop.px]=\"2\"\n [style.width.px]=\"14\"\n [style.height.px]=\"13\"\n >\n <path\n d=\"M7.071 0L8.485 1.414L3.828 6.071H13V8.071H3.828L8.485 12.728L7.071 14.142L0 7.071L7.071 0ZM15.001 14.071V0.0710001H17.001V14.071H15.001Z\"\n fill=\"black\"\n />\n </svg>\n </p-button>\n </div>\n </div>\n}", styles: [":host::ng-deep .p-accordionheader{padding:.5rem 1rem!important}:host::ng-deep .p-accordioncontent-content{padding-bottom:0!important}:host::ng-deep .p-accordionpanel{border:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SidebarItemComponent, selector: "pho-sidebar-item", inputs: ["item", "classname"], outputs: ["sliderClick"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3$2.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i3$2.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i3$2.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i3$2.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], animations: [
|
|
465
465
|
trigger('hoverState', [
|
|
466
466
|
state('default', style({
|
|
467
467
|
width: '50px',
|
|
@@ -493,7 +493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
493
493
|
})),
|
|
494
494
|
transition('default <=> hovered', animate('200ms ease-in-out')),
|
|
495
495
|
]),
|
|
496
|
-
], template: "@if(isSlim){\n<div\n
|
|
496
|
+
], template: "@if (isSlim) {\n <div\n [@hoverState]=\"hoverState\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n class=\"relative shadow-3 h-full sidebar overflow-hidden\"\n >\n <div class=\"flex flex-column h-full\" style=\"scroll-padding-bottom: 5rem\">\n <div class=\"ml-1 mr-1\">\n <pho-sidebar-item\n (sliderClick)=\"sliderClick.emit($event)\"\n [item]=\"mainItems[0].items[0]\"\n />\n </div>\n\n <p-accordion [value]=\"[0, 1, 2, 3]\" [multiple]=\"true\">\n @for (itemGroup of mainItems; track $index) {\n <p-accordion-panel [value]=\"$index\">\n <p-accordion-header>\n <div class=\"flex align-items-center\">\n <img class=\"mr-2\" width=\"28\" [src]=\"itemGroup.icon\" alt=\"\" />\n <span class=\"text-primary font-bold\">\n {{ itemGroup.module | translate }}\n </span>\n </div>\n\n <ng-template #toggleicon let-active=\"active\">\n @if (active) { } @else { }\n </ng-template>\n </p-accordion-header>\n\n <p-accordion-content>\n @if (isHovered) {\n @for (item of itemGroup.items.slice(1); track $index) {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n }\n }\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n\n <!-- footer list (slim hover state) -->\n @if (footerItem) {\n <div class=\"absolute bottom-0 left-0 flex flex-column w-full\">\n\n <pho-sidebar-item [item]=\"footerItem\" class=\"group-item\" />\n <!-- <ul class=\"flex flex-column gap-3 mb-2 p-0 m-0\">\n @for (item of footerItem; track $index) {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n }\n </ul> -->\n </div>\n }\n </div>\n\n <!-- bottom actions (ALWAYS stable layout) -->\n <div class=\"absolute bottom-0 left-0 flex justify-content-between align-items-center w-full p-1\">\n <!-- settings -->\n @if (footerItem) {\n <div\n class=\"flex align-items-center\"\n [pTooltip]=\"footerItem.tooltip | translate\"\n [tooltipPosition]=\"'top'\"\n >\n <a\n [routerLink]=\"footerItem?.path\"\n pButton\n icon=\"pi pi-cog\"\n [text]=\"true\"\n size=\"large\"\n class=\"m-1 no-underline\"\n style=\"min-width: fit-content\"\n [attr.data-cy]=\"'navigation-settings-button'\"\n ></a>\n </div>\n } @else {\n <div></div>\n }\n\n <!-- toggle -->\n <p-button\n (onClick)=\"onToggleSidebar()\"\n [text]=\"true\"\n class=\"m-1\"\n [style.transform]=\"isSlim ? 'rotate(180deg)' : ''\"\n [attr.data-cy]=\"'navigation-toggle-button'\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 17 15\"\n fill=\"none\"\n class=\"opacity-70\"\n [style.marginTop.px]=\"2\"\n [style.width.px]=\"14\"\n [style.height.px]=\"12\"\n >\n <path\n d=\"M7.071 0L8.485 1.414L3.828 6.071H13V8.071H3.828L8.485 12.728L7.071 14.142L0 7.071L7.071 0ZM15.001 14.071V0.0710001H17.001V14.071H15.001Z\"\n fill=\"black\"\n />\n </svg>\n </p-button>\n </div>\n </div>\n} @else {\n <div class=\"relative shadow-3 h-full sidebar overflow-hidden pr-1\">\n <div class=\"flex flex-column h-full\" style=\"scroll-padding-bottom: 5rem\">\n <div class=\"ml-1 mr-1\">\n <pho-sidebar-item\n [item]=\"mainItems[0].items[0]\"\n (sliderClick)=\"sliderClick.emit($event)\"\n />\n </div>\n\n <p-accordion [value]=\"[0, 1, 2, 3]\" [multiple]=\"true\">\n @for (itemGroup of mainItems; track $index) {\n <p-accordion-panel [value]=\"$index\">\n <p-accordion-header>\n <div class=\"flex align-items-center\">\n <img class=\"mr-2\" width=\"28\" [src]=\"itemGroup.icon\" alt=\"\" />\n <span class=\"text-primary font-bold\">\n {{ itemGroup.module | translate }}\n </span>\n </div>\n\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i\n style=\"font-size: 0.7rem; padding-right: 12px\"\n class=\"pi pi-sort-up-fill opacity-70\"\n ></i>\n } @else {\n <i\n style=\"font-size: 0.7rem; padding-right: 12px\"\n class=\"pi pi-sort-down-fill opacity-70\"\n ></i>\n }\n </ng-template>\n </p-accordion-header>\n\n <p-accordion-content>\n @for (item of itemGroup.items.slice(1); track $index) {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n }\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n </div>\n\n <!-- bottom actions (ALWAYS stable layout) -->\n <div class=\"absolute bottom-0 left-0 flex justify-content-between align-items-center w-full p-1\">\n <!-- settings -->\n @if (footerItem) {\n <div\n class=\"flex align-items-center\"\n [pTooltip]=\"footerItem?.tooltip | translate\"\n [tooltipPosition]=\"'top'\"\n >\n <a\n [routerLink]=\"footerItem?.path\"\n pButton\n icon=\"pi pi-cog\"\n [text]=\"true\"\n size=\"large\"\n class=\"m-1 no-underline\"\n style=\"min-width: fit-content\"\n [attr.data-cy]=\"'navigation-settings-button'\"\n ></a>\n </div>\n } @else {\n <div></div>\n }\n\n <!-- toggle -->\n <p-button\n (onClick)=\"onToggleSidebar()\"\n [text]=\"true\"\n class=\"m-1\"\n [attr.data-cy]=\"'navigation-toggle-button'\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 17 15\"\n fill=\"none\"\n class=\"arrow-icon\"\n [style.marginTop.px]=\"2\"\n [style.width.px]=\"14\"\n [style.height.px]=\"13\"\n >\n <path\n d=\"M7.071 0L8.485 1.414L3.828 6.071H13V8.071H3.828L8.485 12.728L7.071 14.142L0 7.071L7.071 0ZM15.001 14.071V0.0710001H17.001V14.071H15.001Z\"\n fill=\"black\"\n />\n </svg>\n </p-button>\n </div>\n </div>\n}", styles: [":host::ng-deep .p-accordionheader{padding:.5rem 1rem!important}:host::ng-deep .p-accordioncontent-content{padding-bottom:0!important}:host::ng-deep .p-accordionpanel{border:none}\n"] }]
|
|
497
497
|
}], propDecorators: { toggleSidebar: [{
|
|
498
498
|
type: Output
|
|
499
499
|
}], sliderClick: [{
|
|
@@ -724,7 +724,7 @@ class CrudService {
|
|
|
724
724
|
const params = new HttpParams().set('phrase', phrase).set('size', size);
|
|
725
725
|
return this.http.get(url, { params });
|
|
726
726
|
}
|
|
727
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CrudService, deps: [{ token: i4$
|
|
727
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CrudService, deps: [{ token: i4$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
728
728
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CrudService, providedIn: 'root' });
|
|
729
729
|
}
|
|
730
730
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CrudService, decorators: [{
|
|
@@ -732,7 +732,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
732
732
|
args: [{
|
|
733
733
|
providedIn: 'root',
|
|
734
734
|
}]
|
|
735
|
-
}], ctorParameters: () => [{ type: i4$
|
|
735
|
+
}], ctorParameters: () => [{ type: i4$1.HttpClient }] });
|
|
736
|
+
|
|
737
|
+
function buildAssetDetailsUrl(baseUrl, assetGroupLabelKey, uuid) {
|
|
738
|
+
const groupSeg = ASSET_GROUP_TO_SEGMENT[assetGroupLabelKey];
|
|
739
|
+
const typeSeg = ASSET_TYPE_TO_SEGMENT[assetGroupLabelKey];
|
|
740
|
+
return `${baseUrl}/assets/assets/${groupSeg}/${typeSeg}/${uuid}/details`;
|
|
741
|
+
}
|
|
742
|
+
const ASSET_GROUP_TO_SEGMENT = {
|
|
743
|
+
// IT
|
|
744
|
+
GRP_IT_SYSTEM: 'it-assets',
|
|
745
|
+
GRP_STORAGE_SYSTEM: 'it-assets',
|
|
746
|
+
GRP_VIRTUALIZATION: 'it-assets',
|
|
747
|
+
GRP_NETWORK: 'it-assets',
|
|
748
|
+
GRP_NETWORK_DEVICE: 'it-assets',
|
|
749
|
+
GRP_SOFTWARE: 'it-assets',
|
|
750
|
+
GRP_VOLUME: 'it-assets',
|
|
751
|
+
// Facilities
|
|
752
|
+
GRP_LOCATION: 'facilities',
|
|
753
|
+
GRP_INFRASTRUCTURE: 'facilities',
|
|
754
|
+
GRP_ACCESS_CONTROL: 'facilities',
|
|
755
|
+
// Business context
|
|
756
|
+
GRP_BUSINESS_PROCESSES: 'business-context',
|
|
757
|
+
GRP_ORGANIZATION: 'business-context',
|
|
758
|
+
GRP_SUPPORT: 'business-context',
|
|
759
|
+
};
|
|
760
|
+
const ASSET_TYPE_TO_SEGMENT = {
|
|
761
|
+
// --- IT ASSETS ---
|
|
762
|
+
GRP_IT_SYSTEM: 'it-system',
|
|
763
|
+
GRP_STORAGE_SYSTEM: 'storage-system',
|
|
764
|
+
GRP_VIRTUALIZATION: 'virtualization',
|
|
765
|
+
GRP_NETWORK: 'network',
|
|
766
|
+
GRP_NETWORK_DEVICE: 'network-device',
|
|
767
|
+
GRP_SOFTWARE: 'software',
|
|
768
|
+
GRP_VOLUME: 'volume',
|
|
769
|
+
// --- FACILITIES ---
|
|
770
|
+
GRP_LOCATION: 'location',
|
|
771
|
+
GRP_INFRASTRUCTURE: 'infrastructure',
|
|
772
|
+
GRP_ACCESS_CONTROL: 'access-control',
|
|
773
|
+
// --- BUSINESS CONTEXT ---
|
|
774
|
+
GRP_ORGANIZATION: 'organization',
|
|
775
|
+
GRP_BUSINESS_PROCESSES: 'business-processes',
|
|
776
|
+
GRP_SUPPORT: 'support',
|
|
777
|
+
};
|
|
736
778
|
|
|
737
779
|
class SearchBarComponent {
|
|
738
780
|
translate;
|
|
@@ -815,10 +857,21 @@ class SearchBarComponent {
|
|
|
815
857
|
this.checkboxes = {};
|
|
816
858
|
}
|
|
817
859
|
}
|
|
818
|
-
setLinkUrl(
|
|
860
|
+
setLinkUrl(data) {
|
|
819
861
|
const baseUrl = this.tabs()?.[this.tabIndex]?.linkUrl;
|
|
820
|
-
if (
|
|
821
|
-
|
|
862
|
+
if (this.tabIndex !== 1) {
|
|
863
|
+
if (data?.url && baseUrl) {
|
|
864
|
+
window.open(baseUrl + data.url);
|
|
865
|
+
}
|
|
866
|
+
}
|
|
867
|
+
else {
|
|
868
|
+
if (!data.scopes) {
|
|
869
|
+
const url = `scoping/scopes/scope/${data.uuid}/details`;
|
|
870
|
+
window.open(baseUrl + url);
|
|
871
|
+
}
|
|
872
|
+
else {
|
|
873
|
+
window.open(buildAssetDetailsUrl(baseUrl, data.type.groupLabelKey, data.uuid));
|
|
874
|
+
}
|
|
822
875
|
}
|
|
823
876
|
}
|
|
824
877
|
onScroll(scrollObj) {
|
|
@@ -917,7 +970,7 @@ class SearchBarComponent {
|
|
|
917
970
|
this.reloadSubscription$.unsubscribe();
|
|
918
971
|
}
|
|
919
972
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SearchBarComponent, deps: [{ token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
920
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SearchBarComponent, isStandalone: true, selector: "pho-search-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "nes", 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 <p-inputicon styleClass=\"pi pi-search\" />\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<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 <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.url)\"\n (onSelectFilterEvent)=\"onClick($event)\"\n >\n </pho-serach-card>\n </p-tabpanel>\n }\n </p-tabpanels> </p-tabs\n >}\n </ng-template>\n</p-popover>\n", 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: InputTextModule }, { kind: "directive", type: i3$
|
|
973
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SearchBarComponent, isStandalone: true, selector: "pho-search-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "nes", 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 <p-inputicon styleClass=\"pi pi-search\" />\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<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 <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.url)\"\n (onSelectFilterEvent)=\"onClick($event)\"\n >\n </pho-serach-card>\n </p-tabpanel>\n }\n </p-tabpanels> </p-tabs\n >}\n </ng-template>\n</p-popover>\n", 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: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.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: TabsModule }, { kind: "component", type: i6.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i6.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i6.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i6.TabList, selector: "p-tablist" }, { kind: "component", type: i6.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: MessageModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: SearchCardComponent, selector: "pho-serach-card", inputs: ["searchData", "tab", "mocekedFilters", "checkboxes"], outputs: ["onScrollEvent", "onSelectLinkEvent", "onSelectFilterEvent"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }], animations: [
|
|
921
974
|
trigger('openClose', [
|
|
922
975
|
state('open', style({
|
|
923
976
|
width: '50vw',
|
|
@@ -1224,7 +1277,7 @@ class TopbarComponent {
|
|
|
1224
1277
|
: `url('assets/default-user.png')`;
|
|
1225
1278
|
}
|
|
1226
1279
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1227
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i3$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: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ImageModule }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.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: i6$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1280
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i3$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: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ImageModule }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.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: i6$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1228
1281
|
}
|
|
1229
1282
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TopbarComponent, decorators: [{
|
|
1230
1283
|
type: Component,
|
|
@@ -2206,7 +2259,7 @@ class PhoenixDataTableComponent {
|
|
|
2206
2259
|
this._selectedColumns = this.columns.filter((col) => val.some((v) => v.field === col.field));
|
|
2207
2260
|
}
|
|
2208
2261
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PhoenixDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2209
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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}::ng-deep{.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: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: 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: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i8.Tag, selector: "p-tag", inputs: ["style", "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", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i12.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type:
|
|
2262
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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}::ng-deep{.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: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: 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: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i8.Tag, selector: "p-tag", inputs: ["style", "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", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i12.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type:
|
|
2210
2263
|
///Custom components
|
|
2211
2264
|
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:
|
|
2212
2265
|
// Pipes
|
|
@@ -2627,7 +2680,7 @@ class TableCaptionComponent {
|
|
|
2627
2680
|
this.actionClick.emit({ action, selectedItems: this.selectedItems });
|
|
2628
2681
|
}
|
|
2629
2682
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2630
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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: i5.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: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i12.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { 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: i8$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i10.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: 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: i17.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "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"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i14.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i15.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i16.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] });
|
|
2683
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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: i5.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: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i12.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { 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: i8$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i10.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: 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: i17.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "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"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i14.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i15.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i16.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] });
|
|
2631
2684
|
}
|
|
2632
2685
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableCaptionComponent, decorators: [{
|
|
2633
2686
|
type: Component,
|
|
@@ -3447,7 +3500,7 @@ class TableComponent {
|
|
|
3447
3500
|
return path.split('.').reduce((o, k) => (o != null ? o[k] : null), obj);
|
|
3448
3501
|
}
|
|
3449
3502
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3450
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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 <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\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 >\n </table-caption>\n </ng-container>\n\n <ng-template #selectionActions>\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 }}</span\n >}\n </div>\n\n <div>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\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 </ng-container>\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 </ng-template>\n\n <p-table\n #dt\n [columns]=\"selectedColumns\"\n [value]=\"tableData\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"30\"\n [rows]=\"100\"\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 <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\n <th\n pResizableColumn\n class=\"custom-th text-primary font-bold\"\n *ngFor=\"let col of columns\"\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 <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 <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableCheckbox\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \"\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]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"\n ></p-tableRadioButton>\n </td>\n </ng-container>\n\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container [ngSwitch]=\"col.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n class=\"border-round-md font-semibold\"\n [style]=\"{\n 'fontSize':'12px',\n \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 || rowData[col.field] | translate\n }}\n </div>\n\n <!-- <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n 'font-size': '0.9rem!important'\n }\"\n [value]=\"\n rowData[col.field]?.name || rowData[col.field] | translate\n \"\n ></p-tag> -->\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST_TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n @for(item of rowData[col.field]; track $index){\n <p-badge severity=\"warn\" styleClass=\"mr-1\" [value]=\"item\" />\n\n <!-- <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'font-size': '0.9rem!important'\n }\"\n styleClass=\"mr-1\"\n [value]=\"item\"\n severity=\"info\"\n ></p-tag> -->\n }\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\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\n color: rowData[col.field].color\n }\"\n [value]=\"rowData[col.field]?.value | translate\"\n ></p-tag>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\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)=\"opp.toggle($event)\"\n ></p-avatar>\n <p-overlayPanel #opp>\n <div>\n <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\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-overlayPanel>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container\n *ngIf=\"rowData[col.field]?.length; else emptyCellBlock\"\n >\n @if(rowData[col.field].length > 1){\n <div\n class=\"cursor-pointer\"\n (click)=\"op.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\">{{ rowData[col.field][0].name }} </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\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n </ng-container>\n <p-overlayPanel #op>\n @for(item of rowData[col.field] ; track item.name; let isFirst =\n $first ){\n <ul class=\"list-none m-0 p-0\">\n @if(!isFirst) {\n <li>{{ item.name }}</li>\n }\n </ul>\n }\n </p-overlayPanel>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n <ng-container\n *ngIf=\"rowData[col.field] | isBoolean; else emptyCellBlock\"\n >\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 [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\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 </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\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 style=\"width: 200px\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n \"\n >\n {{\n rowData[col.field].length > 50\n ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n : rowData[col.field]\n }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\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 </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <!-- If this column is flagged and we have a code, render flag + the usual cell HTML -->\n <ng-container\n *ngIf=\"\n col.flag && getNested(rowData, col.flagCodeField) as cc;\n else normalTextCell\n \"\n >\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]=\"'flag flag-' + (cc || '').toString().toLowerCase()\"\n style=\"width: 22px\"\n alt=\"\"\n />\n <span [innerHTML]=\"rowData | cell : col : dateFormat\"></span>\n </div>\n </ng-container>\n\n <!-- Normal (unflagged) rendering: unchanged -->\n <ng-template #normalTextCell>\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 </ng-template>\n </ng-container>\n <ng-template #emptyCellBlock>\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 </ng-container>\n </ng-template>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"\n ></phoenix-data-table-action>\n </ng-container>\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: 46px\">\n <td *ngFor=\"let col of columns\">\n <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n </td>\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", styles: ["::ng-deep{.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}\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: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: 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", "searchQuery", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i8.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i4$3.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i10$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }, { kind: "pipe", type: IsBooleanPipe, name: "isBoolean" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i5$2.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }] });
|
|
3503
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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 <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\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 >\n </table-caption>\n </ng-container>\n\n <ng-template #selectionActions>\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 }}</span\n >}\n </div>\n\n <div>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\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 </ng-container>\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 </ng-template>\n\n <p-table\n #dt\n [columns]=\"selectedColumns\"\n [value]=\"tableData\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"30\"\n [rows]=\"100\"\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 <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\n <th\n pResizableColumn\n class=\"custom-th text-primary font-bold\"\n *ngFor=\"let col of columns\"\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 <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 <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableCheckbox\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \"\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]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"\n ></p-tableRadioButton>\n </td>\n </ng-container>\n\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container [ngSwitch]=\"col.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n class=\"border-round-md font-semibold\"\n [style]=\"{\n 'fontSize':'12px',\n \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 || rowData[col.field] | translate\n }}\n </div>\n\n <!-- <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n 'font-size': '0.9rem!important'\n }\"\n [value]=\"\n rowData[col.field]?.name || rowData[col.field] | translate\n \"\n ></p-tag> -->\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST_TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n @for(item of rowData[col.field]; track $index){\n <p-badge severity=\"warn\" styleClass=\"mr-1\" [value]=\"item\" />\n\n <!-- <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'font-size': '0.9rem!important'\n }\"\n styleClass=\"mr-1\"\n [value]=\"item\"\n severity=\"info\"\n ></p-tag> -->\n }\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\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\n color: rowData[col.field].color\n }\"\n [value]=\"rowData[col.field]?.value | translate\"\n ></p-tag>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\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)=\"opp.toggle($event)\"\n ></p-avatar>\n <p-overlayPanel #opp>\n <div>\n <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\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-overlayPanel>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container\n *ngIf=\"rowData[col.field]?.length; else emptyCellBlock\"\n >\n @if(rowData[col.field].length > 1){\n <div\n class=\"cursor-pointer\"\n (click)=\"op.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\">{{ rowData[col.field][0].name }} </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\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n </ng-container>\n <p-overlayPanel #op>\n @for(item of rowData[col.field] ; track item.name; let isFirst =\n $first ){\n <ul class=\"list-none m-0 p-0\">\n @if(!isFirst) {\n <li>{{ item.name }}</li>\n }\n </ul>\n }\n </p-overlayPanel>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n <ng-container\n *ngIf=\"rowData[col.field] | isBoolean; else emptyCellBlock\"\n >\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 [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\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 </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\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 style=\"width: 200px\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n \"\n >\n {{\n rowData[col.field].length > 50\n ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n : rowData[col.field]\n }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\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 </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <!-- If this column is flagged and we have a code, render flag + the usual cell HTML -->\n <ng-container\n *ngIf=\"\n col.flag && getNested(rowData, col.flagCodeField) as cc;\n else normalTextCell\n \"\n >\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]=\"'flag flag-' + (cc || '').toString().toLowerCase()\"\n style=\"width: 22px\"\n alt=\"\"\n />\n <span [innerHTML]=\"rowData | cell : col : dateFormat\"></span>\n </div>\n </ng-container>\n\n <!-- Normal (unflagged) rendering: unchanged -->\n <ng-template #normalTextCell>\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 </ng-template>\n </ng-container>\n <ng-template #emptyCellBlock>\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 </ng-container>\n </ng-template>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"\n ></phoenix-data-table-action>\n </ng-container>\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: 46px\">\n <td *ngFor=\"let col of columns\">\n <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n </td>\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", styles: ["::ng-deep{.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}\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: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: 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", "searchQuery", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i8.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i4$2.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i10$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }, { kind: "pipe", type: IsBooleanPipe, name: "isBoolean" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i5$2.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }] });
|
|
3451
3504
|
}
|
|
3452
3505
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableComponent, decorators: [{
|
|
3453
3506
|
type: Component,
|
|
@@ -3789,12 +3842,12 @@ class MetaFormAbstract {
|
|
|
3789
3842
|
if (this.formSub$)
|
|
3790
3843
|
this.formSub$.unsubscribe();
|
|
3791
3844
|
}
|
|
3792
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaFormAbstract, deps: [{ token: i2$3.FormBuilder }, { token: MetaFormService }, { token: i2$1.TranslateService }, { token: i4$
|
|
3845
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaFormAbstract, deps: [{ token: i2$3.FormBuilder }, { token: MetaFormService }, { token: i2$1.TranslateService }, { token: i4$1.HttpClient }], target: i0.ɵɵFactoryTarget.Directive });
|
|
3793
3846
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", 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 });
|
|
3794
3847
|
}
|
|
3795
3848
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaFormAbstract, decorators: [{
|
|
3796
3849
|
type: Directive
|
|
3797
|
-
}], ctorParameters: () => [{ type: i2$3.FormBuilder }, { type: MetaFormService }, { type: i2$1.TranslateService }, { type: i4$
|
|
3850
|
+
}], ctorParameters: () => [{ type: i2$3.FormBuilder }, { type: MetaFormService }, { type: i2$1.TranslateService }, { type: i4$1.HttpClient }], propDecorators: { metaForm: [{
|
|
3798
3851
|
type: Input
|
|
3799
3852
|
}], metaFormValues: [{
|
|
3800
3853
|
type: Input
|
|
@@ -4131,7 +4184,7 @@ class MetaAssignResponsibleComponent {
|
|
|
4131
4184
|
[text]="true"
|
|
4132
4185
|
></p-button>
|
|
4133
4186
|
</div>
|
|
4134
|
-
`, isInline: true, styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px;& 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-name :first-child{font-size:1rem}}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px;p{margin:0;display:flex;align-items:center}i{color:#e94260;padding-right:5px}.p-editor-container{padding-left:0!important}}\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: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i4$
|
|
4187
|
+
`, isInline: true, styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px;& 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-name :first-child{font-size:1rem}}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px;p{margin:0;display:flex;align-items:center}i{color:#e94260;padding-right:5px}.p-editor-container{padding-left:0!important}}\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: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i4$2.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: PanelModule }] });
|
|
4135
4188
|
}
|
|
4136
4189
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaAssignResponsibleComponent, decorators: [{
|
|
4137
4190
|
type: Component,
|
|
@@ -4617,7 +4670,7 @@ class MetaCheckboxColorPickerComponent extends BaseMetaField {
|
|
|
4617
4670
|
[attr.data-cy]="'checkbox-' + control?.id"
|
|
4618
4671
|
(click)="op.toggle($event)"
|
|
4619
4672
|
></div>
|
|
4620
|
-
`, isInline: true, styles: ["::ng-deep .p-overlaypanel .p-overlaypanel-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;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px}.color-box:hover{transform:scale(1.1);opacity:.9;box-shadow:0 0 5px #0003}.color-box:focus{outline:3px solid rgba(0,0,0,.2);outline-offset:3px}.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: OverlayPanelModule }, { kind: "component", type: i4$
|
|
4673
|
+
`, isInline: true, styles: ["::ng-deep .p-overlaypanel .p-overlaypanel-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;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px}.color-box:hover{transform:scale(1.1);opacity:.9;box-shadow:0 0 5px #0003}.color-box:focus{outline:3px solid rgba(0,0,0,.2);outline-offset:3px}.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: OverlayPanelModule }, { kind: "component", type: i4$2.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }] });
|
|
4621
4674
|
}
|
|
4622
4675
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaCheckboxColorPickerComponent, decorators: [{
|
|
4623
4676
|
type: Component,
|
|
@@ -4749,7 +4802,7 @@ class MetaColorPickerComponent extends BaseMetaField {
|
|
|
4749
4802
|
[ctrl]="ctrl"
|
|
4750
4803
|
></phoenix-inline-field-error>
|
|
4751
4804
|
</div>
|
|
4752
|
-
`, isInline: true, styles: [":host::ng-deep{.p-inputswitch{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$3.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: ColorPickerModule }, { kind: "component", type: i3$
|
|
4805
|
+
`, isInline: true, styles: [":host::ng-deep{.p-inputswitch{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$3.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: ColorPickerModule }, { kind: "component", type: i3$5.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
4753
4806
|
}
|
|
4754
4807
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaColorPickerComponent, decorators: [{
|
|
4755
4808
|
type: Component,
|
|
@@ -4835,7 +4888,7 @@ class MetaCurrencyComponent extends BaseMetaField {
|
|
|
4835
4888
|
[ctrl]="ctrl"
|
|
4836
4889
|
></phoenix-inline-field-error>
|
|
4837
4890
|
</div>
|
|
4838
|
-
`, 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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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$
|
|
4891
|
+
`, 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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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$6.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }] });
|
|
4839
4892
|
}
|
|
4840
4893
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaCurrencyComponent, decorators: [{
|
|
4841
4894
|
type: Component,
|
|
@@ -4983,7 +5036,7 @@ class MetaNumberComponent extends BaseMetaField {
|
|
|
4983
5036
|
[ctrl]="ctrl"
|
|
4984
5037
|
></phoenix-inline-field-error>
|
|
4985
5038
|
</div>
|
|
4986
|
-
`, 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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$
|
|
5039
|
+
`, 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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$6.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], 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$3.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 }] });
|
|
4987
5040
|
}
|
|
4988
5041
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaNumberComponent, decorators: [{
|
|
4989
5042
|
type: Component,
|
|
@@ -5052,7 +5105,7 @@ class MetaPasswordFeildComponent extends BaseMetaField {
|
|
|
5052
5105
|
[ctrl]="ctrl"
|
|
5053
5106
|
></phoenix-inline-field-error>
|
|
5054
5107
|
</div>
|
|
5055
|
-
`, isInline: true, styles: [":host::ng-deep{.p-component{width:100%}}\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$3.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: InputSwitchModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i3$
|
|
5108
|
+
`, isInline: true, styles: [":host::ng-deep{.p-component{width:100%}}\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$3.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: InputSwitchModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i3$7.Password, selector: "p-password", inputs: ["ariaLabel", "fluid", "ariaLabelledBy", "label", "disabled", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "appendTo", "toggleMask", "size", "inputStyleClass", "styleClass", "style", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "variant", "tabindex"], outputs: ["onFocus", "onBlur", "onClear"] }] });
|
|
5056
5109
|
}
|
|
5057
5110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaPasswordFeildComponent, decorators: [{
|
|
5058
5111
|
type: Component,
|
|
@@ -5279,7 +5332,7 @@ class MetaSingleSelectObjectBasedComponent extends BaseMetaField {
|
|
|
5279
5332
|
*ngIf="!control?.hidden"
|
|
5280
5333
|
[ctrl]="ctrl"
|
|
5281
5334
|
></phoenix-inline-field-error>
|
|
5282
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3$
|
|
5335
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3$8.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], 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$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: TranslateDropdownData, name: "translateDropdownData" }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }] });
|
|
5283
5336
|
}
|
|
5284
5337
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaSingleSelectObjectBasedComponent, decorators: [{
|
|
5285
5338
|
type: Component,
|
|
@@ -5918,7 +5971,7 @@ class MetaSwitchComponent extends BaseMetaField {
|
|
|
5918
5971
|
[ctrl]="ctrl"
|
|
5919
5972
|
></phoenix-inline-field-error>
|
|
5920
5973
|
</div>
|
|
5921
|
-
`, isInline: true, styles: [":host::ng-deep{.p-inputswitch{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$3.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: InputSwitchModule }, { kind: "component", type: i3$
|
|
5974
|
+
`, isInline: true, styles: [":host::ng-deep{.p-inputswitch{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$3.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: InputSwitchModule }, { kind: "component", type: i3$9.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
5922
5975
|
}
|
|
5923
5976
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaSwitchComponent, decorators: [{
|
|
5924
5977
|
type: Component,
|
|
@@ -6015,7 +6068,7 @@ class MetaTextAreaComponent extends BaseMetaField {
|
|
|
6015
6068
|
*ngIf="!control?.hidden"
|
|
6016
6069
|
[ctrl]="ctrl"
|
|
6017
6070
|
></phoenix-inline-field-error>
|
|
6018
|
-
`, 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$3.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$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: TextareaModule }, { kind: "directive", type: i3$
|
|
6071
|
+
`, 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$3.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$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: TextareaModule }, { kind: "directive", type: i3$a.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], 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"] }] });
|
|
6019
6072
|
}
|
|
6020
6073
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaTextAreaComponent, decorators: [{
|
|
6021
6074
|
type: Component,
|
|
@@ -6225,7 +6278,7 @@ class MetaTextEditorComponent extends BaseMetaField {
|
|
|
6225
6278
|
></phoenix-inline-field-error>
|
|
6226
6279
|
</div>
|
|
6227
6280
|
</div>
|
|
6228
|
-
`, isInline: true, styles: [":host::ng-deep{.NgxEditor__Wrapper,.NgxEditor__Content{min-height:120px}.NgxEditor__MenuItem--IconContainer[title=\"Insert Image\"]{display:none!important}.font-monospace{font-family:Courier New,Courier,monospace;font-size:13px}.html-preview-content{padding:.75rem;background:var(--surface-ground);border:1px solid var(--surface-border);border-radius:var(--border-radius);min-height:50px;p{margin:0 0 .5rem}p:last-child{margin-bottom:0}ul,ol{margin:.5rem 0;padding-left:1.5rem}strong{font-weight:700}em{font-style:italic}h1,h2,h3,h4,h5,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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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$
|
|
6281
|
+
`, isInline: true, styles: [":host::ng-deep{.NgxEditor__Wrapper,.NgxEditor__Content{min-height:120px}.NgxEditor__MenuItem--IconContainer[title=\"Insert Image\"]{display:none!important}.font-monospace{font-family:Courier New,Courier,monospace;font-size:13px}.html-preview-content{padding:.75rem;background:var(--surface-ground);border:1px solid var(--surface-border);border-radius:var(--border-radius);min-height:50px;p{margin:0 0 .5rem}p:last-child{margin-bottom:0}ul,ol{margin:.5rem 0;padding-left:1.5rem}strong{font-weight:700}em{font-style:italic}h1,h2,h3,h4,h5,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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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$a.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }] });
|
|
6229
6282
|
}
|
|
6230
6283
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaTextEditorComponent, decorators: [{
|
|
6231
6284
|
type: Component,
|
|
@@ -6333,7 +6386,7 @@ class MetaTextInputComponent extends BaseMetaField {
|
|
|
6333
6386
|
[ctrl]="ctrl"
|
|
6334
6387
|
></phoenix-inline-field-error>
|
|
6335
6388
|
</div>
|
|
6336
|
-
`, 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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$
|
|
6389
|
+
`, 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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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 }] });
|
|
6337
6390
|
}
|
|
6338
6391
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaTextInputComponent, decorators: [{
|
|
6339
6392
|
type: Component,
|
|
@@ -6436,7 +6489,7 @@ class MetaTimeperiodComponent {
|
|
|
6436
6489
|
[ctrl]="ctrl"
|
|
6437
6490
|
></phoenix-inline-field-error>
|
|
6438
6491
|
</div>
|
|
6439
|
-
`, 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$
|
|
6492
|
+
`, 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$3.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { 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 }] });
|
|
6440
6493
|
}
|
|
6441
6494
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaTimeperiodComponent, decorators: [{
|
|
6442
6495
|
type: Component,
|
|
@@ -6533,7 +6586,7 @@ class MetaUploadComponent extends BaseMetaField {
|
|
|
6533
6586
|
[ctrl]="ctrl"
|
|
6534
6587
|
></phoenix-inline-field-error>
|
|
6535
6588
|
</div>
|
|
6536
|
-
`, 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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$
|
|
6589
|
+
`, 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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "directive", type: i5$3.KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] });
|
|
6537
6590
|
}
|
|
6538
6591
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaUploadComponent, decorators: [{
|
|
6539
6592
|
type: Component,
|
|
@@ -6877,9 +6930,9 @@ class ReadOnlyInputComponent {
|
|
|
6877
6930
|
return textarea.value;
|
|
6878
6931
|
}
|
|
6879
6932
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ReadOnlyInputComponent, deps: [{ token: i1$3.DomSanitizer }, { token: i2$1.TranslateService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6880
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", 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<ng-container [ngSwitch]=\"control.configuration.type\">\n <ng-container *ngSwitchCase=\"ctrlType.TEXT_EDITOR\">\n <div\n [attr.data-cy]=\"'editor-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"read-only-editor-content\"\n [innerHTML]=\"value\"\n ></div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"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 </ng-container>\n <ng-container *ngSwitchCase=\"ctrlType.SWITCH\">\n <p-inputSwitch\n [attr.data-cy]=\"'switch-' + control?.id\"\n *ngIf=\"value?.isBoolean; else fallBack\"\n styleClass=\"mt-2 ml-1 mr-1\"\n [disabled]=\"true\"\n [(ngModel)]=\"value.res\"\n ></p-inputSwitch>\n </ng-container>\n <ng-container *ngSwitchCase=\"ctrlType.DATE\">\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | date }}\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.START_DUE_DATE\">\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n *ngIf=\"value?.startDate; else fallBack\"\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\n class=\"pi pi-arrow-right text-sm\"\n style=\"color: 'var(--surface-600)'\"\n ></i>\n </div>\n <span style=\"padding-top: 3px\">{{ value.endDate | date }}</span>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.CHECKBOX\">\n <p-checkbox\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n styleClass=\"mt-3\"\n [(ngModel)]=\"value\"\n [binary]=\"true\"\n inputId=\"binary\"\n [disabled]=\"true\"\n ></p-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.LINKS_DATA\">\n <div\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n [attr.data-cy]=\"'link-' + control?.id\"\n >\n <ng-container *ngFor=\"let item of value\">\n <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"ctrlType.ASSIGN\">\n <div\n *ngIf=\"value?.name; else fallBack\"\n [attr.data-cy]=\"'number-' + control?.id\"\n >\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\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n >\n {{ value?.name }}\n </p>\n <p\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n >\n {{ value?.function }}\n </p>\n </div>\n </div></p-button\n >\n <p-overlayPanel #op>\n <div>\n <span class=\"block mb-2\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n {{ value.email ?? \" --\" }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i\n >{{ value.phone ?? \" --\" }}\n </p>\n </div></p-overlayPanel\n >\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.CURRENCY\">\n <div\n [attr.data-cy]=\"'currency-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }} €\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.PASSWORD\">\n <div\n [attr.data-cy]=\"'password-' + control?.id\"\n *ngIf=\"value; else fallBack\"\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 </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION_OBJECT_BASED\">\n <div\n [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value.value }}\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.MS_OPTION\">\n <div\n [attr.data-cy]=\"'MS-OPTION-OBJECT-BASED-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2 white-space-nowrap overflow-hidden\"\n >\n {{ value }}\n </div>\n </ng-container>\n\n <!-- Remove this if necessary - spaces-overview GENERAL form contol -->\n <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION\">\n <!-- Flag mode -->\n <ng-container *ngIf=\"control?.configuration?.flagMode; else ssOptionLegacy\">\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2 flex align-items-center gap-2\"\n >\n <img\n *ngIf=\"value?.key\"\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 <span>{{ value.userFriendlyMessage }}</span>\n </div>\n </ng-container>\n\n <!-- Legacy -->\n <ng-template #ssOptionLegacy>\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | translate }}\n </div>\n </ng-template>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.NUMBER\">\n <div\n [attr.data-cy]=\"'number-' + control?.id\"\n *ngIf=\"value != null; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }}\n </div>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | stripHtml }}\n </div>\n </ng-container>\n</ng-container>\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>\n", 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.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: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i3$
|
|
6933
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", 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<ng-container [ngSwitch]=\"control.configuration.type\">\n <ng-container *ngSwitchCase=\"ctrlType.TEXT_EDITOR\">\n <div\n [attr.data-cy]=\"'editor-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"read-only-editor-content\"\n [innerHTML]=\"value\"\n ></div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"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 </ng-container>\n <ng-container *ngSwitchCase=\"ctrlType.SWITCH\">\n <p-inputSwitch\n [attr.data-cy]=\"'switch-' + control?.id\"\n *ngIf=\"value?.isBoolean; else fallBack\"\n styleClass=\"mt-2 ml-1 mr-1\"\n [disabled]=\"true\"\n [(ngModel)]=\"value.res\"\n ></p-inputSwitch>\n </ng-container>\n <ng-container *ngSwitchCase=\"ctrlType.DATE\">\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | date }}\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.START_DUE_DATE\">\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n *ngIf=\"value?.startDate; else fallBack\"\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\n class=\"pi pi-arrow-right text-sm\"\n style=\"color: 'var(--surface-600)'\"\n ></i>\n </div>\n <span style=\"padding-top: 3px\">{{ value.endDate | date }}</span>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.CHECKBOX\">\n <p-checkbox\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n styleClass=\"mt-3\"\n [(ngModel)]=\"value\"\n [binary]=\"true\"\n inputId=\"binary\"\n [disabled]=\"true\"\n ></p-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.LINKS_DATA\">\n <div\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n [attr.data-cy]=\"'link-' + control?.id\"\n >\n <ng-container *ngFor=\"let item of value\">\n <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"ctrlType.ASSIGN\">\n <div\n *ngIf=\"value?.name; else fallBack\"\n [attr.data-cy]=\"'number-' + control?.id\"\n >\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\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n >\n {{ value?.name }}\n </p>\n <p\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n >\n {{ value?.function }}\n </p>\n </div>\n </div></p-button\n >\n <p-overlayPanel #op>\n <div>\n <span class=\"block mb-2\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n {{ value.email ?? \" --\" }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i\n >{{ value.phone ?? \" --\" }}\n </p>\n </div></p-overlayPanel\n >\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.CURRENCY\">\n <div\n [attr.data-cy]=\"'currency-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }} €\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.PASSWORD\">\n <div\n [attr.data-cy]=\"'password-' + control?.id\"\n *ngIf=\"value; else fallBack\"\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 </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION_OBJECT_BASED\">\n <div\n [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value.value }}\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.MS_OPTION\">\n <div\n [attr.data-cy]=\"'MS-OPTION-OBJECT-BASED-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2 white-space-nowrap overflow-hidden\"\n >\n {{ value }}\n </div>\n </ng-container>\n\n <!-- Remove this if necessary - spaces-overview GENERAL form contol -->\n <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION\">\n <!-- Flag mode -->\n <ng-container *ngIf=\"control?.configuration?.flagMode; else ssOptionLegacy\">\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2 flex align-items-center gap-2\"\n >\n <img\n *ngIf=\"value?.key\"\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 <span>{{ value.userFriendlyMessage }}</span>\n </div>\n </ng-container>\n\n <!-- Legacy -->\n <ng-template #ssOptionLegacy>\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | translate }}\n </div>\n </ng-template>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.NUMBER\">\n <div\n [attr.data-cy]=\"'number-' + control?.id\"\n *ngIf=\"value != null; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }}\n </div>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | stripHtml }}\n </div>\n </ng-container>\n</ng-container>\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>\n", 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.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: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i3$9.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { 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:
|
|
6881
6934
|
// SerachCardComponent,
|
|
6882
|
-
CheckboxModule }, { kind: "component", type: i5$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i3$
|
|
6935
|
+
CheckboxModule }, { kind: "component", type: i5$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i3$7.Password, selector: "p-password", inputs: ["ariaLabel", "fluid", "ariaLabelledBy", "label", "disabled", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "appendTo", "toggleMask", "size", "inputStyleClass", "styleClass", "style", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "variant", "tabindex"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i4$2.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: StripHtmlPipe, name: "stripHtml" }] });
|
|
6883
6936
|
}
|
|
6884
6937
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ReadOnlyInputComponent, decorators: [{
|
|
6885
6938
|
type: Component,
|
|
@@ -7083,7 +7136,7 @@ class MetaAssignAssetComponent {
|
|
|
7083
7136
|
[text]="true"
|
|
7084
7137
|
></p-button>
|
|
7085
7138
|
</div>
|
|
7086
|
-
`, isInline: true, styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px;& 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-name :first-child{font-size:1rem}}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px;p{margin:0;display:flex;align-items:center}i{color:#e94260;padding-right:5px}.p-editor-container{padding-left:0!important}}\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: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i4$
|
|
7139
|
+
`, isInline: true, styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px;& 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-name :first-child{font-size:1rem}}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px;p{margin:0;display:flex;align-items:center}i{color:#e94260;padding-right:5px}.p-editor-container{padding-left:0!important}}\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: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i4$2.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: PanelModule }] });
|
|
7087
7140
|
}
|
|
7088
7141
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaAssignAssetComponent, decorators: [{
|
|
7089
7142
|
type: Component,
|
|
@@ -7345,7 +7398,7 @@ class MetaUploadComponentDragDrop extends BaseMetaField {
|
|
|
7345
7398
|
[ctrl]="ctrl"
|
|
7346
7399
|
></phoenix-inline-field-error>
|
|
7347
7400
|
</div>
|
|
7348
|
-
`, 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: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i3$
|
|
7401
|
+
`, 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: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i3$b.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: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] });
|
|
7349
7402
|
}
|
|
7350
7403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaUploadComponentDragDrop, decorators: [{
|
|
7351
7404
|
type: Component,
|
|
@@ -7466,7 +7519,7 @@ class MetaFormComponent extends MetaFormAbstract {
|
|
|
7466
7519
|
this.metaService.setFormDirtyStatus(this.metaForm.dirty);
|
|
7467
7520
|
}
|
|
7468
7521
|
}
|
|
7469
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaFormComponent, deps: [{ token: i2$3.FormBuilder }, { token: MetaFormService }, { token: i2$1.TranslateService }, { token: i4$
|
|
7522
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MetaFormComponent, deps: [{ token: i2$3.FormBuilder }, { token: MetaFormService }, { token: i2$1.TranslateService }, { token: i4$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
7470
7523
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: MetaFormComponent, isStandalone: true, selector: "phoenix-meta-form", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n <!-- <small>{{ metaForm.value | json }}</small> -->\n <div class=\"grid\">\n <ng-container *ngFor=\"let control of metaFormControls\">\n <ng-container [ngSwitch]=\"control.configuration.type\">\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-text-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-text-input>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.NUMBER\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'number-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-number-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-number-input>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'timeperiod-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-timeperiod\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-timeperiod>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.CURRENCY\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'currency-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-currency\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-currency>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT_AREA\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-area-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SS_OPTION\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ss-option-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\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 <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.MS_OPTION\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ms-option-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'start-due-date-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-start-due-date\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-start-due-date>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.DATE\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'date-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-calendar\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-calendar>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-editor-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.CHECKBOX\"\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 <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-checkbox\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.CHECKBOX_COLOR\"\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 <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SWITCH\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'switch-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-switch\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-switch>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SELECT_BUTTON\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'select-button-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.ASSIGN\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-assign-responsible\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-assign-responsible>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.ASSIGN_ASSET\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-assign-asset\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-assign-asset>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.LINKS_DATA\"\n [ngClass]=\"control | fieldCol\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'links-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <!-- <phoenix-meta-object-links\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-object-links> -->\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.PASSWORD\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'password-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.COLOR\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'color-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-color-picker\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-color-picker>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.UPLOAD\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-upload\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-upload>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.UPLOAD_DRAG_DROP\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-upload-dragdrop\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-upload-dragdrop>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n <ng-content\n *ngSwitchCase=\"ControlType.SLOT\"\n [select]=\"[control.configuration.key]\"\n ></ng-content>\n </ng-container>\n </ng-container>\n </div>\n <div *ngIf=\"formButtons\" 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 <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</form>\n", styles: [""], 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: "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: InputTextModule }, { kind: "ngmodule", type: CalendarModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: EditorModule }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }, { kind: "component", type:
|
|
7471
7524
|
//metafields -> to one module and than import here
|
|
7472
7525
|
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: "ngmodule", type: PanelModule }, { 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" }], encapsulation: i0.ViewEncapsulation.None });
|
|
@@ -7513,7 +7566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
7513
7566
|
MetaSingleSelectObjectBasedComponent,
|
|
7514
7567
|
MetaCheckboxColorPickerComponent,
|
|
7515
7568
|
], encapsulation: ViewEncapsulation.None, template: "<form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n <!-- <small>{{ metaForm.value | json }}</small> -->\n <div class=\"grid\">\n <ng-container *ngFor=\"let control of metaFormControls\">\n <ng-container [ngSwitch]=\"control.configuration.type\">\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-text-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-text-input>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.NUMBER\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'number-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-number-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-number-input>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'timeperiod-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-timeperiod\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-timeperiod>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.CURRENCY\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'currency-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-currency\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-currency>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT_AREA\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-area-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SS_OPTION\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ss-option-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\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 <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.MS_OPTION\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ms-option-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'start-due-date-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-start-due-date\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-start-due-date>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.DATE\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'date-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-calendar\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-calendar>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-editor-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.CHECKBOX\"\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 <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-checkbox\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.CHECKBOX_COLOR\"\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 <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SWITCH\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'switch-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-switch\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-switch>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SELECT_BUTTON\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'select-button-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.ASSIGN\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-assign-responsible\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-assign-responsible>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.ASSIGN_ASSET\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-assign-asset\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-assign-asset>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.LINKS_DATA\"\n [ngClass]=\"control | fieldCol\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'links-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <!-- <phoenix-meta-object-links\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-object-links> -->\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.PASSWORD\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'password-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.COLOR\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'color-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-color-picker\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-color-picker>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.UPLOAD\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-upload\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-upload>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.UPLOAD_DRAG_DROP\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-upload-dragdrop\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-upload-dragdrop>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n <ng-content\n *ngSwitchCase=\"ControlType.SLOT\"\n [select]=\"[control.configuration.key]\"\n ></ng-content>\n </ng-container>\n </ng-container>\n </div>\n <div *ngIf=\"formButtons\" 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 <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</form>\n" }]
|
|
7516
|
-
}], ctorParameters: () => [{ type: i2$3.FormBuilder }, { type: MetaFormService }, { type: i2$1.TranslateService }, { type: i4$
|
|
7569
|
+
}], ctorParameters: () => [{ type: i2$3.FormBuilder }, { type: MetaFormService }, { type: i2$1.TranslateService }, { type: i4$1.HttpClient }] });
|
|
7517
7570
|
|
|
7518
7571
|
class MetaFormButtonsComponent {
|
|
7519
7572
|
metaFormService;
|
|
@@ -7583,7 +7636,7 @@ class GroupsFormComponent extends MetaFormAbstract {
|
|
|
7583
7636
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GroupsFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
7584
7637
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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 <form *ngIf=\"metaFormControls\" [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 }\n </ng-template>\n {{ group.groupName | translate }}\n </p-accordion-header>\n <p-accordion-content>\n <div [style]=\"formStyle\" class=\"grid align-items-end\">\n <ng-container *ngFor=\"let control of group.ctrl\">\n <ng-container [ngSwitch]=\"control.configuration.type\">\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-text-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-text-input>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.NUMBER\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-number-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-number-input>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-timeperiod\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-timeperiod>\n </ng-template>\n </div>\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.CURRENCY\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-currency\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-currency>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT_AREA\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SS_OPTION\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.MS_OPTION\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-start-due-date\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-start-due-date>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.DATE\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-calendar\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-calendar>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\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 </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.CHECKBOX\"\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 <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SWITCH\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-switch\n [disable]=\"true\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-switch>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.ASSIGN\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-assign-responsible\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-assign-responsible>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.ASSIGN_ASSET\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-assign-asset\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-assign-asset>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.UPLOAD\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-upload\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-upload>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.UPLOAD_DRAG_DROP\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-upload-dragdrop\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-upload-dragdrop>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.LINKS_DATA\"\n [ngClass]=\"control | fieldCol\"\n class=\"flex flex-column\"\n >\n <!-- <phoenix-meta-object-links\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-object-links> -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.PASSWORD\"\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 </ng-container>\n </ng-container>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </div>\n }\n </form>\n</p-accordion>\n", styles: [""], 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: "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: InputTextModule }, { kind: "ngmodule", type:
|
|
7585
7638
|
// InputTextareaModule,
|
|
7586
|
-
CalendarModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: EditorModule }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }, { kind: "component", type: 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: "ngmodule", type: AccordionModule }, { kind: "component", type:
|
|
7639
|
+
CalendarModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: EditorModule }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }, { kind: "component", type: 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: "ngmodule", type: AccordionModule }, { kind: "component", type: i3$2.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i3$2.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i3$2.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i3$2.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type:
|
|
7587
7640
|
// MetaObjectLinksComponent,
|
|
7588
7641
|
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: "ngmodule", type: PanelModule }, { kind: "component", type: ReadOnlyInputComponent, selector: "phoenix-read-only-input", inputs: ["control", "metaform"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: MetaSingleSelectObjectBasedComponent, selector: "phoenix-meta-single-select-object-based" }, { kind: "component", type: MetaUploadComponent, selector: "phoenix-meta-upload" }] });
|
|
7589
7642
|
}
|
|
@@ -7868,7 +7921,7 @@ class QuickPickSidePanelComponent {
|
|
|
7868
7921
|
this.onRowClick.emit(row);
|
|
7869
7922
|
}
|
|
7870
7923
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: QuickPickSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7871
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", 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: i3$
|
|
7924
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", 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: i3$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: "component", type: TableComponent, selector: "phoenix-table", inputs: ["data", "columns", "selectedColumnsInput", "tableConfiguration", "filters"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }] });
|
|
7872
7925
|
}
|
|
7873
7926
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: QuickPickSidePanelComponent, decorators: [{
|
|
7874
7927
|
type: Component,
|