@solidxai/core-ui 0.1.9-beta.2 → 0.1.9-beta.20

package/dist/components/core/extension/solid-core/moduleMetadata/list/moduleMetadataListOnLoad.js

@@ -0,0 +1,133 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 { waitForBackendAvailability } from "../../../../../../helpers/waitForBackendAvailability";
+import { isButtonVisibleInCurrentEnv } from "../../../../../../helpers/buttonEnvironment";
+import { solidGet } from "../../../../../../http/solidHttp";
+import { openPopup } from "../../../../../../redux/features/popupSlice";
+import { getSolidStoreDispatch } from "../../../../../../redux/store/solidEntityApiPool";
+var hasAttemptedResumeLookup = false;
+var lastOpenedTransactionKey = null;
+var pendingResumeLookup = null;
+export default function moduleMetadataListOnLoad(event) {
+    var _a, _b, _c;
+    return __awaiter(this, void 0, void 0, function () {
+        var dispatch, listViewAttrs, headerButtons, importButton;
+        var _this = this;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    if (hasAttemptedResumeLookup) {
+                        return [2 /*return*/];
+                    }
+                    if (!pendingResumeLookup) return [3 /*break*/, 2];
+                    return [4 /*yield*/, pendingResumeLookup];
+                case 1:
+                    _d.sent();
+                    return [2 /*return*/];
+                case 2:
+                    dispatch = getSolidStoreDispatch();
+                    if (!dispatch) {
+                        return [2 /*return*/];
+                    }
+                    listViewAttrs = ((_b = (_a = event === null || event === void 0 ? void 0 : event.listViewLayout) === null || _a === void 0 ? void 0 : _a.attrs) !== null && _b !== void 0 ? _b : {});
+                    headerButtons = (_c = listViewAttrs.headerButtons) !== null && _c !== void 0 ? _c : [];
+                    importButton = headerButtons.find(function (button) { var _a; return ((_a = button === null || button === void 0 ? void 0 : button.attrs) === null || _a === void 0 ? void 0 : _a.action) === "ModuleImportListHeaderAction"; });
+                    if (!(importButton === null || importButton === void 0 ? void 0 : importButton.attrs) || !isButtonVisibleInCurrentEnv(importButton === null || importButton === void 0 ? void 0 : importButton.attrs)) {
+                        return [2 /*return*/];
+                    }
+                    pendingResumeLookup = (function () { return __awaiter(_this, void 0, void 0, function () {
+                        var backendReady, response, transaction, error_1;
+                        var _a, _b;
+                        return __generator(this, function (_c) {
+                            switch (_c.label) {
+                                case 0:
+                                    _c.trys.push([0, 3, 4, 5]);
+                                    return [4 /*yield*/, waitForBackendAvailability({
+                                            retries: 80,
+                                            delayMs: 1500,
+                                        })];
+                                case 1:
+                                    backendReady = _c.sent();
+                                    if (!backendReady) {
+                                        hasAttemptedResumeLookup = false;
+                                        return [2 /*return*/];
+                                    }
+                                    return [4 /*yield*/, solidGet("/module-packages/import/resumable/latest")];
+                                case 2:
+                                    response = _c.sent();
+                                    transaction = (_b = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : response === null || response === void 0 ? void 0 : response.data;
+                                    hasAttemptedResumeLookup = true;
+                                    if (!(transaction === null || transaction === void 0 ? void 0 : transaction.transactionKey) || transaction.transactionKey === lastOpenedTransactionKey) {
+                                        return [2 /*return*/];
+                                    }
+                                    lastOpenedTransactionKey = transaction.transactionKey;
+                                    dispatch(openPopup(__assign(__assign({}, importButton.attrs), { params: event.params, solidListViewMetaData: {
+                                            solidView: event.viewMetadata,
+                                            solidFieldsMetadata: event.fieldsMetadata,
+                                        }, resumeTransactionKey: transaction.transactionKey, autoResume: true })));
+                                    return [3 /*break*/, 5];
+                                case 3:
+                                    error_1 = _c.sent();
+                                    hasAttemptedResumeLookup = false;
+                                    return [3 /*break*/, 5];
+                                case 4:
+                                    pendingResumeLookup = null;
+                                    return [7 /*endfinally*/];
+                                case 5: return [2 /*return*/];
+                            }
+                        });
+                    }); })();
+                    return [4 /*yield*/, pendingResumeLookup];
+                case 3:
+                    _d.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+//# sourceMappingURL=moduleMetadataListOnLoad.js.map

package/dist/components/core/extension/solid-core/moduleMetadata/list/moduleMetadataListOnLoad.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"moduleMetadataListOnLoad.js","sourceRoot":"","sources":["../../../../../../../src/components/core/extension/solid-core/moduleMetadata/list/moduleMetadataListOnLoad.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sDAAsD,CAAC;AAClG,OAAO,EAAE,2BAA2B,EAAE,MAAM,6CAA6C,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6CAA6C,CAAC;AACxE,OAAO,EAAE,qBAAqB,EAAE,MAAM,kDAAkD,CAAC;AAGzF,IAAI,wBAAwB,GAAG,KAAK,CAAC;AACrC,IAAI,wBAAwB,GAAkB,IAAI,CAAC;AACnD,IAAI,mBAAmB,GAAyB,IAAI,CAAC;AAErD,MAAM,CAAC,OAAO,UAAgB,wBAAwB,CAAC,KAAoB;;;;;;;;oBACzE,IAAI,wBAAwB,EAAE;wBAC5B,sBAAO;qBACR;yBAEG,mBAAmB,EAAnB,wBAAmB;oBACrB,qBAAM,mBAAmB,EAAA;;oBAAzB,SAAyB,CAAC;oBAC1B,sBAAO;;oBAGH,QAAQ,GAAG,qBAAqB,EAAE,CAAC;oBACzC,IAAI,CAAC,QAAQ,EAAE;wBACb,sBAAO;qBACR;oBAEK,aAAa,GAAG,CAAC,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,0CAAE,KAAK,mCAAI,EAAE,CAA8B,CAAC;oBAClF,aAAa,GAAG,MAAA,aAAa,CAAC,aAAa,mCAAI,EAAE,CAAC;oBAClD,YAAY,GAAG,aAAa,CAAC,IAAI,CAAC,UAAC,MAAW,YAAK,OAAA,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,MAAM,MAAK,8BAA8B,CAAA,EAAA,CAAC,CAAC;oBACnH,IAAI,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,CAAA,IAAI,CAAC,2BAA2B,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,CAAC,EAAE;wBAC7E,sBAAO;qBACR;oBAED,mBAAmB,GAAG,CAAC;;;;;;;oCAEE,qBAAM,0BAA0B,CAAC;4CACpD,OAAO,EAAE,EAAE;4CACX,OAAO,EAAE,IAAI;yCACd,CAAC,EAAA;;oCAHI,YAAY,GAAG,SAGnB;oCAEF,IAAI,CAAC,YAAY,EAAE;wCACjB,wBAAwB,GAAG,KAAK,CAAC;wCACjC,sBAAO;qCACR;oCAEgB,qBAAM,QAAQ,CAAC,0CAA0C,CAAC,EAAA;;oCAArE,QAAQ,GAAG,SAA0D;oCACrE,WAAW,GAAG,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,0CAAE,IAAI,mCAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,CAAC;oCAC3D,wBAAwB,GAAG,IAAI,CAAC;oCAEhC,IAAI,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,CAAA,IAAI,WAAW,CAAC,cAAc,KAAK,wBAAwB,EAAE;wCAC3F,sBAAO;qCACR;oCAED,wBAAwB,GAAG,WAAW,CAAC,cAAc,CAAC;oCACtD,QAAQ,CACN,SAAS,uBACJ,YAAY,CAAC,KAAK,KACrB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,qBAAqB,EAAE;4CACrB,SAAS,EAAE,KAAK,CAAC,YAAY;4CAC7B,mBAAmB,EAAE,KAAK,CAAC,cAAc;yCAC1C,EACD,oBAAoB,EAAE,WAAW,CAAC,cAAc,EAChD,UAAU,EAAE,IAAI,IAChB,CACH,CAAC;;;;oCAEF,wBAAwB,GAAG,KAAK,CAAC;;;oCAGjC,mBAAmB,GAAG,IAAI,CAAC;;;;;yBAE9B,CAAC,EAAE,CAAC;oBAEL,qBAAM,mBAAmB,EAAA;;oBAAzB,SAAyB,CAAC;;;;;CAC3B","sourcesContent":["import { waitForBackendAvailability } from \"../../../../../../helpers/waitForBackendAvailability\";\nimport { isButtonVisibleInCurrentEnv } from \"../../../../../../helpers/buttonEnvironment\";\nimport { solidGet } from \"../../../../../../http/solidHttp\";\nimport { openPopup } from \"../../../../../../redux/features/popupSlice\";\nimport { getSolidStoreDispatch } from \"../../../../../../redux/store/solidEntityApiPool\";\nimport type { SolidLoadList, SolidListUiEventResponse } from \"../../../../../../types/solid-core\";\n\nlet hasAttemptedResumeLookup = false;\nlet lastOpenedTransactionKey: string | null = null;\nlet pendingResumeLookup: Promise<void> | null = null;\n\nexport default async function moduleMetadataListOnLoad(event: SolidLoadList): Promise<SolidListUiEventResponse | void> {\n  if (hasAttemptedResumeLookup) {\n    return;\n  }\n\n  if (pendingResumeLookup) {\n    await pendingResumeLookup;\n    return;\n  }\n\n  const dispatch = getSolidStoreDispatch();\n  if (!dispatch) {\n    return;\n  }\n\n  const listViewAttrs = (event?.listViewLayout?.attrs ?? {}) as { headerButtons?: any[] };\n  const headerButtons = listViewAttrs.headerButtons ?? [];\n  const importButton = headerButtons.find((button: any) => button?.attrs?.action === \"ModuleImportListHeaderAction\");\n  if (!importButton?.attrs || !isButtonVisibleInCurrentEnv(importButton?.attrs)) {\n    return;\n  }\n\n  pendingResumeLookup = (async () => {\n    try {\n      const backendReady = await waitForBackendAvailability({\n        retries: 80,\n        delayMs: 1500,\n      });\n\n      if (!backendReady) {\n        hasAttemptedResumeLookup = false;\n        return;\n      }\n\n      const response = await solidGet(\"/module-packages/import/resumable/latest\");\n      const transaction = response?.data?.data ?? response?.data;\n      hasAttemptedResumeLookup = true;\n\n      if (!transaction?.transactionKey || transaction.transactionKey === lastOpenedTransactionKey) {\n        return;\n      }\n\n      lastOpenedTransactionKey = transaction.transactionKey;\n      dispatch(\n        openPopup({\n          ...importButton.attrs,\n          params: event.params,\n          solidListViewMetaData: {\n            solidView: event.viewMetadata,\n            solidFieldsMetadata: event.fieldsMetadata,\n          },\n          resumeTransactionKey: transaction.transactionKey,\n          autoResume: true,\n        }),\n      );\n    } catch (error) {\n      hasAttemptedResumeLookup = false;\n      // Ignore resume lookup failures and allow the list to render normally.\n    } finally {\n      pendingResumeLookup = null;\n    }\n  })();\n\n  await pendingResumeLookup;\n}\n"]}

package/dist/components/core/extension/solid-core/moduleMetadata/list/moduleMetadataListOnLoad.ts

@@ -0,0 +1,76 @@
+import { waitForBackendAvailability } from "../../../../../../helpers/waitForBackendAvailability";
+import { isButtonVisibleInCurrentEnv } from "../../../../../../helpers/buttonEnvironment";
+import { solidGet } from "../../../../../../http/solidHttp";
+import { openPopup } from "../../../../../../redux/features/popupSlice";
+import { getSolidStoreDispatch } from "../../../../../../redux/store/solidEntityApiPool";
+import type { SolidLoadList, SolidListUiEventResponse } from "../../../../../../types/solid-core";
+
+let hasAttemptedResumeLookup = false;
+let lastOpenedTransactionKey: string | null = null;
+let pendingResumeLookup: Promise<void> | null = null;
+
+export default async function moduleMetadataListOnLoad(event: SolidLoadList): Promise<SolidListUiEventResponse | void> {
+  if (hasAttemptedResumeLookup) {
+    return;
+  }
+
+  if (pendingResumeLookup) {
+    await pendingResumeLookup;
+    return;
+  }
+
+  const dispatch = getSolidStoreDispatch();
+  if (!dispatch) {
+    return;
+  }
+
+  const listViewAttrs = (event?.listViewLayout?.attrs ?? {}) as { headerButtons?: any[] };
+  const headerButtons = listViewAttrs.headerButtons ?? [];
+  const importButton = headerButtons.find((button: any) => button?.attrs?.action === "ModuleImportListHeaderAction");
+  if (!importButton?.attrs || !isButtonVisibleInCurrentEnv(importButton?.attrs)) {
+    return;
+  }
+
+  pendingResumeLookup = (async () => {
+    try {
+      const backendReady = await waitForBackendAvailability({
+        retries: 80,
+        delayMs: 1500,
+      });
+
+      if (!backendReady) {
+        hasAttemptedResumeLookup = false;
+        return;
+      }
+
+      const response = await solidGet("/module-packages/import/resumable/latest");
+      const transaction = response?.data?.data ?? response?.data;
+      hasAttemptedResumeLookup = true;
+
+      if (!transaction?.transactionKey || transaction.transactionKey === lastOpenedTransactionKey) {
+        return;
+      }
+
+      lastOpenedTransactionKey = transaction.transactionKey;
+      dispatch(
+        openPopup({
+          ...importButton.attrs,
+          params: event.params,
+          solidListViewMetaData: {
+            solidView: event.viewMetadata,
+            solidFieldsMetadata: event.fieldsMetadata,
+          },
+          resumeTransactionKey: transaction.transactionKey,
+          autoResume: true,
+        }),
+      );
+    } catch (error) {
+      hasAttemptedResumeLookup = false;
+      // Ignore resume lookup failures and allow the list to render normally.
+    } finally {
+      pendingResumeLookup = null;
+    }
+  })();
+
+  await pendingResumeLookup;
+}

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

@@ -56,7 +56,7 @@ export var RolePermissionsManyToManyFieldWidget = function (_a) {
     var entityName = ((_h = (_g = (_f = (_e = fieldContext.solidFormViewMetaData) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.solidView) === null || _g === void 0 ? void 0 : _g.model) === null || _h === void 0 ? void 0 : _h.displayName) || capitalize(fieldContext.modelName);
     var fieldLabel = fieldLayoutInfo.attrs.label || "Permissions";
     var groupedEntities = groupByController(allOptions || []);
-    return (_jsxs("div", { children: [isUnsaved && (_jsx("div", { className: "mb-2", children: _jsx(SolidMessage, { severity: "warn", text: "Please save the ".concat(entityName, " first to assign ").concat(fieldLabel, "."), className: "w-full justify-content-start" }) })), Object.keys(groupedEntities).map(function (controllerName) { return (_jsx(SolidPanel, { toggleable: true, header: _jsxs("div", { className: "flex align-items-center gap-3 justify-content-between w-full", children: [_jsx("span", { className: "form-field-label text-base lg:text-lg font-bold", children: controllerName }), fieldContext.field.attrs.inlineCreate && (_jsx(SolidButton, { icon: "si si-plus", rounded: true, outlined: true, "aria-label": "Add", type: "button", size: "sm", onClick: function () {
+    return (_jsxs("div", { children: [isUnsaved && (_jsx("div", { className: "mb-2", children: _jsx(SolidMessage, { severity: "warn", text: "Please save the ".concat(entityName, " first to assign ").concat(fieldLabel, "."), className: "w-full justify-content-start" }) })), Object.keys(groupedEntities).map(function (controllerName) { return (_jsx(SolidPanel, { toggleable: true, header: _jsxs("div", { className: "flex align-items-center gap-3 justify-content-between w-full", children: [_jsx("span", { className: "form-field-label text-base lg:text-lg font-bold solid-permisson-text-wrapper", children: controllerName }), fieldContext.field.attrs.inlineCreate && (_jsx(SolidButton, { icon: "si si-plus", rounded: true, outlined: true, "aria-label": "Add", type: "button", size: "sm", onClick: function () {
                                 return setVisibleDialogs(function (prev) {
                                     var _a;
                                     return (__assign(__assign({}, prev), (_a = {}, _a[controllerName] = true, _a)));

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":["import { capitalize } from \"lodash\";\nimport { useEffect, useState } from \"react\";\nimport { SolidButton, SolidCheckbox, SolidMessage, SolidPanel } from \"../../../../shad-cn-ui\";\nimport { useRelationEntityHandler } from \"../../../../../components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler\";\nimport { InlineRelationEntityDialog } from \"../../../../../components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog\";\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    const readOnlyPermission = fieldContext.readOnly;\n\n    const [visibleDialogs, setVisibleDialogs] = useState<{ [key: string]: boolean }>({});\n\n    const {\n        allOptions,\n        currentValues,\n        fetchAllOptions,\n        fetchCurrentValues,\n        linkItem,\n        unlinkItem,\n        addNewRelation,\n    } = useRelationEntityHandler({ fieldContext });\n\n    // On mount: load already-linked permissions into currentValues\n    useEffect(() => {\n        fetchCurrentValues();\n    }, [fieldContext.data?.id]);\n\n    // On mount: load all available permissions into allOptions\n    useEffect(() => {\n        const queryData = { offset: 0, limit: 1000 };\n        fetchAllOptions(qs.stringify(queryData, { encodeValuesOnly: true }));\n    }, []);\n\n    const handleCheckboxChange = (item: any) => {\n        const isCurrentlyLinked = currentValues.some((s) => s.value === item.value);\n        if (isCurrentlyLinked) {\n            unlinkItem(item);\n        } else {\n            linkItem(item);\n        }\n    };\n\n    const isUnsaved = fieldContext.data?.id === undefined || fieldContext.data?.id === \"new\";\n    const entityName = fieldContext.solidFormViewMetaData?.data?.solidView?.model?.displayName || capitalize(fieldContext.modelName);\n    const fieldLabel = fieldLayoutInfo.attrs.label || \"Permissions\";\n\n    const groupedEntities = groupByController(allOptions || []);\n    return (\n        <div>\n            {isUnsaved && (\n                <div className=\"mb-2\">\n                    <SolidMessage severity=\"warn\" text={`Please save the ${entityName} first to assign ${fieldLabel}.`} className=\"w-full justify-content-start\" />\n                </div>\n            )}\n            {Object.keys(groupedEntities).map((controllerName) => (\n                <SolidPanel\n                    key={controllerName}\n                    toggleable\n                    header={\n                        <div className=\"flex align-items-center gap-3 justify-content-between w-full\">\n                            <span className=\"form-field-label text-base lg:text-lg font-bold\">\n                                {controllerName}\n                            </span>\n                            {fieldContext.field.attrs.inlineCreate && (\n                                <SolidButton\n                                    icon=\"si si-plus\"\n                                    rounded\n                                    outlined\n                                    aria-label=\"Add\"\n                                    type=\"button\"\n                                    size=\"sm\"\n                                    onClick={() =>\n                                        setVisibleDialogs((prev) => ({\n                                            ...prev,\n                                            [controllerName]: true,\n                                        }))\n                                    }\n                                    className=\"custom-add-button\"\n                                    disabled={isUnsaved}\n                                />\n                            )}\n                        </div>\n                    }\n                    className=\"mt-3 lg:mt-4\"\n                >\n                    <div className=\"formgrid grid gap-3 lg:gap-0\">\n                        {groupedEntities[controllerName].map((entity: any, i: number) => (\n                            <div\n                                key={entity.value}\n                                className={`field col-12 lg:col-6 flex gap-2 ${i >= 2 ? 'lg:mt-3' : ''}`}\n                            >\n                                <SolidCheckbox\n                                    readOnly={readOnlyPermission || isUnsaved}\n                                    disabled={isUnsaved}\n                                    id={entity.label}\n                                    checked={currentValues.some((s) => s.value === entity.value)}\n                                    onChange={() => handleCheckboxChange(entity)}\n                                />\n                                <label htmlFor={entity.label} className=\"form-field-label m-0 solid-permisson-form-label\">\n                                    {entity.label}\n                                </label>\n                            </div>\n                        ))}\n                    </div>\n                </SolidPanel>\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};\n"]}
+{"version":3,"file":"RolePermissionsManyToManyFieldWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import { capitalize } from \"lodash\";\nimport { useEffect, useState } from \"react\";\nimport { SolidButton, SolidCheckbox, SolidMessage, SolidPanel } from \"../../../../shad-cn-ui\";\nimport { useRelationEntityHandler } from \"../../../../../components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler\";\nimport { InlineRelationEntityDialog } from \"../../../../../components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog\";\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    const readOnlyPermission = fieldContext.readOnly;\n\n    const [visibleDialogs, setVisibleDialogs] = useState<{ [key: string]: boolean }>({});\n\n    const {\n        allOptions,\n        currentValues,\n        fetchAllOptions,\n        fetchCurrentValues,\n        linkItem,\n        unlinkItem,\n        addNewRelation,\n    } = useRelationEntityHandler({ fieldContext });\n\n    // On mount: load already-linked permissions into currentValues\n    useEffect(() => {\n        fetchCurrentValues();\n    }, [fieldContext.data?.id]);\n\n    // On mount: load all available permissions into allOptions\n    useEffect(() => {\n        const queryData = { offset: 0, limit: 1000 };\n        fetchAllOptions(qs.stringify(queryData, { encodeValuesOnly: true }));\n    }, []);\n\n    const handleCheckboxChange = (item: any) => {\n        const isCurrentlyLinked = currentValues.some((s) => s.value === item.value);\n        if (isCurrentlyLinked) {\n            unlinkItem(item);\n        } else {\n            linkItem(item);\n        }\n    };\n\n    const isUnsaved = fieldContext.data?.id === undefined || fieldContext.data?.id === \"new\";\n    const entityName = fieldContext.solidFormViewMetaData?.data?.solidView?.model?.displayName || capitalize(fieldContext.modelName);\n    const fieldLabel = fieldLayoutInfo.attrs.label || \"Permissions\";\n\n    const groupedEntities = groupByController(allOptions || []);\n    return (\n        <div>\n            {isUnsaved && (\n                <div className=\"mb-2\">\n                    <SolidMessage severity=\"warn\" text={`Please save the ${entityName} first to assign ${fieldLabel}.`} className=\"w-full justify-content-start\" />\n                </div>\n            )}\n            {Object.keys(groupedEntities).map((controllerName) => (\n                <SolidPanel\n                    key={controllerName}\n                    toggleable\n                    header={\n                        <div className=\"flex align-items-center gap-3 justify-content-between w-full\">\n                            <span className=\"form-field-label text-base lg:text-lg font-bold solid-permisson-text-wrapper\">\n                                {controllerName}\n                            </span>\n                            {fieldContext.field.attrs.inlineCreate && (\n                                <SolidButton\n                                    icon=\"si si-plus\"\n                                    rounded\n                                    outlined\n                                    aria-label=\"Add\"\n                                    type=\"button\"\n                                    size=\"sm\"\n                                    onClick={() =>\n                                        setVisibleDialogs((prev) => ({\n                                            ...prev,\n                                            [controllerName]: true,\n                                        }))\n                                    }\n                                    className=\"custom-add-button\"\n                                    disabled={isUnsaved}\n                                />\n                            )}\n                        </div>\n                    }\n                    className=\"mt-3 lg:mt-4\"\n                >\n                    <div className=\"formgrid grid gap-3 lg:gap-0\">\n                        {groupedEntities[controllerName].map((entity: any, i: number) => (\n                            <div\n                                key={entity.value}\n                                className={`field col-12 lg:col-6 flex gap-2 ${i >= 2 ? 'lg:mt-3' : ''}`}\n                            >\n                                <SolidCheckbox\n                                    readOnly={readOnlyPermission || isUnsaved}\n                                    disabled={isUnsaved}\n                                    id={entity.label}\n                                    checked={currentValues.some((s) => s.value === entity.value)}\n                                    onChange={() => handleCheckboxChange(entity)}\n                                />\n                                <label htmlFor={entity.label} className=\"form-field-label m-0 solid-permisson-form-label\">\n                                    {entity.label}\n                                </label>\n                            </div>\n                        ))}\n                    </div>\n                </SolidPanel>\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};\n"]}

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

@@ -72,7 +72,7 @@ export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: S
                     toggleable
                     header={
                         <div className="flex align-items-center gap-3 justify-content-between w-full">
-                            <span className="form-field-label text-base lg:text-lg font-bold">
+                            <span className="form-field-label text-base lg:text-lg font-bold solid-permisson-text-wrapper">
                                 {controllerName}
                             </span>
                             {fieldContext.field.attrs.inlineCreate && (

package/dist/components/core/filter/fields/SolidBooleanField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidBooleanField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidBooleanField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAGlF,QAAA,MAAM,iBAAiB,6CAA8C,uBAAuB,4CA4D3F,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"SolidBooleanField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidBooleanField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAGlF,QAAA,MAAM,iBAAiB,6CAA8C,uBAAuB,4CA6D3F,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/core/filter/fields/SolidBooleanField.js

@@ -18,7 +18,7 @@ var SolidBooleanField = function (_a) {
     ];
     // const header = column.attrs.label ?? fieldMetadata.displayName;
     var numberOfInputs = getNumberOfInputs(rule.matchMode);
-    return (_jsxs("div", { className: 'flex flex-column md:flex-row align-items-start gap-6 md:gap-1', children: [_jsx("div", { className: "col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0", children: _jsx(SolidSelect, { value: rule.matchMode, onChange: function (e) {
+    return (_jsxs("div", { className: 'flex flex-column md:flex-row align-items-start gap-2 md:gap-1', children: [_jsx("div", { className: "col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0", children: _jsx(SolidSelect, { value: rule.matchMode, native: false, onChange: function (e) {
                         onChange(rule.id, 'matchMode', e.value);
                     }, options: filterMatchModeOptions, optionLabel: 'label', optionValue: 'value', placeholder: "Select Operator", className: "p-inputtext-sm w-full " }) }), _jsx("div", { className: 'flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0', children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (e) {
                         onChange(rule.id, 'value', e);

package/dist/components/core/filter/fields/SolidBooleanField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidBooleanField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidBooleanField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAA2B,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAEzF,IAAM,iBAAiB,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAC7D,8CAA8C;IAC9C,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,SAAS,CAAC;IAEjC,IAAM,cAAc,GAAG;QACnB,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE;QAC9B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE;KACnC,CAAC;IACF,IAAM,sBAAsB,GAAG;QAC3B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE;QACjC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;QACpC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE;KAE9C,CAAC;IAGF,kEAAkE;IAElE,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEzD,OAAO,CACH,eAAK,SAAS,EAAC,+DAA+D,aAC1E,cAAK,SAAS,EAAC,0CAA0C,YACrD,KAAC,WAAW,IACR,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;oBAC3C,CAAC,EACD,OAAO,EAAE,sBAAsB,EAC/B,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,wBAAwB,GACpC,GACA,EAEN,cAAK,SAAS,EAAC,iEAAiE,YAU5E,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBACjC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,OAAO,EAC7B,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const columnDataType = 'boolean';\n\n    const booleanOptions = [\n        { label: 'true', value: true },\n        { label: 'false', value: false },\n    ];\n    const filterMatchModeOptions = [\n        { label: 'Equals', value: \"$eq\" },\n        { label: 'Is null', value: \"$null\" },\n        { label: 'Is Not null', value: \"$notNull\" }\n\n    ];\n\n\n    // const header = column.attrs.label ?? fieldMetadata.displayName;\n\n    const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n    return (\n        <div className='flex flex-column md:flex-row align-items-start gap-6 md:gap-1'>\n            <div className=\"col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0\">\n                <SolidSelect\n                    value={rule.matchMode}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'matchMode', e.value)\n                    }}\n                    options={filterMatchModeOptions}\n                    optionLabel='label'\n                    optionValue='value'\n                    placeholder=\"Select Operator\"\n                    className=\"p-inputtext-sm w-full \"\n                />\n            </div>\n\n            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0'>\n                {/* <SolidSelect\n                    value={rule.value}\n                    options={booleanOptions}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e.value)\n                    }}\n                    placeholder=\"Select\"\n                    className=\"p-column-filter\"\n                /> */}\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.Boolean}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n};\n\nexport default SolidBooleanField;"]}
+{"version":3,"file":"SolidBooleanField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidBooleanField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAA2B,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAEzF,IAAM,iBAAiB,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAC7D,8CAA8C;IAC9C,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,SAAS,CAAC;IAEjC,IAAM,cAAc,GAAG;QACnB,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE;QAC9B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE;KACnC,CAAC;IACF,IAAM,sBAAsB,GAAG;QAC3B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE;QACjC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;QACpC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE;KAE9C,CAAC;IAGF,kEAAkE;IAElE,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEzD,OAAO,CACH,eAAK,SAAS,EAAC,+DAA+D,aAC1E,cAAK,SAAS,EAAC,0CAA0C,YACrD,KAAC,WAAW,IACR,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;oBAC3C,CAAC,EACD,OAAO,EAAE,sBAAsB,EAC/B,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,wBAAwB,GACpC,GACA,EAEN,cAAK,SAAS,EAAC,iEAAiE,YAU5E,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBACjC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,OAAO,EAC7B,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const columnDataType = 'boolean';\n\n    const booleanOptions = [\n        { label: 'true', value: true },\n        { label: 'false', value: false },\n    ];\n    const filterMatchModeOptions = [\n        { label: 'Equals', value: \"$eq\" },\n        { label: 'Is null', value: \"$null\" },\n        { label: 'Is Not null', value: \"$notNull\" }\n\n    ];\n\n\n    // const header = column.attrs.label ?? fieldMetadata.displayName;\n\n    const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n    return (\n        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-1'>\n            <div className=\"col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0\">\n                <SolidSelect\n                    value={rule.matchMode}\n                    native={false}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'matchMode', e.value)\n                    }}\n                    options={filterMatchModeOptions}\n                    optionLabel='label'\n                    optionValue='value'\n                    placeholder=\"Select Operator\"\n                    className=\"p-inputtext-sm w-full \"\n                />\n            </div>\n\n            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0'>\n                {/* <SolidSelect\n                    value={rule.value}\n                    options={booleanOptions}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e.value)\n                    }}\n                    placeholder=\"Select\"\n                    className=\"p-column-filter\"\n                /> */}\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.Boolean}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n};\n\nexport default SolidBooleanField;\n"]}

package/dist/components/core/filter/fields/SolidBooleanField.tsx

@@ -25,10 +25,11 @@ const SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilter
     const numberOfInputs = getNumberOfInputs(rule.matchMode);
 
     return (
-        <div className='flex flex-column md:flex-row align-items-start gap-6 md:gap-1'>
+        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-1'>
             <div className="col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0">
                 <SolidSelect
                     value={rule.matchMode}
+                    native={false}
                     onChange={(e: any) => {
                         onChange(rule.id, 'matchMode', e.value)
                     }}
@@ -65,4 +66,4 @@ const SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilter
     );
 };
 
-export default SolidBooleanField;
+export default SolidBooleanField;

package/dist/components/core/filter/fields/SolidDateField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDateField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidDateField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAGlF,eAAO,MAAM,0BAA0B;;;GAWtC,CAAC;AAEF,QAAA,MAAM,cAAc,6CAA8C,uBAAuB,4CAwCxF,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SolidDateField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidDateField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAGlF,eAAO,MAAM,0BAA0B;;;GAWtC,CAAC;AAEF,QAAA,MAAM,cAAc,6CAA8C,uBAAuB,4CAyCxF,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/core/filter/fields/SolidDateField.js

@@ -21,7 +21,7 @@ var SolidDateField = function (_a) {
     // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.
     // const header = column.attrs.label ?? fieldMetadata.displayName;
     var numberOfInputs = getNumberOfInputs(rule.matchMode);
-    return (_jsxs("div", { className: 'flex flex-column md:flex-row align-items-start gap-6 md:gap-1', children: [_jsx("div", { className: "col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0", children: _jsx(SolidSelect, { value: rule.matchMode, onChange: function (e) {
+    return (_jsxs("div", { className: 'flex flex-column md:flex-row align-items-start gap-2 md:gap-1', children: [_jsx("div", { className: "col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0", children: _jsx(SolidSelect, { value: rule.matchMode, native: false, onChange: function (e) {
                         onChange(rule.id, 'matchMode', e.value);
                     }, options: dateFilterMatchModeOptions, optionLabel: 'label', optionValue: 'value', placeholder: "Select Operator", className: "p-inputtext-sm w-full " }) }), _jsx("div", { className: 'flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0', children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (e) {
                         onChange(rule.id, 'value', e);

package/dist/components/core/filter/fields/SolidDateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDateField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidDateField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAA2B,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAEzF,MAAM,CAAC,IAAM,0BAA0B,GAAG;IACtC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE;IAClC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE;IACtC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE;IACpC,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,EAAE;IAC9C,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE;IACvC,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,MAAM,EAAE;IACjD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;IACpC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE;CAE9C,CAAC;AAEF,IAAM,cAAc,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAC1D,8CAA8C;IAC9C,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,MAAM,CAAC;IAG9B,kHAAkH;IAClH,kEAAkE;IAClE,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEzD,OAAO,CACH,eAAK,SAAS,EAAC,+DAA+D,aAC1E,cAAK,SAAS,EAAC,0CAA0C,YACrD,KAAC,WAAW,IACR,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;oBAC3C,CAAC,EACD,OAAO,EAAE,0BAA0B,EACnC,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,wBAAwB,GACpC,GACA,EACN,cAAK,SAAS,EAAC,iEAAiE,YAC5E,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBACjC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,IAAI,EAC1B,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AAEN,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nexport const dateFilterMatchModeOptions = [\n    { label: 'Equals', value: \"$eqi\" },\n    { label: 'Not Equals', value: \"$nei\" },\n    { label: 'Less Than', value: \"$lt\" },\n    { label: 'Less Than Or Equal', value: \"$lte\" },\n    { label: 'Greater Than', value: \"$gt\" },\n    { label: 'Greater Than Or Equal', value: \"$gte\" },\n    { label: 'Between', value: \"$between\" },\n    { label: 'Is null', value: \"$null\" },\n    { label: 'Is Not null', value: \"$notNull\" }\n\n];\n\nconst SolidDateField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const columnDataType = 'date';\n\n\n    // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.\n    // const header = column.attrs.label ?? fieldMetadata.displayName;\n    const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n    return (\n        <div className='flex flex-column md:flex-row align-items-start gap-6 md:gap-1'>\n            <div className=\"col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0\">\n                <SolidSelect\n                    value={rule.matchMode}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'matchMode', e.value)\n                    }}\n                    options={dateFilterMatchModeOptions}\n                    optionLabel='label'\n                    optionValue='value'\n                    placeholder=\"Select Operator\"\n                    className=\"p-inputtext-sm w-full \"\n                />\n            </div>\n            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0'>\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.Date}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n\n};\n\nexport default SolidDateField;\n"]}
+{"version":3,"file":"SolidDateField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidDateField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAA2B,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAEzF,MAAM,CAAC,IAAM,0BAA0B,GAAG;IACtC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE;IAClC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE;IACtC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE;IACpC,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,EAAE;IAC9C,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE;IACvC,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,MAAM,EAAE;IACjD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;IACpC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE;CAE9C,CAAC;AAEF,IAAM,cAAc,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAC1D,8CAA8C;IAC9C,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,MAAM,CAAC;IAG9B,kHAAkH;IAClH,kEAAkE;IAClE,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEzD,OAAO,CACH,eAAK,SAAS,EAAC,+DAA+D,aAC1E,cAAK,SAAS,EAAC,0CAA0C,YACrD,KAAC,WAAW,IACR,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;oBAC3C,CAAC,EACD,OAAO,EAAE,0BAA0B,EACnC,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,wBAAwB,GACpC,GACA,EACN,cAAK,SAAS,EAAC,iEAAiE,YAC5E,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBACjC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,IAAI,EAC1B,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AAEN,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nexport const dateFilterMatchModeOptions = [\n    { label: 'Equals', value: \"$eqi\" },\n    { label: 'Not Equals', value: \"$nei\" },\n    { label: 'Less Than', value: \"$lt\" },\n    { label: 'Less Than Or Equal', value: \"$lte\" },\n    { label: 'Greater Than', value: \"$gt\" },\n    { label: 'Greater Than Or Equal', value: \"$gte\" },\n    { label: 'Between', value: \"$between\" },\n    { label: 'Is null', value: \"$null\" },\n    { label: 'Is Not null', value: \"$notNull\" }\n\n];\n\nconst SolidDateField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const columnDataType = 'date';\n\n\n    // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.\n    // const header = column.attrs.label ?? fieldMetadata.displayName;\n    const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n    return (\n        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-1'>\n            <div className=\"col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0\">\n                <SolidSelect\n                    value={rule.matchMode}\n                    native={false}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'matchMode', e.value)\n                    }}\n                    options={dateFilterMatchModeOptions}\n                    optionLabel='label'\n                    optionValue='value'\n                    placeholder=\"Select Operator\"\n                    className=\"p-inputtext-sm w-full \"\n                />\n            </div>\n            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0'>\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.Date}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n\n};\n\nexport default SolidDateField;\n"]}

package/dist/components/core/filter/fields/SolidDateField.tsx

@@ -27,10 +27,11 @@ const SolidDateField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
     const numberOfInputs = getNumberOfInputs(rule.matchMode);
 
     return (
-        <div className='flex flex-column md:flex-row align-items-start gap-6 md:gap-1'>
+        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-1'>
             <div className="col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0">
                 <SolidSelect
                     value={rule.matchMode}
+                    native={false}
                     onChange={(e: any) => {
                         onChange(rule.id, 'matchMode', e.value)
                     }}

package/dist/components/core/filter/fields/SolidDatetimeField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDatetimeField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidDatetimeField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAIlF,QAAA,MAAM,kBAAkB,6CAA8C,uBAAuB,4CA4C5F,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"SolidDatetimeField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidDatetimeField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAIlF,QAAA,MAAM,kBAAkB,6CAA8C,uBAAuB,4CA6C5F,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/core/filter/fields/SolidDatetimeField.js

@@ -16,7 +16,7 @@ var SolidDatetimeField = function (_a) {
         setNumberOfInputs(getNumberOfInputs(rule.matchMode));
     }, [rule]);
     // const numberOfInputs = getNumberOfInputs(rule.matchMode);
-    return (_jsxs("div", { className: 'flex flex-column md:flex-row align-items-start gap-6 md:gap-1', children: [_jsx("div", { className: "col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0", children: _jsx(SolidSelect, { value: rule.matchMode, onChange: function (e) {
+    return (_jsxs("div", { className: 'flex flex-column md:flex-row align-items-start gap-2 md:gap-1', children: [_jsx("div", { className: "col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0", children: _jsx(SolidSelect, { value: rule.matchMode, native: false, onChange: function (e) {
                         onChange(rule.id, 'matchMode', e.value);
                     }, options: dateFilterMatchModeOptions, optionLabel: 'label', optionValue: 'value', placeholder: "Select Operator", className: "p-inputtext-sm w-full " }) }), _jsx("div", { className: 'flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0', children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (e) {
                         onChange(rule.id, 'value', e);

package/dist/components/core/filter/fields/SolidDatetimeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDatetimeField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidDatetimeField.tsx"],"names":[],"mappings":";AACA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAA2B,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAEzF,IAAM,kBAAkB,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAC9D,8CAA8C;IAC9C,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,MAAM,CAAC;IAExB,IAAA,KAAsC,QAAQ,CAAM,IAAI,CAAC,EAAxD,cAAc,QAAA,EAAE,iBAAiB,QAAuB,CAAC;IAChE,kHAAkH;IAClH,kEAAkE;IAClE,SAAS,CAAC;QACN,iBAAiB,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAA;IACxD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IACV,4DAA4D;IAE5D,OAAO,CACH,eAAK,SAAS,EAAC,+DAA+D,aAC1E,cAAK,SAAS,EAAC,0CAA0C,YACrD,KAAC,WAAW,IACR,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;oBAC3C,CAAC,EACD,OAAO,EAAE,0BAA0B,EACnC,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,wBAAwB,GACpC,GACA,EAEN,cAAK,SAAS,EAAC,iEAAiE,YAC5E,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBACjC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,QAAQ,EAC9B,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AAEN,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["\nimport React, { useEffect, useState } from 'react';\nimport { dateFilterMatchModeOptions } from './SolidDateField';\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidDatetimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const columnDataType = 'date';\n\n    const [numberOfInputs, setNumberOfInputs] = useState<any>(null);\n    // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.\n    // const header = column.attrs.label ?? fieldMetadata.displayName;\n    useEffect(() => {\n        setNumberOfInputs(getNumberOfInputs(rule.matchMode))\n    }, [rule])\n    // const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n    return (\n        <div className='flex flex-column md:flex-row align-items-start gap-6 md:gap-1'>\n            <div className=\"col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0\">\n                <SolidSelect\n                    value={rule.matchMode}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'matchMode', e.value)\n                    }}\n                    options={dateFilterMatchModeOptions}\n                    optionLabel='label'\n                    optionValue='value'\n                    placeholder=\"Select Operator\"\n                    className=\"p-inputtext-sm w-full \"\n                />\n            </div>\n\n            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0'>\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.DateTime}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n\n};\n\nexport default SolidDatetimeField;"]}
+{"version":3,"file":"SolidDatetimeField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidDatetimeField.tsx"],"names":[],"mappings":";AACA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAA2B,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAEzF,IAAM,kBAAkB,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAC9D,8CAA8C;IAC9C,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,MAAM,CAAC;IAExB,IAAA,KAAsC,QAAQ,CAAM,IAAI,CAAC,EAAxD,cAAc,QAAA,EAAE,iBAAiB,QAAuB,CAAC;IAChE,kHAAkH;IAClH,kEAAkE;IAClE,SAAS,CAAC;QACN,iBAAiB,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAA;IACxD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IACV,4DAA4D;IAE5D,OAAO,CACH,eAAK,SAAS,EAAC,+DAA+D,aAC1E,cAAK,SAAS,EAAC,0CAA0C,YACrD,KAAC,WAAW,IACR,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;oBAC3C,CAAC,EACD,OAAO,EAAE,0BAA0B,EACnC,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,wBAAwB,GACpC,GACA,EAEN,cAAK,SAAS,EAAC,iEAAiE,YAC5E,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBACjC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,QAAQ,EAC9B,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AAEN,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["\nimport React, { useEffect, useState } from 'react';\nimport { dateFilterMatchModeOptions } from './SolidDateField';\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidDatetimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const columnDataType = 'date';\n\n    const [numberOfInputs, setNumberOfInputs] = useState<any>(null);\n    // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.\n    // const header = column.attrs.label ?? fieldMetadata.displayName;\n    useEffect(() => {\n        setNumberOfInputs(getNumberOfInputs(rule.matchMode))\n    }, [rule])\n    // const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n    return (\n        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-1'>\n            <div className=\"col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0\">\n                <SolidSelect\n                    value={rule.matchMode}\n                    native={false}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'matchMode', e.value)\n                    }}\n                    options={dateFilterMatchModeOptions}\n                    optionLabel='label'\n                    optionValue='value'\n                    placeholder=\"Select Operator\"\n                    className=\"p-inputtext-sm w-full \"\n                />\n            </div>\n\n            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0'>\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.DateTime}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n\n};\n\nexport default SolidDatetimeField;\n"]}

package/dist/components/core/filter/fields/SolidDatetimeField.tsx

@@ -19,10 +19,11 @@ const SolidDatetimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilte
     // const numberOfInputs = getNumberOfInputs(rule.matchMode);
 
     return (
-        <div className='flex flex-column md:flex-row align-items-start gap-6 md:gap-1'>
+        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-1'>
             <div className="col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0">
                 <SolidSelect
                     value={rule.matchMode}
+                    native={false}
                     onChange={(e: any) => {
                         onChange(rule.id, 'matchMode', e.value)
                     }}
@@ -51,4 +52,4 @@ const SolidDatetimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilte
 
 };
 
-export default SolidDatetimeField;
+export default SolidDatetimeField;

package/dist/components/core/filter/fields/SolidExternalIdField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidExternalIdField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidExternalIdField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAGlF,QAAA,MAAM,oBAAoB,6CAA8C,uBAAuB,4CA4C9F,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"SolidExternalIdField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidExternalIdField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAGlF,QAAA,MAAM,oBAAoB,6CAA8C,uBAAuB,4CA6C9F,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/core/filter/fields/SolidExternalIdField.js

@@ -13,7 +13,7 @@ var SolidExternalIdField = function (_a) {
         { label: 'Is Not null', value: "$notNull" }
     ];
     var numberOfInputs = getNumberOfInputs(rule.matchMode);
-    return (_jsxs("div", { className: 'flex flex-column md:flex-row align-items-start gap-6 md:gap-1', children: [_jsx("div", { className: "col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0", children: _jsx(SolidSelect, { value: rule.matchMode, onChange: function (e) {
+    return (_jsxs("div", { className: 'flex flex-column md:flex-row align-items-start gap-2 md:gap-1', children: [_jsx("div", { className: "col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0", children: _jsx(SolidSelect, { value: rule.matchMode, native: false, onChange: function (e) {
                         onChange(rule.id, 'matchMode', e.value);
                     }, options: filterMatchModeOptions, optionLabel: 'label', optionValue: 'value', placeholder: "Select Operator", className: "p-inputtext-sm w-full" }) }), _jsx("div", { className: 'flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0', children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (e) {
                         onChange(rule.id, 'value', e);

package/dist/components/core/filter/fields/SolidExternalIdField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidExternalIdField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidExternalIdField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAA2B,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAEzF,IAAM,oBAAoB,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAChE,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,MAAM,CAAC;IAC9B,IAAM,sBAAsB,GAAG;QAC3B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE;QAClC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE;QACtC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;QACpC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE;KAE9C,CAAC;IACF,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAGzD,OAAO,CACH,eAAK,SAAS,EAAC,+DAA+D,aAC1E,cAAK,SAAS,EAAC,0CAA0C,YACrD,KAAC,WAAW,IACR,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;oBAC3C,CAAC,EACD,OAAO,EAAE,sBAAsB,EAC/B,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,uBAAuB,GACnC,GACA,EAEN,cAAK,SAAS,EAAC,iEAAiE,YAC5E,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBACjC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,IAAI,EAC1B,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AAEN,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidExternalIdField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    const showFilterOperator = false;\n    const columnDataType = 'text';\n    const filterMatchModeOptions = [\n        { label: 'Equals', value: \"$eqi\" },\n        { label: 'Not Equals', value: \"$nei\" },\n        { label: 'Is null', value: \"$null\" },\n        { label: 'Is Not null', value: \"$notNull\" }\n\n    ];\n    const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n\n    return (\n        <div className='flex flex-column md:flex-row align-items-start gap-6 md:gap-1'>\n            <div className=\"col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0\">\n                <SolidSelect\n                    value={rule.matchMode}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'matchMode', e.value)\n                    }}\n                    options={filterMatchModeOptions}\n                    optionLabel='label'\n                    optionValue='value'\n                    placeholder=\"Select Operator\"\n                    className=\"p-inputtext-sm w-full\"\n                />\n            </div>\n\n            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0'>\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.Text}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n\n};\n\nexport default SolidExternalIdField;\n"]}
+{"version":3,"file":"SolidExternalIdField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidExternalIdField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAA2B,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAEzF,IAAM,oBAAoB,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAChE,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,MAAM,CAAC;IAC9B,IAAM,sBAAsB,GAAG;QAC3B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE;QAClC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE;QACtC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;QACpC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE;KAE9C,CAAC;IACF,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAGzD,OAAO,CACH,eAAK,SAAS,EAAC,+DAA+D,aAC1E,cAAK,SAAS,EAAC,0CAA0C,YACrD,KAAC,WAAW,IACR,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;oBAC3C,CAAC,EACD,OAAO,EAAE,sBAAsB,EAC/B,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,uBAAuB,GACnC,GACA,EAEN,cAAK,SAAS,EAAC,iEAAiE,YAC5E,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBACjC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,IAAI,EAC1B,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AAEN,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidExternalIdField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    const showFilterOperator = false;\n    const columnDataType = 'text';\n    const filterMatchModeOptions = [\n        { label: 'Equals', value: \"$eqi\" },\n        { label: 'Not Equals', value: \"$nei\" },\n        { label: 'Is null', value: \"$null\" },\n        { label: 'Is Not null', value: \"$notNull\" }\n\n    ];\n    const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n\n    return (\n        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-1'>\n            <div className=\"col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0\">\n                <SolidSelect\n                    value={rule.matchMode}\n                    native={false}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'matchMode', e.value)\n                    }}\n                    options={filterMatchModeOptions}\n                    optionLabel='label'\n                    optionValue='value'\n                    placeholder=\"Select Operator\"\n                    className=\"p-inputtext-sm w-full\"\n                />\n            </div>\n\n            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0'>\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.Text}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n\n};\n\nexport default SolidExternalIdField;\n"]}

package/dist/components/core/filter/fields/SolidExternalIdField.tsx

@@ -17,10 +17,11 @@ const SolidExternalIdField = ({ fieldMetadata, onChange, index, rule }: SolidFil
 
 
     return (
-        <div className='flex flex-column md:flex-row align-items-start gap-6 md:gap-1'>
+        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-1'>
             <div className="col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0">
                 <SolidSelect
                     value={rule.matchMode}
+                    native={false}
                     onChange={(e: any) => {
                         onChange(rule.id, 'matchMode', e.value)
                     }}

package/dist/components/core/filter/fields/SolidIdField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidIdField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidIdField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAGlF,QAAA,MAAM,YAAY,6CAA8C,uBAAuB,4CA6CtF,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SolidIdField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidIdField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAGlF,QAAA,MAAM,YAAY,6CAA8C,uBAAuB,4CA8CtF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/core/filter/fields/SolidIdField.js

@@ -18,7 +18,7 @@ var SolidIdField = function (_a) {
         { label: 'Is Not null', value: "$notNull" }
     ];
     var numberOfInputs = getNumberOfInputs(rule.matchMode);
-    return (_jsxs("div", { className: 'flex align-items-start gap-3 w-full', children: [_jsx(SolidSelect, { value: rule.matchMode, onChange: function (e) {
+    return (_jsxs("div", { className: 'flex align-items-start gap-3 w-full', children: [_jsx(SolidSelect, { value: rule.matchMode, native: false, onChange: function (e) {
                     onChange(rule.id, 'matchMode', e.value);
                 }, options: filterMatchModeOptions, optionLabel: 'label', optionValue: 'value', placeholder: "Select Operator", className: "w-full p-inputtext-sm" }), _jsx("div", { className: 'flex flex-column gap-2 w-full', children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (e) {
                         onChange(rule.id, 'value', e);

package/dist/components/core/filter/fields/SolidIdField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidIdField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidIdField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAA2B,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAEzF,IAAM,YAAY,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IACxD,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,MAAM,CAAC;IAC9B,IAAM,sBAAsB,GAAG;QAC3B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE;QACjC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE;QACrC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE;QACpC,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,EAAE;QAC9C,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE;QACvC,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,MAAM,EAAE;QACjD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE;QACvC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;QACpC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE;KAC9C,CAAC;IACF,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAGzD,OAAO,CACH,eAAK,SAAS,EAAC,qCAAqC,aAChD,KAAC,WAAW,IACR,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,QAAQ,EAAE,UAAC,CAAM;oBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;gBAC3C,CAAC,EACD,OAAO,EAAE,sBAAsB,EAC/B,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,uBAAuB,GACnC,EACF,cAAK,SAAS,EAAC,+BAA+B,YAC1C,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBACjC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,OAAO,EAC7B,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AAEN,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from \"../SolidVarInputsFilterElement\";\n\nconst SolidIdField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    const showFilterOperator = false;\n    const columnDataType = 'text';\n    const filterMatchModeOptions = [\n        { label: 'Equals', value: \"$eq\" },\n        { label: 'Not Equals', value: \"$ne\" },\n        { label: 'Less Than', value: \"$lt\" },\n        { label: 'Less Than Or Equal', value: \"$lte\" },\n        { label: 'Greater Than', value: \"$gt\" },\n        { label: 'Greater Than Or Equal', value: \"$gte\" },\n        { label: 'Between', value: \"$between\" },\n        { label: 'Is null', value: \"$null\" },\n        { label: 'Is Not null', value: \"$notNull\" }\n    ];\n    const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n\n    return (\n        <div className='flex align-items-start gap-3 w-full'>\n            <SolidSelect\n                value={rule.matchMode}\n                onChange={(e: any) => {\n                    onChange(rule.id, 'matchMode', e.value)\n                }}\n                options={filterMatchModeOptions}\n                optionLabel='label'\n                optionValue='value'\n                placeholder=\"Select Operator\"\n                className=\"w-full p-inputtext-sm\"\n            />\n            <div className='flex flex-column gap-2 w-full'>\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.Numeric}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n\n};\n\nexport default SolidIdField;\n"]}
+{"version":3,"file":"SolidIdField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidIdField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAA2B,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAEzF,IAAM,YAAY,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IACxD,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,MAAM,CAAC;IAC9B,IAAM,sBAAsB,GAAG;QAC3B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE;QACjC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE;QACrC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE;QACpC,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,EAAE;QAC9C,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE;QACvC,EAAE,KAAK,EAAE,uBAAuB,EAAE,KAAK,EAAE,MAAM,EAAE;QACjD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE;QACvC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;QACpC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE;KAC9C,CAAC;IACF,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAGzD,OAAO,CACH,eAAK,SAAS,EAAC,qCAAqC,aAChD,KAAC,WAAW,IACR,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE,UAAC,CAAM;oBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAA;gBAC3C,CAAC,EACD,OAAO,EAAE,sBAAsB,EAC/B,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,uBAAuB,GACnC,EACF,cAAK,SAAS,EAAC,+BAA+B,YAC1C,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBACjC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,OAAO,EAC7B,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AAEN,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from \"../SolidVarInputsFilterElement\";\n\nconst SolidIdField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    const showFilterOperator = false;\n    const columnDataType = 'text';\n    const filterMatchModeOptions = [\n        { label: 'Equals', value: \"$eq\" },\n        { label: 'Not Equals', value: \"$ne\" },\n        { label: 'Less Than', value: \"$lt\" },\n        { label: 'Less Than Or Equal', value: \"$lte\" },\n        { label: 'Greater Than', value: \"$gt\" },\n        { label: 'Greater Than Or Equal', value: \"$gte\" },\n        { label: 'Between', value: \"$between\" },\n        { label: 'Is null', value: \"$null\" },\n        { label: 'Is Not null', value: \"$notNull\" }\n    ];\n    const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n\n    return (\n        <div className='flex align-items-start gap-3 w-full'>\n            <SolidSelect\n                value={rule.matchMode}\n                native={false}\n                onChange={(e: any) => {\n                    onChange(rule.id, 'matchMode', e.value)\n                }}\n                options={filterMatchModeOptions}\n                optionLabel='label'\n                optionValue='value'\n                placeholder=\"Select Operator\"\n                className=\"w-full p-inputtext-sm\"\n            />\n            <div className='flex flex-column gap-2 w-full'>\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.Numeric}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n\n};\n\nexport default SolidIdField;\n"]}

package/dist/components/core/filter/fields/SolidIdField.tsx

@@ -24,6 +24,7 @@ const SolidIdField = ({ fieldMetadata, onChange, index, rule }: SolidFilterField
         <div className='flex align-items-start gap-3 w-full'>
             <SolidSelect
                 value={rule.matchMode}
+                native={false}
                 onChange={(e: any) => {
                     onChange(rule.id, 'matchMode', e.value)
                 }}

package/dist/components/core/filter/fields/SolidIntField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidIntField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidIntField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAGlF,QAAA,MAAM,aAAa,6CAA8C,uBAAuB,4CAmDvF,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SolidIntField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidIntField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAGlF,QAAA,MAAM,aAAa,6CAA8C,uBAAuB,4CAoDvF,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/core/filter/fields/SolidIntField.js

@@ -18,7 +18,7 @@ var SolidIntField = function (_a) {
     ];
     // const header = column.attrs.label ?? fieldMetadata.displayName;
     var numberOfInputs = getNumberOfInputs(rule.matchMode);
-    return (_jsxs("div", { className: 'flex flex-column md:flex-row align-items-start gap-6 md:gap-1', children: [_jsx("div", { className: "col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0", children: _jsx(SolidSelect, { value: rule.matchMode, onChange: function (e) {
+    return (_jsxs("div", { className: 'flex flex-column md:flex-row align-items-start gap-2 md:gap-1', children: [_jsx("div", { className: "col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0", children: _jsx(SolidSelect, { value: rule.matchMode, native: false, onChange: function (e) {
                         // updateEnumValues(index, 'operator', e.value)
                         onChange(rule.id, 'matchMode', e.value);
                     }, options: filterMatchModeOptions, optionLabel: 'label', optionValue: 'value', placeholder: "Select Operator", className: "p-inputtext-sm w-full " }) }), _jsx("div", { className: 'flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0', children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (e) {