@fuentis/phoenix-ui 0.0.9-alpha.630 → 0.0.9-alpha.633

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -8142,12 +8142,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 class QuickPickSidePanelComponent {
     drawer;
-    title = 'Default Title';
-    data = [];
-    columns = [];
-    tableConfiguration = {};
-    widthClass = 'w-6';
-    isFullScreen = false;
+    title = input('Default Title', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    tableConfiguration = input(...(ngDevMode ? [undefined, { debugName: "tableConfiguration" }] : []));
+    widthClass = input('w-6', ...(ngDevMode ? [{ debugName: "widthClass" }] : []));
+    isFullScreen = input(false, ...(ngDevMode ? [{ debugName: "isFullScreen" }] : []));
+    filters = computed(() => {
+        return this.createDynamicFilters(this.data(), this.tableConfiguration()?.filters);
+    }, ...(ngDevMode ? [{ debugName: "filters" }] : []));
     _panelVisible = signal(false, ...(ngDevMode ? [{ debugName: "_panelVisible" }] : []));
     set panelState(value) {
         this._panelVisible.set(value);
@@ -8170,8 +8173,102 @@ class QuickPickSidePanelComponent {
     onTableRowClick(row) {
         this.onRowClick.emit(row);
     }
+    createDynamicFilters(data, fields, defaultFilterType = 'multiselect') {
+        const filters = [];
+        fields?.forEach((field) => {
+            const type = field.type ?? defaultFilterType;
+            if (type === 'boolean-multiselect') {
+                filters.push({
+                    ...field,
+                    type,
+                    optionLabel: field.optionLabel ?? 'label',
+                    optionValue: field.optionValue ?? 'key',
+                    options: Array.isArray(field.options) && field.options.length
+                        ? field.options
+                        : [
+                            { key: false, label: 'ACTION.NO' },
+                            { key: true, label: 'ACTION.YES' },
+                        ],
+                    selected: Array.isArray(field.selected)
+                        ? field.selected
+                        : field.selected != null
+                            ? [field.selected]
+                            : [],
+                });
+                return;
+            }
+            const unique = new Set(); // Holds already added display values for deduplication
+            const options = [];
+            // Helper to add a candidate option if valid and not yet added
+            const addOption = (display) => {
+                if (display === null || display === undefined || display === '')
+                    return;
+                const str = this.toDisplay(display);
+                if (!unique.has(str)) {
+                    unique.add(str);
+                    options.push({ key: str, label: str });
+                }
+            };
+            // Extract values for the current field across all rows
+            data?.forEach((row) => {
+                const value = this.getNestedValue(row, field.key);
+                if (value === null || value === undefined || value === '')
+                    return;
+                if (Array.isArray(value)) {
+                    // LIST field: process each element individually
+                    value.forEach((item) => addOption(this.extractItemNameOrValue(item)));
+                }
+                else if (typeof value === 'object') {
+                    // Single object: extract display value
+                    addOption(this.extractItemNameOrValue(value));
+                }
+                else {
+                    // Primitive value (string, number, boolean)
+                    addOption(value);
+                }
+            });
+            // Sort options alphabetically by label
+            options.sort((a, b) => a.label.localeCompare(b.label));
+            // Final filter configuration for this field
+            filters.push({
+                ...field,
+                type: field.type ?? defaultFilterType,
+                options,
+            });
+        });
+        return filters;
+    }
+    toDisplay(val) {
+        if (typeof val === 'boolean') {
+            return val ? 'Yes' : 'No';
+            // return val
+            //   ? translate.instant('ACTION.YES')
+            //   : translate.instant('ACTION.NO');
+        }
+        return String(val);
+    }
+    /**
+     * Extracts a displayable value from an object or primitive.
+     * - Prefers object.name, then object.label, object.value, or object.title.
+     * - Falls back to JSON stringification for objects without display fields.
+     * - Returns primitive values as-is.
+     */
+    extractItemNameOrValue(item) {
+        if (item === null || item === undefined)
+            return null;
+        if (typeof item === 'object') {
+            const cand = item.name ?? item.label ?? item.value ?? item.title;
+            return cand !== undefined ? cand : JSON.stringify(item);
+        }
+        return item;
+    }
+    getNestedValue(obj, path) {
+        return path.split('.').reduce((curr, key) => {
+            return curr && curr[key] !== undefined ? curr[key] : null;
+        }, obj);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickPickSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: QuickPickSidePanelComponent, isStandalone: true, selector: "phoenix-quick-pick-sidepanel", inputs: { title: "title", data: "data", columns: "columns", tableConfiguration: "tableConfiguration", widthClass: "widthClass", isFullScreen: "isFullScreen", panelState: "panelState" }, outputs: { panelStateChange: "panelStateChange", onRowClick: "onRowClick", lazyLoadData: "lazyLoadData", handlePanelFullScreen: "handlePanelFullScreen" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<p-drawer\n  #drawer\n  [visible]=\"drawerVisible()\"\n  (visibleChange)=\"visibleChange($event)\"\n  [header]=\"title | translate\"\n  appendTo=\"body\"\n  position=\"right\"\n  [styleClass]=\"widthClass\"\n>\n  <!-- Content -->\n  <ng-container *ngIf=\"tableConfiguration\">\n    <div class=\"px-2\">\n      <phoenix-table\n        [data]=\"data\"\n        [columns]=\"columns\"\n        [tableConfiguration]=\"tableConfiguration\"\n        (rowSelection)=\"onTableRowClick($event)\"\n      ></phoenix-table>\n    </div>\n  </ng-container>\n</p-drawer>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["columns", "selectedColumnsInput", "tableConfiguration", "filters", "data"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: QuickPickSidePanelComponent, isStandalone: true, selector: "phoenix-quick-pick-sidepanel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, tableConfiguration: { classPropertyName: "tableConfiguration", publicName: "tableConfiguration", isSignal: true, isRequired: false, transformFunction: null }, widthClass: { classPropertyName: "widthClass", publicName: "widthClass", isSignal: true, isRequired: false, transformFunction: null }, isFullScreen: { classPropertyName: "isFullScreen", publicName: "isFullScreen", isSignal: true, isRequired: false, transformFunction: null }, panelState: { classPropertyName: "panelState", publicName: "panelState", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { panelStateChange: "panelStateChange", onRowClick: "onRowClick", lazyLoadData: "lazyLoadData", handlePanelFullScreen: "handlePanelFullScreen" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<p-drawer\n  #drawer\n  [visible]=\"drawerVisible()\"\n  (visibleChange)=\"visibleChange($event)\"\n  [header]=\"title() | translate\"\n  appendTo=\"body\"\n  position=\"right\"\n  [styleClass]=\"widthClass()\"\n>\n  <!-- Content -->\n  @if (tableConfiguration()) {\n    <div class=\"px-2\">\n      <phoenix-table\n        [data]=\"data()\"\n        [columns]=\"columns()\"\n        [tableConfiguration]=\"tableConfiguration()\"\n        [filters]=\"filters()\"\n        (rowSelection)=\"onTableRowClick($event)\"\n      ></phoenix-table>\n    </div>\n  }\n</p-drawer>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["columns", "selectedColumnsInput", "tableConfiguration", "filters", "data"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickPickSidePanelComponent, decorators: [{
             type: Component,
@@ -8181,23 +8278,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         TableComponent,
                         TranslateModule,
                         ButtonModule,
-                    ], template: "<p-drawer\n  #drawer\n  [visible]=\"drawerVisible()\"\n  (visibleChange)=\"visibleChange($event)\"\n  [header]=\"title | translate\"\n  appendTo=\"body\"\n  position=\"right\"\n  [styleClass]=\"widthClass\"\n>\n  <!-- Content -->\n  <ng-container *ngIf=\"tableConfiguration\">\n    <div class=\"px-2\">\n      <phoenix-table\n        [data]=\"data\"\n        [columns]=\"columns\"\n        [tableConfiguration]=\"tableConfiguration\"\n        (rowSelection)=\"onTableRowClick($event)\"\n      ></phoenix-table>\n    </div>\n  </ng-container>\n</p-drawer>" }]
+                    ], template: "<p-drawer\n  #drawer\n  [visible]=\"drawerVisible()\"\n  (visibleChange)=\"visibleChange($event)\"\n  [header]=\"title() | translate\"\n  appendTo=\"body\"\n  position=\"right\"\n  [styleClass]=\"widthClass()\"\n>\n  <!-- Content -->\n  @if (tableConfiguration()) {\n    <div class=\"px-2\">\n      <phoenix-table\n        [data]=\"data()\"\n        [columns]=\"columns()\"\n        [tableConfiguration]=\"tableConfiguration()\"\n        [filters]=\"filters()\"\n        (rowSelection)=\"onTableRowClick($event)\"\n      ></phoenix-table>\n    </div>\n  }\n</p-drawer>\n" }]
         }], propDecorators: { drawer: [{
                 type: ViewChild,
                 args: ['drawer']
-            }], title: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], columns: [{
-                type: Input
-            }], tableConfiguration: [{
-                type: Input
-            }], widthClass: [{
-                type: Input
-            }], isFullScreen: [{
-                type: Input
-            }], panelState: [{
+            }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], tableConfiguration: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfiguration", required: false }] }], widthClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthClass", required: false }] }], isFullScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFullScreen", required: false }] }], panelState: [{
                 type: Input
             }], panelStateChange: [{
                 type: Output
@@ -10178,16 +10263,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Splits a flat list of fields into row chunks for grid rendering.
+ * A field with `style.newRow === true` always starts a fresh row,
+ * regardless of how much space is left in the current row.
+ * Fields without `newRow` keep flowing into the current row (existing
+ * PrimeFlex wrap-by-colWidth behavior is preserved within each chunk).
+ */
+function splitControlsIntoRows(controls) {
+    if (!controls || !controls.length)
+        return [];
+    const rows = [];
+    let current = [];
+    for (const field of controls) {
+        if (field?.style?.newRow && current.length) {
+            rows.push(current);
+            current = [];
+        }
+        current.push(field);
+    }
+    if (current.length)
+        rows.push(current);
+    return rows;
+}
+
 class MetaFormGroupV2Component {
     group;
     form;
     readOnly = false;
+    /** Group's fields split into row chunks, honoring `style.newRow` hard breaks. */
+    get rows() {
+        return splitControlsIntoRows(this.group?.ctrl);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormGroupV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormGroupV2Component, isStandalone: true, selector: "phoenix-meta-form-group-v2", inputs: { group: "group", form: "form", readOnly: "readOnly" }, ngImport: i0, template: "<div class=\"pho-group\" [formGroup]=\"form\">\n  <div class=\"grid\">\n    @for (f of group.ctrl; track f?.configuration?.key) {\n      <div [ngClass]=\"f.style.colWidth || 'col-12 md:col-6'\">\n        <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-field-v2>\n      </div>\n    }\n  </div>\n\n</div>", styles: [".pho-group{margin-bottom:16px}.pho-group__title{font-weight:700;margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MetaFormFieldV2Component, selector: "phoenix-meta-form-field-v2", inputs: ["field", "form", "readOnly", "disableForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormGroupV2Component, isStandalone: true, selector: "phoenix-meta-form-group-v2", inputs: { group: "group", form: "form", readOnly: "readOnly" }, ngImport: i0, template: "<div class=\"pho-group\" [formGroup]=\"form\">\n  @for (row of rows; track $index) {\n    <div class=\"grid\">\n      @for (f of row; track f?.configuration?.key) {\n        <div [ngClass]=\"f.style.colWidth || 'col-12 md:col-6'\">\n          <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-field-v2>\n        </div>\n      }\n    </div>\n  }\n\n</div>", styles: [".pho-group{margin-bottom:16px}.pho-group__title{font-weight:700;margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MetaFormFieldV2Component, selector: "phoenix-meta-form-field-v2", inputs: ["field", "form", "readOnly", "disableForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormGroupV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'phoenix-meta-form-group-v2', standalone: true, imports: [CommonModule, ReactiveFormsModule, MetaFormFieldV2Component], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pho-group\" [formGroup]=\"form\">\n  <div class=\"grid\">\n    @for (f of group.ctrl; track f?.configuration?.key) {\n      <div [ngClass]=\"f.style.colWidth || 'col-12 md:col-6'\">\n        <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-field-v2>\n      </div>\n    }\n  </div>\n\n</div>", styles: [".pho-group{margin-bottom:16px}.pho-group__title{font-weight:700;margin-bottom:8px}\n"] }]
+            args: [{ selector: 'phoenix-meta-form-group-v2', standalone: true, imports: [CommonModule, ReactiveFormsModule, MetaFormFieldV2Component], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pho-group\" [formGroup]=\"form\">\n  @for (row of rows; track $index) {\n    <div class=\"grid\">\n      @for (f of row; track f?.configuration?.key) {\n        <div [ngClass]=\"f.style.colWidth || 'col-12 md:col-6'\">\n          <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-field-v2>\n        </div>\n      }\n    </div>\n  }\n\n</div>", styles: [".pho-group{margin-bottom:16px}.pho-group__title{font-weight:700;margin-bottom:8px}\n"] }]
         }], propDecorators: { group: [{
                 type: Input,
                 args: [{ required: true }]
@@ -10800,6 +10913,13 @@ class MetaFormV2Component {
     get flatControls() {
         return this.config?.controls ?? [];
     }
+    /**
+     * Flat schema split into row chunks, honoring `style.newRow` hard breaks.
+     * Used by the non-grouped grid template.
+     */
+    get controlRows() {
+        return splitControlsIntoRows(this.flatControls);
+    }
     /** TrackBy for group rendering */
     groupTrack(g, idx) {
         return g?.id ?? idx;
@@ -10907,7 +11027,7 @@ class MetaFormV2Component {
         this.depCleanup?.();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormV2Component, isStandalone: true, selector: "phoenix-meta-form-v2", inputs: { form: "form", config: "config", readOnly: "readOnly", contentStyle: "contentStyle", contentClass: "contentClass" }, usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"form\">\n  @if (hasControls) {\n\n    @if (isGrouped) {\n      <p-accordion\n        [multiple]=\"true\"\n        [value]=\"expandedGroupIds\"\n        (valueChange)=\"onAccordionValueChange($event)\"\n      >\n        @for (g of groupedControls; track groupTrack(g, $index)) {\n            <p-accordion-panel [value]=\"panelValue(g)\">\n                <p-accordion-header>\n\n                  <!-- plus/minus toggle icon -->\n                  <ng-template #toggleicon let-active=\"active\">\n                    @if (active) {\n                      <i class=\"pi pi-minus-circle\"></i>\n                    } @else {\n                      <i class=\"pi pi-plus-circle\"></i>\n                    }\n                  </ng-template>\n\n                  {{ g?.groupName | translate }}\n                </p-accordion-header>\n            \n                <p-accordion-content>\n                  <div [ngStyle]=\"contentStyle\" [ngClass]=\"contentClass\">\n                    <phoenix-meta-form-group-v2 [group]=\"g\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-group-v2>\n                  </div>\n                </p-accordion-content>\n            </p-accordion-panel>\n        }\n      </p-accordion>\n\n    } @else {\n        <div class=\"grid\">\n            @for (f of flatControls; track f.configuration.key) {\n            <div [ngClass]=\"f.style.colWidth ?? 'col-12 md:col-6'\">\n                <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-field-v2>\n            </div>\n            }\n        </div>\n    }\n\n  }\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3$1.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i3$1.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i3$1.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i3$1.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MetaFormFieldV2Component, selector: "phoenix-meta-form-field-v2", inputs: ["field", "form", "readOnly", "disableForm"] }, { kind: "component", type: MetaFormGroupV2Component, selector: "phoenix-meta-form-group-v2", inputs: ["group", "form", "readOnly"] }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormV2Component, isStandalone: true, selector: "phoenix-meta-form-v2", inputs: { form: "form", config: "config", readOnly: "readOnly", contentStyle: "contentStyle", contentClass: "contentClass" }, usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"form\">\n  @if (hasControls) {\n\n    @if (isGrouped) {\n      <p-accordion\n        [multiple]=\"true\"\n        [value]=\"expandedGroupIds\"\n        (valueChange)=\"onAccordionValueChange($event)\"\n      >\n        @for (g of groupedControls; track groupTrack(g, $index)) {\n            <p-accordion-panel [value]=\"panelValue(g)\">\n                <p-accordion-header>\n\n                  <!-- plus/minus toggle icon -->\n                  <ng-template #toggleicon let-active=\"active\">\n                    @if (active) {\n                      <i class=\"pi pi-minus-circle\"></i>\n                    } @else {\n                      <i class=\"pi pi-plus-circle\"></i>\n                    }\n                  </ng-template>\n\n                  {{ g?.groupName | translate }}\n                </p-accordion-header>\n            \n                <p-accordion-content>\n                  <div [ngStyle]=\"contentStyle\" [ngClass]=\"contentClass\">\n                    <phoenix-meta-form-group-v2 [group]=\"g\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-group-v2>\n                  </div>\n                </p-accordion-content>\n            </p-accordion-panel>\n        }\n      </p-accordion>\n\n    } @else {\n        @for (row of controlRows; track $index) {\n          <div class=\"grid\">\n              @for (f of row; track f.configuration.key) {\n              <div [ngClass]=\"f.style.colWidth ?? 'col-12 md:col-6'\">\n                  <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-field-v2>\n              </div>\n              }\n          </div>\n        }\n    }\n\n  }\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3$1.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i3$1.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i3$1.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i3$1.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MetaFormFieldV2Component, selector: "phoenix-meta-form-field-v2", inputs: ["field", "form", "readOnly", "disableForm"] }, { kind: "component", type: MetaFormGroupV2Component, selector: "phoenix-meta-form-group-v2", inputs: ["group", "form", "readOnly"] }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormV2Component, decorators: [{
             type: Component,
@@ -10918,7 +11038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         TranslateModule,
                         MetaFormFieldV2Component,
                         MetaFormGroupV2Component,
-                    ], template: "<div [formGroup]=\"form\">\n  @if (hasControls) {\n\n    @if (isGrouped) {\n      <p-accordion\n        [multiple]=\"true\"\n        [value]=\"expandedGroupIds\"\n        (valueChange)=\"onAccordionValueChange($event)\"\n      >\n        @for (g of groupedControls; track groupTrack(g, $index)) {\n            <p-accordion-panel [value]=\"panelValue(g)\">\n                <p-accordion-header>\n\n                  <!-- plus/minus toggle icon -->\n                  <ng-template #toggleicon let-active=\"active\">\n                    @if (active) {\n                      <i class=\"pi pi-minus-circle\"></i>\n                    } @else {\n                      <i class=\"pi pi-plus-circle\"></i>\n                    }\n                  </ng-template>\n\n                  {{ g?.groupName | translate }}\n                </p-accordion-header>\n            \n                <p-accordion-content>\n                  <div [ngStyle]=\"contentStyle\" [ngClass]=\"contentClass\">\n                    <phoenix-meta-form-group-v2 [group]=\"g\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-group-v2>\n                  </div>\n                </p-accordion-content>\n            </p-accordion-panel>\n        }\n      </p-accordion>\n\n    } @else {\n        <div class=\"grid\">\n            @for (f of flatControls; track f.configuration.key) {\n            <div [ngClass]=\"f.style.colWidth ?? 'col-12 md:col-6'\">\n                <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-field-v2>\n            </div>\n            }\n        </div>\n    }\n\n  }\n</div>", styles: [":host{display:block}\n"] }]
+                    ], template: "<div [formGroup]=\"form\">\n  @if (hasControls) {\n\n    @if (isGrouped) {\n      <p-accordion\n        [multiple]=\"true\"\n        [value]=\"expandedGroupIds\"\n        (valueChange)=\"onAccordionValueChange($event)\"\n      >\n        @for (g of groupedControls; track groupTrack(g, $index)) {\n            <p-accordion-panel [value]=\"panelValue(g)\">\n                <p-accordion-header>\n\n                  <!-- plus/minus toggle icon -->\n                  <ng-template #toggleicon let-active=\"active\">\n                    @if (active) {\n                      <i class=\"pi pi-minus-circle\"></i>\n                    } @else {\n                      <i class=\"pi pi-plus-circle\"></i>\n                    }\n                  </ng-template>\n\n                  {{ g?.groupName | translate }}\n                </p-accordion-header>\n            \n                <p-accordion-content>\n                  <div [ngStyle]=\"contentStyle\" [ngClass]=\"contentClass\">\n                    <phoenix-meta-form-group-v2 [group]=\"g\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-group-v2>\n                  </div>\n                </p-accordion-content>\n            </p-accordion-panel>\n        }\n      </p-accordion>\n\n    } @else {\n        @for (row of controlRows; track $index) {\n          <div class=\"grid\">\n              @for (f of row; track f.configuration.key) {\n              <div [ngClass]=\"f.style.colWidth ?? 'col-12 md:col-6'\">\n                  <phoenix-meta-form-field-v2 [field]=\"f\" [form]=\"form\" [readOnly]=\"readOnly\"></phoenix-meta-form-field-v2>\n              </div>\n              }\n          </div>\n        }\n    }\n\n  }\n</div>", styles: [":host{display:block}\n"] }]
         }], propDecorators: { form: [{
                 type: Input,
                 args: [{ required: true }]