@fuentis/phoenix-ui 0.0.9-alpha.521 → 0.0.9-alpha.524
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/fuentis-phoenix-ui.mjs +174 -201
- package/fesm2022/fuentis-phoenix-ui.mjs.map +1 -1
- package/index.d.ts +47 -31
- package/package.json +1 -1
|
@@ -31,17 +31,17 @@ import * as i3$3 from 'primeng/inputtext';
|
|
|
31
31
|
import { InputTextModule } from 'primeng/inputtext';
|
|
32
32
|
import * as i8$1 from 'primeng/tabs';
|
|
33
33
|
import { TabsModule } from 'primeng/tabs';
|
|
34
|
-
import * as i4$
|
|
34
|
+
import * as i4$1 from 'primeng/iconfield';
|
|
35
35
|
import { IconFieldModule } from 'primeng/iconfield';
|
|
36
36
|
import * as i5 from 'primeng/inputicon';
|
|
37
37
|
import { InputIconModule } from 'primeng/inputicon';
|
|
38
38
|
import { MessageModule } from 'primeng/message';
|
|
39
|
-
import { Subject, debounceTime, switchMap, of, catchError, BehaviorSubject,
|
|
40
|
-
import * as
|
|
39
|
+
import { Subject, debounceTime, switchMap, of, catchError, BehaviorSubject, combineLatestWith, distinctUntilChanged, combineLatest } from 'rxjs';
|
|
40
|
+
import * as i1$3 from '@angular/common/http';
|
|
41
41
|
import { HttpParams } from '@angular/common/http';
|
|
42
42
|
import * as i2$3 from '@angular/forms';
|
|
43
43
|
import { FormsModule, FormBuilder, FormGroup, FormControl, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
44
|
-
import * as i4
|
|
44
|
+
import * as i4 from 'primeng/checkbox';
|
|
45
45
|
import { CheckboxModule } from 'primeng/checkbox';
|
|
46
46
|
import * as i6$1 from 'primeng/image';
|
|
47
47
|
import { ImageModule } from 'primeng/image';
|
|
@@ -60,7 +60,7 @@ import * as i9 from 'primeng/skeleton';
|
|
|
60
60
|
import { SkeletonModule } from 'primeng/skeleton';
|
|
61
61
|
import * as i2$5 from 'primeng/selectbutton';
|
|
62
62
|
import { SelectButtonModule } from 'primeng/selectbutton';
|
|
63
|
-
import * as i4$
|
|
63
|
+
import * as i4$2 from 'primeng/badge';
|
|
64
64
|
import { BadgeModule } from 'primeng/badge';
|
|
65
65
|
import * as i16 from 'primeng/listbox';
|
|
66
66
|
import { ListboxModule } from 'primeng/listbox';
|
|
@@ -78,7 +78,7 @@ import { FloatLabelModule } from 'primeng/floatlabel';
|
|
|
78
78
|
import jsPDF from 'jspdf';
|
|
79
79
|
import autoTable from 'jspdf-autotable';
|
|
80
80
|
import * as XLSX from 'xlsx';
|
|
81
|
-
import * as i1$
|
|
81
|
+
import * as i1$4 from 'primeng/dynamicdialog';
|
|
82
82
|
import { DialogService } from 'primeng/dynamicdialog';
|
|
83
83
|
import * as i2$7 from 'primeng/datepicker';
|
|
84
84
|
import { DatePickerModule } from 'primeng/datepicker';
|
|
@@ -86,7 +86,7 @@ import * as i2$8 from 'primeng/colorpicker';
|
|
|
86
86
|
import { ColorPickerModule } from 'primeng/colorpicker';
|
|
87
87
|
import * as i3$5 from 'primeng/inputnumber';
|
|
88
88
|
import { InputNumberModule } from 'primeng/inputnumber';
|
|
89
|
-
import * as i4$
|
|
89
|
+
import * as i4$3 from 'primeng/keyfilter';
|
|
90
90
|
import { KeyFilterModule } from 'primeng/keyfilter';
|
|
91
91
|
import * as i2$9 from 'primeng/password';
|
|
92
92
|
import { PasswordModule } from 'primeng/password';
|
|
@@ -98,7 +98,7 @@ import { schema, Editor, toHTML, NgxEditorComponent, NgxEditorMenuComponent } fr
|
|
|
98
98
|
import { Schema } from 'prosemirror-model';
|
|
99
99
|
import * as i2$a from 'primeng/fileupload';
|
|
100
100
|
import { FileUploadModule } from 'primeng/fileupload';
|
|
101
|
-
import * as i1$
|
|
101
|
+
import * as i1$5 from '@angular/platform-browser';
|
|
102
102
|
|
|
103
103
|
class InnerHeaderComponent {
|
|
104
104
|
title = '';
|
|
@@ -639,7 +639,7 @@ class CrudService {
|
|
|
639
639
|
const params = new HttpParams().set('phrase', phrase).set('size', size);
|
|
640
640
|
return this.http.get(url, { params });
|
|
641
641
|
}
|
|
642
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrudService, deps: [{ token:
|
|
642
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrudService, deps: [{ token: i1$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
643
643
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrudService, providedIn: 'root' });
|
|
644
644
|
}
|
|
645
645
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrudService, decorators: [{
|
|
@@ -647,7 +647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
647
647
|
args: [{
|
|
648
648
|
providedIn: 'root',
|
|
649
649
|
}]
|
|
650
|
-
}], ctorParameters: () => [{ type:
|
|
650
|
+
}], ctorParameters: () => [{ type: i1$3.HttpClient }] });
|
|
651
651
|
|
|
652
652
|
class SearchCardComponent {
|
|
653
653
|
translate = inject(TranslateService);
|
|
@@ -674,7 +674,7 @@ class SearchCardComponent {
|
|
|
674
674
|
this.onSelectFilterEvent.emit(data);
|
|
675
675
|
}
|
|
676
676
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SearchCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
677
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SearchCardComponent, isStandalone: true, selector: "pho-serach-card", inputs: { searchData: "searchData", tab: "tab", mocekedFilters: "mocekedFilters", checkboxes: "checkboxes" }, outputs: { onScrollEvent: "onScrollEvent", onSelectLinkEvent: "onSelectLinkEvent", onSelectFilterEvent: "onSelectFilterEvent" }, ngImport: i0, template: "<ng-container>\n <div class=\"flex h-20rem\">\n <div\n [attr.data-cy]=\"'navigation-search-bar-tab-card-' + tab\"\n class=\"overflow-y-auto\"\n [style.width.vw]=\"35\"\n (scroll)=\"onScroll($event)\"\n *ngIf=\"searchData?.length > 0; else message\"\n >\n <ng-container *ngFor=\"let link of searchData\">\n <div\n [attr.data-cy]=\"'navigation-search-bar-tab-card-link-' + tab\"\n class=\"flex cursor-pointer mb-3 hover:surface-200 border-round-md\"\n (click)=\"setLinkUrl(link)\"\n >\n <p-image\n class=\"border-round-sm p-2 mt-1\"\n [src]=\"\n 'assets/object_types/pink/full/' + link.type.labelKey + '.svg'\n \"\n height=\"24\"\n width=\"27\"\n ></p-image>\n <div class=\"flex flex-column justify-content-around ml-2\">\n <span\n [pTooltip]=\"link.name\"\n tooltipPosition=\"bottom\"\n class=\"mt-1 font-light text-lg\"\n >\n <small class=\"mr-2 font-light text-lg\"\n >{{ link.title | slice : 0 : 50\n }}{{ link.title.length > 50 ? \"...\" : \"\" }}</small\n >\n\n {{ link.name | slice : 0 : 50\n }}{{ link.name.length > 50 ? \"...\" : \"\" }}\n\n <small class=\"font-light text-base text-400\">{{\n link.type?.labelKeyVal | slice : 0 : 20\n }}</small>\n </span>\n <div class=\"flex\">\n <span class=\"mb-1 text-sm\" [pTooltip]=\"link.entity.name\"\n >{{ \"LABELS.ENTITY\" | translate }}: {{\n link.entity.name | slice : 0 : 50\n }}{{ link.entity.name.length > 50 ? \"...\" : \"\" }}</span\n >\n <span\n [pTooltip]=\"link.asset.name\"\n *ngIf=\"link?.asset?.name\"\n class=\"ml-2 mb-1 text-sm\"\n >{{ \"LABELS.ASSET\" | translate }}: {{\n link.asset.name | slice : 0 : 50\n }}{{ link.asset.name.length > 50 ? \"...\" : \"\" }}</span\n >\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <ng-container\n *ngIf=\"mocekedFilters[0].checkboxes?.length > 0 && checkboxes\"\n >\n <p-divider layout=\"vertical\"></p-divider>\n <div\n class=\"flex flex-column overflow-y-auto h-40rem pl-3 justify-content-start\"\n >\n <ng-container *ngFor=\"let item of mocekedFilters\">\n <span class=\"mt-2 mb-3 font-semibold text-sm justify-content-start\"\n >{{ item.title | translate }}\n </span>\n <div class=\"h-25rem flex flex-column justify-content-start\">\n <ng-container *ngFor=\"let checkbox of item.checkboxes\">\n <div class=\"field-checkbox\" *ngIf=\"checkbox?.name\">\n <p-checkbox\n [attr.data-cy]=\"\n 'navigation-search-filter-checkbox-' + checkbox?.labelKey\n \"\n [(ngModel)]=\"checkboxes[checkbox?.labelKey]\"\n [binary]=\"true\"\n [inputId]=\"checkbox?.name\"\n (onChange)=\"onClick($event, checkbox?.labelKey)\"\n ></p-checkbox>\n\n <label class=\"text-sm\" [for]=\"checkbox?.name\">{{\n checkbox.name | translate\n }}</label>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n</ng-container>\n<ng-template #message>\n <div class=\"overflow-y-auto\" style=\"width: 35vw\">\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i8.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4
|
|
677
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SearchCardComponent, isStandalone: true, selector: "pho-serach-card", inputs: { searchData: "searchData", tab: "tab", mocekedFilters: "mocekedFilters", checkboxes: "checkboxes" }, outputs: { onScrollEvent: "onScrollEvent", onSelectLinkEvent: "onSelectLinkEvent", onSelectFilterEvent: "onSelectFilterEvent" }, ngImport: i0, template: "<ng-container>\n <div class=\"flex h-20rem\">\n <div\n [attr.data-cy]=\"'navigation-search-bar-tab-card-' + tab\"\n class=\"overflow-y-auto\"\n [style.width.vw]=\"35\"\n (scroll)=\"onScroll($event)\"\n *ngIf=\"searchData?.length > 0; else message\"\n >\n <ng-container *ngFor=\"let link of searchData\">\n <div\n [attr.data-cy]=\"'navigation-search-bar-tab-card-link-' + tab\"\n class=\"flex cursor-pointer mb-3 hover:surface-200 border-round-md\"\n (click)=\"setLinkUrl(link)\"\n >\n <p-image\n class=\"border-round-sm p-2 mt-1\"\n [src]=\"\n 'assets/object_types/pink/full/' + link.type.labelKey + '.svg'\n \"\n height=\"24\"\n width=\"27\"\n ></p-image>\n <div class=\"flex flex-column justify-content-around ml-2\">\n <span\n [pTooltip]=\"link.name\"\n tooltipPosition=\"bottom\"\n class=\"mt-1 font-light text-lg\"\n >\n <small class=\"mr-2 font-light text-lg\"\n >{{ link.title | slice : 0 : 50\n }}{{ link.title.length > 50 ? \"...\" : \"\" }}</small\n >\n\n {{ link.name | slice : 0 : 50\n }}{{ link.name.length > 50 ? \"...\" : \"\" }}\n\n <small class=\"font-light text-base text-400\">{{\n link.type?.labelKeyVal | slice : 0 : 20\n }}</small>\n </span>\n <div class=\"flex\">\n <span class=\"mb-1 text-sm\" [pTooltip]=\"link.entity.name\"\n >{{ \"LABELS.ENTITY\" | translate }}: {{\n link.entity.name | slice : 0 : 50\n }}{{ link.entity.name.length > 50 ? \"...\" : \"\" }}</span\n >\n <span\n [pTooltip]=\"link.asset.name\"\n *ngIf=\"link?.asset?.name\"\n class=\"ml-2 mb-1 text-sm\"\n >{{ \"LABELS.ASSET\" | translate }}: {{\n link.asset.name | slice : 0 : 50\n }}{{ link.asset.name.length > 50 ? \"...\" : \"\" }}</span\n >\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <ng-container\n *ngIf=\"mocekedFilters[0].checkboxes?.length > 0 && checkboxes\"\n >\n <p-divider layout=\"vertical\"></p-divider>\n <div\n class=\"flex flex-column overflow-y-auto h-40rem pl-3 justify-content-start\"\n >\n <ng-container *ngFor=\"let item of mocekedFilters\">\n <span class=\"mt-2 mb-3 font-semibold text-sm justify-content-start\"\n >{{ item.title | translate }}\n </span>\n <div class=\"h-25rem flex flex-column justify-content-start\">\n <ng-container *ngFor=\"let checkbox of item.checkboxes\">\n <div class=\"field-checkbox\" *ngIf=\"checkbox?.name\">\n <p-checkbox\n [attr.data-cy]=\"\n 'navigation-search-filter-checkbox-' + checkbox?.labelKey\n \"\n [(ngModel)]=\"checkboxes[checkbox?.labelKey]\"\n [binary]=\"true\"\n [inputId]=\"checkbox?.name\"\n (onChange)=\"onClick($event, checkbox?.labelKey)\"\n ></p-checkbox>\n\n <label class=\"text-sm\" [for]=\"checkbox?.name\">{{\n checkbox.name | translate\n }}</label>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n</ng-container>\n<ng-template #message>\n <div class=\"overflow-y-auto\" style=\"width: 35vw\">\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i8.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i6$1.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "preview", "showTransitionOptions", "hideTransitionOptions", "appendTo"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
|
|
678
678
|
}
|
|
679
679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SearchCardComponent, decorators: [{
|
|
680
680
|
type: Component,
|
|
@@ -934,7 +934,7 @@ class SearchBarComponent {
|
|
|
934
934
|
this.reloadSubscription$?.unsubscribe();
|
|
935
935
|
}
|
|
936
936
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
937
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SearchBarComponent, isStandalone: true, selector: "pho-search-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "op", first: true, predicate: ["op"], descendants: true }, { propertyName: "elm", first: true, predicate: ["elm"], descendants: true, static: true }], ngImport: i0, template: "<div\n (click)=\"onParentClick($event)\"\n class=\"p-input-icon-left ml-1\"\n #elm\n [attr.data-cy]=\"'navigation-search-bar'\"\n>\n <p-iconfield>\n <!-- styleClass deprecated -> class -->\n <p-inputicon class=\"pi pi-search\"></p-inputicon>\n\n <input\n [attr.data-cy]=\"'navigation-search-bar-input'\"\n [@openClose]=\"isOpen ? 'open' : 'closed'\"\n type=\"text\"\n pInputText\n placeholder=\"{{ 'SEARCH_PLACEHOLDERS.GLOBAL_SEARCH' | translate }}\"\n (input)=\"valueChanges.next($event)\"\n (focus)=\"onParentClick($event); expand()\"\n />\n </p-iconfield>\n</div>\n\n<p-popover\n [dismissable]=\"true\"\n [showTransitionOptions]=\"'.2s ease-out'\"\n [autoZIndex]=\"true\"\n #op\n [style]=\"{ width: '50vw', paddingLeft: '0' }\"\n styleClass=\"global-search\"\n (onHide)=\"isOpen = false\"\n>\n <div\n *ngIf=\"!inputText\"\n class=\"flex align-items-start gap-2 p-3 border-1 border-blue-300 surface-50 text-blue-700 border-round w-full\"\n >\n <i class=\"pi pi-info-circle mt-1 text-blue-500\"></i>\n <span class=\"text-sm\">{{ 'MESSAGES.START_TYPING' | translate }}</span>\n </div>\n\n <ng-template pTemplate=\"content\">\n @if (inputText) {\n <p-tabs [value]=\"tabIndex\">\n <p-tablist>\n @for (tab of tabs(); track tab.id) {\n <p-tab\n [value]=\"tab.id\"\n (click)=\"onTabClick(tab.id)\"\n [attr.data-cy]=\"'navigation-search-bar-tab-' + tab.id\"\n >\n <span>{{ tab.header }}</span>\n </p-tab>\n }\n </p-tablist>\n\n <p-tabpanels>\n @for (tab of tabs(); track tab.id) {\n <p-tabpanel [value]=\"tab.id\">\n <pho-serach-card\n [tab]=\"tab.id\"\n [mocekedFilters]=\"mocekedFilters\"\n [searchData]=\"searchData\"\n [checkboxes]=\"checkboxes\"\n (onScrollEvent)=\"onScroll($event)\"\n (onSelectLinkEvent)=\"setLinkUrl($event)\"\n (onSelectFilterEvent)=\"onClick($event)\"\n ></pho-serach-card>\n </p-tabpanel>\n }\n </p-tabpanels>\n </p-tabs>\n }\n </ng-template>\n</p-popover>", styles: [".p-popover:after,.p-popover:before{content:none!important}.p-popover-panel{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i4$
|
|
937
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SearchBarComponent, isStandalone: true, selector: "pho-search-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "op", first: true, predicate: ["op"], descendants: true }, { propertyName: "elm", first: true, predicate: ["elm"], descendants: true, static: true }], ngImport: i0, template: "<div\n (click)=\"onParentClick($event)\"\n class=\"p-input-icon-left ml-1\"\n #elm\n [attr.data-cy]=\"'navigation-search-bar'\"\n>\n <p-iconfield>\n <!-- styleClass deprecated -> class -->\n <p-inputicon class=\"pi pi-search\"></p-inputicon>\n\n <input\n [attr.data-cy]=\"'navigation-search-bar-input'\"\n [@openClose]=\"isOpen ? 'open' : 'closed'\"\n type=\"text\"\n pInputText\n placeholder=\"{{ 'SEARCH_PLACEHOLDERS.GLOBAL_SEARCH' | translate }}\"\n (input)=\"valueChanges.next($event)\"\n (focus)=\"onParentClick($event); expand()\"\n />\n </p-iconfield>\n</div>\n\n<p-popover\n [dismissable]=\"true\"\n [showTransitionOptions]=\"'.2s ease-out'\"\n [autoZIndex]=\"true\"\n #op\n [style]=\"{ width: '50vw', paddingLeft: '0' }\"\n styleClass=\"global-search\"\n (onHide)=\"isOpen = false\"\n>\n <div\n *ngIf=\"!inputText\"\n class=\"flex align-items-start gap-2 p-3 border-1 border-blue-300 surface-50 text-blue-700 border-round w-full\"\n >\n <i class=\"pi pi-info-circle mt-1 text-blue-500\"></i>\n <span class=\"text-sm\">{{ 'MESSAGES.START_TYPING' | translate }}</span>\n </div>\n\n <ng-template pTemplate=\"content\">\n @if (inputText) {\n <p-tabs [value]=\"tabIndex\">\n <p-tablist>\n @for (tab of tabs(); track tab.id) {\n <p-tab\n [value]=\"tab.id\"\n (click)=\"onTabClick(tab.id)\"\n [attr.data-cy]=\"'navigation-search-bar-tab-' + tab.id\"\n >\n <span>{{ tab.header }}</span>\n </p-tab>\n }\n </p-tablist>\n\n <p-tabpanels>\n @for (tab of tabs(); track tab.id) {\n <p-tabpanel [value]=\"tab.id\">\n <pho-serach-card\n [tab]=\"tab.id\"\n [mocekedFilters]=\"mocekedFilters\"\n [searchData]=\"searchData\"\n [checkboxes]=\"checkboxes\"\n (onScrollEvent)=\"onScroll($event)\"\n (onSelectLinkEvent)=\"setLinkUrl($event)\"\n (onSelectFilterEvent)=\"onClick($event)\"\n ></pho-serach-card>\n </p-tabpanel>\n }\n </p-tabpanels>\n </p-tabs>\n }\n </ng-template>\n</p-popover>", styles: [".p-popover:after,.p-popover:before{content:none!important}.p-popover-panel{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i5.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i8$1.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i8$1.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i8$1.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i8$1.TabList, selector: "p-tablist" }, { kind: "component", type: i8$1.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: SearchCardComponent, selector: "pho-serach-card", inputs: ["searchData", "tab", "mocekedFilters", "checkboxes"], outputs: ["onScrollEvent", "onSelectLinkEvent", "onSelectFilterEvent"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], animations: [
|
|
938
938
|
trigger('openClose', [
|
|
939
939
|
state('open', style({
|
|
940
940
|
width: '50vw',
|
|
@@ -1859,7 +1859,7 @@ class PhoenixDataTableTabsComponent {
|
|
|
1859
1859
|
this.actionClick.emit({ action: opt });
|
|
1860
1860
|
}
|
|
1861
1861
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PhoenixDataTableTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1862
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PhoenixDataTableTabsComponent, isStandalone: true, selector: "phoenix-data-table-tabs", inputs: { actions: "actions" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<p-selectButton\n [attr.data-cy]=\"'table-tab-select-button'\"\n [options]=\"actions\"\n optionValue=\"key\"\n [(ngModel)]=\"value\"\n optionLabel=\"icon\"\n [unselectable]=\"true\"\n (onChange)=\"onActionClick($event)\"\n>\n <ng-template #item let-item>\n <span>\n {{ item.label | translate }}\n </span>\n <span>\n <p-badge\n *ngIf=\"item.badgeCount\"\n [value]=\"item.badgeCount\"\n severity=\"danger\"\n badgeSize=\"small\"\n />\n </span>\n </ng-template>\n</p-selectButton>\n", styles: [":host ::ng-deep .p-selectbutton .p-button{margin-right:5px!important}:host ::ng-deep .p-selectbutton .p-button.p-highlight{background-color:#3f51b51f!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$5.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4$
|
|
1862
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PhoenixDataTableTabsComponent, isStandalone: true, selector: "phoenix-data-table-tabs", inputs: { actions: "actions" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<p-selectButton\n [attr.data-cy]=\"'table-tab-select-button'\"\n [options]=\"actions\"\n optionValue=\"key\"\n [(ngModel)]=\"value\"\n optionLabel=\"icon\"\n [unselectable]=\"true\"\n (onChange)=\"onActionClick($event)\"\n>\n <ng-template #item let-item>\n <span>\n {{ item.label | translate }}\n </span>\n <span>\n <p-badge\n *ngIf=\"item.badgeCount\"\n [value]=\"item.badgeCount\"\n severity=\"danger\"\n badgeSize=\"small\"\n />\n </span>\n </ng-template>\n</p-selectButton>\n", styles: [":host ::ng-deep .p-selectbutton .p-button{margin-right:5px!important}:host ::ng-deep .p-selectbutton .p-button.p-highlight{background-color:#3f51b51f!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$5.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4$2.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
|
|
1863
1863
|
}
|
|
1864
1864
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PhoenixDataTableTabsComponent, decorators: [{
|
|
1865
1865
|
type: Component,
|
|
@@ -2319,7 +2319,7 @@ class PhoenixDataTableComponent {
|
|
|
2319
2319
|
this._selectedColumns = this.columns.filter((col) => val.some((v) => v.field === col.field));
|
|
2320
2320
|
}
|
|
2321
2321
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PhoenixDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2322
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PhoenixDataTableComponent, isStandalone: true, selector: "phoenix-data-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: true, transformFunction: null }, exportdData: { classPropertyName: "exportdData", publicName: "exportdData", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: true, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: false, isRequired: false, transformFunction: null }, tableConfiguration: { classPropertyName: "tableConfiguration", publicName: "tableConfiguration", isSignal: false, isRequired: true, transformFunction: resolveActions$1 }, exportData: { classPropertyName: "exportData", publicName: "exportData", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { actionClickEmmiter: "actionClickEmmiter", lazyLoadDataEmmiter: "lazyLoadDataEmmiter", onRowClickEmmiter: "onRowClickEmmiter", onRowCheckboxRadioClickEmmiter: "onRowCheckboxRadioClickEmmiter", onExportClickEmmiter: "onExportClickEmmiter", onSaveColumnsClickEmmiter: "onSaveColumnsClickEmmiter", onHeaderCheckboxToggleEmmiter: "onHeaderCheckboxToggleEmmiter" }, viewQueries: [{ propertyName: "overviewBtn", first: true, predicate: ["btn"], descendants: true }, { propertyName: "table", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- total records lazy???? -->\n<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <p-table\n #dt\n [selectionMode]=\"tableConfiguration.selectionMode\"\n [dataKey]=\"tableConfiguration.key ? tableConfiguration.key : 'id'\"\n [value]=\"data\"\n [rowSelectable]=\"isRowSelectable\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n [globalFilterFields]=\"globalFilterFields\"\n [resizableColumns]=\"true\"\n [size]=\"'small'\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [selectionPageOnly]=\"true\"\n [(selection)]=\"selectedData\"\n [scrollable]=\"true\"\n scrollHeight=\"400px\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"46\"\n [rowHover]=\"true\"\n (onHeaderCheckboxToggle)=\"onHeaderCheckboxToggle($event)\"\n >\n <!-- ********** CAPTION CAPTION CAPTION *********************** -->\n <ng-template pTemplate=\"caption\">\n <div class=\"flex justify-content-between\">\n <global-table-actions>\n <ng-container\n *ngFor=\"\n let action of tableConfiguration.globalActions;\n let i = index\n \"\n >\n <phoenix-data-table-action\n #btn\n [actionConfig]=\"action\"\n (actionClick)=\"actionClick($event)\"\n ></phoenix-data-table-action\n ></ng-container>\n <phoenix-data-table-tabs\n [attr.data-cy]=\"\n 'table-select-button-' + tableConfiguration.tabs?.key\n \"\n [actions]=\"tableConfiguration.tabs\"\n (actionClick)=\"actionClick($event)\"\n ></phoenix-data-table-tabs>\n </global-table-actions>\n <div class=\"flex align-items-center\">\n <p-button\n [attr.data-cy]=\"'table-button-filter'\"\n icon=\"pi pi-filter\"\n [rounded]=\"true\"\n label=\"Filter\"\n [text]=\"true\"\n severity=\"primary\"\n class=\"mr-2\"\n (onClick)=\"filters.toggle($event)\"\n />\n\n <p-button\n [attr.data-cy]=\"'table-button-toggle'\"\n icon=\"pi pi-sliders-v\"\n [rounded]=\"true\"\n [text]=\"true\"\n severity=\"primary\"\n label=\"Columns\"\n class=\"mr-2\"\n [attr.data-cy]=\"'table-togg-button'\"\n (onClick)=\"cols.toggle($event)\"\n />\n\n <span\n *ngIf=\"tableConfiguration.globalFilter\"\n class=\"p-input-icon-left ml-auto\"\n >\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n [attr.data-cy]=\"'table-global-search'\"\n type=\"text\"\n (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\"\n pInputText\n placeholder=\"{{\n 'SEARCH_PLACEHOLDERS.SEARCH_KEYWORD' | translate\n }}\"\n />\n </p-iconfield>\n </span>\n <p-button\n [attr.data-cy]=\"'table-button-export'\"\n icon=\"pi pi-ellipsis-v\"\n [rounded]=\"true\"\n [text]=\"true\"\n severity=\"primary\"\n (onClick)=\"export.toggle($event)\"\n class=\"ml-2\"\n />\n\n <bulk-table-actions>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n [selectedData]=\"selectedData\"\n (actionClick)=\"actionClick(action, selectedData)\"\n ></phoenix-data-table-action\n ></ng-container>\n </bulk-table-actions>\n </div>\n </div>\n </ng-template>\n <!-- ********** HEADER HEADER HEADER *********************** -->\n <ng-template pTemplate=\"header\">\n <tr style=\"height: 40px\" class=\"dt-header\">\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableHeaderCheckbox\n [attr.data-cy]=\"'table-header-checkbox'\"\n ></p-tableHeaderCheckbox>\n </th>\n <th\n class=\"custom-th\"\n *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n ></th>\n </ng-container>\n <!-- rest of columns -->\n <ng-container *ngFor=\"let col of selectedColumns; let i = index\">\n <th\n [attr.data-cy]=\"'table-col-' + i\"\n pResizableColumn\n class=\"custom-th font-bold\"\n [pSortableColumn]=\"\n col.filter === 'multiselect' && tableConfiguration.lazy != true\n ? col.field + '.name'\n : col.field\n \"\n >\n <!-- set sort icon visible by default -->\n <p-sortIcon\n [attr.data-cy]=\"'table-sort-' + col.field\"\n *ngIf=\"col.sortable === undefined ? true : col.sortable\"\n field=\"{{ col.field }}\"\n ></p-sortIcon>\n {{ col.header | translate }}\n </th>\n </ng-container>\n\n <!-- create empty th placeholders for actions -->\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n <!-- ********** BODY BODY BODY *********************** -->\n <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\">\n <ng-template #shimmer>\n <tr [attr.data-cy]=\"'table-row-' + rowIndex\">\n <td *ngFor=\"let col of columns; let even = even\">\n <p-skeleton\n [ngStyle]=\"{\n width: '60%',\n }\"\n ></p-skeleton>\n </td>\n\n <td>\n <p-skeleton\n [ngStyle]=\"{\n width: '20%',\n }\"\n ></p-skeleton>\n </td>\n </tr>\n </ng-template>\n <tr\n *ngIf=\"!loading(); else shimmer\"\n (click)=\"onRowClick($event, rowData)\"\n [pSelectableRow]=\"rowData\"\n [attr.data-cy]=\"'table-row-' + rowIndex\"\n >\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableCheckbox\n [attr.data-cy]=\"'table-checkbox'\"\n [disabled]=\"\n rowData?.canSelect !== undefined ? !rowData.canSelect : false\n \"\n [value]=\"rowData\"\n ></p-tableCheckbox>\n </td>\n <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n <p-tableRadioButton\n [value]=\"rowData\"\n [attr.data-cy]=\"'table-radio-button'\"\n ></p-tableRadioButton>\n </td>\n </ng-container>\n\n <ng-container *ngFor=\"let col of selectedColumns; let i = index\">\n <td class=\"cursor-pointer\">\n <ng-container\n *ngTemplateOutlet=\"\n cellValueTemp;\n context: { value: { rowData, col } }\n \"\n ></ng-container>\n </td>\n </ng-container>\n\n <!-- p-0 on td because buttons already have marign. so it makes row bigger -->\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-data-table-action\n *ngIf=\"\n action.notauthorized ||\n (rowData[action.type] != undefined &&\n rowData[action.type] != null)\n \"\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"actionClick($event, rowData)\"\n ></phoenix-data-table-action\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"paginatorright\" let-state>\n <!-- Total Records: {{ state.totalRecords }} -->\n <!-- <i class=\"pi pi-cog\" style=\"font-size: 1.2rem; color: grey\"></i> -->\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n</div>\n\n<!-- Celll value template -->\n\n<ng-template #cellValueTemp let-val=\"value\">\n <ng-container [ngSwitch]=\"val.col.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <!-- checking if there is a object instead of string. objects goes into non-lazy tables -> val.rowData[val.col.field].name || val.rowData[val.col.field] -->\n <p-tag\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.TAG | lowercase)\"\n [style]=\"{ 'background-color': val.rowData[val.col.field + 'Color'] }\"\n [value]=\"\n val.rowData[val.col.field].name || val.rowData[val.col.field]\n \"\n ></p-tag>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <p-avatar\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.PERSON | lowercase)\"\n [label]=\"val.rowData[val.col.field].name.charAt(0)\"\n styleClass=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n {{ val.rowData[val.col.field].name }}\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeEnum.DATE\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <div [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.DATE | lowercase)\">\n {{ val.rowData[val.col.field] | date : dateFormat }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.DATE_COMPLEX\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <div\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.DATE_COMPLEX | lowercase)\n \"\n >\n {{ val.rowData[val.col.field] | date : dateFormat + \" | HH:mm\" }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <ul\n *ngFor=\"let item of val.rowData[val.col.field]\"\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.LIST | lowercase)\"\n >\n <li>{{ item.name }}</li>\n </ul>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.RICH_TEXT\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <div\n [pTooltip]=\"val.rowData[val.col.field] | removeHTMLTags\"\n style=\"width: 200px\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.RICH_TEXT | lowercase)\n \"\n >\n {{ val.rowData[val.col.field] | removeHTMLTags }}\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <div\n [pTooltip]=\"val.rowData[val.col.field]\"\n style=\"width: 200px\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n \"\n >\n {{ val.rowData[val.col.field] }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <i\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\"\n class=\"pi\"\n [ngClass]=\"{\n 'text-green-500 pi-check-circle': val.rowData[val.col.field],\n }\"\n ></i>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.CUSTOM\">\n <span\n [innerHTML]=\"val.col.customRenderer(val.rowData)\"\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.CUSTOM | lowercase)\"\n ></span>\n </ng-container>\n\n <ng-container *ngSwitchDefault\n ><td [attr.data-cy]=\"'table-cell-text'\">\n {{ val.rowData[val.col.field] | cellValue : val.col }}\n </td>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #emptyCell> -- </ng-template>\n\n<!-- Overlays for Columns/Filters/Exports -->\n\n<p-popover #cols>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">Columns</div>\n <div>\n <p-button\n [attr.data-cy]=\"'table-cell-save-columns-button'\"\n icon=\"pi pi-save\"\n [text]=\"true\"\n [label]=\"'ACTION.SAVE' | translate\"\n class=\"mr-2\"\n (click)=\"saveColumns()\"\n [attr.data-cy]=\"'table-save-col-button'\"\n />\n <p-button\n [attr.data-cy]=\"'table-cell-reset-columns-button'\"\n icon=\"pi pi-undo\"\n [text]=\"true\"\n [label]=\"'ACTION.RESET_FILTERS' | translate\"\n class=\"mr-2\"\n (click)=\"resetColumns()\"\n [attr.data-cy]=\"'table-reset-col-button'\"\n />\n </div>\n </div>\n\n <p-listbox\n [options]=\"columns\"\n [(ngModel)]=\"selectedColumns\"\n [multiple]=\"true\"\n [metaKeySelection]=\"false\"\n [listStyle]=\"{ 'max-height': '420px' }\"\n [attr.data-cy]=\"'table-list-box'\"\n >\n <ng-template let-item pTemplate=\"item\">\n <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n <i\n *ngIf=\"!(item | isSelected : selectedColumns)\"\n class=\"pi pi-eye-slash\"\n ></i>\n <span class=\"ml-2\"> {{ item.header | translate }}</span>\n </ng-template>\n </p-listbox>\n </div>\n</p-popover>\n\n<p-popover #filters>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">Filter</div>\n <div>\n <p-button\n icon=\"pi pi-save\"\n [text]=\"true\"\n [label]=\"'ACTION.SAVE' | translate\"\n class=\"mr-2\"\n [attr.data-cy]=\"'table-save-col-button'\"\n />\n <p-button\n icon=\"pi pi-times\"\n [text]=\"true\"\n [label]=\"'Clear'\"\n class=\"mr-2\"\n (click)=\"resetFilters()\"\n [attr.data-cy]=\"'table-reset-col-button'\"\n />\n </div>\n </div>\n\n <div>\n <form [formGroup]=\"filtersForm\" [attr.data-cy]=\"'table-filter-form'\">\n @for(control of tableConfiguration.filterConfiguration; track\n control.key ){ @switch(control.type) { @case ('checkbox') {\n <div class=\"mb-4\">\n <p-checkbox\n [attr.data-cy]=\"'table-filter-form-checkbox'\"\n binary=\"true\"\n type=\"checkbox\"\n [formControlName]=\"control.key\"\n />\n <label class=\"ml-2\">{{ control.label }}</label>\n </div>\n\n } @case ('dropdown') {\n <div class=\"mb-4\">\n <label class=\"mb-2 block\">{{ control.label }}</label>\n <p-select\n [attr.data-cy]=\"'table-filter-form-dropdown'\"\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n />\n </div>\n\n } } }\n </form>\n </div>\n </div>\n</p-popover>\n\n<p-popover #export>\n <div class=\"flex flex-column gap-1\">\n <p-button\n pRipple\n text=\"true\"\n icon=\"pi pi-file-pdf\"\n (click)=\"onExportClickEmmiter.emit(exportType.PDF)\"\n class=\"mr-2\"\n [label]=\"'ACTION.EXPORT_TO_PDF' | translate\"\n [attr.data-cy]=\"'table-cell-export-pdf-button'\"\n ></p-button>\n\n <p-button\n pRipple\n text=\"true\"\n icon=\"pi pi-file-excel\"\n (click)=\"onExportClickEmmiter.emit(exportType.EXCEL)\"\n class=\"mr-2\"\n [label]=\"'ACTION.EXPORT_TO_XLS' | translate\"\n [attr.data-cy]=\"'table-cell-export-pdf-excel'\"\n ></p-button>\n </div>\n</p-popover>\n", styles: [".custom-th{background-color:var(--surface-100)!important}.dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}:is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$6.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i2$6.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$6.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i4$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i5.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type:
|
|
2322
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PhoenixDataTableComponent, isStandalone: true, selector: "phoenix-data-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: true, transformFunction: null }, exportdData: { classPropertyName: "exportdData", publicName: "exportdData", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: true, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: false, isRequired: false, transformFunction: null }, tableConfiguration: { classPropertyName: "tableConfiguration", publicName: "tableConfiguration", isSignal: false, isRequired: true, transformFunction: resolveActions$1 }, exportData: { classPropertyName: "exportData", publicName: "exportData", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { actionClickEmmiter: "actionClickEmmiter", lazyLoadDataEmmiter: "lazyLoadDataEmmiter", onRowClickEmmiter: "onRowClickEmmiter", onRowCheckboxRadioClickEmmiter: "onRowCheckboxRadioClickEmmiter", onExportClickEmmiter: "onExportClickEmmiter", onSaveColumnsClickEmmiter: "onSaveColumnsClickEmmiter", onHeaderCheckboxToggleEmmiter: "onHeaderCheckboxToggleEmmiter" }, viewQueries: [{ propertyName: "overviewBtn", first: true, predicate: ["btn"], descendants: true }, { propertyName: "table", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- total records lazy???? -->\n<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <p-table\n #dt\n [selectionMode]=\"tableConfiguration.selectionMode\"\n [dataKey]=\"tableConfiguration.key ? tableConfiguration.key : 'id'\"\n [value]=\"data\"\n [rowSelectable]=\"isRowSelectable\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n [globalFilterFields]=\"globalFilterFields\"\n [resizableColumns]=\"true\"\n [size]=\"'small'\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [selectionPageOnly]=\"true\"\n [(selection)]=\"selectedData\"\n [scrollable]=\"true\"\n scrollHeight=\"400px\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"46\"\n [rowHover]=\"true\"\n (onHeaderCheckboxToggle)=\"onHeaderCheckboxToggle($event)\"\n >\n <!-- ********** CAPTION CAPTION CAPTION *********************** -->\n <ng-template pTemplate=\"caption\">\n <div class=\"flex justify-content-between\">\n <global-table-actions>\n <ng-container\n *ngFor=\"\n let action of tableConfiguration.globalActions;\n let i = index\n \"\n >\n <phoenix-data-table-action\n #btn\n [actionConfig]=\"action\"\n (actionClick)=\"actionClick($event)\"\n ></phoenix-data-table-action\n ></ng-container>\n <phoenix-data-table-tabs\n [attr.data-cy]=\"\n 'table-select-button-' + tableConfiguration.tabs?.key\n \"\n [actions]=\"tableConfiguration.tabs\"\n (actionClick)=\"actionClick($event)\"\n ></phoenix-data-table-tabs>\n </global-table-actions>\n <div class=\"flex align-items-center\">\n <p-button\n [attr.data-cy]=\"'table-button-filter'\"\n icon=\"pi pi-filter\"\n [rounded]=\"true\"\n label=\"Filter\"\n [text]=\"true\"\n severity=\"primary\"\n class=\"mr-2\"\n (onClick)=\"filters.toggle($event)\"\n />\n\n <p-button\n [attr.data-cy]=\"'table-button-toggle'\"\n icon=\"pi pi-sliders-v\"\n [rounded]=\"true\"\n [text]=\"true\"\n severity=\"primary\"\n label=\"Columns\"\n class=\"mr-2\"\n [attr.data-cy]=\"'table-togg-button'\"\n (onClick)=\"cols.toggle($event)\"\n />\n\n <span\n *ngIf=\"tableConfiguration.globalFilter\"\n class=\"p-input-icon-left ml-auto\"\n >\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n [attr.data-cy]=\"'table-global-search'\"\n type=\"text\"\n (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\"\n pInputText\n placeholder=\"{{\n 'SEARCH_PLACEHOLDERS.SEARCH_KEYWORD' | translate\n }}\"\n />\n </p-iconfield>\n </span>\n <p-button\n [attr.data-cy]=\"'table-button-export'\"\n icon=\"pi pi-ellipsis-v\"\n [rounded]=\"true\"\n [text]=\"true\"\n severity=\"primary\"\n (onClick)=\"export.toggle($event)\"\n class=\"ml-2\"\n />\n\n <bulk-table-actions>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n [selectedData]=\"selectedData\"\n (actionClick)=\"actionClick(action, selectedData)\"\n ></phoenix-data-table-action\n ></ng-container>\n </bulk-table-actions>\n </div>\n </div>\n </ng-template>\n <!-- ********** HEADER HEADER HEADER *********************** -->\n <ng-template pTemplate=\"header\">\n <tr style=\"height: 40px\" class=\"dt-header\">\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableHeaderCheckbox\n [attr.data-cy]=\"'table-header-checkbox'\"\n ></p-tableHeaderCheckbox>\n </th>\n <th\n class=\"custom-th\"\n *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n ></th>\n </ng-container>\n <!-- rest of columns -->\n <ng-container *ngFor=\"let col of selectedColumns; let i = index\">\n <th\n [attr.data-cy]=\"'table-col-' + i\"\n pResizableColumn\n class=\"custom-th font-bold\"\n [pSortableColumn]=\"\n col.filter === 'multiselect' && tableConfiguration.lazy != true\n ? col.field + '.name'\n : col.field\n \"\n >\n <!-- set sort icon visible by default -->\n <p-sortIcon\n [attr.data-cy]=\"'table-sort-' + col.field\"\n *ngIf=\"col.sortable === undefined ? true : col.sortable\"\n field=\"{{ col.field }}\"\n ></p-sortIcon>\n {{ col.header | translate }}\n </th>\n </ng-container>\n\n <!-- create empty th placeholders for actions -->\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n <!-- ********** BODY BODY BODY *********************** -->\n <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\">\n <ng-template #shimmer>\n <tr [attr.data-cy]=\"'table-row-' + rowIndex\">\n <td *ngFor=\"let col of columns; let even = even\">\n <p-skeleton\n [ngStyle]=\"{\n width: '60%',\n }\"\n ></p-skeleton>\n </td>\n\n <td>\n <p-skeleton\n [ngStyle]=\"{\n width: '20%',\n }\"\n ></p-skeleton>\n </td>\n </tr>\n </ng-template>\n <tr\n *ngIf=\"!loading(); else shimmer\"\n (click)=\"onRowClick($event, rowData)\"\n [pSelectableRow]=\"rowData\"\n [attr.data-cy]=\"'table-row-' + rowIndex\"\n >\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableCheckbox\n [attr.data-cy]=\"'table-checkbox'\"\n [disabled]=\"\n rowData?.canSelect !== undefined ? !rowData.canSelect : false\n \"\n [value]=\"rowData\"\n ></p-tableCheckbox>\n </td>\n <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n <p-tableRadioButton\n [value]=\"rowData\"\n [attr.data-cy]=\"'table-radio-button'\"\n ></p-tableRadioButton>\n </td>\n </ng-container>\n\n <ng-container *ngFor=\"let col of selectedColumns; let i = index\">\n <td class=\"cursor-pointer\">\n <ng-container\n *ngTemplateOutlet=\"\n cellValueTemp;\n context: { value: { rowData, col } }\n \"\n ></ng-container>\n </td>\n </ng-container>\n\n <!-- p-0 on td because buttons already have marign. so it makes row bigger -->\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-data-table-action\n *ngIf=\"\n action.notauthorized ||\n (rowData[action.type] != undefined &&\n rowData[action.type] != null)\n \"\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"actionClick($event, rowData)\"\n ></phoenix-data-table-action\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"paginatorright\" let-state>\n <!-- Total Records: {{ state.totalRecords }} -->\n <!-- <i class=\"pi pi-cog\" style=\"font-size: 1.2rem; color: grey\"></i> -->\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n</div>\n\n<!-- Celll value template -->\n\n<ng-template #cellValueTemp let-val=\"value\">\n <ng-container [ngSwitch]=\"val.col.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <!-- checking if there is a object instead of string. objects goes into non-lazy tables -> val.rowData[val.col.field].name || val.rowData[val.col.field] -->\n <p-tag\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.TAG | lowercase)\"\n [style]=\"{ 'background-color': val.rowData[val.col.field + 'Color'] }\"\n [value]=\"\n val.rowData[val.col.field].name || val.rowData[val.col.field]\n \"\n ></p-tag>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <p-avatar\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.PERSON | lowercase)\"\n [label]=\"val.rowData[val.col.field].name.charAt(0)\"\n styleClass=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n {{ val.rowData[val.col.field].name }}\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeEnum.DATE\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <div [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.DATE | lowercase)\">\n {{ val.rowData[val.col.field] | date : dateFormat }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.DATE_COMPLEX\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <div\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.DATE_COMPLEX | lowercase)\n \"\n >\n {{ val.rowData[val.col.field] | date : dateFormat + \" | HH:mm\" }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <ul\n *ngFor=\"let item of val.rowData[val.col.field]\"\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.LIST | lowercase)\"\n >\n <li>{{ item.name }}</li>\n </ul>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.RICH_TEXT\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <div\n [pTooltip]=\"val.rowData[val.col.field] | removeHTMLTags\"\n style=\"width: 200px\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.RICH_TEXT | lowercase)\n \"\n >\n {{ val.rowData[val.col.field] | removeHTMLTags }}\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <div\n [pTooltip]=\"val.rowData[val.col.field]\"\n style=\"width: 200px\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n \"\n >\n {{ val.rowData[val.col.field] }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n <ng-container *ngIf=\"val.rowData[val.col.field]; else emptyCell\">\n <i\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\"\n class=\"pi\"\n [ngClass]=\"{\n 'text-green-500 pi-check-circle': val.rowData[val.col.field],\n }\"\n ></i>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.CUSTOM\">\n <span\n [innerHTML]=\"val.col.customRenderer(val.rowData)\"\n [attr.data-cy]=\"'table-cell-' + (columnTypeEnum.CUSTOM | lowercase)\"\n ></span>\n </ng-container>\n\n <ng-container *ngSwitchDefault\n ><td [attr.data-cy]=\"'table-cell-text'\">\n {{ val.rowData[val.col.field] | cellValue : val.col }}\n </td>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #emptyCell> -- </ng-template>\n\n<!-- Overlays for Columns/Filters/Exports -->\n\n<p-popover #cols>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">Columns</div>\n <div>\n <p-button\n [attr.data-cy]=\"'table-cell-save-columns-button'\"\n icon=\"pi pi-save\"\n [text]=\"true\"\n [label]=\"'ACTION.SAVE' | translate\"\n class=\"mr-2\"\n (click)=\"saveColumns()\"\n [attr.data-cy]=\"'table-save-col-button'\"\n />\n <p-button\n [attr.data-cy]=\"'table-cell-reset-columns-button'\"\n icon=\"pi pi-undo\"\n [text]=\"true\"\n [label]=\"'ACTION.RESET_FILTERS' | translate\"\n class=\"mr-2\"\n (click)=\"resetColumns()\"\n [attr.data-cy]=\"'table-reset-col-button'\"\n />\n </div>\n </div>\n\n <p-listbox\n [options]=\"columns\"\n [(ngModel)]=\"selectedColumns\"\n [multiple]=\"true\"\n [metaKeySelection]=\"false\"\n [listStyle]=\"{ 'max-height': '420px' }\"\n [attr.data-cy]=\"'table-list-box'\"\n >\n <ng-template let-item pTemplate=\"item\">\n <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n <i\n *ngIf=\"!(item | isSelected : selectedColumns)\"\n class=\"pi pi-eye-slash\"\n ></i>\n <span class=\"ml-2\"> {{ item.header | translate }}</span>\n </ng-template>\n </p-listbox>\n </div>\n</p-popover>\n\n<p-popover #filters>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">Filter</div>\n <div>\n <p-button\n icon=\"pi pi-save\"\n [text]=\"true\"\n [label]=\"'ACTION.SAVE' | translate\"\n class=\"mr-2\"\n [attr.data-cy]=\"'table-save-col-button'\"\n />\n <p-button\n icon=\"pi pi-times\"\n [text]=\"true\"\n [label]=\"'Clear'\"\n class=\"mr-2\"\n (click)=\"resetFilters()\"\n [attr.data-cy]=\"'table-reset-col-button'\"\n />\n </div>\n </div>\n\n <div>\n <form [formGroup]=\"filtersForm\" [attr.data-cy]=\"'table-filter-form'\">\n @for(control of tableConfiguration.filterConfiguration; track\n control.key ){ @switch(control.type) { @case ('checkbox') {\n <div class=\"mb-4\">\n <p-checkbox\n [attr.data-cy]=\"'table-filter-form-checkbox'\"\n binary=\"true\"\n type=\"checkbox\"\n [formControlName]=\"control.key\"\n />\n <label class=\"ml-2\">{{ control.label }}</label>\n </div>\n\n } @case ('dropdown') {\n <div class=\"mb-4\">\n <label class=\"mb-2 block\">{{ control.label }}</label>\n <p-select\n [attr.data-cy]=\"'table-filter-form-dropdown'\"\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n />\n </div>\n\n } } }\n </form>\n </div>\n </div>\n</p-popover>\n\n<p-popover #export>\n <div class=\"flex flex-column gap-1\">\n <p-button\n pRipple\n text=\"true\"\n icon=\"pi pi-file-pdf\"\n (click)=\"onExportClickEmmiter.emit(exportType.PDF)\"\n class=\"mr-2\"\n [label]=\"'ACTION.EXPORT_TO_PDF' | translate\"\n [attr.data-cy]=\"'table-cell-export-pdf-button'\"\n ></p-button>\n\n <p-button\n pRipple\n text=\"true\"\n icon=\"pi pi-file-excel\"\n (click)=\"onExportClickEmmiter.emit(exportType.EXCEL)\"\n class=\"mr-2\"\n [label]=\"'ACTION.EXPORT_TO_XLS' | translate\"\n [attr.data-cy]=\"'table-cell-export-pdf-excel'\"\n ></p-button>\n </div>\n</p-popover>\n", styles: [".custom-th{background-color:var(--surface-100)!important}.dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}:is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$6.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i2$6.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$6.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i5.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type:
|
|
2323
2323
|
///Custom components
|
|
2324
2324
|
PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i16.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["hostName", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type:
|
|
2325
2325
|
// Pipes
|
|
@@ -2757,7 +2757,7 @@ class TableCaptionComponent {
|
|
|
2757
2757
|
this.actionClick.emit({ action, selectedItems: this.selectedItems });
|
|
2758
2758
|
}
|
|
2759
2759
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2760
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems", filters: "filters" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "columnsPopover", first: true, predicate: ["columnsPopover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n <!-- Global Actions & Tabs -->\n <div class=\"flex align-items-center gap-2\">\n <phoenix-data-table-tabs\n [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n [actions]=\"tableConfiguration.tabs\"\n (actionClick)=\"actionClick.emit($event)\"\n >\n </phoenix-data-table-tabs>\n <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"actionClick.emit($event)\"\n >\n </phoenix-data-table-action>\n </ng-container>\n </div>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Caption Filters (shown outside popover) -->\n @for(control of filters; track control.key) { @if(control.isInCaption) {\n @switch(control.type) { @case ('dropdown') {\n <p-select\n class=\"w-12rem\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControl]=\"$any(filtersForm.get(control.key))\"\n placeholder=\"{{ control.label | translate }}\"\n />\n } @case ('multiselect') {\n <p-multiselect\n class=\"w-12rem\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n optionValue=\"key\"\n [formControl]=\"$any(filtersForm.get(control.key))\"\n [showClear]=\"true\"\n placeholder=\"{{ control.label | translate }}\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n } } } }\n <!-- Filter, Columns, Search, More -->\n @if(tableConfiguration.hasFilter){ @if( hasFormValues() ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span\n pRipple\n class=\"cursor-pointer\"\n (click)=\"filtersPopover.toggle($event)\"\n >\n <i class=\"pi pi-filter\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span\n pRipple\n class=\"cursor-pointer p-2\"\n (click)=\"filtersPopover.toggle($event)\"\n >\n <i class=\"pi pi-filter\"></i>\n </span>\n } } @if(tableConfiguration.hasColumns){ @if( columns.length !=\n _selectedColumns.length ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span\n pRipple\n class=\"cursor-pointer\"\n (click)=\"columnsPopover.toggle($event)\"\n >\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span\n pRipple\n class=\"cursor-pointer p-2\"\n (click)=\"columnsPopover.toggle($event)\"\n >\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n\n } }\n\n <div class=\"flex\">\n @if(tableConfiguration.hasSearch){\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n type=\"text\"\n (input)=\"emitSearch($any($event.target).value)\"\n pInputText\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n />\n </p-iconfield>\n } @if(tableConfiguration.hasMore){\n <phoenix-data-table-action\n *ngIf=\"tableConfiguration?.hasMore && tableConfiguration?.moreActions\"\n [actionConfig]=\"tableConfiguration.moreActions\"\n (actionClick)=\"actionClick.emit($event)\"\n ></phoenix-data-table-action>\n }\n </div>\n </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.FILTERS\" | translate }}</div>\n <div>\n <!-- <p-button\n icon=\"pi pi-save\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SAVE' | translate }}\"\n class=\"mr-2\"\n (click)=\"applyFilters()\"\n /> -->\n\n <p-button\n icon=\"pi pi-refresh\n \"\n [text]=\"true\"\n label=\"{{ 'ACTION.CLEAR' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetFilters()\"\n />\n </div>\n </div>\n\n <form [formGroup]=\"filtersForm\">\n @for(control of filters; track control.key) { @if(!control.isInCaption) {\n @switch(control.type) { @case ('checkbox') {\n <div class=\"mb-2\">\n <p-checkbox\n binary=\"true\"\n type=\"checkbox\"\n [formControlName]=\"control.key\"\n />\n <label class=\"ml-2\">{{ control.label | translate }}</label>\n </div>\n } @case ('dropdown') {\n <div class=\"mb-2\">\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-select\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n </div>\n } @case ('multiselect') {\n <div class=\"mb-2\">\n <p-floatlabel variant=\"on\">\n <p-multiselect\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n optionValue=\"key\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n <label for=\"username\">{{ control.label | translate }}</label>\n </p-floatlabel>\n <!-- <label class=\"mb-2 block\">{{ control.label }}</label> -->\n </div>\n } @case ('person-dropdown'){\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-multiselect\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n class=\"w-full\"\n [showClear]=\"true\"\n >\n <ng-template #selectedItem let-selectedOption>\n <div class=\"flex items-center gap-2\" *ngIf=\"selectedOption\">\n <p-avatar\n [label]=\"selectedOption.label.charAt(0).toUpperCase()\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n <div>{{ selectedOption.label | translate }}</div>\n </div>\n </ng-template>\n <ng-template let-person #item>\n <div class=\"flex align-items-center gap-2\">\n <p-avatar\n [label]=\"person.label.charAt(0).toUpperCase()\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n <div>{{ person.label | translate }}</div>\n </div>\n </ng-template>\n <ng-template #dropdownicon>\n <i class=\"pi pi-user\"></i>\n </ng-template>\n <!-- <ng-template #header>\n <div class=\"font-medium p-3\">Available Countries</div>\n </ng-template> -->\n <!-- <ng-template #footer>\n <div class=\"p-3\">\n <p-button label=\"Add New\" fluid severity=\"secondary\" text size=\"small\" icon=\"pi pi-plus\" />\n </div>\n </ng-template> -->\n </p-multiselect>\n } @default{\n <div>{{ control.type }}</div>\n } } } }\n </form>\n </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.COLUMNS\" | translate }}</div>\n <div>\n <p-button\n icon=\"pi pi-eye\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SHOW_ALL' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetColumns()\"\n />\n </div>\n </div>\n\n <p-listbox\n [options]=\"columns\"\n [ngModel]=\"_selectedColumns\"\n (ngModelChange)=\"onColumnSelectionChange($event)\"\n [multiple]=\"true\"\n [metaKeySelection]=\"false\"\n [listStyle]=\"{ 'max-height': '420px' }\"\n [attr.data-cy]=\"'table-list-box'\"\n >\n <ng-template let-item pTemplate=\"item\">\n <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n <i\n *ngIf=\"!(item | isSelected : selectedColumns)\"\n class=\"pi pi-eye-slash\"\n ></i>\n <span class=\"ml-2\"> {{ item.header | translate }}</span>\n </ng-template>\n </p-listbox>\n </div>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i5.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i4$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i10.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i16.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["hostName", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i13.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i14.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i15.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }] });
|
|
2760
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems", filters: "filters" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "columnsPopover", first: true, predicate: ["columnsPopover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n <!-- Global Actions & Tabs -->\n <div class=\"flex align-items-center gap-2\">\n <phoenix-data-table-tabs\n [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n [actions]=\"tableConfiguration.tabs\"\n (actionClick)=\"actionClick.emit($event)\"\n >\n </phoenix-data-table-tabs>\n <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"actionClick.emit($event)\"\n >\n </phoenix-data-table-action>\n </ng-container>\n </div>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Caption Filters (shown outside popover) -->\n @for(control of filters; track control.key) { @if(control.isInCaption) {\n @switch(control.type) { @case ('dropdown') {\n <p-select\n class=\"w-12rem\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControl]=\"$any(filtersForm.get(control.key))\"\n placeholder=\"{{ control.label | translate }}\"\n />\n } @case ('multiselect') {\n <p-multiselect\n class=\"w-12rem\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n optionValue=\"key\"\n [formControl]=\"$any(filtersForm.get(control.key))\"\n [showClear]=\"true\"\n placeholder=\"{{ control.label | translate }}\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n } } } }\n <!-- Filter, Columns, Search, More -->\n @if(tableConfiguration.hasFilter){ @if( hasFormValues() ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span\n pRipple\n class=\"cursor-pointer\"\n (click)=\"filtersPopover.toggle($event)\"\n >\n <i class=\"pi pi-filter\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span\n pRipple\n class=\"cursor-pointer p-2\"\n (click)=\"filtersPopover.toggle($event)\"\n >\n <i class=\"pi pi-filter\"></i>\n </span>\n } } @if(tableConfiguration.hasColumns){ @if( columns.length !=\n _selectedColumns.length ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span\n pRipple\n class=\"cursor-pointer\"\n (click)=\"columnsPopover.toggle($event)\"\n >\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span\n pRipple\n class=\"cursor-pointer p-2\"\n (click)=\"columnsPopover.toggle($event)\"\n >\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n\n } }\n\n <div class=\"flex\">\n @if(tableConfiguration.hasSearch){\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n type=\"text\"\n (input)=\"emitSearch($any($event.target).value)\"\n pInputText\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n />\n </p-iconfield>\n } @if(tableConfiguration.hasMore){\n <phoenix-data-table-action\n *ngIf=\"tableConfiguration?.hasMore && tableConfiguration?.moreActions\"\n [actionConfig]=\"tableConfiguration.moreActions\"\n (actionClick)=\"actionClick.emit($event)\"\n ></phoenix-data-table-action>\n }\n </div>\n </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.FILTERS\" | translate }}</div>\n <div>\n <!-- <p-button\n icon=\"pi pi-save\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SAVE' | translate }}\"\n class=\"mr-2\"\n (click)=\"applyFilters()\"\n /> -->\n\n <p-button\n icon=\"pi pi-refresh\n \"\n [text]=\"true\"\n label=\"{{ 'ACTION.CLEAR' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetFilters()\"\n />\n </div>\n </div>\n\n <form [formGroup]=\"filtersForm\">\n @for(control of filters; track control.key) { @if(!control.isInCaption) {\n @switch(control.type) { @case ('checkbox') {\n <div class=\"mb-2\">\n <p-checkbox\n binary=\"true\"\n type=\"checkbox\"\n [formControlName]=\"control.key\"\n />\n <label class=\"ml-2\">{{ control.label | translate }}</label>\n </div>\n } @case ('dropdown') {\n <div class=\"mb-2\">\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-select\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n </div>\n } @case ('multiselect') {\n <div class=\"mb-2\">\n <p-floatlabel variant=\"on\">\n <p-multiselect\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n optionValue=\"key\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n <label for=\"username\">{{ control.label | translate }}</label>\n </p-floatlabel>\n <!-- <label class=\"mb-2 block\">{{ control.label }}</label> -->\n </div>\n } @case ('person-dropdown'){\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-multiselect\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n class=\"w-full\"\n [showClear]=\"true\"\n >\n <ng-template #selectedItem let-selectedOption>\n <div class=\"flex items-center gap-2\" *ngIf=\"selectedOption\">\n <p-avatar\n [label]=\"selectedOption.label.charAt(0).toUpperCase()\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n <div>{{ selectedOption.label | translate }}</div>\n </div>\n </ng-template>\n <ng-template let-person #item>\n <div class=\"flex align-items-center gap-2\">\n <p-avatar\n [label]=\"person.label.charAt(0).toUpperCase()\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n <div>{{ person.label | translate }}</div>\n </div>\n </ng-template>\n <ng-template #dropdownicon>\n <i class=\"pi pi-user\"></i>\n </ng-template>\n <!-- <ng-template #header>\n <div class=\"font-medium p-3\">Available Countries</div>\n </ng-template> -->\n <!-- <ng-template #footer>\n <div class=\"p-3\">\n <p-button label=\"Add New\" fluid severity=\"secondary\" text size=\"small\" icon=\"pi pi-plus\" />\n </div>\n </ng-template> -->\n </p-multiselect>\n } @default{\n <div>{{ control.type }}</div>\n } } } }\n </form>\n </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.COLUMNS\" | translate }}</div>\n <div>\n <p-button\n icon=\"pi pi-eye\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SHOW_ALL' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetColumns()\"\n />\n </div>\n </div>\n\n <p-listbox\n [options]=\"columns\"\n [ngModel]=\"_selectedColumns\"\n (ngModelChange)=\"onColumnSelectionChange($event)\"\n [multiple]=\"true\"\n [metaKeySelection]=\"false\"\n [listStyle]=\"{ 'max-height': '420px' }\"\n [attr.data-cy]=\"'table-list-box'\"\n >\n <ng-template let-item pTemplate=\"item\">\n <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n <i\n *ngIf=\"!(item | isSelected : selectedColumns)\"\n class=\"pi pi-eye-slash\"\n ></i>\n <span class=\"ml-2\"> {{ item.header | translate }}</span>\n </ng-template>\n </p-listbox>\n </div>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i5.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i10.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i16.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["hostName", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i13.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i14.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i15.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }] });
|
|
2761
2761
|
}
|
|
2762
2762
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableCaptionComponent, decorators: [{
|
|
2763
2763
|
type: Component,
|
|
@@ -3607,7 +3607,7 @@ class TableComponent {
|
|
|
3607
3607
|
navigator.clipboard.writeText(text);
|
|
3608
3608
|
}
|
|
3609
3609
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3610
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n @if (selectedItems().length === 0) {\n <table-caption [columns]=\"columns\" [tableConfiguration]=\"tableConfiguration\" [filters]=\"filters\"\n [selectedItems]=\"selectedItems()\" (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\" (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"></table-caption>\n } @else {\n <div style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\">\n <div>\n @if (tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX) {\n <span>\n {{ selectedItems().length }}\n {{\n selectedItems().length === 1\n ? (\"LABELS.ITEM_SELECTED\" | translate)\n : (\"LABELS.ITEMS_SELECTED\" | translate)\n }}\n </span>\n }\n </div>\n\n <div>\n @for (action of tableConfiguration.bulkActions; track action?.key ?? $index) {\n <phoenix-data-table-action [actionConfig]=\"action\" (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems()\n });\n clearSelection()\n \"></phoenix-data-table-action>\n }\n\n <button [attr.data-cy]=\"'clear-selection-button'\" class=\"p-button p-button-text p-button-plain\"\n (click)=\"clearSelection()\" aria-label=\"Clear Selection\">\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n }\n <div class=\"table-host\" [style.height]=\"tableConfiguration.scrollHeight ?? null\">\n <p-table #dt [columns]=\"selectedColumns\" [value]=\"tableData\" [size]=\"'small'\" scrollable=\"true\" scrollHeight=\"flex\"\n [virtualScroll]=\"true\" [virtualScrollItemSize]=\"30\" [lazy]=\"true\" [rowSelectable]=\"isRowSelectable\"\n [totalRecords]=\"totalRecords\" (onLazyLoad)=\"loadLazyData($event)\" [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\" [sortMode]=\"'multiple'\" [resizableColumns]=\"true\"\n columnResizeMode=\"expand\">\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <th class=\"custom-th\">\n <p-tableHeaderCheckbox [attr.data-cy]=\"'table-header-checkbox'\"></p-tableHeaderCheckbox>\n </th>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <th class=\"custom-th\"></th>\n }\n }\n\n @for (col of columns; track col.field ?? col.header ?? $index; let colIdx = $index) {\n <th pResizableColumn class=\"custom-th text-primary font-bold\" [pSortableColumn]=\"col.field\">\n {{ col.header | translate }}\n <p-sortIcon [field]=\"col.field\" [attr.data-cy]=\"'sort-button-' + col.header\"></p-sortIcon>\n </th>\n }\n\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template #body let-rowData let-columns=\"columns\" let-rowIndex=\"rowIndex\">\n <tr>\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <td class=\"w-2rem\">\n <p-tableCheckbox [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \" [disabled]=\"\n rowData?.canSelect !== undefined ? !rowData.canSelect : false\n \" [value]=\"rowData\"></p-tableCheckbox>\n </td>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <td>\n <p-tableRadioButton [value]=\"rowData\" [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"></p-tableRadioButton>\n </td>\n }\n }\n\n @for (col of columns; track col.field ?? col.header ?? $index; let i = $index) {\n <td (click)=\"isColumnClickable(i) ? onRowClick($event, rowData) : null\" [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer': isColumnClickable(i)\n }\">\n @switch (col.columnType) {\n @case (columnTypeEnum.TAG) {\n @if (rowData[col.field]) {\n <div class=\"border-round-md font-semibold\" [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field + 'Color'] || '#ccc') + '56',\n color: rowData[col.field + 'Color']\n }\">\n {{\n rowData[col.field]?.name || (rowData[col.field] | translate)\n }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n\n @case (columnTypeEnum.LIST_TAG) {\n @if (rowData[col.field]) {\n @for (item of rowData[col.field]; track $index) {\n <p-badge severity=\"warn\" class=\"mr-1\" [value]=\"item\" />\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n\n @case (columnTypeEnum.OBJ_TAG) {\n @if (rowData[col.field]) {\n <p-tag [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.OBJ_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color': (rowData[col.field].color || '#ccc') + '56',\n color: rowData[col.field].color\n }\" [value]=\"rowData[col.field]?.value | translate\"></p-tag>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n\n @case (columnTypeEnum.PERSON) {\n @if (rowData[col.field]) {\n <p-avatar [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.PERSON +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [label]=\"rowData[col.field]?.name | initials\" class=\"cursor-pointer\" [style]=\"{\n 'background-color': '#9c27b0',\n color: '#ffffff',\n 'font-size': '0.8rem!important'\n }\" shape=\"circle\" (click)=\"personPop.toggle($event)\"></p-avatar>\n\n <p-popover #personPop [dismissable]=\"true\">\n <div>\n <span class=\"text-lg\">{{ rowData[col.field].name }}</span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ rowData[col.field].email ?? ' --' }}\n </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-phone text-500\"></i>\n {{ rowData[col.field].phone ?? ' --' }}\n </span>\n </div>\n </p-popover>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n\n @case (columnTypeEnum.LIST) {\n @if (rowData[col.field]?.length) {\n @if (rowData[col.field].length > 1) {\n <div class=\"cursor-pointer\" (click)=\"listPop.toggle($event)\" [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \">\n <span class=\"mr-1\">{{ rowData[col.field][0].name }}</span>\n <p-chip class=\"text-sm font-semibold p-1 m-0\" [label]=\"'+' + (rowData[col.field].length - 1)\" />\n </div>\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n\n <p-popover #listPop [dismissable]=\"true\">\n @for (item of rowData[col.field]; track item.name; let isFirst = $first) {\n @if (!isFirst) {\n <ul class=\"list-none m-0 p-0\">\n <li>{{ item.name }}</li>\n </ul>\n }\n }\n </p-popover>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n\n @case (columnTypeEnum.BOOLEAN) {\n @if (rowData[col.field] | isBoolean) {\n <i [pTooltip]=\"rowData?.[col.field + 'Tooltip']\" [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.BOOLEAN +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" class=\"pi\" [ngClass]=\"\n rowData[col.field]\n ? 'text-green-500 pi-check-circle'\n : 'text-red-500 pi-times-circle'\n \"></i>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n\n @case (columnTypeEnum.TEXT_AREA) {\n @if (rowData[col.field]) {\n <div [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT_AREA +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [pTooltip]=\"rowData[col.field]\" style=\"width: 200px\">\n {{\n rowData[col.field].length > 50\n ? (rowData[col.field] | slice : 0 : 50) + '...'\n : rowData[col.field]\n }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n\n @case (columnTypeEnum.EMAIL) {\n @if (rowData[col.field]) {\n <div class=\"email-cell\" [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.EMAIL +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \">\n <span>{{ rowData[col.field] }}</span>\n <i\n class=\"pi pi-copy email-copy-icon\"\n (click)=\"copyToClipboard($event, rowData[col.field])\"\n [pTooltip]=\"'LABELS.COPY_EMAIL' | translate\">\n </i>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n\n @case (columnTypeEnum.TIMEPERIOD) {\n @if (rowData[col.field]) {\n <div [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TIMEPERIOD +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [pTooltip]=\"rowData[col.field] | timePeriod\" style=\"max-width: 200px\">\n {{ rowData[col.field] | timePeriod }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n\n @default {\n @if (col.flag && getNested(rowData, col.flagCodeField)) {\n <div [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" class=\"flex align-items-center gap-2\" style=\"max-width: 200px\"\n [pTooltip]=\"rowData | cell : col : dateFormat\">\n <img src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + (getNested(rowData, col.flagCodeField) || '').toString().toLowerCase()\"\n style=\"width: 22px\" alt=\"\" />\n <span [innerHTML]=\"rowData | cell : col : dateFormat\"></span>\n </div>\n } @else {\n @if (rowData | cell : col : dateFormat) {\n <div [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [pTooltip]=\"rowData | cell : col : dateFormat\" style=\"max-width: 200px\"\n [innerHTML]=\"rowData | cell : col : dateFormat\"></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n }\n }\n </td>\n }\n\n <td class=\"p-0\">\n @for (action of tableConfiguration.rowActions; track action?.key ?? $index) {\n <phoenix-data-table-action [actionConfig]=\"action\" [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"></phoenix-data-table-action>\n }\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell let-dataCy=\"dataCy\">\n <span [attr.data-cy]=\"dataCy\">--</span>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns\">\n <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n </td>\n <td>\n <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n </div>\n </div>\n\n</div>", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$6.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$6.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i9$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4$3.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }, { kind: "pipe", type: IsBooleanPipe, name: "isBoolean" }] });
|
|
3610
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n @if (selectedItems().length === 0) {\n <table-caption [columns]=\"columns\" [tableConfiguration]=\"tableConfiguration\" [filters]=\"filters\"\n [selectedItems]=\"selectedItems()\" (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\" (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"></table-caption>\n } @else {\n <div style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\">\n <div>\n @if (tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX) {\n <span>\n {{ selectedItems().length }}\n {{\n selectedItems().length === 1\n ? (\"LABELS.ITEM_SELECTED\" | translate)\n : (\"LABELS.ITEMS_SELECTED\" | translate)\n }}\n </span>\n }\n </div>\n\n <div>\n @for (action of tableConfiguration.bulkActions; track action?.key ?? $index) {\n <phoenix-data-table-action [actionConfig]=\"action\" (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems()\n });\n clearSelection()\n \"></phoenix-data-table-action>\n }\n\n <button [attr.data-cy]=\"'clear-selection-button'\" class=\"p-button p-button-text p-button-plain\"\n (click)=\"clearSelection()\" aria-label=\"Clear Selection\">\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n }\n <div class=\"table-host\" [style.height]=\"tableConfiguration.scrollHeight ?? null\">\n <p-table #dt [columns]=\"selectedColumns\" [value]=\"tableData\" [size]=\"'small'\" scrollable=\"true\" scrollHeight=\"flex\"\n [virtualScroll]=\"true\" [virtualScrollItemSize]=\"30\" [lazy]=\"true\" [rowSelectable]=\"isRowSelectable\"\n [totalRecords]=\"totalRecords\" (onLazyLoad)=\"loadLazyData($event)\" [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\" [sortMode]=\"'multiple'\" [resizableColumns]=\"true\"\n columnResizeMode=\"expand\">\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <th class=\"custom-th\">\n <p-tableHeaderCheckbox [attr.data-cy]=\"'table-header-checkbox'\"></p-tableHeaderCheckbox>\n </th>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <th class=\"custom-th\"></th>\n }\n }\n\n @for (col of columns; track col.field ?? col.header ?? $index; let colIdx = $index) {\n <th pResizableColumn class=\"custom-th text-primary font-bold\" [pSortableColumn]=\"col.field\">\n {{ col.header | translate }}\n <p-sortIcon [field]=\"col.field\" [attr.data-cy]=\"'sort-button-' + col.header\"></p-sortIcon>\n </th>\n }\n\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template #body let-rowData let-columns=\"columns\" let-rowIndex=\"rowIndex\">\n <tr>\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <td class=\"w-2rem\">\n <p-tableCheckbox [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \" [disabled]=\"\n rowData?.canSelect !== undefined ? !rowData.canSelect : false\n \" [value]=\"rowData\"></p-tableCheckbox>\n </td>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <td>\n <p-tableRadioButton [value]=\"rowData\" [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"></p-tableRadioButton>\n </td>\n }\n }\n\n @for (col of columns; track col.field ?? col.header ?? $index; let i = $index) {\n <td (click)=\"isColumnClickable(i) ? onRowClick($event, rowData) : null\" [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer': isColumnClickable(i)\n }\">\n @switch (col.columnType) {\n @case (columnTypeEnum.TAG) {\n @if (rowData[col.field]) {\n <div class=\"border-round-md font-semibold\" [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field + 'Color'] || '#ccc') + '56',\n color: rowData[col.field + 'Color']\n }\">\n {{\n rowData[col.field]?.name || (rowData[col.field] | translate)\n }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n\n @case (columnTypeEnum.LIST_TAG) {\n @if (rowData[col.field]) {\n @for (item of rowData[col.field]; track $index) {\n <p-badge severity=\"warn\" class=\"mr-1\" [value]=\"item\" />\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n\n @case (columnTypeEnum.OBJ_TAG) {\n @if (rowData[col.field]) {\n <p-tag [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.OBJ_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color': (rowData[col.field].color || '#ccc') + '56',\n color: rowData[col.field].color\n }\" [value]=\"rowData[col.field]?.value | translate\"></p-tag>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n\n @case (columnTypeEnum.PERSON) {\n @if (rowData[col.field]) {\n <p-avatar [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.PERSON +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [label]=\"rowData[col.field]?.name | initials\" class=\"cursor-pointer\" [style]=\"{\n 'background-color': '#9c27b0',\n color: '#ffffff',\n 'font-size': '0.8rem!important'\n }\" shape=\"circle\" (click)=\"personPop.toggle($event)\"></p-avatar>\n\n <p-popover #personPop [dismissable]=\"true\">\n <div>\n <span class=\"text-lg\">{{ rowData[col.field].name }}</span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ rowData[col.field].email ?? ' --' }}\n </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-phone text-500\"></i>\n {{ rowData[col.field].phone ?? ' --' }}\n </span>\n </div>\n </p-popover>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n\n @case (columnTypeEnum.LIST) {\n @if (rowData[col.field]?.length) {\n @if (rowData[col.field].length > 1) {\n <div class=\"cursor-pointer\" (click)=\"listPop.toggle($event)\" [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \">\n <span class=\"mr-1\">{{ rowData[col.field][0].name }}</span>\n <p-chip class=\"text-sm font-semibold p-1 m-0\" [label]=\"'+' + (rowData[col.field].length - 1)\" />\n </div>\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n\n <p-popover #listPop [dismissable]=\"true\">\n @for (item of rowData[col.field]; track item.name; let isFirst = $first) {\n @if (!isFirst) {\n <ul class=\"list-none m-0 p-0\">\n <li>{{ item.name }}</li>\n </ul>\n }\n }\n </p-popover>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n\n @case (columnTypeEnum.BOOLEAN) {\n @if (rowData[col.field] | isBoolean) {\n <i [pTooltip]=\"rowData?.[col.field + 'Tooltip']\" [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.BOOLEAN +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" class=\"pi\" [ngClass]=\"\n rowData[col.field]\n ? 'text-green-500 pi-check-circle'\n : 'text-red-500 pi-times-circle'\n \"></i>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n\n @case (columnTypeEnum.TEXT_AREA) {\n @if (rowData[col.field]) {\n <div [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT_AREA +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [pTooltip]=\"rowData[col.field]\" style=\"width: 200px\">\n {{\n rowData[col.field].length > 50\n ? (rowData[col.field] | slice : 0 : 50) + '...'\n : rowData[col.field]\n }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n\n @case (columnTypeEnum.EMAIL) {\n @if (rowData[col.field]) {\n <div class=\"email-cell\" [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.EMAIL +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \">\n <span>{{ rowData[col.field] }}</span>\n <i\n class=\"pi pi-copy email-copy-icon\"\n (click)=\"copyToClipboard($event, rowData[col.field])\"\n [pTooltip]=\"'LABELS.COPY_EMAIL' | translate\">\n </i>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n\n @case (columnTypeEnum.TIMEPERIOD) {\n @if (rowData[col.field]) {\n <div [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TIMEPERIOD +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [pTooltip]=\"rowData[col.field] | timePeriod\" style=\"max-width: 200px\">\n {{ rowData[col.field] | timePeriod }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n\n @default {\n @if (col.flag && getNested(rowData, col.flagCodeField)) {\n <div [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" class=\"flex align-items-center gap-2\" style=\"max-width: 200px\"\n [pTooltip]=\"rowData | cell : col : dateFormat\">\n <img src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + (getNested(rowData, col.flagCodeField) || '').toString().toLowerCase()\"\n style=\"width: 22px\" alt=\"\" />\n <span [innerHTML]=\"rowData | cell : col : dateFormat\"></span>\n </div>\n } @else {\n @if (rowData | cell : col : dateFormat) {\n <div [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \" [pTooltip]=\"rowData | cell : col : dateFormat\" style=\"max-width: 200px\"\n [innerHTML]=\"rowData | cell : col : dateFormat\"></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyCell\" [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\" />\n }\n }\n }\n }\n </td>\n }\n\n <td class=\"p-0\">\n @for (action of tableConfiguration.rowActions; track action?.key ?? $index) {\n <phoenix-data-table-action [actionConfig]=\"action\" [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"></phoenix-data-table-action>\n }\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell let-dataCy=\"dataCy\">\n <span [attr.data-cy]=\"dataCy\">--</span>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns\">\n <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n </td>\n <td>\n <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n </div>\n </div>\n\n</div>", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$6.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$6.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i9$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4$2.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }, { kind: "pipe", type: IsBooleanPipe, name: "isBoolean" }] });
|
|
3611
3611
|
}
|
|
3612
3612
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, decorators: [{
|
|
3613
3613
|
type: Component,
|
|
@@ -3844,7 +3844,6 @@ class MetaFormAbstract {
|
|
|
3844
3844
|
fb;
|
|
3845
3845
|
metaService;
|
|
3846
3846
|
translateService;
|
|
3847
|
-
http;
|
|
3848
3847
|
metaForm;
|
|
3849
3848
|
metaFormValues;
|
|
3850
3849
|
metaFormControls;
|
|
@@ -3861,43 +3860,78 @@ class MetaFormAbstract {
|
|
|
3861
3860
|
onFormSubmit = new EventEmitter();
|
|
3862
3861
|
onFormCancel = new EventEmitter();
|
|
3863
3862
|
formActive$;
|
|
3864
|
-
formSub$;
|
|
3865
3863
|
/**
|
|
3866
|
-
*
|
|
3867
|
-
*
|
|
3864
|
+
* IMPORTANT:
|
|
3865
|
+
* Do not subscribe in the constructor, because @Input() metaForm arrives later.
|
|
3866
|
+
* We wire subscriptions in ngOnChanges when the real FormGroup instance is available.
|
|
3867
|
+
*/
|
|
3868
|
+
formSub;
|
|
3869
|
+
/**
|
|
3870
|
+
* Dependency setup may create subscriptions. We allow cleanup by supporting
|
|
3871
|
+
* optional cleanup functions returned by setupDependencies().
|
|
3868
3872
|
*/
|
|
3869
3873
|
dependencyCleanup = [];
|
|
3870
3874
|
/**
|
|
3871
|
-
*
|
|
3872
|
-
* If
|
|
3875
|
+
* Metadata signature used to detect when controls changed.
|
|
3876
|
+
* If the signature changes, dependencies are cleaned up and re-bound.
|
|
3873
3877
|
*/
|
|
3874
3878
|
lastMetaSignature = '';
|
|
3875
|
-
|
|
3879
|
+
/**
|
|
3880
|
+
* Subscriptions used to remove server-side validation errors when the user edits the field.
|
|
3881
|
+
* This prevents "sticky" errors blocking save after the value is corrected.
|
|
3882
|
+
*/
|
|
3883
|
+
clearServerErrorSubs = new Map();
|
|
3884
|
+
constructor(fb, metaService, translateService) {
|
|
3876
3885
|
this.fb = fb;
|
|
3877
3886
|
this.metaService = metaService;
|
|
3878
3887
|
this.translateService = translateService;
|
|
3879
|
-
this.http = http;
|
|
3880
|
-
this.metaForm = this.fb.group({});
|
|
3881
3888
|
this.formActive$ = this.metaService.formReadOnlyState;
|
|
3882
|
-
|
|
3883
|
-
|
|
3884
|
-
|
|
3885
|
-
|
|
3889
|
+
}
|
|
3890
|
+
ngOnChanges(changes) {
|
|
3891
|
+
/**
|
|
3892
|
+
* Re-wire form subscription whenever the input form instance changes.
|
|
3893
|
+
* This is critical because the component does NOT own the FormGroup;
|
|
3894
|
+
* it is provided by the parent.
|
|
3895
|
+
*/
|
|
3896
|
+
if (changes['metaForm']) {
|
|
3897
|
+
this.rewireFormSubscription();
|
|
3898
|
+
}
|
|
3899
|
+
/**
|
|
3900
|
+
* If metadata, initial values, or disabled flag changes, rebuild/sync the form.
|
|
3901
|
+
* Safe to call multiple times.
|
|
3902
|
+
*/
|
|
3903
|
+
if (changes['metaFormControls'] ||
|
|
3904
|
+
changes['metaFormValues'] ||
|
|
3905
|
+
changes['disableForm']) {
|
|
3906
|
+
if (!this.metaForm) {
|
|
3907
|
+
// Fallback: if caller forgets to pass metaForm, create one.
|
|
3908
|
+
this.metaForm = this.fb.group({});
|
|
3909
|
+
this.rewireFormSubscription();
|
|
3910
|
+
}
|
|
3911
|
+
this.syncForm();
|
|
3912
|
+
}
|
|
3886
3913
|
}
|
|
3887
3914
|
/**
|
|
3888
|
-
* Backwards compatible API
|
|
3889
|
-
*
|
|
3915
|
+
* Backwards compatible API:
|
|
3916
|
+
* Older code may call createForm(controls). Keep it working.
|
|
3890
3917
|
*/
|
|
3891
3918
|
createForm(controls) {
|
|
3892
3919
|
if (controls)
|
|
3893
3920
|
this.metaFormControls = controls;
|
|
3921
|
+
if (!this.metaForm) {
|
|
3922
|
+
this.metaForm = this.fb.group({});
|
|
3923
|
+
this.rewireFormSubscription();
|
|
3924
|
+
}
|
|
3894
3925
|
this.syncForm();
|
|
3895
3926
|
}
|
|
3896
3927
|
/**
|
|
3897
|
-
* Main sync:
|
|
3898
|
-
*
|
|
3899
|
-
*
|
|
3900
|
-
*
|
|
3928
|
+
* Main sync:
|
|
3929
|
+
* - ensures controls exist
|
|
3930
|
+
* - applies validators
|
|
3931
|
+
* - patches values (without emitting)
|
|
3932
|
+
* - applies disabled state
|
|
3933
|
+
* - binds dependencies (safe rebind)
|
|
3934
|
+
* - recomputes validity
|
|
3901
3935
|
*/
|
|
3902
3936
|
syncForm() {
|
|
3903
3937
|
const flatControls = this.flattenControls(this.metaFormControls);
|
|
@@ -3913,9 +3947,11 @@ class MetaFormAbstract {
|
|
|
3913
3947
|
this.metaForm.disable({ emitEvent: false });
|
|
3914
3948
|
else
|
|
3915
3949
|
this.metaForm.enable({ emitEvent: false });
|
|
3916
|
-
// 4) Bind dependencies if needed (rebind when
|
|
3950
|
+
// 4) Bind dependencies if needed (rebind when metadata changes)
|
|
3917
3951
|
this.bindDependenciesIfNeeded(flatControls);
|
|
3918
|
-
// 5)
|
|
3952
|
+
// 5) Recompute validity after all changes
|
|
3953
|
+
this.metaForm.updateValueAndValidity({ emitEvent: false });
|
|
3954
|
+
// 6) Notify that the form is ready
|
|
3919
3955
|
this.metaService.setFormBuildCompletition(true);
|
|
3920
3956
|
}
|
|
3921
3957
|
/**
|
|
@@ -3926,16 +3962,13 @@ class MetaFormAbstract {
|
|
|
3926
3962
|
flattenControls(input) {
|
|
3927
3963
|
if (!Array.isArray(input))
|
|
3928
3964
|
return [];
|
|
3929
|
-
// already flat
|
|
3930
3965
|
const isFlat = input.every((x) => !!x?.configuration?.key);
|
|
3931
3966
|
if (isFlat)
|
|
3932
3967
|
return input;
|
|
3933
|
-
// grouped [{ ctrl: [...] }, ...]
|
|
3934
3968
|
const flattened = input.flatMap((x) => Array.isArray(x?.ctrl) ? x.ctrl : x);
|
|
3935
3969
|
return flattened.filter((x) => !!x?.configuration?.key);
|
|
3936
3970
|
}
|
|
3937
3971
|
metaSignature(controls) {
|
|
3938
|
-
// Key list is enough to detect changes; also include type to handle swaps.
|
|
3939
3972
|
return (controls ?? [])
|
|
3940
3973
|
.map((c) => `${c?.configuration?.key ?? ''}:${c?.configuration?.type ?? ''}`)
|
|
3941
3974
|
.join('|');
|
|
@@ -3950,7 +3983,6 @@ class MetaFormAbstract {
|
|
|
3950
3983
|
const sig = this.metaSignature(flatControls);
|
|
3951
3984
|
if (sig === this.lastMetaSignature)
|
|
3952
3985
|
return;
|
|
3953
|
-
// cleanup previous dependency subscriptions
|
|
3954
3986
|
this.cleanupDependencies();
|
|
3955
3987
|
const ctx = {
|
|
3956
3988
|
form: this.metaForm,
|
|
@@ -3959,15 +3991,8 @@ class MetaFormAbstract {
|
|
|
3959
3991
|
getControl: (key) => this.metaForm.get(key) ?? null,
|
|
3960
3992
|
findMeta: (key) => flatControls.find((c) => c?.configuration?.key === key) ?? null,
|
|
3961
3993
|
};
|
|
3962
|
-
/**
|
|
3963
|
-
* Important:
|
|
3964
|
-
* We call setupDependencies AFTER the form is fully built and patched.
|
|
3965
|
-
* The setup function should subscribe to valueChanges and optionally apply initial sync.
|
|
3966
|
-
*/
|
|
3967
3994
|
const maybeCleanup = this.setupDependencies(ctx);
|
|
3968
|
-
|
|
3969
|
-
* If your setupDependencies wants to return a cleanup fn, we support it.
|
|
3970
|
-
*/
|
|
3995
|
+
// Allow setupDependencies to return a cleanup function (optional)
|
|
3971
3996
|
if (typeof maybeCleanup === 'function') {
|
|
3972
3997
|
this.dependencyCleanup.push(maybeCleanup);
|
|
3973
3998
|
}
|
|
@@ -3983,6 +4008,10 @@ class MetaFormAbstract {
|
|
|
3983
4008
|
this.dependencyCleanup = [];
|
|
3984
4009
|
this.lastMetaSignature = '';
|
|
3985
4010
|
}
|
|
4011
|
+
/**
|
|
4012
|
+
* Creates missing controls, applies validators, and removes stale controls.
|
|
4013
|
+
* Also attaches "clear server error on edit" subscriptions per control.
|
|
4014
|
+
*/
|
|
3986
4015
|
ensureControls(controls) {
|
|
3987
4016
|
(controls ?? []).forEach((control) => {
|
|
3988
4017
|
const key = control?.configuration?.key;
|
|
@@ -3992,69 +4021,58 @@ class MetaFormAbstract {
|
|
|
3992
4021
|
if (!this.metaForm.contains(key)) {
|
|
3993
4022
|
this.metaForm.addControl(key, this.fb.control(getFieldType(control)));
|
|
3994
4023
|
}
|
|
3995
|
-
// Apply validators
|
|
4024
|
+
// Apply sync validators
|
|
3996
4025
|
this.applyValidators(control);
|
|
4026
|
+
// Clear server-side errors when user edits this field
|
|
4027
|
+
this.bindClearServerError(key);
|
|
3997
4028
|
// Disable if metadata says so
|
|
3998
4029
|
if (control?.disable) {
|
|
3999
4030
|
this.metaForm.get(key)?.disable({ emitEvent: false });
|
|
4000
4031
|
}
|
|
4001
4032
|
});
|
|
4002
|
-
// Remove stale controls
|
|
4033
|
+
// Remove stale controls when metadata changes
|
|
4003
4034
|
const allowed = new Set((controls ?? [])
|
|
4004
4035
|
.map((c) => c?.configuration?.key)
|
|
4005
4036
|
.filter(Boolean));
|
|
4006
4037
|
Object.keys(this.metaForm.controls).forEach((k) => {
|
|
4007
4038
|
if (!allowed.has(k)) {
|
|
4039
|
+
this.clearServerErrorSubs.get(k)?.unsubscribe();
|
|
4040
|
+
this.clearServerErrorSubs.delete(k);
|
|
4008
4041
|
this.metaForm.removeControl(k);
|
|
4009
4042
|
}
|
|
4010
4043
|
});
|
|
4011
4044
|
}
|
|
4012
4045
|
/**
|
|
4013
|
-
*
|
|
4014
|
-
*
|
|
4015
|
-
*
|
|
4046
|
+
* Removes only server-originated uniqueness errors when the user changes the value.
|
|
4047
|
+
* This prevents a corrected value from staying blocked by an old server error.
|
|
4048
|
+
*
|
|
4049
|
+
* We DO NOT touch other errors (required, pattern, etc.).
|
|
4016
4050
|
*/
|
|
4017
|
-
|
|
4018
|
-
|
|
4019
|
-
|
|
4020
|
-
|
|
4021
|
-
|
|
4022
|
-
|
|
4023
|
-
|
|
4024
|
-
|
|
4025
|
-
|
|
4026
|
-
|
|
4027
|
-
|
|
4028
|
-
|
|
4029
|
-
|
|
4030
|
-
|
|
4031
|
-
|
|
4032
|
-
|
|
4033
|
-
|
|
4034
|
-
|
|
4035
|
-
|
|
4036
|
-
|
|
4037
|
-
|
|
4038
|
-
if (payload[controlKey] == null)
|
|
4039
|
-
payload[controlKey] = val;
|
|
4040
|
-
return this.http.put(av.apiUrl, payload);
|
|
4041
|
-
}), map((res) => {
|
|
4042
|
-
if (res?.valid === false) {
|
|
4043
|
-
const msg = Array.isArray(res?.errors) && res.errors.length
|
|
4044
|
-
? res.errors[0]
|
|
4045
|
-
: null;
|
|
4046
|
-
// InlineFieldError reads errors['uniqueEntry']
|
|
4047
|
-
return {
|
|
4048
|
-
uniqueEntry: msg ?? 'VALIDATION_MESSAGE.VALUE_IS_ALREADY_IN_USE',
|
|
4049
|
-
};
|
|
4050
|
-
}
|
|
4051
|
-
return null;
|
|
4052
|
-
}), catchError(() => of(null)));
|
|
4053
|
-
};
|
|
4051
|
+
bindClearServerError(key) {
|
|
4052
|
+
if (this.clearServerErrorSubs.has(key))
|
|
4053
|
+
return;
|
|
4054
|
+
const ctrl = this.metaForm.get(key);
|
|
4055
|
+
if (!ctrl)
|
|
4056
|
+
return;
|
|
4057
|
+
const sub = ctrl.valueChanges.subscribe(() => {
|
|
4058
|
+
const errors = ctrl.errors;
|
|
4059
|
+
if (!errors)
|
|
4060
|
+
return;
|
|
4061
|
+
const hasServerUnique = errors['uniqueEntry'] !== undefined || errors['unique'] !== undefined;
|
|
4062
|
+
if (!hasServerUnique)
|
|
4063
|
+
return;
|
|
4064
|
+
const { uniqueEntry, unique, ...rest } = errors;
|
|
4065
|
+
ctrl.setErrors(Object.keys(rest).length ? rest : null, {
|
|
4066
|
+
emitEvent: false,
|
|
4067
|
+
});
|
|
4068
|
+
// Recompute the parent form validity so UI can enable Save immediately.
|
|
4069
|
+
this.metaForm.updateValueAndValidity({ emitEvent: false });
|
|
4070
|
+
});
|
|
4071
|
+
this.clearServerErrorSubs.set(key, sub);
|
|
4054
4072
|
}
|
|
4055
4073
|
/**
|
|
4056
|
-
* Applies
|
|
4057
|
-
* Uses emitEvent:
|
|
4074
|
+
* Applies synchronous validators based on metadata.
|
|
4075
|
+
* Uses emitEvent:false to avoid unnecessary loops.
|
|
4058
4076
|
*/
|
|
4059
4077
|
applyValidators(control) {
|
|
4060
4078
|
const key = control?.configuration?.key;
|
|
@@ -4076,11 +4094,9 @@ class MetaFormAbstract {
|
|
|
4076
4094
|
}
|
|
4077
4095
|
if (control?.mandatory)
|
|
4078
4096
|
validators.push(Validators.required);
|
|
4079
|
-
if (control?.mandatory && control?.configuration?.type === ControlType.TEXT) {
|
|
4080
|
-
validators.push(WhiteSpaceValidator.noWhiteSpaceValidator);
|
|
4081
|
-
}
|
|
4082
4097
|
if (control?.mandatory &&
|
|
4083
|
-
control?.configuration?.type === ControlType.
|
|
4098
|
+
(control?.configuration?.type === ControlType.TEXT ||
|
|
4099
|
+
control?.configuration?.type === ControlType.TEXT_AREA)) {
|
|
4084
4100
|
validators.push(WhiteSpaceValidator.noWhiteSpaceValidator);
|
|
4085
4101
|
}
|
|
4086
4102
|
if (control?.configuration?.type === ControlType.TEXT ||
|
|
@@ -4090,17 +4106,22 @@ class MetaFormAbstract {
|
|
|
4090
4106
|
const ctrl = this.metaForm.get(key);
|
|
4091
4107
|
if (!ctrl)
|
|
4092
4108
|
return;
|
|
4093
|
-
// sync validators
|
|
4094
4109
|
ctrl.setValidators(validators);
|
|
4095
|
-
// async validators (unique/domain etc.)
|
|
4096
|
-
const asyncV = this.buildAsyncValidator(control);
|
|
4097
|
-
if (asyncV)
|
|
4098
|
-
ctrl.setAsyncValidators(asyncV);
|
|
4099
|
-
else
|
|
4100
|
-
ctrl.clearAsyncValidators();
|
|
4101
|
-
// refresh status (VALID/INVALID/PENDING)
|
|
4102
4110
|
ctrl.updateValueAndValidity({ emitEvent: false });
|
|
4103
4111
|
}
|
|
4112
|
+
/**
|
|
4113
|
+
* Subscribes MetaFormService to the correct FormGroup instance.
|
|
4114
|
+
* Must run after @Input metaForm is available.
|
|
4115
|
+
*/
|
|
4116
|
+
rewireFormSubscription() {
|
|
4117
|
+
this.formSub?.unsubscribe();
|
|
4118
|
+
if (!this.metaForm) {
|
|
4119
|
+
this.metaForm = this.fb.group({});
|
|
4120
|
+
}
|
|
4121
|
+
this.formSub = this.metaForm.valueChanges.subscribe((ev) => {
|
|
4122
|
+
this.metaService.setFormEvent(ev);
|
|
4123
|
+
});
|
|
4124
|
+
}
|
|
4104
4125
|
onSubmit() {
|
|
4105
4126
|
this.onFormSubmit.emit(this.metaForm);
|
|
4106
4127
|
}
|
|
@@ -4112,18 +4133,21 @@ class MetaFormAbstract {
|
|
|
4112
4133
|
this.metaForm.patchValue(this.metaFormValues, { emitEvent: false });
|
|
4113
4134
|
this.metaForm.markAsPristine();
|
|
4114
4135
|
this.metaForm.markAsUntouched();
|
|
4136
|
+
this.metaForm.updateValueAndValidity({ emitEvent: false });
|
|
4115
4137
|
}
|
|
4116
4138
|
ngOnDestroy() {
|
|
4117
4139
|
this.cleanupDependencies();
|
|
4118
|
-
|
|
4119
|
-
|
|
4140
|
+
this.formSub?.unsubscribe();
|
|
4141
|
+
this.formSub = undefined;
|
|
4142
|
+
this.clearServerErrorSubs.forEach((s) => s.unsubscribe());
|
|
4143
|
+
this.clearServerErrorSubs.clear();
|
|
4120
4144
|
}
|
|
4121
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormAbstract, deps: [{ token: i2$3.FormBuilder }, { token: MetaFormService }, { token: i1$2.TranslateService }
|
|
4122
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: MetaFormAbstract, isStandalone: true, inputs: { metaForm: "metaForm", metaFormValues: "metaFormValues", metaFormControls: "metaFormControls", setupDependencies: "setupDependencies", loading: "loading", disableForm: "disableForm", formButtons: "formButtons", groupForm: "groupForm", formStyle: "formStyle" }, outputs: { onFormSubmit: "onFormSubmit", onFormCancel: "onFormCancel" }, ngImport: i0 });
|
|
4145
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormAbstract, deps: [{ token: i2$3.FormBuilder }, { token: MetaFormService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
4146
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: MetaFormAbstract, isStandalone: true, inputs: { metaForm: "metaForm", metaFormValues: "metaFormValues", metaFormControls: "metaFormControls", setupDependencies: "setupDependencies", loading: "loading", disableForm: "disableForm", formButtons: "formButtons", groupForm: "groupForm", formStyle: "formStyle" }, outputs: { onFormSubmit: "onFormSubmit", onFormCancel: "onFormCancel" }, usesOnChanges: true, ngImport: i0 });
|
|
4123
4147
|
}
|
|
4124
4148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormAbstract, decorators: [{
|
|
4125
4149
|
type: Directive
|
|
4126
|
-
}], ctorParameters: () => [{ type: i2$3.FormBuilder }, { type: MetaFormService }, { type: i1$2.TranslateService }
|
|
4150
|
+
}], ctorParameters: () => [{ type: i2$3.FormBuilder }, { type: MetaFormService }, { type: i1$2.TranslateService }], propDecorators: { metaForm: [{
|
|
4127
4151
|
type: Input
|
|
4128
4152
|
}], metaFormValues: [{
|
|
4129
4153
|
type: Input
|
|
@@ -4286,7 +4310,7 @@ class ObjectItemDialogComponent {
|
|
|
4286
4310
|
rows: 20,
|
|
4287
4311
|
selectionType: tableSelectionType.RADIO_BTN,
|
|
4288
4312
|
};
|
|
4289
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ObjectItemDialogComponent, deps: [{ token: i1$
|
|
4313
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ObjectItemDialogComponent, deps: [{ token: i1$4.DynamicDialogRef }, { token: i1$4.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component });
|
|
4290
4314
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ObjectItemDialogComponent, isStandalone: true, selector: "phoenix-object-item-dialog", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<div style=\"overflow: hidden; padding-bottom: 50px\">\n <phoenix-table\n #table\n [data]=\"tableData\"\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n (checkBoxSelection)=\"onSelectionChanged($event)\"\n >\n </phoenix-table>\n</div>\n<div class=\"absolute bottom-0 right-0 p-4\">\n <div class=\"flex gap-2\">\n <ng-container *ngFor=\"let action of actions\">\n <p-button\n [label]=\"action.label | translate\"\n [icon]=\"action.icon || ''\"\n [severity]=\"action.severity || 'primary'\"\n [disabled]=\"action.id === 'assign' && !hasSelection\"\n [id]=\"action.id\"\n (onClick)=\"actionClick(action.id)\"\n size=\"small\"\n ></p-button>\n </ng-container>\n</div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["data", "columns", "selectedColumnsInput", "tableConfiguration", "filters"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
|
|
4291
4315
|
}
|
|
4292
4316
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ObjectItemDialogComponent, decorators: [{
|
|
@@ -4299,7 +4323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4299
4323
|
TableComponent,
|
|
4300
4324
|
ButtonModule
|
|
4301
4325
|
], template: "<div style=\"overflow: hidden; padding-bottom: 50px\">\n <phoenix-table\n #table\n [data]=\"tableData\"\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n (checkBoxSelection)=\"onSelectionChanged($event)\"\n >\n </phoenix-table>\n</div>\n<div class=\"absolute bottom-0 right-0 p-4\">\n <div class=\"flex gap-2\">\n <ng-container *ngFor=\"let action of actions\">\n <p-button\n [label]=\"action.label | translate\"\n [icon]=\"action.icon || ''\"\n [severity]=\"action.severity || 'primary'\"\n [disabled]=\"action.id === 'assign' && !hasSelection\"\n [id]=\"action.id\"\n (onClick)=\"actionClick(action.id)\"\n size=\"small\"\n ></p-button>\n </ng-container>\n</div>\n</div>\n" }]
|
|
4302
|
-
}], ctorParameters: () => [{ type: i1$
|
|
4326
|
+
}], ctorParameters: () => [{ type: i1$4.DynamicDialogRef }, { type: i1$4.DynamicDialogConfig }], propDecorators: { table: [{
|
|
4303
4327
|
type: ViewChild,
|
|
4304
4328
|
args: ['table']
|
|
4305
4329
|
}] } });
|
|
@@ -4988,25 +5012,22 @@ class InlineFieldError {
|
|
|
4988
5012
|
this.sub$?.unsubscribe();
|
|
4989
5013
|
}
|
|
4990
5014
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InlineFieldError, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4991
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5015
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InlineFieldError, isStandalone: true, selector: "phoenix-inline-field-error", inputs: { ctrl: "ctrl" }, usesOnChanges: true, ngImport: i0, template: `
|
|
4992
5016
|
<div style="height: 1px;">
|
|
4993
|
-
|
|
4994
|
-
<
|
|
4995
|
-
|
|
4996
|
-
|
|
4997
|
-
|
|
4998
|
-
|
|
4999
|
-
|
|
5000
|
-
|
|
5001
|
-
|
|
5002
|
-
|
|
5003
|
-
|
|
5004
|
-
|
|
5005
|
-
}
|
|
5006
|
-
</div>
|
|
5007
|
-
}
|
|
5017
|
+
<div *ngIf="note" [@slideInOut] class="static">
|
|
5018
|
+
<small class="text-blue-700" *ngIf="note.type === 'info'; else warn">
|
|
5019
|
+
<i class="pi pi-spin pi-spinner" style="font-size: 11px"></i>
|
|
5020
|
+
{{ note.content }}
|
|
5021
|
+
</small>
|
|
5022
|
+
<ng-template #warn>
|
|
5023
|
+
<small class="p-error">
|
|
5024
|
+
<i style="font-size: 11px" class="pi pi-exclamation-circle"></i>
|
|
5025
|
+
{{ note }}
|
|
5026
|
+
</small>
|
|
5027
|
+
</ng-template>
|
|
5028
|
+
</div>
|
|
5008
5029
|
</div>
|
|
5009
|
-
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], animations: [
|
|
5030
|
+
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
5010
5031
|
trigger('slideInOut', [
|
|
5011
5032
|
transition(':enter', [
|
|
5012
5033
|
style({ transform: 'translateY(-60%)' }),
|
|
@@ -5032,21 +5053,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
5032
5053
|
]),
|
|
5033
5054
|
], template: `
|
|
5034
5055
|
<div style="height: 1px;">
|
|
5035
|
-
|
|
5036
|
-
<
|
|
5037
|
-
|
|
5038
|
-
|
|
5039
|
-
|
|
5040
|
-
|
|
5041
|
-
|
|
5042
|
-
|
|
5043
|
-
|
|
5044
|
-
|
|
5045
|
-
|
|
5046
|
-
|
|
5047
|
-
}
|
|
5048
|
-
</div>
|
|
5049
|
-
}
|
|
5056
|
+
<div *ngIf="note" [@slideInOut] class="static">
|
|
5057
|
+
<small class="text-blue-700" *ngIf="note.type === 'info'; else warn">
|
|
5058
|
+
<i class="pi pi-spin pi-spinner" style="font-size: 11px"></i>
|
|
5059
|
+
{{ note.content }}
|
|
5060
|
+
</small>
|
|
5061
|
+
<ng-template #warn>
|
|
5062
|
+
<small class="p-error">
|
|
5063
|
+
<i style="font-size: 11px" class="pi pi-exclamation-circle"></i>
|
|
5064
|
+
{{ note }}
|
|
5065
|
+
</small>
|
|
5066
|
+
</ng-template>
|
|
5067
|
+
</div>
|
|
5050
5068
|
</div>
|
|
5051
5069
|
` }]
|
|
5052
5070
|
}], ctorParameters: () => [{ type: i1$2.TranslateService }], propDecorators: { ctrl: [{
|
|
@@ -5305,7 +5323,7 @@ class MetaCheckboxComponent extends BaseMetaField {
|
|
|
5305
5323
|
{{ control | fieldLabel: currentLang | translate }}
|
|
5306
5324
|
<span *ngIf="control.mandatory" class="red-asterisk">*</span></label
|
|
5307
5325
|
>
|
|
5308
|
-
</div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4
|
|
5326
|
+
</div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: FieldLabelPipe, name: "fieldLabel" }] });
|
|
5309
5327
|
}
|
|
5310
5328
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaCheckboxComponent, decorators: [{
|
|
5311
5329
|
type: Component,
|
|
@@ -7388,7 +7406,7 @@ class MetaUploadComponent extends BaseMetaField {
|
|
|
7388
7406
|
[ctrl]="ctrl"
|
|
7389
7407
|
></phoenix-inline-field-error>
|
|
7390
7408
|
</div>
|
|
7391
|
-
`, isInline: true, styles: ["input[type=file]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "directive", type: i4$
|
|
7409
|
+
`, isInline: true, styles: ["input[type=file]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "directive", type: i4$3.KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
|
|
7392
7410
|
}
|
|
7393
7411
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaUploadComponent, decorators: [{
|
|
7394
7412
|
type: Component,
|
|
@@ -7684,8 +7702,8 @@ class ReadOnlyInputComponent {
|
|
|
7684
7702
|
textarea.innerHTML = text;
|
|
7685
7703
|
return textarea.value;
|
|
7686
7704
|
}
|
|
7687
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ReadOnlyInputComponent, deps: [{ token: i1$
|
|
7688
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ReadOnlyInputComponent, isStandalone: true, selector: "phoenix-read-only-input", inputs: { control: "control", metaform: "metaform" }, ngImport: i0, template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n@switch (control.configuration.type) {\n @case (ctrlType.TEXT_EDITOR) {\n @if (value) {\n <div\n [attr.data-cy]=\"'editor-' + control?.id\"\n class=\"read-only-editor-content\"\n [innerHTML]=\"value\"\n ></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.TEXT_AREA) {\n <div\n class=\"w-full mt-3 mb-2 font-semibold text-500 whitespace-pre-line\"\n [attr.data-cy]=\"'textarea-' + control?.id\"\n [hidden]=\"control?.hidden\"\n [innerText]=\"value\"\n ></div>\n }\n\n @case (ctrlType.SWITCH) {\n @if (value?.isBoolean) {\n <p-toggleSwitch\n [attr.data-cy]=\"'switch-' + control?.id\"\n styleClass=\"mt-2 ml-1 mr-1\"\n [disabled]=\"true\"\n [(ngModel)]=\"value.res\"\n ></p-toggleSwitch>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.DATE) {\n @if (value) {\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | date }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.START_DUE_DATE) {\n @if (value?.startDate) {\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n class=\"flex font-semibold text-500 mt-3 mb-2\"\n >\n <span style=\"padding-top: 3px\">{{ value.startDate | date }}</span>\n <div class=\"flex align-items-center p-2\">\n <i class=\"pi pi-arrow-right text-sm\" style=\"color: 'var(--surface-600)'\"></i>\n </div>\n <span style=\"padding-top: 3px\">{{ value.endDate | date }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.CHECKBOX) {\n @if (value) {\n <p-checkbox\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n styleClass=\"mt-3\"\n [(ngModel)]=\"value\"\n [binary]=\"true\"\n inputId=\"binary\"\n [disabled]=\"true\"\n ></p-checkbox>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.LINKS_DATA) {\n @if (value) {\n <div\n class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n [attr.data-cy]=\"'link-' + control?.id\"\n >\n @for (item of value; track item) {\n <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.ASSIGN) {\n @if (value?.name) {\n <div [attr.data-cy]=\"'number-' + control?.id\">\n <div>\n <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n <div class=\"person-wrap\">\n <div class=\"person-avatar\">\n {{ value?.name?.toUpperCase().charAt(0) }}\n </div>\n <div>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ value?.name }}\n </p>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ value?.function }}\n </p>\n </div>\n </div>\n </p-button>\n\n <p-popover #op [dismissable]=\"true\">\n <div>\n <span class=\"block mb-2\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ value.email ?? ' --' }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i>{{ value.phone ?? ' --' }}\n </p>\n </div>\n </p-popover>\n </div>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.CURRENCY) {\n @if (value) {\n <div\n [attr.data-cy]=\"'currency-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }} €\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.PASSWORD) {\n @if (value) {\n <div\n [attr.data-cy]=\"'password-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n <p-password\n class=\"ng-invalid ng-dirty\"\n [disabled]=\"true\"\n [(ngModel)]=\"value\"\n [feedback]=\"false\"\n ></p-password>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.SS_OPTION_OBJECT_BASED) {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value.value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.MS_OPTION) {\n @if (value) {\n <div\n [attr.data-cy]=\"'MS-OPTION-OBJECT-BASED-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 white-space-nowrap overflow-hidden\"\n >\n {{ value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.SS_OPTION) {\n @if (control?.configuration?.flagMode) {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 flex align-items-center gap-2\"\n >\n @if (value?.key) {\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + value.key.toLowerCase()\"\n style=\"width: 22px\"\n alt=\"\"\n />\n }\n <span>{{ value.userFriendlyMessage }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n } @else {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n }\n\n @case (ctrlType.NUMBER) {\n @if (value != null) {\n <div\n [attr.data-cy]=\"'number-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @default {\n @if (value) {\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | stripHtml }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n}\n\n<ng-template #fallBack>\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n --\n </div>\n</ng-template>", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .read-only-editor-content{margin-top:.75rem;margin-bottom:.5rem;font-weight:600;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$6.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i2$9.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: StripHtmlPipe, name: "stripHtml" }] });
|
|
7705
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ReadOnlyInputComponent, deps: [{ token: i1$5.DomSanitizer }, { token: i1$2.TranslateService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7706
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ReadOnlyInputComponent, isStandalone: true, selector: "phoenix-read-only-input", inputs: { control: "control", metaform: "metaform" }, ngImport: i0, template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n@switch (control.configuration.type) {\n @case (ctrlType.TEXT_EDITOR) {\n @if (value) {\n <div\n [attr.data-cy]=\"'editor-' + control?.id\"\n class=\"read-only-editor-content\"\n [innerHTML]=\"value\"\n ></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.TEXT_AREA) {\n <div\n class=\"w-full mt-3 mb-2 font-semibold text-500 whitespace-pre-line\"\n [attr.data-cy]=\"'textarea-' + control?.id\"\n [hidden]=\"control?.hidden\"\n [innerText]=\"value\"\n ></div>\n }\n\n @case (ctrlType.SWITCH) {\n @if (value?.isBoolean) {\n <p-toggleSwitch\n [attr.data-cy]=\"'switch-' + control?.id\"\n styleClass=\"mt-2 ml-1 mr-1\"\n [disabled]=\"true\"\n [(ngModel)]=\"value.res\"\n ></p-toggleSwitch>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.DATE) {\n @if (value) {\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | date }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.START_DUE_DATE) {\n @if (value?.startDate) {\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n class=\"flex font-semibold text-500 mt-3 mb-2\"\n >\n <span style=\"padding-top: 3px\">{{ value.startDate | date }}</span>\n <div class=\"flex align-items-center p-2\">\n <i class=\"pi pi-arrow-right text-sm\" style=\"color: 'var(--surface-600)'\"></i>\n </div>\n <span style=\"padding-top: 3px\">{{ value.endDate | date }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.CHECKBOX) {\n @if (value) {\n <p-checkbox\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n styleClass=\"mt-3\"\n [(ngModel)]=\"value\"\n [binary]=\"true\"\n inputId=\"binary\"\n [disabled]=\"true\"\n ></p-checkbox>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.LINKS_DATA) {\n @if (value) {\n <div\n class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n [attr.data-cy]=\"'link-' + control?.id\"\n >\n @for (item of value; track item) {\n <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.ASSIGN) {\n @if (value?.name) {\n <div [attr.data-cy]=\"'number-' + control?.id\">\n <div>\n <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n <div class=\"person-wrap\">\n <div class=\"person-avatar\">\n {{ value?.name?.toUpperCase().charAt(0) }}\n </div>\n <div>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ value?.name }}\n </p>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ value?.function }}\n </p>\n </div>\n </div>\n </p-button>\n\n <p-popover #op [dismissable]=\"true\">\n <div>\n <span class=\"block mb-2\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ value.email ?? ' --' }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i>{{ value.phone ?? ' --' }}\n </p>\n </div>\n </p-popover>\n </div>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.CURRENCY) {\n @if (value) {\n <div\n [attr.data-cy]=\"'currency-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }} €\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.PASSWORD) {\n @if (value) {\n <div\n [attr.data-cy]=\"'password-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n <p-password\n class=\"ng-invalid ng-dirty\"\n [disabled]=\"true\"\n [(ngModel)]=\"value\"\n [feedback]=\"false\"\n ></p-password>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.SS_OPTION_OBJECT_BASED) {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value.value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.MS_OPTION) {\n @if (value) {\n <div\n [attr.data-cy]=\"'MS-OPTION-OBJECT-BASED-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 white-space-nowrap overflow-hidden\"\n >\n {{ value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.SS_OPTION) {\n @if (control?.configuration?.flagMode) {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 flex align-items-center gap-2\"\n >\n @if (value?.key) {\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + value.key.toLowerCase()\"\n style=\"width: 22px\"\n alt=\"\"\n />\n }\n <span>{{ value.userFriendlyMessage }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n } @else {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n }\n\n @case (ctrlType.NUMBER) {\n @if (value != null) {\n <div\n [attr.data-cy]=\"'number-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @default {\n @if (value) {\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | stripHtml }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n}\n\n<ng-template #fallBack>\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n --\n </div>\n</ng-template>", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .read-only-editor-content{margin-top:.75rem;margin-bottom:.5rem;font-weight:600;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$6.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i2$9.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: StripHtmlPipe, name: "stripHtml" }] });
|
|
7689
7707
|
}
|
|
7690
7708
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ReadOnlyInputComponent, decorators: [{
|
|
7691
7709
|
type: Component,
|
|
@@ -7703,7 +7721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7703
7721
|
ButtonModule,
|
|
7704
7722
|
StripHtmlPipe,
|
|
7705
7723
|
], template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n@switch (control.configuration.type) {\n @case (ctrlType.TEXT_EDITOR) {\n @if (value) {\n <div\n [attr.data-cy]=\"'editor-' + control?.id\"\n class=\"read-only-editor-content\"\n [innerHTML]=\"value\"\n ></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.TEXT_AREA) {\n <div\n class=\"w-full mt-3 mb-2 font-semibold text-500 whitespace-pre-line\"\n [attr.data-cy]=\"'textarea-' + control?.id\"\n [hidden]=\"control?.hidden\"\n [innerText]=\"value\"\n ></div>\n }\n\n @case (ctrlType.SWITCH) {\n @if (value?.isBoolean) {\n <p-toggleSwitch\n [attr.data-cy]=\"'switch-' + control?.id\"\n styleClass=\"mt-2 ml-1 mr-1\"\n [disabled]=\"true\"\n [(ngModel)]=\"value.res\"\n ></p-toggleSwitch>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.DATE) {\n @if (value) {\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | date }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.START_DUE_DATE) {\n @if (value?.startDate) {\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n class=\"flex font-semibold text-500 mt-3 mb-2\"\n >\n <span style=\"padding-top: 3px\">{{ value.startDate | date }}</span>\n <div class=\"flex align-items-center p-2\">\n <i class=\"pi pi-arrow-right text-sm\" style=\"color: 'var(--surface-600)'\"></i>\n </div>\n <span style=\"padding-top: 3px\">{{ value.endDate | date }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.CHECKBOX) {\n @if (value) {\n <p-checkbox\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n styleClass=\"mt-3\"\n [(ngModel)]=\"value\"\n [binary]=\"true\"\n inputId=\"binary\"\n [disabled]=\"true\"\n ></p-checkbox>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.LINKS_DATA) {\n @if (value) {\n <div\n class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n [attr.data-cy]=\"'link-' + control?.id\"\n >\n @for (item of value; track item) {\n <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.ASSIGN) {\n @if (value?.name) {\n <div [attr.data-cy]=\"'number-' + control?.id\">\n <div>\n <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n <div class=\"person-wrap\">\n <div class=\"person-avatar\">\n {{ value?.name?.toUpperCase().charAt(0) }}\n </div>\n <div>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ value?.name }}\n </p>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ value?.function }}\n </p>\n </div>\n </div>\n </p-button>\n\n <p-popover #op [dismissable]=\"true\">\n <div>\n <span class=\"block mb-2\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ value.email ?? ' --' }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i>{{ value.phone ?? ' --' }}\n </p>\n </div>\n </p-popover>\n </div>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.CURRENCY) {\n @if (value) {\n <div\n [attr.data-cy]=\"'currency-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }} €\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.PASSWORD) {\n @if (value) {\n <div\n [attr.data-cy]=\"'password-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n <p-password\n class=\"ng-invalid ng-dirty\"\n [disabled]=\"true\"\n [(ngModel)]=\"value\"\n [feedback]=\"false\"\n ></p-password>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.SS_OPTION_OBJECT_BASED) {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value.value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.MS_OPTION) {\n @if (value) {\n <div\n [attr.data-cy]=\"'MS-OPTION-OBJECT-BASED-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 white-space-nowrap overflow-hidden\"\n >\n {{ value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.SS_OPTION) {\n @if (control?.configuration?.flagMode) {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 flex align-items-center gap-2\"\n >\n @if (value?.key) {\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + value.key.toLowerCase()\"\n style=\"width: 22px\"\n alt=\"\"\n />\n }\n <span>{{ value.userFriendlyMessage }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n } @else {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n }\n\n @case (ctrlType.NUMBER) {\n @if (value != null) {\n <div\n [attr.data-cy]=\"'number-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @default {\n @if (value) {\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | stripHtml }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n}\n\n<ng-template #fallBack>\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n --\n </div>\n</ng-template>", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .read-only-editor-content{margin-top:.75rem;margin-bottom:.5rem;font-weight:600;color:var(--text-color-secondary)}\n"] }]
|
|
7706
|
-
}], ctorParameters: () => [{ type: i1$
|
|
7724
|
+
}], ctorParameters: () => [{ type: i1$5.DomSanitizer }, { type: i1$2.TranslateService }, { type: i0.DestroyRef }], propDecorators: { control: [{
|
|
7707
7725
|
type: Input
|
|
7708
7726
|
}], metaform: [{
|
|
7709
7727
|
type: Input
|
|
@@ -7711,24 +7729,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7711
7729
|
|
|
7712
7730
|
class MetaFormComponent extends MetaFormAbstract {
|
|
7713
7731
|
ControlType = ControlType;
|
|
7714
|
-
constructor(fb, metaService, translateService
|
|
7715
|
-
super(fb, metaService, translateService
|
|
7732
|
+
constructor(fb, metaService, translateService) {
|
|
7733
|
+
super(fb, metaService, translateService);
|
|
7716
7734
|
}
|
|
7717
|
-
|
|
7718
|
-
* Reacts to changes in metadata or initial values and keeps the form in sync.
|
|
7719
|
-
* This is intentionally idempotent and safe to call multiple times.
|
|
7720
|
-
*/
|
|
7721
|
-
ngOnChanges(simpleChanges) {
|
|
7722
|
-
if (simpleChanges?.['metaFormControls'] ||
|
|
7723
|
-
simpleChanges?.['metaFormValues'] ||
|
|
7724
|
-
simpleChanges?.['disableForm'] ||
|
|
7725
|
-
simpleChanges?.['setupDependencies']) {
|
|
7726
|
-
this.syncForm();
|
|
7727
|
-
this.metaService.setFormDirtyStatus(this.metaForm.dirty);
|
|
7728
|
-
}
|
|
7729
|
-
}
|
|
7730
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormComponent, deps: [{ token: i2$3.FormBuilder }, { token: MetaFormService }, { token: i1$2.TranslateService }, { token: i4.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
7731
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormComponent, isStandalone: true, selector: "phoenix-meta-form", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n <div class=\"grid\">\n @for (control of metaFormControls; track control?.id) {\n @switch (control.configuration.type) {\n @case (ControlType.TEXT) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-text-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-input>\n }\n </div>\n }\n\n @case (ControlType.NUMBER) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'number-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-number-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-number-input>\n }\n </div>\n }\n\n @case (ControlType.TIMEPERIOD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'timeperiod-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-timeperiod\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-timeperiod>\n }\n </div>\n }\n\n @case (ControlType.CURRENCY) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'currency-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-currency\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-currency>\n }\n </div>\n }\n\n @case (ControlType.TEXT_AREA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-area-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-text-area\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-area>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ss-option-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-single-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION_OBJECT_BASED) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ss-option-object-based-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-single-select-object-based\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select-object-based>\n }\n </div>\n }\n\n @case (ControlType.MS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ms-option-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-multiple-select\n [attr.data-cy]=\"'multiSelect-' + control?.id\"\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-multiple-select>\n }\n </div>\n }\n\n @case (ControlType.START_DUE_DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'start-due-date-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-start-due-date\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-start-due-date>\n }\n </div>\n }\n\n @case (ControlType.DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'date-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-calendar\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-calendar>\n }\n </div>\n }\n\n @case (ControlType.TEXT_EDITOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-editor-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-text-editor\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-editor>\n }\n </div>\n }\n\n @case (ControlType.CHECKBOX) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column justify-content-end\"\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-checkbox\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox>\n }\n </div>\n }\n\n @case (ControlType.CHECKBOX_COLOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column justify-content-end\"\n [attr.data-cy]=\"'CHECKBOX_COLOR-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-checkbox-color-picker\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox-color-picker>\n }\n </div>\n }\n\n @case (ControlType.SWITCH) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'switch-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-switch\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-switch>\n }\n </div>\n }\n\n @case (ControlType.SELECT_BUTTON) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'select-button-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-select-button\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-select-button>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-assign-responsible\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-responsible>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN_ASSET) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-assign-asset\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-asset>\n }\n </div>\n }\n\n @case (ControlType.LINKS_DATA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control | fieldCol\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'links-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <!-- <phoenix-meta-object-links\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-object-links> -->\n }\n </div>\n }\n\n @case (ControlType.PASSWORD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'password-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-password-feild\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-password-feild>\n }\n </div>\n }\n\n @case (ControlType.COLOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'color-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-color-picker\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-color-picker>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD) {\n <div\n [style]=\"{ order: control.order }\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD_DRAG_DROP) {\n <div\n [style]=\"{ order: control.order }\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload-dragdrop\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload-dragdrop>\n }\n </div>\n }\n\n @case (ControlType.SLOT) {\n <ng-content\n [select]=\"[control.configuration.key]\"\n ></ng-content>\n }\n }\n }\n </div>\n\n @if (formButtons) {\n <div class=\"flex justify-content-end\">\n <p-button\n class=\"mr-1\"\n [disabled]=\"!metaForm.valid || disableForm\"\n type=\"submit\"\n label=\"{{ 'ACTION.SAVE' | translate }}\"\n [attr.data-cy]=\"'submit-button'\"\n [loading]=\"loading\"\n ></p-button>\n\n <p-button\n [disabled]=\"disableForm\"\n styleClass=\"p-button-link\"\n [text]=\"true\"\n (onClick)=\"onCancel()\"\n label=\"{{ 'ACTION.CANCEL' | translate }}\"\n [attr.data-cy]=\"'cancel-button'\"\n ></p-button>\n </div>\n }\n</form>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MetaTextEditorComponent, selector: "phoenix-meta-text-editor", inputs: ["previewMode", "hideLabel"] }, { kind: "component", type: MetaCheckboxComponent, selector: "phoenix-meta-checkbox" }, { kind: "component", type: MetaTextInputComponent, selector: "phoenix-meta-text-input" }, { kind: "component", type: MetaSingleSelectComponent, selector: "phoenix-meta-single-select" }, { kind: "component", type: MetaStartDueDateComponent, selector: "phoenix-meta-start-due-date", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaTextAreaComponent, selector: "phoenix-meta-text-area" }, { kind: "component", type: MetaMultipleSelectComponent, selector: "phoenix-meta-multiple-select" }, { kind: "component", type: MetaCalendarComponent, selector: "phoenix-meta-calendar" }, { kind: "component", type: MetaUploadComponentDragDrop, selector: "phoenix-meta-upload-dragdrop" }, { kind: "component", type: MetaSwitchComponent, selector: "phoenix-meta-switch" }, { kind: "component", type: MetaPasswordFeildComponent, selector: "phoenix-meta-password-feild" }, { kind: "component", type: MetaTimeperiodComponent, selector: "phoenix-meta-timeperiod", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaCurrencyComponent, selector: "phoenix-meta-currency" }, { kind: "component", type: MetaNumberComponent, selector: "phoenix-meta-number-input" }, { kind: "component", type: MetaAssignResponsibleComponent, selector: "phoenix-meta-assign-responsible", inputs: ["control", "parentForm", "disable"] }, { kind: "component", type: MetaAssignAssetComponent, selector: "phoenix-meta-assign-asset", inputs: ["control", "parentForm", "disable"] }, { kind: "component", type: MetaColorPickerComponent, selector: "phoenix-meta-color-picker" }, { kind: "component", type: ReadOnlyInputComponent, selector: "phoenix-read-only-input", inputs: ["control", "metaform"] }, { kind: "component", type: MetaSelectButtonComponent, selector: "phoenix-meta-select-button" }, { kind: "component", type: MetaUploadComponent, selector: "phoenix-meta-upload" }, { kind: "component", type: MetaSingleSelectObjectBasedComponent, selector: "phoenix-meta-single-select-object-based" }, { kind: "component", type: MetaCheckboxColorPickerComponent, selector: "phoenix-meta-checkbox-color-picker" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }], encapsulation: i0.ViewEncapsulation.None });
|
|
7735
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormComponent, deps: [{ token: i2$3.FormBuilder }, { token: MetaFormService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7736
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormComponent, isStandalone: true, selector: "phoenix-meta-form", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n <div class=\"grid\">\n @for (control of metaFormControls; track control?.id) {\n @switch (control.configuration.type) {\n @case (ControlType.TEXT) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-text-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-input>\n }\n </div>\n }\n\n @case (ControlType.NUMBER) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'number-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-number-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-number-input>\n }\n </div>\n }\n\n @case (ControlType.TIMEPERIOD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'timeperiod-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-timeperiod\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-timeperiod>\n }\n </div>\n }\n\n @case (ControlType.CURRENCY) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'currency-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-currency\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-currency>\n }\n </div>\n }\n\n @case (ControlType.TEXT_AREA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-area-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-text-area\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-area>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ss-option-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-single-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION_OBJECT_BASED) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ss-option-object-based-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-single-select-object-based\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select-object-based>\n }\n </div>\n }\n\n @case (ControlType.MS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ms-option-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-multiple-select\n [attr.data-cy]=\"'multiSelect-' + control?.id\"\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-multiple-select>\n }\n </div>\n }\n\n @case (ControlType.START_DUE_DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'start-due-date-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-start-due-date\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-start-due-date>\n }\n </div>\n }\n\n @case (ControlType.DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'date-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-calendar\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-calendar>\n }\n </div>\n }\n\n @case (ControlType.TEXT_EDITOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-editor-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-text-editor\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-editor>\n }\n </div>\n }\n\n @case (ControlType.CHECKBOX) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column justify-content-end\"\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-checkbox\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox>\n }\n </div>\n }\n\n @case (ControlType.CHECKBOX_COLOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column justify-content-end\"\n [attr.data-cy]=\"'CHECKBOX_COLOR-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-checkbox-color-picker\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox-color-picker>\n }\n </div>\n }\n\n @case (ControlType.SWITCH) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'switch-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-switch\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-switch>\n }\n </div>\n }\n\n @case (ControlType.SELECT_BUTTON) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'select-button-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-select-button\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-select-button>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-assign-responsible\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-responsible>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN_ASSET) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-assign-asset\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-asset>\n }\n </div>\n }\n\n @case (ControlType.LINKS_DATA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control | fieldCol\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'links-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <!-- <phoenix-meta-object-links\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-object-links> -->\n }\n </div>\n }\n\n @case (ControlType.PASSWORD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'password-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-password-feild\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-password-feild>\n }\n </div>\n }\n\n @case (ControlType.COLOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'color-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-color-picker\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-color-picker>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD) {\n <div\n [style]=\"{ order: control.order }\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD_DRAG_DROP) {\n <div\n [style]=\"{ order: control.order }\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload-dragdrop\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload-dragdrop>\n }\n </div>\n }\n\n @case (ControlType.SLOT) {\n <ng-content\n [select]=\"[control.configuration.key]\"\n ></ng-content>\n }\n }\n }\n </div>\n\n @if (formButtons) {\n <div class=\"flex justify-content-end\">\n <p-button\n class=\"mr-1\"\n [disabled]=\"!metaForm.valid || disableForm\"\n type=\"submit\"\n label=\"{{ 'ACTION.SAVE' | translate }}\"\n [attr.data-cy]=\"'submit-button'\"\n [loading]=\"loading\"\n ></p-button>\n\n <p-button\n [disabled]=\"disableForm\"\n styleClass=\"p-button-link\"\n [text]=\"true\"\n (onClick)=\"onCancel()\"\n label=\"{{ 'ACTION.CANCEL' | translate }}\"\n [attr.data-cy]=\"'cancel-button'\"\n ></p-button>\n </div>\n }\n</form>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MetaTextEditorComponent, selector: "phoenix-meta-text-editor", inputs: ["previewMode", "hideLabel"] }, { kind: "component", type: MetaCheckboxComponent, selector: "phoenix-meta-checkbox" }, { kind: "component", type: MetaTextInputComponent, selector: "phoenix-meta-text-input" }, { kind: "component", type: MetaSingleSelectComponent, selector: "phoenix-meta-single-select" }, { kind: "component", type: MetaStartDueDateComponent, selector: "phoenix-meta-start-due-date", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaTextAreaComponent, selector: "phoenix-meta-text-area" }, { kind: "component", type: MetaMultipleSelectComponent, selector: "phoenix-meta-multiple-select" }, { kind: "component", type: MetaCalendarComponent, selector: "phoenix-meta-calendar" }, { kind: "component", type: MetaUploadComponentDragDrop, selector: "phoenix-meta-upload-dragdrop" }, { kind: "component", type: MetaSwitchComponent, selector: "phoenix-meta-switch" }, { kind: "component", type: MetaPasswordFeildComponent, selector: "phoenix-meta-password-feild" }, { kind: "component", type: MetaTimeperiodComponent, selector: "phoenix-meta-timeperiod", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaCurrencyComponent, selector: "phoenix-meta-currency" }, { kind: "component", type: MetaNumberComponent, selector: "phoenix-meta-number-input" }, { kind: "component", type: MetaAssignResponsibleComponent, selector: "phoenix-meta-assign-responsible", inputs: ["control", "parentForm", "disable"] }, { kind: "component", type: MetaAssignAssetComponent, selector: "phoenix-meta-assign-asset", inputs: ["control", "parentForm", "disable"] }, { kind: "component", type: MetaColorPickerComponent, selector: "phoenix-meta-color-picker" }, { kind: "component", type: ReadOnlyInputComponent, selector: "phoenix-read-only-input", inputs: ["control", "metaform"] }, { kind: "component", type: MetaSelectButtonComponent, selector: "phoenix-meta-select-button" }, { kind: "component", type: MetaUploadComponent, selector: "phoenix-meta-upload" }, { kind: "component", type: MetaSingleSelectObjectBasedComponent, selector: "phoenix-meta-single-select-object-based" }, { kind: "component", type: MetaCheckboxColorPickerComponent, selector: "phoenix-meta-checkbox-color-picker" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }], encapsulation: i0.ViewEncapsulation.None });
|
|
7732
7737
|
}
|
|
7733
7738
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormComponent, decorators: [{
|
|
7734
7739
|
type: Component,
|
|
@@ -7763,7 +7768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7763
7768
|
MetaSingleSelectObjectBasedComponent,
|
|
7764
7769
|
MetaCheckboxColorPickerComponent,
|
|
7765
7770
|
], encapsulation: ViewEncapsulation.None, template: "<form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n <div class=\"grid\">\n @for (control of metaFormControls; track control?.id) {\n @switch (control.configuration.type) {\n @case (ControlType.TEXT) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-text-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-input>\n }\n </div>\n }\n\n @case (ControlType.NUMBER) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'number-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-number-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-number-input>\n }\n </div>\n }\n\n @case (ControlType.TIMEPERIOD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'timeperiod-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-timeperiod\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-timeperiod>\n }\n </div>\n }\n\n @case (ControlType.CURRENCY) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'currency-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-currency\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-currency>\n }\n </div>\n }\n\n @case (ControlType.TEXT_AREA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-area-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-text-area\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-area>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ss-option-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-single-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION_OBJECT_BASED) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ss-option-object-based-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-single-select-object-based\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select-object-based>\n }\n </div>\n }\n\n @case (ControlType.MS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'ms-option-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-multiple-select\n [attr.data-cy]=\"'multiSelect-' + control?.id\"\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-multiple-select>\n }\n </div>\n }\n\n @case (ControlType.START_DUE_DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'start-due-date-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-start-due-date\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-start-due-date>\n }\n </div>\n }\n\n @case (ControlType.DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'date-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-calendar\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-calendar>\n }\n </div>\n }\n\n @case (ControlType.TEXT_EDITOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'text-editor-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-text-editor\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-editor>\n }\n </div>\n }\n\n @case (ControlType.CHECKBOX) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column justify-content-end\"\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-checkbox\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox>\n }\n </div>\n }\n\n @case (ControlType.CHECKBOX_COLOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column justify-content-end\"\n [attr.data-cy]=\"'CHECKBOX_COLOR-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-checkbox-color-picker\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox-color-picker>\n }\n </div>\n }\n\n @case (ControlType.SWITCH) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'switch-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-switch\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-switch>\n }\n </div>\n }\n\n @case (ControlType.SELECT_BUTTON) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'select-button-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-select-button\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-select-button>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-assign-responsible\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-responsible>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN_ASSET) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-assign-asset\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-asset>\n }\n </div>\n }\n\n @case (ControlType.LINKS_DATA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control | fieldCol\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'links-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <!-- <phoenix-meta-object-links\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-object-links> -->\n }\n </div>\n }\n\n @case (ControlType.PASSWORD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'password-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-password-feild\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-password-feild>\n }\n </div>\n }\n\n @case (ControlType.COLOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'color-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-color-picker\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-color-picker>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD) {\n <div\n [style]=\"{ order: control.order }\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD_DRAG_DROP) {\n <div\n [style]=\"{ order: control.order }\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload-dragdrop\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload-dragdrop>\n }\n </div>\n }\n\n @case (ControlType.SLOT) {\n <ng-content\n [select]=\"[control.configuration.key]\"\n ></ng-content>\n }\n }\n }\n </div>\n\n @if (formButtons) {\n <div class=\"flex justify-content-end\">\n <p-button\n class=\"mr-1\"\n [disabled]=\"!metaForm.valid || disableForm\"\n type=\"submit\"\n label=\"{{ 'ACTION.SAVE' | translate }}\"\n [attr.data-cy]=\"'submit-button'\"\n [loading]=\"loading\"\n ></p-button>\n\n <p-button\n [disabled]=\"disableForm\"\n styleClass=\"p-button-link\"\n [text]=\"true\"\n (onClick)=\"onCancel()\"\n label=\"{{ 'ACTION.CANCEL' | translate }}\"\n [attr.data-cy]=\"'cancel-button'\"\n ></p-button>\n </div>\n }\n</form>" }]
|
|
7766
|
-
}], ctorParameters: () => [{ type: i2$3.FormBuilder }, { type: MetaFormService }, { type: i1$2.TranslateService }
|
|
7771
|
+
}], ctorParameters: () => [{ type: i2$3.FormBuilder }, { type: MetaFormService }, { type: i1$2.TranslateService }] });
|
|
7767
7772
|
|
|
7768
7773
|
class MetaFormButtonsComponent {
|
|
7769
7774
|
metaFormService;
|
|
@@ -7798,7 +7803,7 @@ class MetaFormButtonsComponent {
|
|
|
7798
7803
|
this.sub$?.unsubscribe();
|
|
7799
7804
|
}
|
|
7800
7805
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormButtonsComponent, deps: [{ token: MetaFormService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7801
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: MetaFormButtonsComponent, isStandalone: true, selector: "phoenix-meta-form-buttons", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isCreateAnother: { classPropertyName: "isCreateAnother", publicName: "isCreateAnother", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleSave: "handleSave", handleCancel: "handleCancel" }, providers: [], ngImport: i0, template: "<!-- <ng-template *ngIf=\"formActive$ | async as formState\" pTemplate=\"footer\">\n <div *ngIf=\"!formState\" class=\"flex justify-content-end p-2\"> -->\n<div *ngIf=\"display\" class=\"flex justify-content-end p-2\">\n <p-checkbox\n *ngIf=\"isCreateAnother()\"\n id=\"dialog-buttons-checkbox\"\n data-cy=\"dialog-buttons-checkbox-cy\"\n [(ngModel)]=\"createAnother\"\n [binary]=\"true\"\n inputId=\"binary\"\n class=\"mr-3\"\n ></p-checkbox>\n\n <button\n class=\"mr-2\"\n pButton\n [disabled]=\"isDisabled()\"\n [loading]=\"isLoading()\"\n (click)=\"handleSave.emit({ isAnother: createAnother })\"\n [attr.data-cy]=\"'submit-button'\"\n >\n <span class=\"mx-1\">{{ \"ACTION.SAVE\" | translate }}</span>\n </button>\n\n <p-button\n [text]=\"true\"\n (click)=\"handleCancel.emit('CANCEL')\"\n [attr.data-cy]=\"'cancel-button'\"\n >\n {{ \"ACTION.CANCEL\" | translate }}\n </p-button>\n</div>\n<!-- </div>\n</ng-template> -->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4
|
|
7806
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: MetaFormButtonsComponent, isStandalone: true, selector: "phoenix-meta-form-buttons", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isCreateAnother: { classPropertyName: "isCreateAnother", publicName: "isCreateAnother", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleSave: "handleSave", handleCancel: "handleCancel" }, providers: [], ngImport: i0, template: "<!-- <ng-template *ngIf=\"formActive$ | async as formState\" pTemplate=\"footer\">\n <div *ngIf=\"!formState\" class=\"flex justify-content-end p-2\"> -->\n<div *ngIf=\"display\" class=\"flex justify-content-end p-2\">\n <p-checkbox\n *ngIf=\"isCreateAnother()\"\n id=\"dialog-buttons-checkbox\"\n data-cy=\"dialog-buttons-checkbox-cy\"\n [(ngModel)]=\"createAnother\"\n [binary]=\"true\"\n inputId=\"binary\"\n class=\"mr-3\"\n ></p-checkbox>\n\n <button\n class=\"mr-2\"\n pButton\n [disabled]=\"isDisabled()\"\n [loading]=\"isLoading()\"\n (click)=\"handleSave.emit({ isAnother: createAnother })\"\n [attr.data-cy]=\"'submit-button'\"\n >\n <span class=\"mx-1\">{{ \"ACTION.SAVE\" | translate }}</span>\n </button>\n\n <p-button\n [text]=\"true\"\n (click)=\"handleCancel.emit('CANCEL')\"\n [attr.data-cy]=\"'cancel-button'\"\n >\n {{ \"ACTION.CANCEL\" | translate }}\n </p-button>\n</div>\n<!-- </div>\n</ng-template> -->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
|
|
7802
7807
|
}
|
|
7803
7808
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormButtonsComponent, decorators: [{
|
|
7804
7809
|
type: Component,
|
|
@@ -7821,30 +7826,8 @@ class GroupsFormComponent extends MetaFormAbstract {
|
|
|
7821
7826
|
optionLabel;
|
|
7822
7827
|
notiffication;
|
|
7823
7828
|
trans = inject(TranslateService);
|
|
7824
|
-
ngOnChanges(simpleChanges) {
|
|
7825
|
-
if (simpleChanges?.['metaFormControls'] ||
|
|
7826
|
-
simpleChanges?.['metaFormValues'] ||
|
|
7827
|
-
simpleChanges?.['metaForm']) {
|
|
7828
|
-
this.syncForm();
|
|
7829
|
-
this.metaService.setFormDirtyStatus(this.metaForm.dirty);
|
|
7830
|
-
}
|
|
7831
|
-
}
|
|
7832
7829
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GroupsFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
7833
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GroupsFormComponent, isStandalone: true, selector: "phoenix-groups-form", inputs: { activePanelsIndex: "activePanelsIndex" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-accordion [multiple]=\"true\" [(value)]=\"activePanelsIndex\">\n @if (metaFormControls?.length) {\n <form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n @for (group of metaFormControls; track group.groupName; let idx = $index) {\n <div [style]=\"{ order: group.order }\" class=\"w-full\">\n <p-accordion-panel\n [value]=\"idx\"\n [attr.data-cy]=\"'table-accordion-header-' + group.groupName\"\n >\n <p-accordion-header>\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i class=\"pi pi-minus-circle\"></i>\n } @else {\n <i class=\"pi pi-plus-circle\"></i>\n }\n </ng-template>\n {{ group.groupName | translate }}\n </p-accordion-header>\n\n <p-accordion-content>\n <div [style]=\"formStyle\" class=\"grid align-items-end\">\n @for (control of group.ctrl; track (control?.id ?? control?.configuration?.key)) {\n @switch (control.configuration.type) {\n\n @case (ControlType.TEXT) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-text-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-input>\n }\n </div>\n }\n\n @case (ControlType.NUMBER) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-number-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-number-input>\n }\n </div>\n }\n\n @case (ControlType.TIMEPERIOD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-timeperiod\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-timeperiod>\n }\n </div>\n }\n\n @case (ControlType.CURRENCY) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-currency\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-currency>\n }\n </div>\n }\n\n @case (ControlType.TEXT_AREA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-text-area\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-area>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-single-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION_OBJECT_BASED) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-single-select-object-based\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select-object-based>\n }\n </div>\n }\n\n @case (ControlType.MS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-multiple-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-multiple-select>\n }\n </div>\n }\n\n @case (ControlType.START_DUE_DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-start-due-date\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-start-due-date>\n }\n </div>\n }\n\n @case (ControlType.DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-calendar\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-calendar>\n }\n </div>\n }\n\n @case (ControlType.TEXT_EDITOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-text-editor\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-editor>\n }\n </div>\n }\n\n @case (ControlType.CHECKBOX) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-checkbox\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox>\n </div>\n }\n\n @case (ControlType.SWITCH) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-switch\n [disable]=\"true\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-switch>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-assign-responsible\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-responsible>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN_ASSET) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-assign-asset\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-asset>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD) {\n <div\n [style]=\"{ order: control.order }\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD_DRAG_DROP) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload-dragdrop\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload-dragdrop>\n }\n </div>\n }\n\n @case (ControlType.LINKS_DATA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control | fieldCol\"\n class=\"flex flex-column\"\n >\n </div>\n }\n\n @case (ControlType.PASSWORD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-password-feild\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-password-feild>\n </div>\n }\n\n @default {\n }\n }\n }\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </div>\n }\n </form>\n }\n</p-accordion>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type:
|
|
7834
|
-
// InputTextModule,
|
|
7835
|
-
// InputTextareaModule,
|
|
7836
|
-
// DatePickerModule,
|
|
7837
|
-
// SelectModule,
|
|
7838
|
-
// ButtonModule,
|
|
7839
|
-
// MultiSelectModule,
|
|
7840
|
-
TranslateModule }, { kind: "component", type: MetaTextEditorComponent, selector: "phoenix-meta-text-editor", inputs: ["previewMode", "hideLabel"] }, { kind: "component", type: MetaCheckboxComponent, selector: "phoenix-meta-checkbox" }, { kind: "component", type: MetaTextInputComponent, selector: "phoenix-meta-text-input" }, { kind: "component", type: MetaSingleSelectComponent, selector: "phoenix-meta-single-select" }, { kind: "component", type: MetaStartDueDateComponent, selector: "phoenix-meta-start-due-date", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaTextAreaComponent, selector: "phoenix-meta-text-area" }, { kind: "component", type: MetaMultipleSelectComponent, selector: "phoenix-meta-multiple-select" }, { kind: "component", type: MetaCalendarComponent, selector: "phoenix-meta-calendar" }, { kind: "component", type: MetaUploadComponentDragDrop, selector: "phoenix-meta-upload-dragdrop" }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3$2.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i3$2.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i3$2.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i3$2.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type:
|
|
7841
|
-
// MetaObjectLinksComponent,
|
|
7842
|
-
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: "component", type:
|
|
7843
|
-
// MessageModule,
|
|
7844
|
-
MetaSingleSelectObjectBasedComponent, selector: "phoenix-meta-single-select-object-based" }, { kind: "component", type: MetaUploadComponent, selector: "phoenix-meta-upload" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type:
|
|
7845
|
-
// CheckboxModule,
|
|
7846
|
-
// EditorModule,
|
|
7847
|
-
FieldColPipe, name: "fieldCol" }] });
|
|
7830
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GroupsFormComponent, isStandalone: true, selector: "phoenix-groups-form", inputs: { activePanelsIndex: "activePanelsIndex" }, usesInheritance: true, ngImport: i0, template: "<p-accordion [multiple]=\"true\" [(value)]=\"activePanelsIndex\">\n @if (metaFormControls?.length) {\n <form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n @for (group of metaFormControls; track group.groupName; let idx = $index) {\n <div [style]=\"{ order: group.order }\" class=\"w-full\">\n <p-accordion-panel\n [value]=\"idx\"\n [attr.data-cy]=\"'table-accordion-header-' + group.groupName\"\n >\n <p-accordion-header>\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i class=\"pi pi-minus-circle\"></i>\n } @else {\n <i class=\"pi pi-plus-circle\"></i>\n }\n </ng-template>\n {{ group.groupName | translate }}\n </p-accordion-header>\n\n <p-accordion-content>\n <div [style]=\"formStyle\" class=\"grid align-items-end\">\n @for (control of group.ctrl; track (control?.id ?? control?.configuration?.key)) {\n @switch (control.configuration.type) {\n\n @case (ControlType.TEXT) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-text-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-input>\n }\n </div>\n }\n\n @case (ControlType.NUMBER) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-number-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-number-input>\n }\n </div>\n }\n\n @case (ControlType.TIMEPERIOD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-timeperiod\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-timeperiod>\n }\n </div>\n }\n\n @case (ControlType.CURRENCY) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-currency\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-currency>\n }\n </div>\n }\n\n @case (ControlType.TEXT_AREA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-text-area\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-area>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-single-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION_OBJECT_BASED) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-single-select-object-based\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select-object-based>\n }\n </div>\n }\n\n @case (ControlType.MS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-multiple-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-multiple-select>\n }\n </div>\n }\n\n @case (ControlType.START_DUE_DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-start-due-date\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-start-due-date>\n }\n </div>\n }\n\n @case (ControlType.DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-calendar\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-calendar>\n }\n </div>\n }\n\n @case (ControlType.TEXT_EDITOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-text-editor\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-editor>\n }\n </div>\n }\n\n @case (ControlType.CHECKBOX) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-checkbox\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox>\n </div>\n }\n\n @case (ControlType.SWITCH) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-switch\n [disable]=\"true\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-switch>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-assign-responsible\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-responsible>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN_ASSET) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-assign-asset\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-asset>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD) {\n <div\n [style]=\"{ order: control.order }\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD_DRAG_DROP) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload-dragdrop\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload-dragdrop>\n }\n </div>\n }\n\n @case (ControlType.LINKS_DATA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control | fieldCol\"\n class=\"flex flex-column\"\n >\n </div>\n }\n\n @case (ControlType.PASSWORD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-password-feild\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-password-feild>\n </div>\n }\n\n @default {\n }\n }\n }\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </div>\n }\n </form>\n }\n</p-accordion>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MetaTextEditorComponent, selector: "phoenix-meta-text-editor", inputs: ["previewMode", "hideLabel"] }, { kind: "component", type: MetaCheckboxComponent, selector: "phoenix-meta-checkbox" }, { kind: "component", type: MetaTextInputComponent, selector: "phoenix-meta-text-input" }, { kind: "component", type: MetaSingleSelectComponent, selector: "phoenix-meta-single-select" }, { kind: "component", type: MetaStartDueDateComponent, selector: "phoenix-meta-start-due-date", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaTextAreaComponent, selector: "phoenix-meta-text-area" }, { kind: "component", type: MetaMultipleSelectComponent, selector: "phoenix-meta-multiple-select" }, { kind: "component", type: MetaCalendarComponent, selector: "phoenix-meta-calendar" }, { kind: "component", type: MetaUploadComponentDragDrop, selector: "phoenix-meta-upload-dragdrop" }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3$2.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i3$2.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i3$2.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i3$2.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: 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: "component", type: MetaSingleSelectObjectBasedComponent, selector: "phoenix-meta-single-select-object-based" }, { kind: "component", type: MetaUploadComponent, selector: "phoenix-meta-upload" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }] });
|
|
7848
7831
|
}
|
|
7849
7832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GroupsFormComponent, decorators: [{
|
|
7850
7833
|
type: Component,
|
|
@@ -7852,15 +7835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7852
7835
|
CommonModule,
|
|
7853
7836
|
FormsModule,
|
|
7854
7837
|
ReactiveFormsModule,
|
|
7855
|
-
// InputTextModule,
|
|
7856
|
-
// InputTextareaModule,
|
|
7857
|
-
// DatePickerModule,
|
|
7858
|
-
// SelectModule,
|
|
7859
|
-
// ButtonModule,
|
|
7860
|
-
// MultiSelectModule,
|
|
7861
7838
|
TranslateModule,
|
|
7862
|
-
// CheckboxModule,
|
|
7863
|
-
// EditorModule,
|
|
7864
7839
|
FieldColPipe,
|
|
7865
7840
|
MetaTextEditorComponent,
|
|
7866
7841
|
MetaCheckboxComponent,
|
|
@@ -7873,7 +7848,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7873
7848
|
MetaCalendarComponent,
|
|
7874
7849
|
MetaUploadComponentDragDrop,
|
|
7875
7850
|
AccordionModule,
|
|
7876
|
-
// MetaObjectLinksComponent,
|
|
7877
7851
|
MetaSwitchComponent,
|
|
7878
7852
|
MetaPasswordFeildComponent,
|
|
7879
7853
|
MetaTimeperiodComponent,
|
|
@@ -7883,7 +7857,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7883
7857
|
MetaAssignAssetComponent,
|
|
7884
7858
|
PanelModule,
|
|
7885
7859
|
ReadOnlyInputComponent,
|
|
7886
|
-
// MessageModule,
|
|
7887
7860
|
MetaSingleSelectObjectBasedComponent,
|
|
7888
7861
|
MetaUploadComponent,
|
|
7889
7862
|
], template: "<p-accordion [multiple]=\"true\" [(value)]=\"activePanelsIndex\">\n @if (metaFormControls?.length) {\n <form [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n @for (group of metaFormControls; track group.groupName; let idx = $index) {\n <div [style]=\"{ order: group.order }\" class=\"w-full\">\n <p-accordion-panel\n [value]=\"idx\"\n [attr.data-cy]=\"'table-accordion-header-' + group.groupName\"\n >\n <p-accordion-header>\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i class=\"pi pi-minus-circle\"></i>\n } @else {\n <i class=\"pi pi-plus-circle\"></i>\n }\n </ng-template>\n {{ group.groupName | translate }}\n </p-accordion-header>\n\n <p-accordion-content>\n <div [style]=\"formStyle\" class=\"grid align-items-end\">\n @for (control of group.ctrl; track (control?.id ?? control?.configuration?.key)) {\n @switch (control.configuration.type) {\n\n @case (ControlType.TEXT) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-text-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-input>\n }\n </div>\n }\n\n @case (ControlType.NUMBER) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-number-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-number-input>\n }\n </div>\n }\n\n @case (ControlType.TIMEPERIOD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-timeperiod\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-timeperiod>\n }\n </div>\n }\n\n @case (ControlType.CURRENCY) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-currency\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-currency>\n }\n </div>\n }\n\n @case (ControlType.TEXT_AREA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-text-area\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-area>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-single-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select>\n }\n </div>\n }\n\n @case (ControlType.SS_OPTION_OBJECT_BASED) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-single-select-object-based\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select-object-based>\n }\n </div>\n }\n\n @case (ControlType.MS_OPTION) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-multiple-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-multiple-select>\n }\n </div>\n }\n\n @case (ControlType.START_DUE_DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-start-due-date\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-start-due-date>\n }\n </div>\n }\n\n @case (ControlType.DATE) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-calendar\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-calendar>\n }\n </div>\n }\n\n @case (ControlType.TEXT_EDITOR) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-text-editor\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-editor>\n }\n </div>\n }\n\n @case (ControlType.CHECKBOX) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-checkbox\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox>\n </div>\n }\n\n @case (ControlType.SWITCH) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-switch\n [disable]=\"true\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-switch>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n } @else {\n <phoenix-meta-assign-responsible\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-responsible>\n }\n </div>\n }\n\n @case (ControlType.ASSIGN_ASSET) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-assign-asset\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-assign-asset>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD) {\n <div\n [style]=\"{ order: control.order }\"\n [attr.data-cy]=\"'upload-' + control?.id\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload>\n }\n </div>\n }\n\n @case (ControlType.UPLOAD_DRAG_DROP) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n [attr.data-cy]=\"'assign-' + control?.id\"\n >\n @if (control.readOnly) {\n @if (!control?.hidden) {\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n }\n } @else {\n <phoenix-meta-upload-dragdrop\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-upload-dragdrop>\n }\n </div>\n }\n\n @case (ControlType.LINKS_DATA) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control | fieldCol\"\n class=\"flex flex-column\"\n >\n </div>\n }\n\n @case (ControlType.PASSWORD) {\n <div\n [style]=\"{ order: control.order }\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-password-feild\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-password-feild>\n </div>\n }\n\n @default {\n }\n }\n }\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </div>\n }\n </form>\n }\n</p-accordion>" }]
|