@fuentis/phoenix-ui 0.0.9-alpha.144 → 0.0.9-alpha.147
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.
|
@@ -10,7 +10,7 @@ import * as i3$2 from '@ngx-translate/core';
|
|
|
10
10
|
import { TranslateModule, TranslateService } from '@ngx-translate/core';
|
|
11
11
|
import * as i3$1 from 'primeng/tooltip';
|
|
12
12
|
import { TooltipModule } from 'primeng/tooltip';
|
|
13
|
-
import * as
|
|
13
|
+
import * as i3$3 from 'primeng/drawer';
|
|
14
14
|
import { DrawerModule } from 'primeng/drawer';
|
|
15
15
|
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
16
16
|
import * as i2 from '@angular/forms';
|
|
@@ -21,7 +21,7 @@ import * as i14 from 'primeng/inputicon';
|
|
|
21
21
|
import { InputIcon, InputIconModule } from 'primeng/inputicon';
|
|
22
22
|
import * as i5 from 'primeng/inputtext';
|
|
23
23
|
import { InputTextModule } from 'primeng/inputtext';
|
|
24
|
-
import * as i4$
|
|
24
|
+
import * as i4$3 from 'primeng/overlaypanel';
|
|
25
25
|
import { OverlayPanelModule } from 'primeng/overlaypanel';
|
|
26
26
|
import * as i4 from 'primeng/popover';
|
|
27
27
|
import { PopoverModule, Popover } from 'primeng/popover';
|
|
@@ -29,11 +29,11 @@ import * as i1$2 from 'primeng/tabs';
|
|
|
29
29
|
import { TabsModule } from 'primeng/tabs';
|
|
30
30
|
import * as i6 from 'primeng/avatar';
|
|
31
31
|
import { Avatar, AvatarModule } from 'primeng/avatar';
|
|
32
|
-
import * as
|
|
32
|
+
import * as i4$1 from 'primeng/divider';
|
|
33
33
|
import { DividerModule } from 'primeng/divider';
|
|
34
34
|
import { SplitButtonModule } from 'primeng/splitbutton';
|
|
35
35
|
import { TieredMenuModule } from 'primeng/tieredmenu';
|
|
36
|
-
import * as i2$
|
|
36
|
+
import * as i2$2 from 'primeng/table';
|
|
37
37
|
import { TableModule } from 'primeng/table';
|
|
38
38
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
39
39
|
import * as i3$4 from 'primeng/api';
|
|
@@ -44,7 +44,7 @@ import * as i9 from 'primeng/skeleton';
|
|
|
44
44
|
import { SkeletonModule } from 'primeng/skeleton';
|
|
45
45
|
import * as i7 from 'primeng/tag';
|
|
46
46
|
import { TagModule } from 'primeng/tag';
|
|
47
|
-
import * as i2$
|
|
47
|
+
import * as i2$1 from 'primeng/selectbutton';
|
|
48
48
|
import { SelectButtonModule } from 'primeng/selectbutton';
|
|
49
49
|
import * as i5$1 from 'primeng/badge';
|
|
50
50
|
import { BadgeModule } from 'primeng/badge';
|
|
@@ -58,11 +58,11 @@ import * as i1$4 from 'primeng/calendar';
|
|
|
58
58
|
import { CalendarModule } from 'primeng/calendar';
|
|
59
59
|
import * as i3$9 from 'primeng/dropdown';
|
|
60
60
|
import { DropdownModule } from 'primeng/dropdown';
|
|
61
|
-
import * as i2$
|
|
61
|
+
import * as i2$3 from 'primeng/editor';
|
|
62
62
|
import { EditorModule } from 'primeng/editor';
|
|
63
63
|
import { PanelModule } from 'primeng/panel';
|
|
64
64
|
import { Subject, BehaviorSubject, combineLatestWith, debounceTime, switchMap, of, distinctUntilChanged, combineLatest } from 'rxjs';
|
|
65
|
-
import * as i4$
|
|
65
|
+
import * as i4$2 from '@angular/common/http';
|
|
66
66
|
import * as i1$3 from 'primeng/dynamicdialog';
|
|
67
67
|
import { DialogService } from 'primeng/dynamicdialog';
|
|
68
68
|
import * as i3$5 from 'primeng/colorpicker';
|
|
@@ -82,7 +82,7 @@ import { TextareaModule } from 'primeng/textarea';
|
|
|
82
82
|
import { FileUploadModule } from 'primeng/fileupload';
|
|
83
83
|
import * as i1$5 from '@angular/platform-browser';
|
|
84
84
|
import { MessagesModule } from 'primeng/messages';
|
|
85
|
-
import * as i4$
|
|
85
|
+
import * as i4$4 from 'primeng/accordion';
|
|
86
86
|
import { AccordionModule } from 'primeng/accordion';
|
|
87
87
|
|
|
88
88
|
class SidebarItemComponent {
|
|
@@ -452,7 +452,7 @@ class TopbarComponent {
|
|
|
452
452
|
: `url('assets/default-user.png')`;
|
|
453
453
|
}
|
|
454
454
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
455
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: TopbarComponent, isStandalone: true, selector: "pho-topbar", inputs: { homeUrl: "homeUrl", user: "user", shortModuleName: "shortModuleName", topbarModulesMenu: "topbarModulesMenu", darkModeSelector: "darkModeSelector", footerConfig: "footerConfig" }, outputs: { onDarkModeSelect: "onDarkModeSelect", onUserPopoverAction: "onUserPopoverAction" }, 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 <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n\n <span *ngIf=\"shortModuleName\" class=\"text-3xl text-300\">|</span>\n <span class=\"text-xl text-400 mt-2\">\n {{ shortModuleName }}\n </span>\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></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n (onClick)=\"onDarkModeSelectEmit()\"\n [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n variant=\"outlined\"\n />\n\n <!-- Side Panel (Opens Sidebar) -->\n <p-button\n (onClick)=\"openSidebarPanel()\"\n icon=\"pi pi-th-large\"\n variant=\"outlined\"\n />\n\n <!-- User Icon -->\n <pho-user\n [user]=\"user\"\n (editSettings)=\"onUserPopoverAction.emit('EDIT')\"\n (logout)=\"onUserPopoverAction.emit('LOGOUT')\"\n />\n </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n styleClass=\"w-20rem\"\n position=\"right\"\n [(visible)]=\"isSidebarVisible\"\n [closable]=\"false\"\n>\n <div class=\"flex flex-column h-full\">\n <!-- Loop through module groups (e.g., 'Management Modules', 'Support') -->\n <ng-container\n *ngFor=\"let moduleGroup of topbarModulesMenu; let last = last\"\n >\n <h4 class=\"mt-5 ml-3\">{{ moduleGroup.label }}</h4>\n\n <div class=\"grid\">\n <!-- If layout is 'full', it takes up the entire row -->\n <ng-container *ngIf=\"moduleGroup.layout === 'full'\">\n <div\n *ngFor=\"let module of moduleGroup.items\"\n class=\"col-12 p-3 hover:surface-100 cursor-pointer\"\n >\n <a\n class=\"text-primary flex align-items-center gap-3\"\n [href]=\"module.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n >\n <div\n class=\"w-3rem h-3rem 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 <div>\n <h4 class=\"mb-0 mt-0\">{{ module.label }}</h4>\n <p class=\"w-11rem text-500 text-sm line-height-1 m-0\">\n {{ module.fullName ||
|
|
455
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: TopbarComponent, isStandalone: true, selector: "pho-topbar", inputs: { homeUrl: "homeUrl", user: "user", shortModuleName: "shortModuleName", topbarModulesMenu: "topbarModulesMenu", darkModeSelector: "darkModeSelector", footerConfig: "footerConfig" }, outputs: { onDarkModeSelect: "onDarkModeSelect", onUserPopoverAction: "onUserPopoverAction" }, 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 <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n\n <span *ngIf=\"shortModuleName\" class=\"text-3xl text-300\">|</span>\n <span class=\"text-xl text-400 mt-2\">\n {{ shortModuleName }}\n </span>\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></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n (onClick)=\"onDarkModeSelectEmit()\"\n [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n variant=\"outlined\"\n />\n\n <!-- Side Panel (Opens Sidebar) -->\n <p-button\n (onClick)=\"openSidebarPanel()\"\n icon=\"pi pi-th-large\"\n variant=\"outlined\"\n />\n\n <!-- User Icon -->\n <pho-user\n [user]=\"user\"\n (editSettings)=\"onUserPopoverAction.emit('EDIT')\"\n (logout)=\"onUserPopoverAction.emit('LOGOUT')\"\n />\n </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n styleClass=\"w-20rem\"\n position=\"right\"\n [(visible)]=\"isSidebarVisible\"\n [closable]=\"false\"\n>\n <div class=\"flex flex-column h-full\">\n <!-- Loop through module groups (e.g., 'Management Modules', 'Support') -->\n <ng-container\n *ngFor=\"let moduleGroup of topbarModulesMenu; let last = last\"\n >\n <h4 class=\"mt-5 ml-3\">{{ moduleGroup.label | translate }}</h4>\n\n <div class=\"grid\">\n <!-- If layout is 'full', it takes up the entire row -->\n <ng-container *ngIf=\"moduleGroup.layout === 'full'\">\n <div\n *ngFor=\"let module of moduleGroup.items\"\n class=\"col-12 p-3 hover:surface-100 cursor-pointer\"\n >\n <a\n class=\"text-primary flex align-items-center gap-3\"\n [href]=\"module.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n >\n <div\n class=\"w-3rem h-3rem 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 <div>\n <h4 class=\"mb-0 mt-0\">{{ module.label | translate }}</h4>\n <p class=\"w-11rem text-500 text-sm line-height-1 m-0\">\n {{ (module.fullName || '') | translate }}\n </p>\n </div>\n </a>\n </div>\n </ng-container>\n\n <!-- If layout is 'grid', modules are arranged in a 3-column 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\"\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 >\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\">{{ module.label | translate }}</span>\n </a>\n </div>\n </ng-container>\n </div>\n\n <!-- Divider between module groups (except after the last one) -->\n <p-divider *ngIf=\"!last\" class=\"mt-3 mb-3\"></p-divider>\n </ng-container>\n\n <!-- Footer links -->\n <div class=\"mt-auto p-2\">\n <p-divider class=\"mt-2 mb-2\"></p-divider>\n <div class=\"flex justify-content-between pb-3\">\n <a\n class=\"text-primary no-underline text-sm\"\n [href]=\"footerConfig.guideUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle p-2\"></i>\n {{ footerConfig.guideLabel | translate }}\n </span>\n </a>\n <a\n class=\"text-primary no-underline text-sm\"\n [href]=\"footerConfig.companyUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"flex align-items-center\">\n <i class=\"pi pi-globe p-2\"></i> {{ footerConfig.companyName | translate }}\n </span>\n </a>\n </div>\n\n <div class=\"text-500 text-sm pl-2\">\n {{ footerConfig.copyrightText | translate }}\n </div>\n </div>\n </div>\n</p-drawer>\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: "component", type: SearchBarComponent, selector: "pho-search-bar", inputs: ["expandable", "placeholder", "message"], outputs: ["searchQueryChange"] }, { kind: "component", type: UserComponent, selector: "pho-user", inputs: ["user"], outputs: ["logout", "editSettings"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.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: "component", type: i4$1.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
456
456
|
}
|
|
457
457
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TopbarComponent, decorators: [{
|
|
458
458
|
type: Component,
|
|
@@ -465,7 +465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
465
465
|
DrawerModule,
|
|
466
466
|
DividerModule,
|
|
467
467
|
ButtonModule,
|
|
468
|
-
], encapsulation: ViewEncapsulation.None, 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 <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n\n <span *ngIf=\"shortModuleName\" class=\"text-3xl text-300\">|</span>\n <span class=\"text-xl text-400 mt-2\">\n {{ shortModuleName }}\n </span>\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></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n (onClick)=\"onDarkModeSelectEmit()\"\n [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n variant=\"outlined\"\n />\n\n <!-- Side Panel (Opens Sidebar) -->\n <p-button\n (onClick)=\"openSidebarPanel()\"\n icon=\"pi pi-th-large\"\n variant=\"outlined\"\n />\n\n <!-- User Icon -->\n <pho-user\n [user]=\"user\"\n (editSettings)=\"onUserPopoverAction.emit('EDIT')\"\n (logout)=\"onUserPopoverAction.emit('LOGOUT')\"\n />\n </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n styleClass=\"w-20rem\"\n position=\"right\"\n [(visible)]=\"isSidebarVisible\"\n [closable]=\"false\"\n>\n <div class=\"flex flex-column h-full\">\n <!-- Loop through module groups (e.g., 'Management Modules', 'Support') -->\n <ng-container\n *ngFor=\"let moduleGroup of topbarModulesMenu; let last = last\"\n >\n <h4 class=\"mt-5 ml-3\">{{ moduleGroup.label }}</h4>\n\n <div class=\"grid\">\n <!-- If layout is 'full', it takes up the entire row -->\n <ng-container *ngIf=\"moduleGroup.layout === 'full'\">\n <div\n *ngFor=\"let module of moduleGroup.items\"\n class=\"col-12 p-3 hover:surface-100 cursor-pointer\"\n >\n <a\n class=\"text-primary flex align-items-center gap-3\"\n [href]=\"module.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n >\n <div\n class=\"w-3rem h-3rem 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 <div>\n <h4 class=\"mb-0 mt-0\">{{ module.label }}</h4>\n <p class=\"w-11rem text-500 text-sm line-height-1 m-0\">\n {{ module.fullName ||
|
|
468
|
+
], encapsulation: ViewEncapsulation.None, 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 <img class=\"h-2rem\" src=\"assets/logo_rose.png\" alt=\"fuentis_logo_white\" />\n\n <span *ngIf=\"shortModuleName\" class=\"text-3xl text-300\">|</span>\n <span class=\"text-xl text-400 mt-2\">\n {{ shortModuleName }}\n </span>\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></pho-search-bar>\n\n <!-- ToggleDarkmode -->\n <p-button\n (onClick)=\"onDarkModeSelectEmit()\"\n [icon]=\"darkModeSelector.mode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'\"\n variant=\"outlined\"\n />\n\n <!-- Side Panel (Opens Sidebar) -->\n <p-button\n (onClick)=\"openSidebarPanel()\"\n icon=\"pi pi-th-large\"\n variant=\"outlined\"\n />\n\n <!-- User Icon -->\n <pho-user\n [user]=\"user\"\n (editSettings)=\"onUserPopoverAction.emit('EDIT')\"\n (logout)=\"onUserPopoverAction.emit('LOGOUT')\"\n />\n </div>\n</div>\n\n<!-- Sidebar Menu -->\n<p-drawer\n styleClass=\"w-20rem\"\n position=\"right\"\n [(visible)]=\"isSidebarVisible\"\n [closable]=\"false\"\n>\n <div class=\"flex flex-column h-full\">\n <!-- Loop through module groups (e.g., 'Management Modules', 'Support') -->\n <ng-container\n *ngFor=\"let moduleGroup of topbarModulesMenu; let last = last\"\n >\n <h4 class=\"mt-5 ml-3\">{{ moduleGroup.label | translate }}</h4>\n\n <div class=\"grid\">\n <!-- If layout is 'full', it takes up the entire row -->\n <ng-container *ngIf=\"moduleGroup.layout === 'full'\">\n <div\n *ngFor=\"let module of moduleGroup.items\"\n class=\"col-12 p-3 hover:surface-100 cursor-pointer\"\n >\n <a\n class=\"text-primary flex align-items-center gap-3\"\n [href]=\"module.url || '#'\"\n style=\"text-decoration: none; cursor: pointer\"\n >\n <div\n class=\"w-3rem h-3rem 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 <div>\n <h4 class=\"mb-0 mt-0\">{{ module.label | translate }}</h4>\n <p class=\"w-11rem text-500 text-sm line-height-1 m-0\">\n {{ (module.fullName || '') | translate }}\n </p>\n </div>\n </a>\n </div>\n </ng-container>\n\n <!-- If layout is 'grid', modules are arranged in a 3-column 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\"\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 >\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\">{{ module.label | translate }}</span>\n </a>\n </div>\n </ng-container>\n </div>\n\n <!-- Divider between module groups (except after the last one) -->\n <p-divider *ngIf=\"!last\" class=\"mt-3 mb-3\"></p-divider>\n </ng-container>\n\n <!-- Footer links -->\n <div class=\"mt-auto p-2\">\n <p-divider class=\"mt-2 mb-2\"></p-divider>\n <div class=\"flex justify-content-between pb-3\">\n <a\n class=\"text-primary no-underline text-sm\"\n [href]=\"footerConfig.guideUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle p-2\"></i>\n {{ footerConfig.guideLabel | translate }}\n </span>\n </a>\n <a\n class=\"text-primary no-underline text-sm\"\n [href]=\"footerConfig.companyUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <span class=\"flex align-items-center\">\n <i class=\"pi pi-globe p-2\"></i> {{ footerConfig.companyName | translate }}\n </span>\n </a>\n </div>\n\n <div class=\"text-500 text-sm pl-2\">\n {{ footerConfig.copyrightText | translate }}\n </div>\n </div>\n </div>\n</p-drawer>\n" }]
|
|
469
469
|
}], propDecorators: { homeUrl: [{
|
|
470
470
|
type: Input
|
|
471
471
|
}], user: [{
|
|
@@ -532,7 +532,7 @@ class StatusHeaderComponent {
|
|
|
532
532
|
this.onCloseEvent.emit();
|
|
533
533
|
}
|
|
534
534
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: StatusHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
535
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: StatusHeaderComponent, isStandalone: true, selector: "phoenix-status-header", inputs: { name: "name", title: "title", enableQuickPick: "enableQuickPick", actions: "actions", panelState: "panelState", customClose: "customClose" }, outputs: { onQuickPickClickEmiter: "onQuickPickClickEmiter", onToggleClickEmmiter: "onToggleClickEmmiter", onCloseEvent: "onCloseEvent" }, ngImport: i0, template: "<div>\n <div\n class=\"flex justify-between items-center w-full flex-wrap gap-2 surface-ground pl-3 pt-3\"\n >\n <div class=\"flex align-items-center gap-2\">\n @if (enableQuickPick) {\n <phoenix-quick-pick\n (onBack)=\"onToggleClick('back')\"\n (onQuickPick)=\"toggleSidePanel()\"\n (onForward)=\"onToggleClick('forward')\"\n ></phoenix-quick-pick>\n }\n\n <span class=\"text-xl font-semibold\">{{ name }}</span>\n <span class=\"text-base text-gray-500\">{{ title }}</span>\n </div>\n </div>\n
|
|
535
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: StatusHeaderComponent, isStandalone: true, selector: "phoenix-status-header", inputs: { name: "name", title: "title", enableQuickPick: "enableQuickPick", actions: "actions", panelState: "panelState", customClose: "customClose" }, outputs: { onQuickPickClickEmiter: "onQuickPickClickEmiter", onToggleClickEmmiter: "onToggleClickEmmiter", onCloseEvent: "onCloseEvent" }, ngImport: i0, template: "<div>\n <div\n class=\"flex justify-between items-center w-full flex-wrap gap-2 surface-ground pl-3 pt-3\"\n >\n <div class=\"flex align-items-center gap-2\">\n @if (enableQuickPick) {\n <phoenix-quick-pick\n (onBack)=\"onToggleClick('back')\"\n (onQuickPick)=\"toggleSidePanel()\"\n (onForward)=\"onToggleClick('forward')\"\n ></phoenix-quick-pick>\n }\n\n <span class=\"text-xl font-semibold\">{{ name }}</span>\n <span class=\"text-base text-gray-500\">{{ title }}</span>\n </div>\n </div>\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SplitButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: TieredMenuModule }, { kind: "component", type: QuickPickComponent, selector: "phoenix-quick-pick", outputs: ["onBack", "onQuickPick", "onForward"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
536
536
|
}
|
|
537
537
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: StatusHeaderComponent, decorators: [{
|
|
538
538
|
type: Component,
|
|
@@ -544,7 +544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
544
544
|
TooltipModule,
|
|
545
545
|
TieredMenuModule,
|
|
546
546
|
QuickPickComponent,
|
|
547
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n <div\n class=\"flex justify-between items-center w-full flex-wrap gap-2 surface-ground pl-3 pt-3\"\n >\n <div class=\"flex align-items-center gap-2\">\n @if (enableQuickPick) {\n <phoenix-quick-pick\n (onBack)=\"onToggleClick('back')\"\n (onQuickPick)=\"toggleSidePanel()\"\n (onForward)=\"onToggleClick('forward')\"\n ></phoenix-quick-pick>\n }\n\n <span class=\"text-xl font-semibold\">{{ name }}</span>\n <span class=\"text-base text-gray-500\">{{ title }}</span>\n </div>\n </div>\n
|
|
547
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n <div\n class=\"flex justify-between items-center w-full flex-wrap gap-2 surface-ground pl-3 pt-3\"\n >\n <div class=\"flex align-items-center gap-2\">\n @if (enableQuickPick) {\n <phoenix-quick-pick\n (onBack)=\"onToggleClick('back')\"\n (onQuickPick)=\"toggleSidePanel()\"\n (onForward)=\"onToggleClick('forward')\"\n ></phoenix-quick-pick>\n }\n\n <span class=\"text-xl font-semibold\">{{ name }}</span>\n <span class=\"text-base text-gray-500\">{{ title }}</span>\n </div>\n </div>\n</div>\n", styles: [":host ::ng-deep .p-panel{box-shadow:none}:host ::ng-deep .p-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel .p-panel-header{padding:.3rem 1rem;min-height:45px}:host ::ng-deep .p-panel-header{display:flex;justify-content:space-between}:host ::ng-deep .custom-split button{padding-right:0;background-color:transparent!important;color:var(--primary-color)}:host ::ng-deep .custom-split button:enabled:hover{background:#3f51b50a;color:var(--primary-color)}:host .link{cursor:pointer;color:var(--blue-500)}:host .link:hover{color:#e94260}\n"] }]
|
|
548
548
|
}], propDecorators: { onQuickPickClickEmiter: [{
|
|
549
549
|
type: Output
|
|
550
550
|
}], onToggleClickEmmiter: [{
|
|
@@ -865,7 +865,7 @@ class PhoenixDataTableTabsComponent {
|
|
|
865
865
|
this.actionClick.emit({ action: opt });
|
|
866
866
|
}
|
|
867
867
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: PhoenixDataTableTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
868
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: PhoenixDataTableTabsComponent, isStandalone: true, selector: "phoenix-data-table-tabs", inputs: { actions: "actions" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<p-selectButton\n [options]=\"actions\"\n optionValue=\"key\"\n [(ngModel)]=\"value\"\n optionLabel=\"icon\"\n [unselectable]=\"true\"\n (onChange)=\"onActionClick($event)\"\n>\n <ng-template #item let-item>\n <span>\n {{ item.label | translate }}\n </span>\n <span>\n <p-badge\n *ngIf=\"item.badgeCount\"\n [value]=\"item.badgeCount\"\n severity=\"danger\"\n badgeSize=\"small\"\n />\n </span>\n </ng-template>\n</p-selectButton>\n", styles: [":host ::ng-deep .p-selectbutton .p-button{margin-right:5px!important}:host ::ng-deep .p-selectbutton .p-button.p-highlight{background-color:#3f51b51f!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$
|
|
868
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: PhoenixDataTableTabsComponent, isStandalone: true, selector: "phoenix-data-table-tabs", inputs: { actions: "actions" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<p-selectButton\n [options]=\"actions\"\n optionValue=\"key\"\n [(ngModel)]=\"value\"\n optionLabel=\"icon\"\n [unselectable]=\"true\"\n (onChange)=\"onActionClick($event)\"\n>\n <ng-template #item let-item>\n <span>\n {{ item.label | translate }}\n </span>\n <span>\n <p-badge\n *ngIf=\"item.badgeCount\"\n [value]=\"item.badgeCount\"\n severity=\"danger\"\n badgeSize=\"small\"\n />\n </span>\n </ng-template>\n</p-selectButton>\n", styles: [":host ::ng-deep .p-selectbutton .p-button{margin-right:5px!important}:host ::ng-deep .p-selectbutton .p-button.p-highlight{background-color:#3f51b51f!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i5$1.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }] });
|
|
869
869
|
}
|
|
870
870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: PhoenixDataTableTabsComponent, decorators: [{
|
|
871
871
|
type: Component,
|
|
@@ -1305,7 +1305,7 @@ class PhoenixDataTableComponent {
|
|
|
1305
1305
|
this._selectedColumns = this.columns.filter((col) => val.some((v) => v.field === col.field));
|
|
1306
1306
|
}
|
|
1307
1307
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: PhoenixDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1308
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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 }, 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-phoenix-data-table-action\n #btn\n [actionConfig]=\"action\"\n (actionClick)=\"actionClick($event)\"\n ></phoenix-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 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 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 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-phoenix-data-table-action\n [actionConfig]=\"action\"\n [selectedData]=\"selectedData\"\n (actionClick)=\"actionClick(action, selectedData)\"\n ></phoenix-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-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-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 {{ val.rowData[val.col.field] | date : dateFormat }}\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 {{ val.rowData[val.col.field] | date : dateFormat + \" | HH:mm\" }}\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 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 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\">\n @for(control of tableConfiguration.filterConfiguration; track\n control.key ){ @switch(control.type) { @case ('checkbox') {\n <div class=\"mb-4\">\n <p-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 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 ></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 ></p-button>\n </div>\n</p-popover>\n", styles: [".custom-th{background-color:var(--surface-100)!important}.dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}:is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.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$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$3.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i2$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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: i3$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i11.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: i13.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i14.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type:
|
|
1308
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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 }, 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-phoenix-data-table-action\n #btn\n [actionConfig]=\"action\"\n (actionClick)=\"actionClick($event)\"\n ></phoenix-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 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 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 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-phoenix-data-table-action\n [actionConfig]=\"action\"\n [selectedData]=\"selectedData\"\n (actionClick)=\"actionClick(action, selectedData)\"\n ></phoenix-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-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-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 {{ val.rowData[val.col.field] | date : dateFormat }}\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 {{ val.rowData[val.col.field] | date : dateFormat + \" | HH:mm\" }}\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 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 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\">\n @for(control of tableConfiguration.filterConfiguration; track\n control.key ){ @switch(control.type) { @case ('checkbox') {\n <div class=\"mb-4\">\n <p-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 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 ></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 ></p-button>\n </div>\n</p-popover>\n", styles: [".custom-th{background-color:var(--surface-100)!important}.dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}:is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$2.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i2$2.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$2.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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: i3$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i11.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: i13.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i14.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type:
|
|
1309
1309
|
///Custom components
|
|
1310
1310
|
PhoenixDataTableActionComponent, selector: "phoenix-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:
|
|
1311
1311
|
// Pipes
|
|
@@ -1661,7 +1661,7 @@ class TableComponent {
|
|
|
1661
1661
|
this.bulkMode = false;
|
|
1662
1662
|
}
|
|
1663
1663
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1664
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, 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 [selectedColumnsInput]=\"selectedColumns\"\n [tableConfiguration]=\"tableConfiguration\"\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>{{ selectedItems().length }} items selected</span>}\n </div>\n\n <div>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems()\n });\n clearSelection()\n \"\n ></phoenix-phoenix-data-table-action>\n </ng-container>\n\n <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 [columns]=\"selectedColumns\"\n [value]=\"tableData\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"50\"\n [rows]=\"100\"\n [lazy]=\"true\"\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 [field]=\"col.field\"></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 [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 [value]=\"rowData\"></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 emptyCell\">\n <p-tag\n styleClass=\"custom-tag\"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc'\n }\"\n [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n ></p-tag>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-tag\n styleClass=\"custom-tag\"\n [style]=\"{\n 'background-color': rowData[col.field].color || '#ccc'\n }\"\n [value]=\"rowData[col.field]?.value\"\n ></p-tag>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-avatar\n [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n {{ (rowData[col.field] | cell : col)?.name }}\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <ul\n class=\"list-none m-0 p-0\"\n *ngFor=\"let item of rowData[col.field]\"\n >\n <li>{{ item.name }}</li>\n </ul>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <i\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n \"\n class=\"pi\"\n [ngClass]=\"{\n 'text-green-500 pi-check-circle': rowData[col.field],\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 emptyCell\">\n <div\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 *ngSwitchDefault>\n <div\n [pTooltip]=\"rowData[col.field]\"\n style=\"max-width: 200px\"\n [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n ></div>\n </ng-container>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"\n ></phoenix-phoenix-data-table-action>\n </ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell> -- </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 Total records: {{ totalRecords }}\n </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}::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.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$3.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$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "selectedColumnsInput"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
|
|
1664
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, 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 [selectedColumnsInput]=\"selectedColumns\"\n [tableConfiguration]=\"tableConfiguration\"\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>{{ selectedItems().length }} items selected</span>}\n </div>\n\n <div>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems()\n });\n clearSelection()\n \"\n ></phoenix-phoenix-data-table-action>\n </ng-container>\n\n <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 [columns]=\"selectedColumns\"\n [value]=\"tableData\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"50\"\n [rows]=\"100\"\n [lazy]=\"true\"\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 [field]=\"col.field\"></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 [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 [value]=\"rowData\"></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 emptyCell\">\n <p-tag\n styleClass=\"custom-tag\"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc'\n }\"\n [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n ></p-tag>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-tag\n styleClass=\"custom-tag\"\n [style]=\"{\n 'background-color': rowData[col.field].color || '#ccc'\n }\"\n [value]=\"rowData[col.field]?.value\"\n ></p-tag>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-avatar\n [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n {{ (rowData[col.field] | cell : col)?.name }}\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <ul\n class=\"list-none m-0 p-0\"\n *ngFor=\"let item of rowData[col.field]\"\n >\n <li>{{ item.name }}</li>\n </ul>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <i\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n \"\n class=\"pi\"\n [ngClass]=\"{\n 'text-green-500 pi-check-circle': rowData[col.field],\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 emptyCell\">\n <div\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 *ngSwitchDefault>\n <div\n [pTooltip]=\"rowData[col.field]\"\n style=\"max-width: 200px\"\n [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n ></div>\n </ng-container>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"\n ></phoenix-phoenix-data-table-action>\n </ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell> -- </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 Total records: {{ totalRecords }}\n </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}::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.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$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$2.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$2.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "selectedColumnsInput"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
|
|
1665
1665
|
}
|
|
1666
1666
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TableComponent, decorators: [{
|
|
1667
1667
|
type: Component,
|
|
@@ -1984,12 +1984,12 @@ class MetaFormAbstract {
|
|
|
1984
1984
|
if (this.formSub$)
|
|
1985
1985
|
this.formSub$.unsubscribe();
|
|
1986
1986
|
}
|
|
1987
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaFormAbstract, deps: [{ token: i2.FormBuilder }, { token: MetaFormService }, { token: i3$2.TranslateService }, { token: i4$
|
|
1987
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaFormAbstract, deps: [{ token: i2.FormBuilder }, { token: MetaFormService }, { token: i3$2.TranslateService }, { token: i4$2.HttpClient }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1988
1988
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: MetaFormAbstract, isStandalone: true, inputs: { metaForm: "metaForm", metaFormValues: "metaFormValues", metaFormControls: "metaFormControls", disableForm: "disableForm", formButtons: "formButtons", groupForm: "groupForm" }, outputs: { onFormSubmit: "onFormSubmit", onFormCancel: "onFormCancel" }, ngImport: i0 });
|
|
1989
1989
|
}
|
|
1990
1990
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaFormAbstract, decorators: [{
|
|
1991
1991
|
type: Directive
|
|
1992
|
-
}], ctorParameters: () => [{ type: i2.FormBuilder }, { type: MetaFormService }, { type: i3$2.TranslateService }, { type: i4$
|
|
1992
|
+
}], ctorParameters: () => [{ type: i2.FormBuilder }, { type: MetaFormService }, { type: i3$2.TranslateService }, { type: i4$2.HttpClient }], propDecorators: { metaForm: [{
|
|
1993
1993
|
type: Input
|
|
1994
1994
|
}], metaFormValues: [{
|
|
1995
1995
|
type: Input
|
|
@@ -2338,7 +2338,7 @@ class MetaAssignResponsibleComponent {
|
|
|
2338
2338
|
[text]="true"
|
|
2339
2339
|
></p-button>
|
|
2340
2340
|
</div>
|
|
2341
|
-
`, isInline: true, styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#e94260;padding-right:5px}.person-details .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: i3.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: i3$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i4$
|
|
2341
|
+
`, isInline: true, styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#e94260;padding-right:5px}.person-details .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: i3.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: i3$2.TranslatePipe, name: "translate" }, { 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: PanelModule }] });
|
|
2342
2342
|
}
|
|
2343
2343
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaAssignResponsibleComponent, decorators: [{
|
|
2344
2344
|
type: Component,
|
|
@@ -2815,7 +2815,7 @@ class MetaCheckboxColorPickerComponent extends BaseMetaField {
|
|
|
2815
2815
|
[attr.data-cy]="'checkbox-' + control?.id"
|
|
2816
2816
|
(click)="op.toggle($event)"
|
|
2817
2817
|
></div>
|
|
2818
|
-
`, 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$
|
|
2818
|
+
`, 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$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: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }] });
|
|
2819
2819
|
}
|
|
2820
2820
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaCheckboxColorPickerComponent, decorators: [{
|
|
2821
2821
|
type: Component,
|
|
@@ -3317,7 +3317,7 @@ class MetaSelectButtonComponent extends BaseMetaField {
|
|
|
3317
3317
|
[ctrl]="ctrl"
|
|
3318
3318
|
></phoenix-inline-field-error>
|
|
3319
3319
|
</div>
|
|
3320
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$
|
|
3320
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }] });
|
|
3321
3321
|
}
|
|
3322
3322
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaSelectButtonComponent, decorators: [{
|
|
3323
3323
|
type: Component,
|
|
@@ -4114,7 +4114,7 @@ class MetaTextEditorComponent extends BaseMetaField {
|
|
|
4114
4114
|
[ctrl]="ctrl"
|
|
4115
4115
|
></phoenix-inline-field-error>
|
|
4116
4116
|
</div>
|
|
4117
|
-
`, isInline: true, styles: [":is() .p-editor-container .p-editor-content .ql-editor{min-height:120px}:is() .ql-image{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$
|
|
4117
|
+
`, isInline: true, styles: [":is() .p-editor-container .p-editor-content .ql-editor{min-height:120px}:is() .ql-image{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$3.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: TextareaModule }] });
|
|
4118
4118
|
}
|
|
4119
4119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaTextEditorComponent, decorators: [{
|
|
4120
4120
|
type: Component,
|
|
@@ -4654,7 +4654,7 @@ class ReadOnlyInputComponent {
|
|
|
4654
4654
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ReadOnlyInputComponent, deps: [{ token: i1$5.DomSanitizer }, { token: i3$2.TranslateService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4655
4655
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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 <p-editor\n [attr.data-cy]=\"'editor-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n [readonly]=\"true\"\n [(ngModel)]=\"value\"\n ></p-editor>\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.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 *ngFor=\"let link of item?.objects\">\n <phoenix-serach-card\n [readOnly]=\"true\"\n [data]=\"link\"\n [deleteButton]=\"false\"\n (selectEvent)=\"selectEvent($event)\"\n />\n </ng-container> -->\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\n <!-- <div class=\"person-wrap\">\n <div class=\"person-avatar\">\n {{ value?.name?.toUpperCase().charAt(0) }}\n </div>\n <div class=\"font-semibold text-500\">\n <p>\n {{ value?.name }}\n </p>\n <p>\n {{ value?.function }}\n </p>\n </div>\n </div> -->\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 <!-- Remove this if necessary - spaces-overview GENERAL form contol -->\n <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION\">\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-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 }}\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\n<!-- <ng-container *ngFor=\"let link of item?.objects\">\n <phoenix-serach-card\n [data]=\"link\"\n (removeButtonEvent)=\"\n onLinkRemove(link.name, item.relationLabelKey)\n \"\n [deleteButton]=\"true\"\n />\n </ng-container> -->\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 .p-editor-toolbar{display:none!important}:host ::ng-deep .p-editor-container{background:transparent!important;border:0px!important}:host ::ng-deep .p-editor-content.ql-snow{border:0px!important}:host ::ng-deep .p-editor-container .p-editor-content .ql-editor{background:transparent!important}:host ::ng-deep .ql-editor{padding:0;height:100%}\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$a.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type:
|
|
4656
4656
|
// SerachCardComponent,
|
|
4657
|
-
CheckboxModule }, { kind: "component", type: i11.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$8.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: i3$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$
|
|
4657
|
+
CheckboxModule }, { kind: "component", type: i11.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$8.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: i3$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$3.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { 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: PanelModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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"] }] });
|
|
4658
4658
|
}
|
|
4659
4659
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ReadOnlyInputComponent, decorators: [{
|
|
4660
4660
|
type: Component,
|
|
@@ -4859,7 +4859,7 @@ class MetaAssignAssetComponent {
|
|
|
4859
4859
|
[text]="true"
|
|
4860
4860
|
></p-button>
|
|
4861
4861
|
</div>
|
|
4862
|
-
`, isInline: true, styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#e94260;padding-right:5px}.person-details .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: i3.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: i3$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i4$
|
|
4862
|
+
`, isInline: true, styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#e94260;padding-right:5px}.person-details .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: i3.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: i3$2.TranslatePipe, name: "translate" }, { 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: PanelModule }] });
|
|
4863
4863
|
}
|
|
4864
4864
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaAssignAssetComponent, decorators: [{
|
|
4865
4865
|
type: Component,
|
|
@@ -5009,7 +5009,7 @@ class MetaFormComponent extends MetaFormAbstract {
|
|
|
5009
5009
|
this.metaService.setFormDirtyStatus(this.metaForm.dirty);
|
|
5010
5010
|
}
|
|
5011
5011
|
}
|
|
5012
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaFormComponent, deps: [{ token: i2.FormBuilder }, { token: MetaFormService }, { token: i3$2.TranslateService }, { token: i4$
|
|
5012
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MetaFormComponent, deps: [{ token: i2.FormBuilder }, { token: MetaFormService }, { token: i3$2.TranslateService }, { token: i4$2.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
5013
5013
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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 <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 ></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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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: i3.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: i3$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: EditorModule }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }, { kind: "component", type:
|
|
5014
5014
|
//metafields -> to one module and than import here
|
|
5015
5015
|
MetaTextEditorComponent, selector: "phoenix-meta-text-editor" }, { 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: 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 });
|
|
@@ -5055,7 +5055,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
5055
5055
|
MetaSingleSelectObjectBasedComponent,
|
|
5056
5056
|
MetaCheckboxColorPickerComponent,
|
|
5057
5057
|
], 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 <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 ></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" }]
|
|
5058
|
-
}], ctorParameters: () => [{ type: i2.FormBuilder }, { type: MetaFormService }, { type: i3$2.TranslateService }, { type: i4$
|
|
5058
|
+
}], ctorParameters: () => [{ type: i2.FormBuilder }, { type: MetaFormService }, { type: i3$2.TranslateService }, { type: i4$2.HttpClient }] });
|
|
5059
5059
|
|
|
5060
5060
|
class MetaFormButtonsComponent {
|
|
5061
5061
|
metaFormService;
|
|
@@ -5125,7 +5125,7 @@ class GroupsFormComponent extends MetaFormAbstract {
|
|
|
5125
5125
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: GroupsFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5126
5126
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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 [value]=\"idx\">\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 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 <phoenix-meta-multiple-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-multiple-select>\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.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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type:
|
|
5127
5127
|
// InputTextareaModule,
|
|
5128
|
-
CalendarModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.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" }, { 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: "ngmodule", type: AccordionModule }, { kind: "component", type: i4$
|
|
5128
|
+
CalendarModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.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" }, { 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: "ngmodule", type: AccordionModule }, { kind: "component", type: i4$4.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i4$4.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i4$4.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i4$4.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type:
|
|
5129
5129
|
// MetaObjectLinksComponent,
|
|
5130
5130
|
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" }] });
|
|
5131
5131
|
}
|
|
@@ -5332,40 +5332,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
5332
5332
|
}] } });
|
|
5333
5333
|
|
|
5334
5334
|
class QuickPickSidePanelComponent {
|
|
5335
|
-
|
|
5336
|
-
|
|
5337
|
-
|
|
5338
|
-
|
|
5339
|
-
tableConfiguration = {};
|
|
5340
|
-
panelState = false;
|
|
5341
|
-
modal = false;
|
|
5342
|
-
widthClass = 'w-7';
|
|
5343
|
-
isFullScreen = false;
|
|
5344
|
-
onRowClick = new EventEmitter();
|
|
5345
|
-
lazyLoadData = new EventEmitter();
|
|
5346
|
-
onClose = new EventEmitter();
|
|
5347
|
-
handlePanelFullScreen = new EventEmitter();
|
|
5348
|
-
onCloseEvent = new EventEmitter();
|
|
5335
|
+
drawer;
|
|
5336
|
+
title = 'Default Title';
|
|
5337
|
+
data = [];
|
|
5338
|
+
columns = [];
|
|
5339
|
+
tableConfiguration = {};
|
|
5340
|
+
panelState = false;
|
|
5341
|
+
modal = false;
|
|
5342
|
+
widthClass = 'w-7';
|
|
5343
|
+
isFullScreen = false;
|
|
5344
|
+
onRowClick = new EventEmitter();
|
|
5345
|
+
lazyLoadData = new EventEmitter();
|
|
5346
|
+
onClose = new EventEmitter();
|
|
5347
|
+
handlePanelFullScreen = new EventEmitter();
|
|
5348
|
+
onCloseEvent = new EventEmitter();
|
|
5349
|
+
onDrawerShow() {
|
|
5350
|
+
this.lazyLoadData.emit();
|
|
5351
|
+
}
|
|
5352
|
+
onTableRowClick(row) {
|
|
5353
|
+
this.onRowClick.emit(row);
|
|
5354
|
+
}
|
|
5349
5355
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: QuickPickSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5350
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: QuickPickSidePanelComponent, isStandalone: true, selector: "phoenix-quick-pick-sidepanel", inputs: { title: "title", data: "data", columns: "columns",
|
|
5356
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: QuickPickSidePanelComponent, isStandalone: true, selector: "phoenix-quick-pick-sidepanel", inputs: { title: "title", data: "data", columns: "columns", tableConfiguration: "tableConfiguration", panelState: "panelState", modal: "modal", widthClass: "widthClass", isFullScreen: "isFullScreen" }, outputs: { onRowClick: "onRowClick", lazyLoadData: "lazyLoadData", onClose: "onClose", handlePanelFullScreen: "handlePanelFullScreen", onCloseEvent: "onCloseEvent" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<p-drawer\n #drawer\n [styleClass]=\"widthClass\"\n [modal]=\"modal\"\n [(visible)]=\"panelState\"\n position=\"right\"\n [closable]=\"false\"\n (onShow)=\"onDrawerShow()\"\n (onHide)=\"onClose.emit()\"\n>\n <!-- Header -->\n <ng-template pTemplate=\"header\">\n <div class=\"flex align-items-center justify-content-between w-full\">\n <p-button\n type=\"button\"\n (click)=\"handlePanelFullScreen.emit()\"\n [icon]=\"isFullScreen ? 'pi pi-arrow-down-right' : 'pi pi-arrow-up-left'\"\n rounded=\"true\"\n outlined=\"true\"\n styleClass=\"h-8 w-8\"\n ></p-button>\n\n <span class=\"font-bold text-xl flex-grow-1 text-center\">\n {{ title }}\n </span>\n\n <button\n (click)=\"onCloseEvent.emit()\"\n pButton\n type=\"button\"\n icon=\"pi pi-times\"\n class=\"p-button-rounded p-button-text mr-2\"\n ></button>\n </div>\n </ng-template>\n\n <!-- Content -->\n <ng-template pTemplate=\"content\">\n <div class=\"px-2\">\n <phoenix-table\n [data]=\"data\"\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n (rowClick)=\"onTableRowClick($event)\"\n ></phoenix-table>\n </div>\n </ng-template>\n</p-drawer>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: i3$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["data", "columns", "selectedColumnsInput", "tableConfiguration"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3.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"] }] });
|
|
5351
5357
|
}
|
|
5352
5358
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: QuickPickSidePanelComponent, decorators: [{
|
|
5353
5359
|
type: Component,
|
|
5354
|
-
args: [{ selector: 'phoenix-quick-pick-sidepanel', imports: [
|
|
5360
|
+
args: [{ selector: 'phoenix-quick-pick-sidepanel', standalone: true, imports: [
|
|
5355
5361
|
CommonModule,
|
|
5356
5362
|
DrawerModule,
|
|
5357
5363
|
TableComponent,
|
|
5358
5364
|
TranslateModule,
|
|
5359
|
-
ButtonModule
|
|
5360
|
-
], template: "
|
|
5361
|
-
}], propDecorators: {
|
|
5365
|
+
ButtonModule,
|
|
5366
|
+
], template: "<p-drawer\n #drawer\n [styleClass]=\"widthClass\"\n [modal]=\"modal\"\n [(visible)]=\"panelState\"\n position=\"right\"\n [closable]=\"false\"\n (onShow)=\"onDrawerShow()\"\n (onHide)=\"onClose.emit()\"\n>\n <!-- Header -->\n <ng-template pTemplate=\"header\">\n <div class=\"flex align-items-center justify-content-between w-full\">\n <p-button\n type=\"button\"\n (click)=\"handlePanelFullScreen.emit()\"\n [icon]=\"isFullScreen ? 'pi pi-arrow-down-right' : 'pi pi-arrow-up-left'\"\n rounded=\"true\"\n outlined=\"true\"\n styleClass=\"h-8 w-8\"\n ></p-button>\n\n <span class=\"font-bold text-xl flex-grow-1 text-center\">\n {{ title }}\n </span>\n\n <button\n (click)=\"onCloseEvent.emit()\"\n pButton\n type=\"button\"\n icon=\"pi pi-times\"\n class=\"p-button-rounded p-button-text mr-2\"\n ></button>\n </div>\n </ng-template>\n\n <!-- Content -->\n <ng-template pTemplate=\"content\">\n <div class=\"px-2\">\n <phoenix-table\n [data]=\"data\"\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n (rowClick)=\"onTableRowClick($event)\"\n ></phoenix-table>\n </div>\n </ng-template>\n</p-drawer>" }]
|
|
5367
|
+
}], propDecorators: { drawer: [{
|
|
5368
|
+
type: ViewChild,
|
|
5369
|
+
args: ['drawer']
|
|
5370
|
+
}], title: [{
|
|
5362
5371
|
type: Input
|
|
5363
5372
|
}], data: [{
|
|
5364
5373
|
type: Input
|
|
5365
5374
|
}], columns: [{
|
|
5366
5375
|
type: Input
|
|
5367
|
-
}], loading: [{
|
|
5368
|
-
type: Input
|
|
5369
5376
|
}], tableConfiguration: [{
|
|
5370
5377
|
type: Input
|
|
5371
5378
|
}], panelState: [{
|