@solidxai/core-ui 0.1.2 → 0.1.4-beta.0

package/dist/components/core/common/SolidImageViewer.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useRef } from "react";
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
+
+export interface SolidImageViewerProps {
+    images: string[];
+    open: boolean;
+    onClose: () => void;
+    viewerOptions?: Viewer.Options;
+}
+
+export const SolidImageViewer = ({
+    images,
+    open,
+    onClose,
+    viewerOptions,
+}: SolidImageViewerProps) => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const viewerRef = useRef<Viewer | null>(null);
+
+    // Initialize viewer
+    useEffect(() => {
+        if (!containerRef.current || images.length === 0) return;
+
+        if (viewerRef.current) {
+            viewerRef.current.destroy();
+        }
+
+        viewerRef.current = new Viewer(containerRef.current, {
+            navbar: images.length > 1, // show navbar only if multiple
+            title: false,
+            transition: true,
+            movable: true,
+            scalable: true,
+            rotatable: true,
+            zoomable: true,
+            zIndex: 9999,
+            hidden: () => {
+                onClose();
+            },
+            toolbar: {
+                prev: 1,
+                next: 1,
+                zoomIn: 1,
+                zoomOut: 1,
+                rotateLeft: 1,
+                rotateRight: 1,
+                reset: 1,
+            },
+            ...viewerOptions,
+        });
+
+        return () => {
+            if (viewerRef.current) {
+                viewerRef.current.destroy();
+                viewerRef.current = null;
+            }
+        };
+    }, [images, open]);
+
+    // Show viewer when open becomes true
+    useEffect(() => {
+        if (open && viewerRef.current) {
+            viewerRef.current.show();
+        }
+    }, [open]);
+
+    return (
+        <div
+            ref={containerRef}
+            style={{
+                position: "absolute",
+                visibility: "hidden",
+                width: 0,
+                height: 0,
+                overflow: "hidden",
+            }}
+        >
+            {images.map((src, index) => (
+                <img key={index} src={src} alt={`preview-${index}`} />
+            ))}
+        </div>
+    );
+};

package/dist/components/core/extension/solid-core/modelSequence/modelSequenceFormViewChangeHandler.d.ts

@@ -0,0 +1,19 @@
+declare const hanldeModelSequenceFormViewChange: (event: any) => Promise<{
+    layoutChanged: boolean;
+    dataChanged: boolean;
+    newFormData: {
+        model: null;
+        field: null;
+    };
+    newLayout: import("../../../../..").LayoutNode;
+} | {
+    layoutChanged: boolean;
+    dataChanged: boolean;
+    newFormData: {
+        field: null;
+        model?: undefined;
+    };
+    newLayout: import("../../../../..").LayoutNode;
+} | undefined>;
+export default hanldeModelSequenceFormViewChange;
+//# sourceMappingURL=modelSequenceFormViewChangeHandler.d.ts.map

package/dist/components/core/extension/solid-core/modelSequence/modelSequenceFormViewChangeHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modelSequenceFormViewChangeHandler.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/modelSequence/modelSequenceFormViewChangeHandler.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,iCAAiC,UAAiB,GAAG;;;;;;;;;;;;;;;;cAuD1D,CAAA;AACD,eAAe,iCAAiC,CAAC"}

package/dist/components/core/extension/solid-core/modelSequence/modelSequenceFormViewChangeHandler.js

@@ -0,0 +1,90 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { SolidViewLayoutManager } from "../../../../../components/core/common/SolidViewLayoutManager";
+var hanldeModelSequenceFormViewChange = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+    var modifiedField, modifiedFieldValue, formViewLayout, layout, layoutManager, modelWhereClause, fieldWhereClauseOnModule, fieldWhereClauseOnModel;
+    return __generator(this, function (_a) {
+        console.log("event", event);
+        modifiedField = event.modifiedField, modifiedFieldValue = event.modifiedFieldValue, formViewLayout = event.formViewLayout;
+        layout = formViewLayout;
+        layoutManager = new SolidViewLayoutManager(layout);
+        if (modifiedField === 'module') {
+            modelWhereClause = {
+                module: {
+                    id: { $eq: modifiedFieldValue.id }
+                }
+            };
+            fieldWhereClauseOnModule = {
+                model: {
+                    module: {
+                        id: { $eq: modifiedFieldValue.id }
+                    }
+                }
+            };
+            layoutManager.updateNodeAttributes('model', { "whereClause": JSON.stringify(modelWhereClause) });
+            layoutManager.updateNodeAttributes('field', { "whereClause": JSON.stringify(fieldWhereClauseOnModule) });
+            return [2 /*return*/, {
+                    layoutChanged: true,
+                    dataChanged: true,
+                    newFormData: {
+                        model: null,
+                        field: null
+                    },
+                    newLayout: layoutManager.getLayout(),
+                }];
+        }
+        if (modifiedField === 'model') {
+            fieldWhereClauseOnModel = {
+                model: {
+                    id: { $eq: modifiedFieldValue.id }
+                }
+            };
+            layoutManager.updateNodeAttributes('field', { "whereClause": JSON.stringify(fieldWhereClauseOnModel) });
+            return [2 /*return*/, {
+                    layoutChanged: true,
+                    dataChanged: true,
+                    newFormData: {
+                        field: null
+                    },
+                    newLayout: layoutManager.getLayout(),
+                }];
+        }
+        return [2 /*return*/];
+    });
+}); };
+export default hanldeModelSequenceFormViewChange;
+//# sourceMappingURL=modelSequenceFormViewChangeHandler.js.map

package/dist/components/core/extension/solid-core/modelSequence/modelSequenceFormViewChangeHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modelSequenceFormViewChangeHandler.js","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/modelSequence/modelSequenceFormViewChangeHandler.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,8DAA8D,CAAC;AAEtG,IAAM,iCAAiC,GAAG,UAAO,KAAU;;;QAEvD,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;QAEnB,aAAa,GAAyC,KAAK,cAA9C,EAAE,kBAAkB,GAAqB,KAAK,mBAA1B,EAAE,cAAc,GAAK,KAAK,eAAV,CAAW;QAE9D,MAAM,GAAG,cAAc,CAAC;QACxB,aAAa,GAAG,IAAI,sBAAsB,CAAC,MAAM,CAAC,CAAC;QACzD,IAAI,aAAa,KAAK,QAAQ,EAAE;YAEtB,gBAAgB,GAAG;gBACrB,MAAM,EAAE;oBACJ,EAAE,EAAE,EAAE,GAAG,EAAE,kBAAkB,CAAC,EAAE,EAAE;iBACrC;aACJ,CAAC;YACI,wBAAwB,GAAG;gBAC7B,KAAK,EAAE;oBACH,MAAM,EAAE;wBACJ,EAAE,EAAE,EAAE,GAAG,EAAE,kBAAkB,CAAC,EAAE,EAAE;qBACrC;iBACJ;aACJ,CAAC;YAEF,aAAa,CAAC,oBAAoB,CAAC,OAAO,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;YACjG,aAAa,CAAC,oBAAoB,CAAC,OAAO,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,wBAAwB,CAAC,EAAE,CAAC,CAAC;YAEzG,sBAAO;oBACH,aAAa,EAAE,IAAI;oBACnB,WAAW,EAAE,IAAI;oBACjB,WAAW,EAAE;wBACT,KAAK,EAAE,IAAI;wBACX,KAAK,EAAE,IAAI;qBACd;oBACD,SAAS,EAAE,aAAa,CAAC,SAAS,EAAE;iBACvC,EAAA;SACJ;QACD,IAAI,aAAa,KAAK,OAAO,EAAE;YAErB,uBAAuB,GAAG;gBAC5B,KAAK,EAAE;oBACH,EAAE,EAAE,EAAE,GAAG,EAAE,kBAAkB,CAAC,EAAE,EAAE;iBACrC;aACJ,CAAC;YAEF,aAAa,CAAC,oBAAoB,CAAC,OAAO,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,EAAE,CAAC,CAAC;YAExG,sBAAO;oBACH,aAAa,EAAE,IAAI;oBACnB,WAAW,EAAE,IAAI;oBACjB,WAAW,EAAE;wBACT,KAAK,EAAE,IAAI;qBACd;oBACD,SAAS,EAAE,aAAa,CAAC,SAAS,EAAE;iBACvC,EAAA;SACJ;;;KACJ,CAAA;AACD,eAAe,iCAAiC,CAAC","sourcesContent":["import { SolidViewLayoutManager } from \"../../../../../components/core/common/SolidViewLayoutManager\";\n\nconst hanldeModelSequenceFormViewChange = async (event: any) => {\n\n    console.log(\"event\", event)\n\n    const { modifiedField, modifiedFieldValue, formViewLayout } = event;\n\n    const layout = formViewLayout;\n    const layoutManager = new SolidViewLayoutManager(layout);\n    if (modifiedField === 'module') {\n        // module change\n        const modelWhereClause = {\n            module: {\n                id: { $eq: modifiedFieldValue.id }\n            }\n        };\n        const fieldWhereClauseOnModule = {\n            model: {\n                module: {\n                    id: { $eq: modifiedFieldValue.id }\n                }\n            }\n        };\n\n        layoutManager.updateNodeAttributes('model', { \"whereClause\": JSON.stringify(modelWhereClause) });\n        layoutManager.updateNodeAttributes('field', { \"whereClause\": JSON.stringify(fieldWhereClauseOnModule) });\n\n        return {\n            layoutChanged: true,\n            dataChanged: true,\n            newFormData: {\n                model: null,\n                field: null\n            },\n            newLayout: layoutManager.getLayout(),\n        }\n    }\n    if (modifiedField === 'model') {\n        // model change\n        const fieldWhereClauseOnModel = {\n            model: {\n                id: { $eq: modifiedFieldValue.id }\n            }\n        };\n\n        layoutManager.updateNodeAttributes('field', { \"whereClause\": JSON.stringify(fieldWhereClauseOnModel) });\n\n        return {\n            layoutChanged: true,\n            dataChanged: true,\n            newFormData: {\n                field: null\n            },\n            newLayout: layoutManager.getLayout(),\n        }\n    }\n}\nexport default hanldeModelSequenceFormViewChange;"]}

package/dist/components/core/extension/solid-core/modelSequence/modelSequenceFormViewChangeHandler.tsx

@@ -0,0 +1,59 @@
+import { SolidViewLayoutManager } from "../../../../../components/core/common/SolidViewLayoutManager";
+
+const hanldeModelSequenceFormViewChange = async (event: any) => {
+
+    console.log("event", event)
+
+    const { modifiedField, modifiedFieldValue, formViewLayout } = event;
+
+    const layout = formViewLayout;
+    const layoutManager = new SolidViewLayoutManager(layout);
+    if (modifiedField === 'module') {
+        // module change
+        const modelWhereClause = {
+            module: {
+                id: { $eq: modifiedFieldValue.id }
+            }
+        };
+        const fieldWhereClauseOnModule = {
+            model: {
+                module: {
+                    id: { $eq: modifiedFieldValue.id }
+                }
+            }
+        };
+
+        layoutManager.updateNodeAttributes('model', { "whereClause": JSON.stringify(modelWhereClause) });
+        layoutManager.updateNodeAttributes('field', { "whereClause": JSON.stringify(fieldWhereClauseOnModule) });
+
+        return {
+            layoutChanged: true,
+            dataChanged: true,
+            newFormData: {
+                model: null,
+                field: null
+            },
+            newLayout: layoutManager.getLayout(),
+        }
+    }
+    if (modifiedField === 'model') {
+        // model change
+        const fieldWhereClauseOnModel = {
+            model: {
+                id: { $eq: modifiedFieldValue.id }
+            }
+        };
+
+        layoutManager.updateNodeAttributes('field', { "whereClause": JSON.stringify(fieldWhereClauseOnModel) });
+
+        return {
+            layoutChanged: true,
+            dataChanged: true,
+            newFormData: {
+                field: null
+            },
+            newLayout: layoutManager.getLayout(),
+        }
+    }
+}
+export default hanldeModelSequenceFormViewChange;

package/dist/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RolePermissionsManyToManyFieldWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAe5E,eAAO,MAAM,oCAAoC,6BAA8B,yBAAyB,4CA0GvG,CAAC"}
+{"version":3,"file":"RolePermissionsManyToManyFieldWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAe5E,eAAO,MAAM,oCAAoC,6BAA8B,yBAAyB,4CA+GvG,CAAC"}

package/dist/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.js

@@ -38,12 +38,16 @@ var groupByController = function (items) {
     return grouped;
 };
 export var RolePermissionsManyToManyFieldWidget = function (_a) {
+    var _b;
     var formik = _a.formik, fieldContext = _a.fieldContext;
     var fieldLayoutInfo = fieldContext.field;
     var readOnlyPermission = fieldContext.readOnly;
-    var _b = useState(false), visibleCreateDialog = _b[0], setVisibleCreateDialog = _b[1];
-    var _c = useRelationEntityHandler({ fieldContext: fieldContext, formik: formik }), autoCompleteItems = _c.autoCompleteItems, fetchRelationEntities = _c.fetchRelationEntities, addNewRelation = _c.addNewRelation;
-    var _d = useState({}), visibleDialogs = _d[0], setVisibleDialogs = _d[1];
+    var _c = useState(false), visibleCreateDialog = _c[0], setVisibleCreateDialog = _c[1];
+    var _d = useRelationEntityHandler({ fieldContext: fieldContext, formik: formik }), autoCompleteItems = _d.autoCompleteItems, fetchRelationEntities = _d.fetchRelationEntities, populateFormikWithRelatedEntities = _d.populateFormikWithRelatedEntities, addNewRelation = _d.addNewRelation;
+    var _e = useState({}), visibleDialogs = _e[0], setVisibleDialogs = _e[1];
+    useEffect(function () {
+        populateFormikWithRelatedEntities();
+    }, [(_b = formik.values) === null || _b === void 0 ? void 0 : _b.id]);
     useEffect(function () {
         var queryData = {
             offset: 0,

package/dist/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"RolePermissionsManyToManyFieldWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { capitalize } from \"lodash\";\nimport { Panel } from \"primereact/panel\";\nimport { useEffect, useState } from \"react\";\nimport { Button } from \"primereact/button\";\nimport { InputSwitch } from \"primereact/inputswitch\";\nimport { useRelationEntityHandler } from \"../../../../../components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler\";\nimport { InlineRelationEntityDialog } from \"../../../../../components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog\";\nimport { Checkbox } from \"primereact/checkbox\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport qs from 'qs';\n\nconst groupByController = (items: any[]) => {\n    const grouped: { [key: string]: any[] } = {};\n    items.forEach((item) => {\n        const controllerName = item.label.split(\".\")[0];\n        if (!grouped[controllerName]) {\n            grouped[controllerName] = [];\n        }\n        grouped[controllerName].push(item);\n    });\n    return grouped;\n};\n\nexport const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n    const fieldLayoutInfo = fieldContext.field;\n\n    const readOnlyPermission = fieldContext.readOnly;\n    const [visibleCreateDialog, setVisibleCreateDialog] = useState(false);\n    const { autoCompleteItems, fetchRelationEntities, addNewRelation } = useRelationEntityHandler({ fieldContext, formik });\n    const [visibleDialogs, setVisibleDialogs] = useState<{ [key: string]: boolean }>({});\n\n    useEffect(() => {\n        const queryData: any = {\n            offset: 0,\n            limit: 1000\n        };\n        const autocompleteQs = qs.stringify(queryData, {\n            encodeValuesOnly: true,\n        });\n        fetchRelationEntities(autocompleteQs);\n    }, []);\n\n    const handleCheckboxChange = (e: any) => {\n        if (formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.value === e.value)) {\n            formik.setFieldValue(fieldLayoutInfo.attrs.name, formik.values[fieldLayoutInfo.attrs.name].filter((s: any) => s.value !== e.value));\n        } else {\n            formik.setFieldValue(fieldLayoutInfo.attrs.name, [...formik.values[fieldLayoutInfo.attrs.name], e]);\n        }\n    };\n\n    const getHeaderTemplate = (controllerName: string) => (options: any) => {\n        const className = `${options.className} justify-content-space-between`;\n    \n        return (\n            <div className={className}>\n                <div className=\"flex align-items-center gap-3\">\n                    <label className=\"form-field-label text-base lg:text-lg font-bold\">\n                        {controllerName}\n                    </label>\n                    {fieldContext.field.attrs.inlineCreate && (\n                        <>\n                            <Button\n                                icon=\"pi pi-plus\"\n                                rounded\n                                outlined\n                                aria-label=\"Add\"\n                                type=\"button\"\n                                size=\"small\"\n                                onClick={() =>\n                                    setVisibleDialogs((prev) => ({\n                                        ...prev,\n                                        [controllerName]: true,\n                                    }))\n                                }\n                                className=\"custom-add-button\"\n                            />\n                            <InlineRelationEntityDialog\n                                visible={visibleCreateDialog}\n                                setVisible={setVisibleCreateDialog}\n                                fieldContext={fieldContext}\n                                onCreate={addNewRelation}\n                            />\n                        </>\n                    )}\n                </div>\n                <div>{options.togglerElement}</div>\n            </div>\n        );\n    };\n    \n    const groupedEntities = groupByController(autoCompleteItems || []);\n    return (\n            <div>\n                {Object.keys(groupedEntities).map((controllerName) => (\n                    <Panel toggleable headerTemplate={getHeaderTemplate(controllerName)} key={controllerName} className=\"mt-3 lg:mt-4\">\n                        <div className=\"formgrid grid gap-3 lg:gap-0 \">\n                            {groupedEntities[controllerName].map((entity: any, i: number) => {\n                                const isChecked = formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.value === entity.value);\n                                return (\n                                    <div key={entity.label} className={`field col-12 lg:col-6  flex gap-2 ${i >= 2 ? 'lg:mt-3' : ''}`}>\n                                        <Checkbox\n                                            readOnly={readOnlyPermission}\n                                            inputId={entity.label}\n                                            checked={isChecked}\n                                            onChange={() => handleCheckboxChange(entity)}\n                                        />\n                                        <label htmlFor={entity.label} className=\"form-field-label m-0 solid-permisson-form-label\"> {entity.label}</label>\n                                    </div>\n                                )\n                            })}\n                        </div>\n                    </Panel>\n                ))}\n                {Object.keys(groupedEntities).map((controllerName) => (\n                    <InlineRelationEntityDialog\n                        key={`dialog-${controllerName}`}\n                        visible={visibleDialogs[controllerName] || false}\n                        setVisible={(visible: any) =>\n                            setVisibleDialogs((prev) => ({\n                                ...prev,\n                                [controllerName]: visible,\n                            }))\n                        }\n                        fieldContext={fieldContext}\n                        onCreate={addNewRelation}\n                    />\n                ))}\n            </div>\n        )\n};"]}
+{"version":3,"file":"RolePermissionsManyToManyFieldWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { capitalize } from \"lodash\";\nimport { Panel } from \"primereact/panel\";\nimport { useEffect, useState } from \"react\";\nimport { Button } from \"primereact/button\";\nimport { InputSwitch } from \"primereact/inputswitch\";\nimport { useRelationEntityHandler } from \"../../../../../components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler\";\nimport { InlineRelationEntityDialog } from \"../../../../../components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog\";\nimport { Checkbox } from \"primereact/checkbox\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport qs from 'qs';\n\nconst groupByController = (items: any[]) => {\n    const grouped: { [key: string]: any[] } = {};\n    items.forEach((item) => {\n        const controllerName = item.label.split(\".\")[0];\n        if (!grouped[controllerName]) {\n            grouped[controllerName] = [];\n        }\n        grouped[controllerName].push(item);\n    });\n    return grouped;\n};\n\nexport const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n    const fieldLayoutInfo = fieldContext.field;\n\n    const readOnlyPermission = fieldContext.readOnly;\n    const [visibleCreateDialog, setVisibleCreateDialog] = useState(false);\n    const { autoCompleteItems, fetchRelationEntities, populateFormikWithRelatedEntities, addNewRelation } = useRelationEntityHandler({ fieldContext, formik });\n    const [visibleDialogs, setVisibleDialogs] = useState<{ [key: string]: boolean }>({});\n\n\n    useEffect(() => {\n        populateFormikWithRelatedEntities();\n    }, [formik.values?.id]);\n\n    useEffect(() => {\n        const queryData: any = {\n            offset: 0,\n            limit: 1000\n        };\n        const autocompleteQs = qs.stringify(queryData, {\n            encodeValuesOnly: true,\n        });\n        fetchRelationEntities(autocompleteQs);\n    }, []);\n\n    const handleCheckboxChange = (e: any) => {\n        if (formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.value === e.value)) {\n            formik.setFieldValue(fieldLayoutInfo.attrs.name, formik.values[fieldLayoutInfo.attrs.name].filter((s: any) => s.value !== e.value));\n        } else {\n            formik.setFieldValue(fieldLayoutInfo.attrs.name, [...formik.values[fieldLayoutInfo.attrs.name], e]);\n        }\n    };\n\n    const getHeaderTemplate = (controllerName: string) => (options: any) => {\n        const className = `${options.className} justify-content-space-between`;\n\n        return (\n            <div className={className}>\n                <div className=\"flex align-items-center gap-3\">\n                    <label className=\"form-field-label text-base lg:text-lg font-bold\">\n                        {controllerName}\n                    </label>\n                    {fieldContext.field.attrs.inlineCreate && (\n                        <>\n                            <Button\n                                icon=\"pi pi-plus\"\n                                rounded\n                                outlined\n                                aria-label=\"Add\"\n                                type=\"button\"\n                                size=\"small\"\n                                onClick={() =>\n                                    setVisibleDialogs((prev) => ({\n                                        ...prev,\n                                        [controllerName]: true,\n                                    }))\n                                }\n                                className=\"custom-add-button\"\n                            />\n                            <InlineRelationEntityDialog\n                                visible={visibleCreateDialog}\n                                setVisible={setVisibleCreateDialog}\n                                fieldContext={fieldContext}\n                                onCreate={addNewRelation}\n                            />\n                        </>\n                    )}\n                </div>\n                <div>{options.togglerElement}</div>\n            </div>\n        );\n    };\n\n    const groupedEntities = groupByController(autoCompleteItems || []);\n    return (\n        <div>\n            {Object.keys(groupedEntities).map((controllerName) => (\n                <Panel toggleable headerTemplate={getHeaderTemplate(controllerName)} key={controllerName} className=\"mt-3 lg:mt-4\">\n                    <div className=\"formgrid grid gap-3 lg:gap-0 \">\n                        {groupedEntities[controllerName].map((entity: any, i: number) => {\n                            const isChecked = formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.value === entity.value);\n                            return (\n                                <div key={entity.label} className={`field col-12 lg:col-6  flex gap-2 ${i >= 2 ? 'lg:mt-3' : ''}`}>\n                                    <Checkbox\n                                        readOnly={readOnlyPermission}\n                                        inputId={entity.label}\n                                        checked={isChecked}\n                                        onChange={() => handleCheckboxChange(entity)}\n                                    />\n                                    <label htmlFor={entity.label} className=\"form-field-label m-0 solid-permisson-form-label\"> {entity.label}</label>\n                                </div>\n                            )\n                        })}\n                    </div>\n                </Panel>\n            ))}\n            {Object.keys(groupedEntities).map((controllerName) => (\n                <InlineRelationEntityDialog\n                    key={`dialog-${controllerName}`}\n                    visible={visibleDialogs[controllerName] || false}\n                    setVisible={(visible: any) =>\n                        setVisibleDialogs((prev) => ({\n                            ...prev,\n                            [controllerName]: visible,\n                        }))\n                    }\n                    fieldContext={fieldContext}\n                    onCreate={addNewRelation}\n                />\n            ))}\n        </div>\n    )\n};"]}

package/dist/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx

@@ -27,9 +27,14 @@ export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: S
 
     const readOnlyPermission = fieldContext.readOnly;
     const [visibleCreateDialog, setVisibleCreateDialog] = useState(false);
-    const { autoCompleteItems, fetchRelationEntities, addNewRelation } = useRelationEntityHandler({ fieldContext, formik });
+    const { autoCompleteItems, fetchRelationEntities, populateFormikWithRelatedEntities, addNewRelation } = useRelationEntityHandler({ fieldContext, formik });
     const [visibleDialogs, setVisibleDialogs] = useState<{ [key: string]: boolean }>({});
 
+
+    useEffect(() => {
+        populateFormikWithRelatedEntities();
+    }, [formik.values?.id]);
+
     useEffect(() => {
         const queryData: any = {
             offset: 0,
@@ -51,7 +56,7 @@ export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: S
 
     const getHeaderTemplate = (controllerName: string) => (options: any) => {
         const className = `${options.className} justify-content-space-between`;
-    
+
         return (
             <div className={className}>
                 <div className="flex align-items-center gap-3">
@@ -88,44 +93,44 @@ export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: S
             </div>
         );
     };
-    
+
     const groupedEntities = groupByController(autoCompleteItems || []);
     return (
-            <div>
-                {Object.keys(groupedEntities).map((controllerName) => (
-                    <Panel toggleable headerTemplate={getHeaderTemplate(controllerName)} key={controllerName} className="mt-3 lg:mt-4">
-                        <div className="formgrid grid gap-3 lg:gap-0 ">
-                            {groupedEntities[controllerName].map((entity: any, i: number) => {
-                                const isChecked = formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.value === entity.value);
-                                return (
-                                    <div key={entity.label} className={`field col-12 lg:col-6  flex gap-2 ${i >= 2 ? 'lg:mt-3' : ''}`}>
-                                        <Checkbox
-                                            readOnly={readOnlyPermission}
-                                            inputId={entity.label}
-                                            checked={isChecked}
-                                            onChange={() => handleCheckboxChange(entity)}
-                                        />
-                                        <label htmlFor={entity.label} className="form-field-label m-0 solid-permisson-form-label"> {entity.label}</label>
-                                    </div>
-                                )
-                            })}
-                        </div>
-                    </Panel>
-                ))}
-                {Object.keys(groupedEntities).map((controllerName) => (
-                    <InlineRelationEntityDialog
-                        key={`dialog-${controllerName}`}
-                        visible={visibleDialogs[controllerName] || false}
-                        setVisible={(visible: any) =>
-                            setVisibleDialogs((prev) => ({
-                                ...prev,
-                                [controllerName]: visible,
-                            }))
-                        }
-                        fieldContext={fieldContext}
-                        onCreate={addNewRelation}
-                    />
-                ))}
-            </div>
-        )
+        <div>
+            {Object.keys(groupedEntities).map((controllerName) => (
+                <Panel toggleable headerTemplate={getHeaderTemplate(controllerName)} key={controllerName} className="mt-3 lg:mt-4">
+                    <div className="formgrid grid gap-3 lg:gap-0 ">
+                        {groupedEntities[controllerName].map((entity: any, i: number) => {
+                            const isChecked = formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.value === entity.value);
+                            return (
+                                <div key={entity.label} className={`field col-12 lg:col-6  flex gap-2 ${i >= 2 ? 'lg:mt-3' : ''}`}>
+                                    <Checkbox
+                                        readOnly={readOnlyPermission}
+                                        inputId={entity.label}
+                                        checked={isChecked}
+                                        onChange={() => handleCheckboxChange(entity)}
+                                    />
+                                    <label htmlFor={entity.label} className="form-field-label m-0 solid-permisson-form-label"> {entity.label}</label>
+                                </div>
+                            )
+                        })}
+                    </div>
+                </Panel>
+            ))}
+            {Object.keys(groupedEntities).map((controllerName) => (
+                <InlineRelationEntityDialog
+                    key={`dialog-${controllerName}`}
+                    visible={visibleDialogs[controllerName] || false}
+                    setVisible={(visible: any) =>
+                        setVisibleDialogs((prev) => ({
+                            ...prev,
+                            [controllerName]: visible,
+                        }))
+                    }
+                    fieldContext={fieldContext}
+                    onCreate={addNewRelation}
+                />
+            ))}
+        </div>
+    )
 };

package/dist/components/core/filter/SolidOneToManyFilterElement.d.ts

@@ -0,0 +1,2 @@
+export declare const SolidOneToManyFilterElement: ({ value, updateInputs, index, fieldMetadata }: any) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidOneToManyFilterElement.d.ts.map

package/dist/components/core/filter/SolidOneToManyFilterElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidOneToManyFilterElement.d.ts","sourceRoot":"","sources":["../../../../src/components/core/filter/SolidOneToManyFilterElement.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,2BAA2B,kDAKrC,GAAG,4CAiDL,CAAC"}

package/dist/components/core/filter/SolidOneToManyFilterElement.js

@@ -0,0 +1,86 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
+import { AutoComplete } from "primereact/autocomplete";
+import { useState } from "react";
+import qs from "qs";
+export var SolidOneToManyFilterElement = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? [] : _b, updateInputs = _a.updateInputs, index = _a.index, fieldMetadata = _a.fieldMetadata;
+    var entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
+    var useLazyGetSolidEntitiesQuery = entityApi.useLazyGetSolidEntitiesQuery;
+    var triggerGetSolidEntities = useLazyGetSolidEntitiesQuery()[0];
+    var _c = useState([]), suggestions = _c[0], setSuggestions = _c[1];
+    var search = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        var queryData, qsString, response;
+        var _a;
+        var _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    queryData = {
+                        offset: 0,
+                        limit: 20,
+                        filters: (_a = {},
+                            _a[(_c = (_b = fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationModel) === null || _b === void 0 ? void 0 : _b.userKeyField) === null || _c === void 0 ? void 0 : _c.name] = {
+                                $containsi: event.query
+                            },
+                            _a)
+                    };
+                    qsString = qs.stringify(queryData, { encodeValuesOnly: true });
+                    return [4 /*yield*/, triggerGetSolidEntities(qsString)];
+                case 1:
+                    response = _d.sent();
+                    if (response.data) {
+                        setSuggestions(response.data.records.map(function (item) { return ({
+                            label: item[fieldMetadata.relationModel.userKeyField.name],
+                            value: item.id
+                        }); }));
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (_jsx(AutoComplete
+    // multiple
+    , { 
+        // multiple
+        dropdown: true, field: "label", value: value, suggestions: suggestions, completeMethod: search, onChange: function (e) {
+            updateInputs(index, e.value);
+        }, placeholder: "Select ".concat(fieldMetadata.displayName), className: "w-full", inputClassName: "w-full p-inputtext-sm" }));
+};
+//# sourceMappingURL=SolidOneToManyFilterElement.js.map

package/dist/components/core/filter/SolidOneToManyFilterElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidOneToManyFilterElement.js","sourceRoot":"","sources":["../../../../src/components/core/filter/SolidOneToManyFilterElement.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,YAAY,EAA6B,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,2BAA2B,GAAG,UAAC,EAKtC;QAJF,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,YAAY,kBAAA,EACZ,KAAK,WAAA,EACL,aAAa,mBAAA;IAGb,IAAM,SAAS,GAAG,oBAAoB,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;IAC1E,IAAA,4BAA4B,GAAK,SAAS,6BAAd,CAAe;IAC5C,IAAA,uBAAuB,GAAI,4BAA4B,EAAE,GAAlC,CAAmC;IAE3D,IAAA,KAAgC,QAAQ,CAAQ,EAAE,CAAC,EAAlD,WAAW,QAAA,EAAE,cAAc,QAAuB,CAAC;IAE1D,IAAM,MAAM,GAAG,UAAO,KAAgC;;;;;;;oBAC5C,SAAS,GAAG;wBACd,MAAM,EAAE,CAAC;wBACT,KAAK,EAAE,EAAE;wBACT,OAAO;4BACH,GAAC,MAAA,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,aAAa,0CAAE,YAAY,0CAAE,IAAI,IAAG;gCAChD,UAAU,EAAE,KAAK,CAAC,KAAK;6BAC1B;+BACJ;qBACJ,CAAC;oBAEI,QAAQ,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,CAAC;oBACpD,qBAAM,uBAAuB,CAAC,QAAQ,CAAC,EAAA;;oBAAlD,QAAQ,GAAG,SAAuC;oBAExD,IAAI,QAAQ,CAAC,IAAI,EAAE;wBACf,cAAc,CACV,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,UAAC,IAAS,IAAK,OAAA,CAAC;4BACtC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC;4BAC1D,KAAK,EAAE,IAAI,CAAC,EAAE;yBACjB,CAAC,EAHuC,CAGvC,CAAC,CACN,CAAC;qBACL;;;;SACJ,CAAC;IAGF,OAAO,CACH,KAAC,YAAY;IACT,WAAW;;QAAX,WAAW;QACX,QAAQ,QACR,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,MAAM,EACtB,QAAQ,EAAE,UAAC,CAAC;YACR,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;QAChC,CAAC,EACD,WAAW,EAAE,iBAAU,aAAa,CAAC,WAAW,CAAE,EAClD,SAAS,EAAC,QAAQ,EAClB,cAAc,EAAC,uBAAuB,GACxC,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["\n\nimport { createSolidEntityApi } from \"../../../redux/api/solidEntityApi\";\nimport { AutoComplete, AutoCompleteCompleteEvent } from \"primereact/autocomplete\";\nimport { useEffect, useState } from \"react\";\nimport qs from \"qs\";\n\nexport const SolidOneToManyFilterElement = ({\n    value = [],\n    updateInputs,\n    index,\n    fieldMetadata\n}: any) => {\n\n    const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);\n    const { useLazyGetSolidEntitiesQuery } = entityApi;\n    const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();\n\n    const [suggestions, setSuggestions] = useState<any[]>([]);\n\n    const search = async (event: AutoCompleteCompleteEvent) => {\n        const queryData = {\n            offset: 0,\n            limit: 20,\n            filters: {\n                [fieldMetadata?.relationModel?.userKeyField?.name]: {\n                    $containsi: event.query\n                }\n            }\n        };\n\n        const qsString = qs.stringify(queryData, { encodeValuesOnly: true });\n        const response = await triggerGetSolidEntities(qsString);\n\n        if (response.data) {\n            setSuggestions(\n                response.data.records.map((item: any) => ({\n                    label: item[fieldMetadata.relationModel.userKeyField.name],\n                    value: item.id\n                }))\n            );\n        }\n    };\n\n\n    return (\n        <AutoComplete\n            // multiple\n            dropdown\n            field=\"label\"\n            value={value}\n            suggestions={suggestions}\n            completeMethod={search}\n            onChange={(e) => {\n                updateInputs(index, e.value)\n            }}\n            placeholder={`Select ${fieldMetadata.displayName}`}\n            className=\"w-full\"\n            inputClassName=\"w-full p-inputtext-sm\"\n        />\n    );\n};"]}

package/dist/components/core/filter/SolidOneToManyFilterElement.tsx

@@ -0,0 +1,62 @@
+
+
+import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { useEffect, useState } from "react";
+import qs from "qs";
+
+export const SolidOneToManyFilterElement = ({
+    value = [],
+    updateInputs,
+    index,
+    fieldMetadata
+}: any) => {
+
+    const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
+    const { useLazyGetSolidEntitiesQuery } = entityApi;
+    const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
+
+    const [suggestions, setSuggestions] = useState<any[]>([]);
+
+    const search = async (event: AutoCompleteCompleteEvent) => {
+        const queryData = {
+            offset: 0,
+            limit: 20,
+            filters: {
+                [fieldMetadata?.relationModel?.userKeyField?.name]: {
+                    $containsi: event.query
+                }
+            }
+        };
+
+        const qsString = qs.stringify(queryData, { encodeValuesOnly: true });
+        const response = await triggerGetSolidEntities(qsString);
+
+        if (response.data) {
+            setSuggestions(
+                response.data.records.map((item: any) => ({
+                    label: item[fieldMetadata.relationModel.userKeyField.name],
+                    value: item.id
+                }))
+            );
+        }
+    };
+
+
+    return (
+        <AutoComplete
+            // multiple
+            dropdown
+            field="label"
+            value={value}
+            suggestions={suggestions}
+            completeMethod={search}
+            onChange={(e) => {
+                updateInputs(index, e.value)
+            }}
+            placeholder={`Select ${fieldMetadata.displayName}`}
+            className="w-full"
+            inputClassName="w-full p-inputtext-sm"
+        />
+    );
+};

package/dist/components/core/filter/SolidVarInputsFilterElement.d.ts

@@ -7,6 +7,7 @@ export declare enum InputTypes {
     SelectionStatic = "SelectionStatic",
     RelationManyToOne = "RelationManyToOne",
     RelationManyToMany = "RelationManyToMany",
+    RelationOneToMany = "RelationOneToMany",
     SelectionDynamic = "SelectionDynamic",
     Boolean = "Boolean"
 }

package/dist/components/core/filter/SolidVarInputsFilterElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidVarInputsFilterElement.d.ts","sourceRoot":"","sources":["../../../../src/components/core/filter/SolidVarInputsFilterElement.tsx"],"names":[],"mappings":"AAWA,oBAAY,UAAU;IAClB,IAAI,SAAS;IACb,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,eAAe,oBAAoB;IACnC,iBAAiB,sBAAsB;IACvC,kBAAkB,uBAAuB;IACzC,gBAAgB,qBAAqB;IACrC,OAAO,YAAY;CACtB;AAID,eAAO,MAAM,2BAA2B,mEAA6F,GAAG,4CAsLvI,CAAA"}
+{"version":3,"file":"SolidVarInputsFilterElement.d.ts","sourceRoot":"","sources":["../../../../src/components/core/filter/SolidVarInputsFilterElement.tsx"],"names":[],"mappings":"AAYA,oBAAY,UAAU;IAClB,IAAI,SAAS;IACb,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,eAAe,oBAAoB;IACnC,iBAAiB,sBAAsB;IACvC,kBAAkB,uBAAuB;IACzC,iBAAiB,sBAAsB;IACvC,gBAAgB,qBAAqB;IACrC,OAAO,YAAY;CACtB;AAID,eAAO,MAAM,2BAA2B,mEAA6F,GAAG,4CA8LvI,CAAA"}