@fuentis/phoenix-ui 0.0.9-alpha.76 → 0.0.9-alpha.78
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.
|
@@ -622,7 +622,7 @@ var ico;
|
|
|
622
622
|
ico["create"] = "pi pi-plus";
|
|
623
623
|
ico["open_full_screen"] = "pi pi-external-link";
|
|
624
624
|
ico["edit"] = "pi pi-pencil";
|
|
625
|
-
ico["delete"] = "pi pi-
|
|
625
|
+
ico["delete"] = "pi pi-exclamation-triangle";
|
|
626
626
|
ico["assign"] = "pi pi-paperclip";
|
|
627
627
|
ico["apply"] = "pi pi-check-square";
|
|
628
628
|
ico["open_in_new_tab"] = "pi pi-external-link";
|
|
@@ -677,15 +677,12 @@ class PhoenixDataTableActionComponent {
|
|
|
677
677
|
this.btnConfig.class = 'ml-1';
|
|
678
678
|
///disable by permission
|
|
679
679
|
this.disabled = this.actionConfig.disabled;
|
|
680
|
-
///disable bulk button if no selection
|
|
681
|
-
if (this.selectedData?.length <= 0) {
|
|
682
|
-
this.disabled = true;
|
|
683
|
-
}
|
|
684
680
|
///configure bulk delete button
|
|
685
681
|
if (this.actionConfig.type === tableActionType.DELETE) {
|
|
686
|
-
this.btnConfig.
|
|
682
|
+
this.btnConfig.label = 'Delete';
|
|
683
|
+
this.btnConfig.text = true;
|
|
687
684
|
this.btnConfig.outlined = false;
|
|
688
|
-
this.btnConfig.severity = '
|
|
685
|
+
this.btnConfig.severity = 'warn';
|
|
689
686
|
}
|
|
690
687
|
break;
|
|
691
688
|
case tableButtonContext.ROW:
|
|
@@ -1401,9 +1398,10 @@ class TableCaptionComponent {
|
|
|
1401
1398
|
}
|
|
1402
1399
|
handleActionClick(action) {
|
|
1403
1400
|
this.actionClick.emit({ action, selectedItems: this.selectedItems });
|
|
1401
|
+
console.log(action);
|
|
1404
1402
|
}
|
|
1405
1403
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TableCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1406
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, 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 <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n <phoenix-phoenix-data-table-action \n [actionConfig]=\"action\" \n (actionClick)=\"actionClick.emit($event)\">\n </phoenix-phoenix-data-table-action>\n </ng-container>\n\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 </phoenix-data-table-tabs>\n </div>\n \n\n <div class=\"flex align-items-center gap-2\">\n <!-- Filter, Columns, Search -->\n <p-button icon=\"pi pi-filter\" [rounded]=\"true\" label=\"Filter\" [text]=\"true\" class=\"mr-2\"\n (onClick)=\"filtersPopover.toggle($event)\" />\n \n <p-button icon=\"pi pi-sliders-v\" [rounded]=\"true\" [text]=\"true\" label=\"Columns\" class=\"mr-2\"\n (onClick)=\"columnsPopover.toggle($event)\" />\n \n <span class=\"p-input-icon-left ml-auto\">\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input type=\"text\" (input)=\"emitSearch($any($event.target).value)\" pInputText\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\" />\n </p-iconfield>\n </span>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-phoenix-data-table-action [actionConfig]=\"action\" [selectedData]=\"selectedItems\"\n (actionClick)=\"actionClick.emit({ action, selectedItems })\"></phoenix-phoenix-data-table-action></ng-container>\n </div>\n\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\">{{ 'FILTERS' | translate }}</div>\n <div>\n <p-button icon=\"pi pi-save\" [text]=\"true\" label=\"{{ 'SAVE' | translate }}\" class=\"mr-2\"\n (click)=\"applyFilters()\" />\n\n <p-button icon=\"pi pi-times\" [text]=\"true\" label=\"{{ 'CLEAR' | translate }}\" class=\"mr-2\"\n (click)=\"filtersForm.reset()\" />\n </div>\n </div>\n\n <form [formGroup]=\"filtersForm\">\n @for(control of tableConfiguration.filterConfiguration; track control.key ){ \n @switch(control.type) { \n @case ('checkbox') {\n <div class=\"mb-4\">\n <p-checkbox\n binary=\"true\"\n type=\"checkbox\"\n [formControlName]=\"control.key\"\n />\n <label class=\"ml-2\">{{ control.label }}</label>\n </div>\n } \n @case ('dropdown') {\n <div class=\"mb-4\">\n <label class=\"mb-2 block\">{{ control.label }}</label>\n <p-select\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n />\n </div>\n } \n } \n }\n </form>\n </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n \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\">{{ 'COLUMS' | translate }}</div>\n <div>\n <p-button icon=\"pi pi-save\" [text]=\"true\" label=\"{{ 'SAVE' | translate }}\" class=\"mr-2\"\n (click)=\"applyColumns()\" />\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>", 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: i4$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$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i12.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i14.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i13.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData", "selectedData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i17.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }] });
|
|
1404
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, 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 <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n <phoenix-phoenix-data-table-action \n [actionConfig]=\"action\" \n (actionClick)=\"actionClick.emit($event)\">\n </phoenix-phoenix-data-table-action>\n </ng-container>\n\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 </phoenix-data-table-tabs>\n </div>\n \n\n <div class=\"flex align-items-center gap-2\">\n <!-- Filter, Columns, Search -->\n <p-button icon=\"pi pi-filter\" [rounded]=\"true\" label=\"Filter\" [text]=\"true\" class=\"mr-2\"\n (onClick)=\"filtersPopover.toggle($event)\" />\n \n <p-button icon=\"pi pi-sliders-v\" [rounded]=\"true\" [text]=\"true\" label=\"Columns\" class=\"mr-2\"\n (onClick)=\"columnsPopover.toggle($event)\" />\n \n <span class=\"p-input-icon-left ml-auto\">\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input type=\"text\" (input)=\"emitSearch($any($event.target).value)\" pInputText\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\" />\n </p-iconfield>\n </span>\n\n </div>\n\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\">{{ 'FILTERS' | translate }}</div>\n <div>\n <p-button icon=\"pi pi-save\" [text]=\"true\" label=\"{{ 'SAVE' | translate }}\" class=\"mr-2\"\n (click)=\"applyFilters()\" />\n\n <p-button icon=\"pi pi-times\" [text]=\"true\" label=\"{{ 'CLEAR' | translate }}\" class=\"mr-2\"\n (click)=\"filtersForm.reset()\" />\n </div>\n </div>\n\n <form [formGroup]=\"filtersForm\">\n @for(control of tableConfiguration.filterConfiguration; track control.key ){ \n @switch(control.type) { \n @case ('checkbox') {\n <div class=\"mb-4\">\n <p-checkbox\n binary=\"true\"\n type=\"checkbox\"\n [formControlName]=\"control.key\"\n />\n <label class=\"ml-2\">{{ control.label }}</label>\n </div>\n } \n @case ('dropdown') {\n <div class=\"mb-4\">\n <label class=\"mb-2 block\">{{ control.label }}</label>\n <p-select\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n />\n </div>\n } \n } \n }\n </form>\n </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n \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\">{{ 'COLUMS' | translate }}</div>\n <div>\n <p-button icon=\"pi pi-save\" [text]=\"true\" label=\"{{ 'SAVE' | translate }}\" class=\"mr-2\"\n (click)=\"applyColumns()\" />\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>", 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: i4$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$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i12.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i14.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i13.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData", "selectedData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i17.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }] });
|
|
1407
1405
|
}
|
|
1408
1406
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TableCaptionComponent, decorators: [{
|
|
1409
1407
|
type: Component,
|
|
@@ -1423,7 +1421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
1423
1421
|
ListboxModule,
|
|
1424
1422
|
TranslateModule,
|
|
1425
1423
|
IsSelectedPipe
|
|
1426
|
-
], 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 <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n <phoenix-phoenix-data-table-action \n [actionConfig]=\"action\" \n (actionClick)=\"actionClick.emit($event)\">\n </phoenix-phoenix-data-table-action>\n </ng-container>\n\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 </phoenix-data-table-tabs>\n </div>\n \n\n <div class=\"flex align-items-center gap-2\">\n <!-- Filter, Columns, Search -->\n <p-button icon=\"pi pi-filter\" [rounded]=\"true\" label=\"Filter\" [text]=\"true\" class=\"mr-2\"\n (onClick)=\"filtersPopover.toggle($event)\" />\n \n <p-button icon=\"pi pi-sliders-v\" [rounded]=\"true\" [text]=\"true\" label=\"Columns\" class=\"mr-2\"\n (onClick)=\"columnsPopover.toggle($event)\" />\n \n <span class=\"p-input-icon-left ml-auto\">\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input type=\"text\" (input)=\"emitSearch($any($event.target).value)\" pInputText\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\" />\n </p-iconfield>\n </span>\n
|
|
1424
|
+
], 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 <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n <phoenix-phoenix-data-table-action \n [actionConfig]=\"action\" \n (actionClick)=\"actionClick.emit($event)\">\n </phoenix-phoenix-data-table-action>\n </ng-container>\n\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 </phoenix-data-table-tabs>\n </div>\n \n\n <div class=\"flex align-items-center gap-2\">\n <!-- Filter, Columns, Search -->\n <p-button icon=\"pi pi-filter\" [rounded]=\"true\" label=\"Filter\" [text]=\"true\" class=\"mr-2\"\n (onClick)=\"filtersPopover.toggle($event)\" />\n \n <p-button icon=\"pi pi-sliders-v\" [rounded]=\"true\" [text]=\"true\" label=\"Columns\" class=\"mr-2\"\n (onClick)=\"columnsPopover.toggle($event)\" />\n \n <span class=\"p-input-icon-left ml-auto\">\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input type=\"text\" (input)=\"emitSearch($any($event.target).value)\" pInputText\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\" />\n </p-iconfield>\n </span>\n\n </div>\n\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\">{{ 'FILTERS' | translate }}</div>\n <div>\n <p-button icon=\"pi pi-save\" [text]=\"true\" label=\"{{ 'SAVE' | translate }}\" class=\"mr-2\"\n (click)=\"applyFilters()\" />\n\n <p-button icon=\"pi pi-times\" [text]=\"true\" label=\"{{ 'CLEAR' | translate }}\" class=\"mr-2\"\n (click)=\"filtersForm.reset()\" />\n </div>\n </div>\n\n <form [formGroup]=\"filtersForm\">\n @for(control of tableConfiguration.filterConfiguration; track control.key ){ \n @switch(control.type) { \n @case ('checkbox') {\n <div class=\"mb-4\">\n <p-checkbox\n binary=\"true\"\n type=\"checkbox\"\n [formControlName]=\"control.key\"\n />\n <label class=\"ml-2\">{{ control.label }}</label>\n </div>\n } \n @case ('dropdown') {\n <div class=\"mb-4\">\n <label class=\"mb-2 block\">{{ control.label }}</label>\n <p-select\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n />\n </div>\n } \n } \n }\n </form>\n </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n \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\">{{ 'COLUMS' | translate }}</div>\n <div>\n <p-button icon=\"pi pi-save\" [text]=\"true\" label=\"{{ 'SAVE' | translate }}\" class=\"mr-2\"\n (click)=\"applyColumns()\" />\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>" }]
|
|
1427
1425
|
}], propDecorators: { tableConfiguration: [{
|
|
1428
1426
|
type: Input
|
|
1429
1427
|
}], columns: [{
|
|
@@ -1503,6 +1501,7 @@ class TableComponent {
|
|
|
1503
1501
|
searchQuery = signal('');
|
|
1504
1502
|
selectedColumns = signal(this.columns);
|
|
1505
1503
|
selectedItems = signal([]);
|
|
1504
|
+
bulkMode = signal(false);
|
|
1506
1505
|
totalRecords = signal(0);
|
|
1507
1506
|
multiSortMeta = signal([]);
|
|
1508
1507
|
isLoading = signal(false);
|
|
@@ -1617,6 +1616,8 @@ class TableComponent {
|
|
|
1617
1616
|
}
|
|
1618
1617
|
// **Handle Checkbox Selection**
|
|
1619
1618
|
onSelectionChange(selected) {
|
|
1619
|
+
console.log(selected.length > 0);
|
|
1620
|
+
this.bulkMode.set(selected.length > 0);
|
|
1620
1621
|
this.selectedItems.set(selected);
|
|
1621
1622
|
}
|
|
1622
1623
|
// **Handle Action Clicks**
|
|
@@ -1634,7 +1635,7 @@ class TableComponent {
|
|
|
1634
1635
|
this.tableDataSignal.set(filteredData);
|
|
1635
1636
|
}
|
|
1636
1637
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1637
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", tableConfiguration: "tableConfiguration" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection" }, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n\n <p-table\n [columns]=\"selectedColumns()\"\n [value]=\"tableDataSignal()\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"50\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords()\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [size]=\"'small'\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <th class=\"custom-th\" style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\n <th\n class=\"custom-th font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n </th>\n <!-- create empty th placeholders for actions -->\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template #body let-rowData let-rowIndex=\"rowIndex\">\n <tr>\n <td>\n <p-tableCheckbox [value]=\"rowData\" />\n </td>\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container [ngSwitch]=\"col.columnType\">\n <!-- TAG case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-tag\n styleClass=\"custom-tag\"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n \n }\"\n [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n >\n </p-tag>\n </ng-container>\n </ng-container>\n\n <!-- PERSON case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-avatar\n [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n >\n </p-avatar>\n {{ (rowData[col.field] | cell : col)?.name }}\n </ng-container>\n </ng-container>\n\n <!-- LIST case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <ul\n *ngFor=\"let item of rowData[col.field]\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.LIST | lowercase)\n \"\n >\n <li>{{ item.name }}</li>\n </ul>\n </ng-container>\n </ng-container>\n\n <!-- DEFAULT case -->\n <ng-container *ngSwitchDefault>\n <span\n [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n ></span>\n </ng-container>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick({ $event, rowData })\"\n ></phoenix-phoenix-data-table-action\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell> -- </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns; let even = even\">\n <tr>\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 </td>\n </tr>\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", 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}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData", "selectedData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
|
|
1638
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", tableConfiguration: "tableConfiguration" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection" }, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n\n @if (selectedItems().length <= 0){\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n } @else {\n <div style=\"min-height: 40px;padding:8px\" class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\">\n <span>{{ selectedItems().length }} items selected</span>\n <div>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-phoenix-data-table-action [actionConfig]=\"action\" [selectedData]=\"selectedItems\"\n (actionClick)=\"actionClick.emit({ action, selectedItems })\"></phoenix-phoenix-data-table-action>\n </ng-container>\n\n <button\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"selectedItems.set([])\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n \n </div> \n}\n\n\n <p-table\n [columns]=\"selectedColumns()\"\n [value]=\"tableDataSignal()\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"50\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords()\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [size]=\"'small'\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <th class=\"custom-th\" style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\n <th\n class=\"custom-th font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n </th>\n <!-- create empty th placeholders for actions -->\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template #body let-rowData let-rowIndex=\"rowIndex\">\n <tr>\n <td>\n <p-tableCheckbox [value]=\"rowData\" />\n </td>\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container [ngSwitch]=\"col.columnType\">\n <!-- TAG case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-tag\n styleClass=\"custom-tag\"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n \n }\"\n [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n >\n </p-tag>\n </ng-container>\n </ng-container>\n\n <!-- PERSON case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-avatar\n [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n >\n </p-avatar>\n {{ (rowData[col.field] | cell : col)?.name }}\n </ng-container>\n </ng-container>\n\n <!-- LIST case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <ul\n *ngFor=\"let item of rowData[col.field]\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.LIST | lowercase)\n \"\n >\n <li>{{ item.name }}</li>\n </ul>\n </ng-container>\n </ng-container>\n\n <!-- DEFAULT case -->\n <ng-container *ngSwitchDefault>\n <span\n [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n ></span>\n </ng-container>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick({ $event, rowData })\"\n ></phoenix-phoenix-data-table-action\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell> -- </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns; let even = even\">\n <tr>\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 </td>\n </tr>\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 class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\"> Total records: {{tableDataSignal().length}} </div>\n</div>\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}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData", "selectedData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
|
|
1638
1639
|
}
|
|
1639
1640
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TableComponent, decorators: [{
|
|
1640
1641
|
type: Component,
|
|
@@ -1649,7 +1650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
1649
1650
|
TooltipModule,
|
|
1650
1651
|
TableCellPipe,
|
|
1651
1652
|
SkeletonModule
|
|
1652
|
-
], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n\n <p-table\n [columns]=\"selectedColumns()\"\n [value]=\"tableDataSignal()\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"50\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords()\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [size]=\"'small'\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <th class=\"custom-th\" style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\n <th\n class=\"custom-th font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n </th>\n <!-- create empty th placeholders for actions -->\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template #body let-rowData let-rowIndex=\"rowIndex\">\n <tr>\n <td>\n <p-tableCheckbox [value]=\"rowData\" />\n </td>\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container [ngSwitch]=\"col.columnType\">\n <!-- TAG case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-tag\n styleClass=\"custom-tag\"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n \n }\"\n [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n >\n </p-tag>\n </ng-container>\n </ng-container>\n\n <!-- PERSON case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-avatar\n [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n >\n </p-avatar>\n {{ (rowData[col.field] | cell : col)?.name }}\n </ng-container>\n </ng-container>\n\n <!-- LIST case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <ul\n *ngFor=\"let item of rowData[col.field]\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.LIST | lowercase)\n \"\n >\n <li>{{ item.name }}</li>\n </ul>\n </ng-container>\n </ng-container>\n\n <!-- DEFAULT case -->\n <ng-container *ngSwitchDefault>\n <span\n [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n ></span>\n </ng-container>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick({ $event, rowData })\"\n ></phoenix-phoenix-data-table-action\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell> -- </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns; let even = even\">\n <tr>\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 </td>\n </tr>\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", 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}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"] }]
|
|
1653
|
+
], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n\n @if (selectedItems().length <= 0){\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n } @else {\n <div style=\"min-height: 40px;padding:8px\" class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\">\n <span>{{ selectedItems().length }} items selected</span>\n <div>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-phoenix-data-table-action [actionConfig]=\"action\" [selectedData]=\"selectedItems\"\n (actionClick)=\"actionClick.emit({ action, selectedItems })\"></phoenix-phoenix-data-table-action>\n </ng-container>\n\n <button\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"selectedItems.set([])\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n \n </div> \n}\n\n\n <p-table\n [columns]=\"selectedColumns()\"\n [value]=\"tableDataSignal()\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"50\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords()\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [size]=\"'small'\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <th class=\"custom-th\" style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\n <th\n class=\"custom-th font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n </th>\n <!-- create empty th placeholders for actions -->\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template #body let-rowData let-rowIndex=\"rowIndex\">\n <tr>\n <td>\n <p-tableCheckbox [value]=\"rowData\" />\n </td>\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container [ngSwitch]=\"col.columnType\">\n <!-- TAG case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-tag\n styleClass=\"custom-tag\"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n \n }\"\n [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n >\n </p-tag>\n </ng-container>\n </ng-container>\n\n <!-- PERSON case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <p-avatar\n [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n >\n </p-avatar>\n {{ (rowData[col.field] | cell : col)?.name }}\n </ng-container>\n </ng-container>\n\n <!-- LIST case -->\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n <ul\n *ngFor=\"let item of rowData[col.field]\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.LIST | lowercase)\n \"\n >\n <li>{{ item.name }}</li>\n </ul>\n </ng-container>\n </ng-container>\n\n <!-- DEFAULT case -->\n <ng-container *ngSwitchDefault>\n <span\n [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n ></span>\n </ng-container>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick({ $event, rowData })\"\n ></phoenix-phoenix-data-table-action\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell> -- </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns; let even = even\">\n <tr>\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 </td>\n </tr>\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 class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\"> Total records: {{tableDataSignal().length}} </div>\n</div>\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}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"] }]
|
|
1653
1654
|
}], ctorParameters: () => [], propDecorators: { data: [{
|
|
1654
1655
|
type: Input
|
|
1655
1656
|
}], columns: [{
|
|
@@ -4648,19 +4649,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
4648
4649
|
}] } });
|
|
4649
4650
|
|
|
4650
4651
|
class GroupsFormComponent extends MetaFormAbstract {
|
|
4652
|
+
activePanelsIndex = [0, 1, 2, 3];
|
|
4651
4653
|
ControlType = ControlType;
|
|
4652
4654
|
optionLabel;
|
|
4653
4655
|
notiffication;
|
|
4654
4656
|
trans = inject(TranslateService);
|
|
4655
|
-
ngOnInit() {
|
|
4656
|
-
this.notiffication = [
|
|
4657
|
-
{
|
|
4658
|
-
severity: 'info',
|
|
4659
|
-
summary: this.trans.instant('MESSAGE.NOTE'),
|
|
4660
|
-
detail: this.trans.instant('MESSAGE.THREAT_ASSESSMENT'),
|
|
4661
|
-
},
|
|
4662
|
-
];
|
|
4663
|
-
}
|
|
4664
4657
|
ngOnChanges(simpleChanges) {
|
|
4665
4658
|
if (simpleChanges?.['metaFormControls'] ||
|
|
4666
4659
|
simpleChanges?.['metaFormValues'] ||
|
|
@@ -4671,7 +4664,7 @@ class GroupsFormComponent extends MetaFormAbstract {
|
|
|
4671
4664
|
}
|
|
4672
4665
|
}
|
|
4673
4666
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GroupsFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4674
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GroupsFormComponent, isStandalone: true, selector: "phoenix-groups-form", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-accordion value=\"0\">\n <form *ngIf=\"metaFormControls\" [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n @for ( group of metaFormControls; track group.groupName){\n <div [style]=\"{ order: group.order }\" class=\"w-full\">\n <p-accordion-panel [value]=\"group.groupName\">\n <p-accordion-header>\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i class=\"pi pi-minus-circle\"></i>\n } @else {\n <i class=\"pi pi-plus-circle\"></i>\n\n }\n </ng-template>\n {{ group.groupName }}\n </p-accordion-header>\n <p-accordion-content>\n <div class=\"grid mt-2 align-items-end\">\n <ng-container *ngFor=\"let control of group.ctrl\">\n <ng-container [ngSwitch]=\"control.configuration.type\">\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-text-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-text-input>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.NUMBER\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-number-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-number-input>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-timeperiod\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-timeperiod>\n </ng-template>\n </div>\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.CURRENCY\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-currency\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-currency>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT_AREA\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-text-area\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-area>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SS_OPTION\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-single-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-single-select-object-based\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select-object-based>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.MS_OPTION\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-multiple-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-multiple-select>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-start-due-date\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-start-due-date>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.DATE\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-calendar\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-calendar>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-text-editor\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-editor>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.CHECKBOX\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-checkbox\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SWITCH\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-switch\n [disable]=\"true\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-switch>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.ASSIGN\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-assign-responsible\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-assign-responsible>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.LINKS_DATA\"\n [ngClass]=\"control | fieldCol\"\n class=\"flex flex-column\"\n >\n <!-- <phoenix-meta-object-links\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-object-links> -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.PASSWORD\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-password-feild\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-password-feild>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </div>\n }\n </form>\n</p-accordion>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type:
|
|
4667
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GroupsFormComponent, isStandalone: true, selector: "phoenix-groups-form", inputs: { activePanelsIndex: "activePanelsIndex" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-accordion [multiple]=\"true\" [(value)]=\"activePanelsIndex\">\n <form *ngIf=\"metaFormControls\" [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n @for ( group of metaFormControls; track group.groupName; let idx = $index){\n <div [style]=\"{ order: group.order }\" class=\"w-full\">\n <p-accordion-panel [value]=\"idx\">\n <p-accordion-header>\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i class=\"pi pi-minus-circle\"></i>\n } @else {\n <i class=\"pi pi-plus-circle\"></i>\n\n }\n </ng-template>\n {{ group.groupName }}\n </p-accordion-header>\n <p-accordion-content>\n <div class=\"grid align-items-end\">\n <ng-container *ngFor=\"let control of group.ctrl\">\n <ng-container [ngSwitch]=\"control.configuration.type\">\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-text-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-text-input>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.NUMBER\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-number-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-number-input>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-timeperiod\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-timeperiod>\n </ng-template>\n </div>\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.CURRENCY\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-currency\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-currency>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT_AREA\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-text-area\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-area>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SS_OPTION\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-single-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-single-select-object-based\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select-object-based>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.MS_OPTION\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-multiple-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-multiple-select>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-start-due-date\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-start-due-date>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.DATE\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-calendar\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-calendar>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-text-editor\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-editor>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.CHECKBOX\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-checkbox\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SWITCH\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-switch\n [disable]=\"true\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-switch>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.ASSIGN\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-assign-responsible\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-assign-responsible>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.LINKS_DATA\"\n [ngClass]=\"control | fieldCol\"\n class=\"flex flex-column\"\n >\n <!-- <phoenix-meta-object-links\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-object-links> -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.PASSWORD\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-password-feild\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-password-feild>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </div>\n }\n </form>\n</p-accordion>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type:
|
|
4675
4668
|
// InputTextareaModule,
|
|
4676
4669
|
CalendarModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: EditorModule }, { kind: "pipe", type: FieldColPipe, name: "fieldCol" }, { kind: "component", type: MetaTextEditorComponent, selector: "phoenix-meta-text-editor" }, { kind: "component", type: MetaCheckboxComponent, selector: "phoenix-meta-checkbox" }, { kind: "component", type: MetaTextInputComponent, selector: "phoenix-meta-text-input" }, { kind: "component", type: MetaSingleSelectComponent, selector: "phoenix-meta-single-select" }, { kind: "component", type: MetaStartDueDateComponent, selector: "phoenix-meta-start-due-date", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaTextAreaComponent, selector: "phoenix-meta-text-area" }, { kind: "component", type: MetaMultipleSelectComponent, selector: "phoenix-meta-multiple-select" }, { kind: "component", type: MetaCalendarComponent, selector: "phoenix-meta-calendar" }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3$a.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i3$a.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i3$a.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i3$a.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type:
|
|
4677
4670
|
// MetaObjectLinksComponent,
|
|
@@ -4714,8 +4707,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
4714
4707
|
ReadOnlyInputComponent,
|
|
4715
4708
|
MessagesModule,
|
|
4716
4709
|
MetaSingleSelectObjectBasedComponent,
|
|
4717
|
-
], template: "<p-accordion value=\"0\">\n <form *ngIf=\"metaFormControls\" [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n @for ( group of metaFormControls; track group.groupName){\n <div [style]=\"{ order: group.order }\" class=\"w-full\">\n <p-accordion-panel [value]=\"group.groupName\">\n <p-accordion-header>\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i class=\"pi pi-minus-circle\"></i>\n } @else {\n <i class=\"pi pi-plus-circle\"></i>\n\n }\n </ng-template>\n {{ group.groupName }}\n </p-accordion-header>\n <p-accordion-content>\n <div class=\"grid mt-2 align-items-end\">\n <ng-container *ngFor=\"let control of group.ctrl\">\n <ng-container [ngSwitch]=\"control.configuration.type\">\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-text-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-text-input>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.NUMBER\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-number-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-number-input>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-timeperiod\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-timeperiod>\n </ng-template>\n </div>\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.CURRENCY\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-currency\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-currency>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT_AREA\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-text-area\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-area>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SS_OPTION\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-single-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-single-select-object-based\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select-object-based>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.MS_OPTION\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-multiple-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-multiple-select>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-start-due-date\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-start-due-date>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.DATE\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-calendar\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-calendar>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-text-editor\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-editor>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.CHECKBOX\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-checkbox\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SWITCH\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-switch\n [disable]=\"true\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-switch>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.ASSIGN\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-assign-responsible\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-assign-responsible>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.LINKS_DATA\"\n [ngClass]=\"control | fieldCol\"\n class=\"flex flex-column\"\n >\n <!-- <phoenix-meta-object-links\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-object-links> -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.PASSWORD\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-password-feild\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-password-feild>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </div>\n }\n </form>\n</p-accordion>\n" }]
|
|
4718
|
-
}]
|
|
4710
|
+
], template: "<p-accordion [multiple]=\"true\" [(value)]=\"activePanelsIndex\">\n <form *ngIf=\"metaFormControls\" [formGroup]=\"metaForm\" (ngSubmit)=\"onSubmit()\">\n @for ( group of metaFormControls; track group.groupName; let idx = $index){\n <div [style]=\"{ order: group.order }\" class=\"w-full\">\n <p-accordion-panel [value]=\"idx\">\n <p-accordion-header>\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i class=\"pi pi-minus-circle\"></i>\n } @else {\n <i class=\"pi pi-plus-circle\"></i>\n\n }\n </ng-template>\n {{ group.groupName }}\n </p-accordion-header>\n <p-accordion-content>\n <div class=\"grid align-items-end\">\n <ng-container *ngFor=\"let control of group.ctrl\">\n <ng-container [ngSwitch]=\"control.configuration.type\">\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-text-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-text-input>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.NUMBER\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-number-input\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-number-input>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TIMEPERIOD\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-timeperiod\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-timeperiod>\n </ng-template>\n </div>\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.CURRENCY\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-currency\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-currency>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT_AREA\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-text-area\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-area>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SS_OPTION\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-single-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SS_OPTION_OBJECT_BASED\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <!-- edit field & redonly field content -->\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n *ngIf=\"!control?.hidden\"\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-single-select-object-based\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-single-select-object-based>\n </ng-template>\n <!-- edit field & redonly field content end -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.MS_OPTION\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-multiple-select\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-multiple-select>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.START_DUE_DATE\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-start-due-date\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-start-due-date>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.DATE\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-calendar\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-calendar>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.TEXT_EDITOR\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-text-editor\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-text-editor>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.CHECKBOX\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-checkbox\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-checkbox>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.SWITCH\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-switch\n [disable]=\"true\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-switch>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.ASSIGN\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <ng-container *ngIf=\"control.readOnly; else readOnly\">\n <phoenix-read-only-input\n [control]=\"control\"\n [metaform]=\"metaForm\"\n ></phoenix-read-only-input>\n </ng-container>\n <ng-template #readOnly>\n <phoenix-meta-assign-responsible\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n >\n </phoenix-meta-assign-responsible>\n </ng-template>\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.LINKS_DATA\"\n [ngClass]=\"control | fieldCol\"\n class=\"flex flex-column\"\n >\n <!-- <phoenix-meta-object-links\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-object-links> -->\n </div>\n\n <div\n [style]=\"{ order: control.order }\"\n *ngSwitchCase=\"ControlType.PASSWORD\"\n [ngClass]=\"control?.hidden ? 'p-0' : (control | fieldCol)\"\n class=\"flex flex-column\"\n >\n <phoenix-meta-password-feild\n [disable]=\"disableForm\"\n [formControlName]=\"control.configuration.key\"\n [control]=\"control\"\n [parentForm]=\"metaForm\"\n ></phoenix-meta-password-feild>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </div>\n }\n </form>\n</p-accordion>\n" }]
|
|
4711
|
+
}], propDecorators: { activePanelsIndex: [{
|
|
4712
|
+
type: Input
|
|
4713
|
+
}] } });
|
|
4719
4714
|
|
|
4720
4715
|
/*
|
|
4721
4716
|
* Public API Surface of phoenix
|