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

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