@solidxai/core-ui 0.1.9-beta.9 → 0.1.10

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

@@ -1 +1 @@
-{"version":3,"file":"SolidSelectionStaticField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidSelectionStaticField.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;AAGzF,IAAM,yBAAyB,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAErE,8CAA8C;IAC9C,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,aAAa,CAAC,kBAAkB,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IACvF,IAAM,sBAAsB,GAAG;QAC3B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;QAC7B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;QACpC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;QACpC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE;KAE9C,CAAC;IAEF,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,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,eAAe,EACrC,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,yBAAyB,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\n\nconst SolidSelectionStaticField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const columnDataType = fieldMetadata.selectionValueType === 'int' ? 'numeric' : 'text';\n    const filterMatchModeOptions = [\n        { label: 'In', value: \"$in\" },\n        { label: 'Not In', value: \"$notIn\" },\n        { label: 'Is null', value: \"$null\" },\n        { label: 'Is Not null', value: \"$notNull\" }\n\n    ];\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                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(e: any) => {\n                        onChange(rule.id, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.SelectionStatic}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n};\n\nexport default SolidSelectionStaticField;"]}
+{"version":3,"file":"SolidSelectionStaticField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidSelectionStaticField.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;AAGzF,IAAM,yBAAyB,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAErE,8CAA8C;IAC9C,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,aAAa,CAAC,kBAAkB,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IACvF,IAAM,sBAAsB,GAAG;QAC3B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;QAC7B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;QACpC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;QACpC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE;KAE9C,CAAC;IAEF,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEzD,OAAO,CACH,eAAK,SAAS,EAAC,sDAAsD,aACjE,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,8DAA8D,YACzE,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,eAAe,EACrC,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,yBAAyB,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\n\nconst SolidSelectionStaticField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const columnDataType = fieldMetadata.selectionValueType === 'int' ? 'numeric' : 'text';\n    const filterMatchModeOptions = [\n        { label: 'In', value: \"$in\" },\n        { label: 'Not In', value: \"$notIn\" },\n        { label: 'Is null', value: \"$null\" },\n        { label: 'Is Not null', value: \"$notNull\" }\n\n    ];\n\n    const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n    return (\n        <div className='flex flex-col items-start gap-2 md:flex-row md:gap-1'>\n            <div className=\"w-full p-0 px-0 md:w-1/2 md:pl-0 md:pr-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-col gap-2 w-full md:w-1/2 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.SelectionStatic}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n};\n\nexport default SolidSelectionStaticField;\n"]}

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

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

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

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

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

@@ -19,9 +19,9 @@ var SolidShortTextField = 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-col items-start gap-2 md:flex-row md:gap-1', children: [_jsx("div", { className: "w-full p-0 px-0 md:w-1/2 md:pl-0 md:pr-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) {
+                    }, options: filterMatchModeOptions, optionLabel: 'label', optionValue: 'value', placeholder: "Select Operator", className: "p-inputtext-sm w-full" }) }), _jsx("div", { className: 'flex flex-col gap-2 w-full md:w-1/2 px-0 md:pl-0 md:pr-0 p-0', children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (e) {
                         onChange(rule.id, 'value', e);
                     }, numberOfInputs: numberOfInputs, inputType: InputTypes.Text, fieldMetadata: fieldMetadata }) })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SolidShortTextField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidShortTextField.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,mBAAmB,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAC/D,8CAA8C;IAC9C,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,MAAM,CAAC;IAC9B,IAAM,sBAAsB,GAAG;QAC3B,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE;QAC/C,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE;QAC1C,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;QAChD,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;QAC1C,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;IAEF,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,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,mBAAmB,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidShortTextField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const columnDataType = 'text';\n    const filterMatchModeOptions = [\n        { label: 'Starts With', value: \"$startsWithi\" },\n        { label: 'Contains', value: \"$containsi\" },\n        { label: 'Not Contains', value: \"$notContains\" },\n        { label: 'Ends With', value: \"$endsWith\" },\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\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={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 SolidShortTextField;\n"]}
+{"version":3,"file":"SolidShortTextField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidShortTextField.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,mBAAmB,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAC/D,8CAA8C;IAC9C,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,MAAM,CAAC;IAC9B,IAAM,sBAAsB,GAAG;QAC3B,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE;QAC/C,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE;QAC1C,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;QAChD,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;QAC1C,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;IAEF,kEAAkE;IAClE,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEzD,OAAO,CACH,eAAK,SAAS,EAAC,sDAAsD,aACjE,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,8DAA8D,YACzE,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,mBAAmB,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidShortTextField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const columnDataType = 'text';\n    const filterMatchModeOptions = [\n        { label: 'Starts With', value: \"$startsWithi\" },\n        { label: 'Contains', value: \"$containsi\" },\n        { label: 'Not Contains', value: \"$notContains\" },\n        { label: 'Ends With', value: \"$endsWith\" },\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\n    // const header = column.attrs.label ?? fieldMetadata.displayName;\n    const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n    return (\n        <div className='flex flex-col items-start gap-2 md:flex-row md:gap-1'>\n            <div className=\"w-full p-0 px-0 md:w-1/2 md:pl-0 md:pr-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-col gap-2 w-full md:w-1/2 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 SolidShortTextField;\n"]}

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

@@ -23,10 +23,11 @@ const SolidShortTextField = ({ fieldMetadata, onChange, index, rule }: SolidFilt
     const numberOfInputs = getNumberOfInputs(rule.matchMode);
 
     return (
-        <div className='flex flex-column md:flex-row align-items-start gap-6 md:gap-1'>
-            <div className="col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0">
+        <div className='flex flex-col items-start gap-2 md:flex-row md:gap-1'>
+            <div className="w-full p-0 px-0 md:w-1/2 md:pl-0 md:pr-0">
                 <SolidSelect
                     value={rule.matchMode}
+                    native={false}
                     onChange={(e: any) => {
                         onChange(rule.id, 'matchMode', e.value)
                     }}
@@ -38,7 +39,7 @@ const SolidShortTextField = ({ fieldMetadata, onChange, index, rule }: SolidFilt
                 />
             </div>
 
-            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0'>
+            <div className='flex flex-col gap-2 w-full md:w-1/2 px-0 md:pl-0 md:pr-0 p-0'>
                 <SolidVarInputsFilterElement
                     values={rule.value}
                     onChange={(e: any) => {

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

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

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

@@ -11,9 +11,9 @@ var SolidTimeField = 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-col items-start gap-2 md:flex-row md:gap-1', children: [_jsx("div", { className: "w-full p-0 px-0 md:w-1/2 md:pl-0 md:pr-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) {
+                    }, options: dateFilterMatchModeOptions, optionLabel: 'label', optionValue: 'value', placeholder: "Select Operator", className: "p-inputtext-sm w-full" }) }), _jsx("div", { className: 'flex flex-col gap-2 w-full md:w-1/2 px-0 md:pl-0 md:pr-0 p-0', children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (e) {
                         onChange(rule.id, 'value', e);
                     }, numberOfInputs: numberOfInputs, inputType: InputTypes.Time, fieldMetadata: fieldMetadata }) })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SolidTimeField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidTimeField.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;AACzF,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAE9D,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;IAE9B,kHAAkH;IAClH,kEAAkE;IAClE,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACzD,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,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,cAAc,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\nimport { dateFilterMatchModeOptions } from './SolidDateField';\n\nconst SolidTimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const columnDataType = 'date';\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    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.Time}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n\n};\n\nexport default SolidTimeField;"]}
+{"version":3,"file":"SolidTimeField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidTimeField.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;AACzF,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAE9D,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;IAE9B,kHAAkH;IAClH,kEAAkE;IAClE,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACzD,OAAO,CACH,eAAK,SAAS,EAAC,sDAAsD,aACjE,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,uBAAuB,GACnC,GACA,EAEN,cAAK,SAAS,EAAC,8DAA8D,YACzE,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';\nimport { dateFilterMatchModeOptions } from './SolidDateField';\n\nconst SolidTimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const columnDataType = 'date';\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    return (\n        <div className='flex flex-col items-start gap-2 md:flex-row md:gap-1'>\n            <div className=\"w-full p-0 px-0 md:w-1/2 md:pl-0 md:pr-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-col gap-2 w-full md:w-1/2 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.Time}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n\n};\n\nexport default SolidTimeField;\n"]}

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

@@ -13,10 +13,11 @@ const SolidTimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
     // const header = column.attrs.label ?? fieldMetadata.displayName;
     const numberOfInputs = getNumberOfInputs(rule.matchMode);
     return (
-        <div className='flex flex-column md:flex-row align-items-start gap-6 md:gap-1'>
-            <div className="col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0">
+        <div className='flex flex-col items-start gap-2 md:flex-row md:gap-1'>
+            <div className="w-full p-0 px-0 md:w-1/2 md:pl-0 md:pr-0">
                 <SolidSelect
                     value={rule.matchMode}
+                    native={false}
                     onChange={(e: any) => {
                         onChange(rule.id, 'matchMode', e.value)
                     }}
@@ -28,7 +29,7 @@ const SolidTimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
                 />
             </div>
 
-            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0'>
+            <div className='flex flex-col gap-2 w-full md:w-1/2 px-0 md:pl-0 md:pr-0 p-0'>
                 <SolidVarInputsFilterElement
                     values={rule.value}
                     onChange={(e: any) => {
@@ -45,4 +46,4 @@ const SolidTimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
 
 };
 
-export default SolidTimeField;
+export default SolidTimeField;

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

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

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

@@ -13,9 +13,9 @@ var SolidUuidField = 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-col items-start gap-2 md:flex-row md:gap-1', children: [_jsx("div", { className: "w-full p-0 px-0 md:w-1/2 md:pl-0 md:pr-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: "w-full p-inputtext-sm col-12 md:col-6" }) }), _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) {
+                    }, options: filterMatchModeOptions, optionLabel: 'label', optionValue: 'value', placeholder: "Select Operator", className: "w-full p-inputtext-sm" }) }), _jsx("div", { className: 'flex flex-col gap-2 w-full md:w-1/2 px-0 md:pl-0 md:pr-0 p-0', children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (e) {
                         onChange(rule.id, 'value', e);
                     }, numberOfInputs: numberOfInputs, inputType: InputTypes.Text, fieldMetadata: fieldMetadata }) })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SolidUuidField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidUuidField.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,cAAc,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAC1D,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;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,uCAAuC,GACnD,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,cAAc,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidUuidField = ({ 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    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=\"w-full p-inputtext-sm col-12 md:col-6\"\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 SolidUuidField;\n"]}
+{"version":3,"file":"SolidUuidField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidUuidField.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,cAAc,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAC1D,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;IAEzD,OAAO,CACH,eAAK,SAAS,EAAC,sDAAsD,aACjE,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,8DAA8D,YACzE,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\nconst SolidUuidField = ({ 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    return (\n        <div className='flex flex-col items-start gap-2 md:flex-row md:gap-1'>\n            <div className=\"w-full p-0 px-0 md:w-1/2 md:pl-0 md:pr-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=\"w-full p-inputtext-sm\"\n                />\n            </div>\n\n            <div className='flex flex-col gap-2 w-full md:w-1/2 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 SolidUuidField;\n"]}

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

@@ -16,10 +16,11 @@ const SolidUuidField = ({ 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="col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0">
+        <div className='flex flex-col items-start gap-2 md:flex-row md:gap-1'>
+            <div className="w-full p-0 px-0 md:w-1/2 md:pl-0 md:pr-0">
                 <SolidSelect
                     value={rule.matchMode}
+                    native={false}
                     onChange={(e: any) => {
                         onChange(rule.id, 'matchMode', e.value)
                     }}
@@ -27,11 +28,11 @@ const SolidUuidField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
                     optionLabel='label'
                     optionValue='value'
                     placeholder="Select Operator"
-                    className="w-full p-inputtext-sm col-12 md:col-6"
+                    className="w-full p-inputtext-sm"
                 />
             </div>
 
-            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0'>
+            <div className='flex flex-col gap-2 w-full md:w-1/2 px-0 md:pl-0 md:pr-0 p-0'>
                 <SolidVarInputsFilterElement
                     values={rule.value}
                     onChange={(e: any) => {

package/dist/components/core/filter/fields/relations/SolidRelationManyToManyField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidRelationManyToManyField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/filter/fields/relations/SolidRelationManyToManyField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAqB,MAAM,yDAAyD,CAAC;AAIrH,QAAA,MAAM,4BAA4B,8CAK/B,uBAAuB,4CAgDzB,CAAC;AAEF,eAAe,4BAA4B,CAAC"}
+{"version":3,"file":"SolidRelationManyToManyField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/filter/fields/relations/SolidRelationManyToManyField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAqB,MAAM,yDAAyD,CAAC;AAIrH,QAAA,MAAM,4BAA4B,8CAK/B,uBAAuB,4CAiDzB,CAAC;AAEF,eAAe,4BAA4B,CAAC"}

package/dist/components/core/filter/fields/relations/SolidRelationManyToManyField.js

@@ -13,13 +13,13 @@ var SolidRelationManyToManyField = function (_a) {
     var noInputOperators = ['$null', '$notNull'];
     var needsInput = !noInputOperators.includes(rule.matchMode);
     var numberOfInputs = needsInput ? getNumberOfInputs(rule.matchMode) : 0;
-    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-col items-start gap-2 md:flex-row md:gap-1", children: [_jsx("div", { className: "w-full md:w-1/2 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);
                         // Clear value if switching to no-input operator
                         if (noInputOperators.includes(e.value)) {
                             onChange(rule.id, '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-2 md:pr-0", children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (value) {
+                    }, options: filterMatchModeOptions, optionLabel: "label", optionValue: "value", placeholder: "Select Operator", className: "p-inputtext-sm w-full" }) }), _jsx("div", { className: "flex flex-col gap-2 w-full md:w-1/2 px-0 md:pl-2 md:pr-0", children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (value) {
                         onChange(index, 'value', value);
                     }, numberOfInputs: numberOfInputs, inputType: InputTypes.RelationManyToMany, fieldMetadata: fieldMetadata }) })] }));
 };

package/dist/components/core/filter/fields/relations/SolidRelationManyToManyField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidRelationManyToManyField.js","sourceRoot":"","sources":["../../../../../../src/components/core/filter/fields/relations/SolidRelationManyToManyField.tsx"],"names":[],"mappings":";AAEA,OAAO,EAA2B,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AACrH,OAAO,EAAE,2BAA2B,EAAE,UAAU,EAAE,MAAM,mEAAmE,CAAC;AAC5H,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEjE,IAAM,4BAA4B,GAAG,UAAC,EAKZ;QAJtB,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,IAAI,UAAA;IAGJ,IAAM,sBAAsB,GAAG;QAC3B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;QAC7B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;QACpC,yCAAyC;QACzC,gDAAgD;KACnD,CAAC;IAEF,IAAM,gBAAgB,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAC/C,IAAM,UAAU,GAAG,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC9D,IAAM,cAAc,GAAG,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE1E,OAAO,CACH,eAAK,SAAS,EAAC,+DAA+D,aAE1E,cAAK,SAAS,EAAC,0CAA0C,YACrD,KAAC,WAAW,IACR,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,QAAQ,EAAE,UAAC,CAAC;wBACR,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;wBACxC,gDAAgD;wBAChD,IAAI,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE;4BACpC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;yBAClC;oBACL,CAAC,EACD,OAAO,EAAE,sBAAsB,EAC/B,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,uBAAuB,GACnC,GACA,EAGN,cAAK,SAAS,EAAC,6DAA6D,YACxE,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,KAAU;wBACjB,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;oBACpC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,kBAAkB,EACxC,aAAa,EAAE,aAAa,GAC9B,GACA,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,4BAA4B,CAAC","sourcesContent":["\n\nimport { SolidFilterFieldsParams, getNumberOfInputs } from '../../../../../components/core/filter/SolidFilterFields';\nimport { SolidVarInputsFilterElement, InputTypes } from '../../../../../components/core/filter/SolidVarInputsFilterElement';\nimport { SolidSelect } from \"../../../../shad-cn-ui/SolidSelect\";\n\nconst SolidRelationManyToManyField = ({\n    fieldMetadata,\n    onChange,\n    index,\n    rule,\n}: SolidFilterFieldsParams) => {\n\n    const filterMatchModeOptions = [\n        { label: 'In', value: '$in' },\n        { label: 'Not In', value: '$notIn' }\n        // { label: 'Is Empty', value: '$null' },\n        // { label: 'Is Not Empty', value: '$notNull' },\n    ];\n\n    const noInputOperators = ['$null', '$notNull'];\n    const needsInput = !noInputOperators.includes(rule.matchMode);\n    const numberOfInputs = needsInput ? getNumberOfInputs(rule.matchMode) : 0;\n\n    return (\n        <div className=\"flex flex-column md:flex-row align-items-start gap-6 md:gap-1\">\n            {/* Operator */}\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) => {\n                        onChange(rule.id, 'matchMode', e.value);\n                        // Clear value if switching to no-input operator\n                        if (noInputOperators.includes(e.value)) {\n                            onChange(rule.id, 'value', []);\n                        }\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            {/* MultiSelect input */}\n            <div className=\"flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0\">\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(value: any) => {\n                        onChange(index, 'value', value);\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.RelationManyToMany}\n                    fieldMetadata={fieldMetadata}\n                />\n            </div>\n        </div>\n    );\n};\n\nexport default SolidRelationManyToManyField;"]}
+{"version":3,"file":"SolidRelationManyToManyField.js","sourceRoot":"","sources":["../../../../../../src/components/core/filter/fields/relations/SolidRelationManyToManyField.tsx"],"names":[],"mappings":";AAEA,OAAO,EAA2B,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AACrH,OAAO,EAAE,2BAA2B,EAAE,UAAU,EAAE,MAAM,mEAAmE,CAAC;AAC5H,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEjE,IAAM,4BAA4B,GAAG,UAAC,EAKZ;QAJtB,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,IAAI,UAAA;IAGJ,IAAM,sBAAsB,GAAG;QAC3B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;QAC7B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;QACpC,yCAAyC;QACzC,gDAAgD;KACnD,CAAC;IAEF,IAAM,gBAAgB,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAC/C,IAAM,UAAU,GAAG,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC9D,IAAM,cAAc,GAAG,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE1E,OAAO,CACH,eAAK,SAAS,EAAC,sDAAsD,aAEjE,cAAK,SAAS,EAAC,0CAA0C,YACrD,KAAC,WAAW,IACR,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE,UAAC,CAAC;wBACR,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;wBACxC,gDAAgD;wBAChD,IAAI,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE;4BACpC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;yBAClC;oBACL,CAAC,EACD,OAAO,EAAE,sBAAsB,EAC/B,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,uBAAuB,GACnC,GACA,EAGN,cAAK,SAAS,EAAC,0DAA0D,YACrE,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,KAAU;wBACjB,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;oBACpC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,kBAAkB,EACxC,aAAa,EAAE,aAAa,GAC9B,GACA,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,4BAA4B,CAAC","sourcesContent":["\n\nimport { SolidFilterFieldsParams, getNumberOfInputs } from '../../../../../components/core/filter/SolidFilterFields';\nimport { SolidVarInputsFilterElement, InputTypes } from '../../../../../components/core/filter/SolidVarInputsFilterElement';\nimport { SolidSelect } from \"../../../../shad-cn-ui/SolidSelect\";\n\nconst SolidRelationManyToManyField = ({\n    fieldMetadata,\n    onChange,\n    index,\n    rule,\n}: SolidFilterFieldsParams) => {\n\n    const filterMatchModeOptions = [\n        { label: 'In', value: '$in' },\n        { label: 'Not In', value: '$notIn' }\n        // { label: 'Is Empty', value: '$null' },\n        // { label: 'Is Not Empty', value: '$notNull' },\n    ];\n\n    const noInputOperators = ['$null', '$notNull'];\n    const needsInput = !noInputOperators.includes(rule.matchMode);\n    const numberOfInputs = needsInput ? getNumberOfInputs(rule.matchMode) : 0;\n\n    return (\n        <div className=\"flex flex-col items-start gap-2 md:flex-row md:gap-1\">\n            {/* Operator */}\n            <div className=\"w-full md:w-1/2 px-0 md:pr-0 md:pl-0 p-0\">\n                <SolidSelect\n                    value={rule.matchMode}\n                    native={false}\n                    onChange={(e) => {\n                        onChange(rule.id, 'matchMode', e.value);\n                        // Clear value if switching to no-input operator\n                        if (noInputOperators.includes(e.value)) {\n                            onChange(rule.id, 'value', []);\n                        }\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            {/* MultiSelect input */}\n            <div className=\"flex flex-col gap-2 w-full md:w-1/2 px-0 md:pl-2 md:pr-0\">\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(value: any) => {\n                        onChange(index, 'value', value);\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.RelationManyToMany}\n                    fieldMetadata={fieldMetadata}\n                />\n            </div>\n        </div>\n    );\n};\n\nexport default SolidRelationManyToManyField;\n"]}

package/dist/components/core/filter/fields/relations/SolidRelationManyToManyField.tsx

@@ -23,11 +23,12 @@ const SolidRelationManyToManyField = ({
     const numberOfInputs = needsInput ? getNumberOfInputs(rule.matchMode) : 0;
 
     return (
-        <div className="flex flex-column md:flex-row align-items-start gap-6 md:gap-1">
+        <div className="flex flex-col items-start gap-2 md:flex-row md:gap-1">
             {/* Operator */}
-            <div className="col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0">
+            <div className="w-full md:w-1/2 px-0 md:pr-0 md:pl-0 p-0">
                 <SolidSelect
                     value={rule.matchMode}
+                    native={false}
                     onChange={(e) => {
                         onChange(rule.id, 'matchMode', e.value);
                         // Clear value if switching to no-input operator
@@ -44,7 +45,7 @@ const SolidRelationManyToManyField = ({
             </div>
 
             {/* MultiSelect input */}
-            <div className="flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0">
+            <div className="flex flex-col gap-2 w-full md:w-1/2 px-0 md:pl-2 md:pr-0">
                 <SolidVarInputsFilterElement
                     values={rule.value}
                     onChange={(value: any) => {
@@ -59,4 +60,4 @@ const SolidRelationManyToManyField = ({
     );
 };
 
-export default SolidRelationManyToManyField;
+export default SolidRelationManyToManyField;

package/dist/components/core/filter/fields/relations/SolidRelationManyToOneField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidRelationManyToOneField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/filter/fields/relations/SolidRelationManyToOneField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,uBAAuB,EAAE,MAAM,yDAAyD,CAAC;AAErH,QAAA,MAAM,2BAA2B,6CAA8C,uBAAuB,4CA4ErG,CAAC;AAEF,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"SolidRelationManyToOneField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/filter/fields/relations/SolidRelationManyToOneField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,uBAAuB,EAAE,MAAM,yDAAyD,CAAC;AAErH,QAAA,MAAM,2BAA2B,6CAA8C,uBAAuB,4CA6ErG,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/dist/components/core/filter/fields/relations/SolidRelationManyToOneField.js

@@ -40,9 +40,9 @@ var SolidRelationManyToOneField = function (_a) {
     //     }
     // };
     // const header = column.attrs.label ?? fieldMetadata.displayName;
-    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-col items-start gap-2 md:flex-row md:gap-1', children: [_jsx("div", { className: "w-full p-0 px-0 md:w-1/2 md:pl-0 md:pr-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) {
+                    }, options: filterMatchModeOptions, optionLabel: 'label', optionValue: 'value', placeholder: "Select Operator", className: "p-inputtext-sm w-full" }) }), _jsx("div", { className: 'flex flex-col gap-2 w-full md:w-1/2 px-0 md:pl-0 md:pr-0 p-0', children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (e) {
                         onChange(index, 'value', e);
                     }, numberOfInputs: numberOfInputs, inputType: InputTypes.RelationManyToOne, fieldMetadata: fieldMetadata }) })] }));
 };

package/dist/components/core/filter/fields/relations/SolidRelationManyToOneField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidRelationManyToOneField.js","sourceRoot":"","sources":["../../../../../../src/components/core/filter/fields/relations/SolidRelationManyToOneField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAE,MAAM,mEAAmE,CAAC;AAC5H,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAA2B,MAAM,yDAAyD,CAAC;AAErH,IAAM,2BAA2B,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IACvE,8CAA8C;IAC9C,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,sBAAsB,GAAG;QAC3B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;QAC7B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;KACvC,CAAC;IACF,IAAM,cAAc,GAAG,SAAS,CAAC;IACjC,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEzD,4EAA4E;IAE5E,eAAe;IACf,uCAAuC;IACvC,qCAAqC;IACrC,sGAAsG;IACtG,uDAAuD;IACvD,4DAA4D;IAC5D,4CAA4C;IAC5C,8BAA8B;IAC9B,YAAY;IACZ,yCAAyC;IACzC,QAAQ;IACR,KAAK;IAEL,2CAA2C;IAC3C,6DAA6D;IAE7D,sEAAsE;IACtE,gCAAgC;IAChC,qGAAqG;IACrG,8EAA8E;IAE9E,oEAAoE;IAEpE,qGAAqG;IACrG,iDAAiD;IACjD,QAAQ;IACR,aAAa;IACb,+BAA+B;IAC/B,QAAQ;IACR,KAAK;IACL,kEAAkE;IAElE,OAAO,CACH,eAAK,SAAS,EAAC,+DAA+D,aAC1E,cAAK,SAAS,EAAC,0CAA0C,YAEzD,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,GACI,EAEN,cAAK,SAAS,EAAC,iEAAiE,YAC5E,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBAC/B,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,iBAAiB,EACvC,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AAEN,CAAC,CAAC;AAEF,eAAe,2BAA2B,CAAC","sourcesContent":["\nimport { InputTypes, SolidVarInputsFilterElement } from '../../../../../components/core/filter/SolidVarInputsFilterElement';\nimport { SolidSelect } from \"../../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../../../../../components/core/filter/SolidFilterFields';\n\nconst SolidRelationManyToOneField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const filterMatchModeOptions = [\n        { label: 'In', value: \"$in\" },\n        { label: 'Not In', value: \"$notIn\" },\n    ];\n    const columnDataType = undefined;\n    const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n    // const filterTemplate = (options: ColumnFilterElementTemplateOptions) => {\n\n    //     return (\n    //         <SolidVarInputsFilterElement\n    //             values={options.value}\n    //             onChange={(e: FormEvent<HTMLInputElement>) => options.filterCallback(e, options.index)}\n    //             inputType={InputTypes.RelationManyToOne}\n    //             solidListViewMetaData={solidListViewMetaData}\n    //             fieldMetadata={fieldMetadata}\n    //             column={column}\n    //         >\n    //         </SolidVarInputsFilterElement>\n    //     )\n    // };\n\n    // const bodyTemplate = (rowData: any) => {\n    //     const manyToOneFieldData = rowData[column.attrs.name];\n\n    //     // This is the userkey that will be present within the rowData.\n    //     if (manyToOneFieldData) {\n    //         // Since this is a many-to-one field, we fetch the user key field of the associated model.\n    //         const userKeyField = fieldMetadata.relationModel.userKeyField.name;\n\n    //         const manyToOneColVal = manyToOneFieldData[userKeyField];\n\n    //         // TODO: change this to use an anchor tag so that on click we open that entity form view. \n    //         return <span>{manyToOneColVal}</span>;\n    //     }\n    //     else {\n    //         return <span></span>\n    //     }\n    // };\n    // const header = column.attrs.label ?? fieldMetadata.displayName;\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\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(index, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.RelationManyToOne}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n\n};\n\nexport default SolidRelationManyToOneField;"]}
+{"version":3,"file":"SolidRelationManyToOneField.js","sourceRoot":"","sources":["../../../../../../src/components/core/filter/fields/relations/SolidRelationManyToOneField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAE,MAAM,mEAAmE,CAAC;AAC5H,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAA2B,MAAM,yDAAyD,CAAC;AAErH,IAAM,2BAA2B,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IACvE,8CAA8C;IAC9C,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,sBAAsB,GAAG;QAC3B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;QAC7B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;KACvC,CAAC;IACF,IAAM,cAAc,GAAG,SAAS,CAAC;IACjC,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEzD,4EAA4E;IAE5E,eAAe;IACf,uCAAuC;IACvC,qCAAqC;IACrC,sGAAsG;IACtG,uDAAuD;IACvD,4DAA4D;IAC5D,4CAA4C;IAC5C,8BAA8B;IAC9B,YAAY;IACZ,yCAAyC;IACzC,QAAQ;IACR,KAAK;IAEL,2CAA2C;IAC3C,6DAA6D;IAE7D,sEAAsE;IACtE,gCAAgC;IAChC,qGAAqG;IACrG,8EAA8E;IAE9E,oEAAoE;IAEpE,qGAAqG;IACrG,iDAAiD;IACjD,QAAQ;IACR,aAAa;IACb,+BAA+B;IAC/B,QAAQ;IACR,KAAK;IACL,kEAAkE;IAElE,OAAO,CACH,eAAK,SAAS,EAAC,sDAAsD,aACjE,cAAK,SAAS,EAAC,0CAA0C,YAEzD,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,GACI,EAEN,cAAK,SAAS,EAAC,8DAA8D,YACzE,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;oBAC/B,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,iBAAiB,EACvC,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AAEN,CAAC,CAAC;AAEF,eAAe,2BAA2B,CAAC","sourcesContent":["\nimport { InputTypes, SolidVarInputsFilterElement } from '../../../../../components/core/filter/SolidVarInputsFilterElement';\nimport { SolidSelect } from \"../../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../../../../../components/core/filter/SolidFilterFields';\n\nconst SolidRelationManyToOneField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const showFilterOperator = false;\n    const filterMatchModeOptions = [\n        { label: 'In', value: \"$in\" },\n        { label: 'Not In', value: \"$notIn\" },\n    ];\n    const columnDataType = undefined;\n    const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n    // const filterTemplate = (options: ColumnFilterElementTemplateOptions) => {\n\n    //     return (\n    //         <SolidVarInputsFilterElement\n    //             values={options.value}\n    //             onChange={(e: FormEvent<HTMLInputElement>) => options.filterCallback(e, options.index)}\n    //             inputType={InputTypes.RelationManyToOne}\n    //             solidListViewMetaData={solidListViewMetaData}\n    //             fieldMetadata={fieldMetadata}\n    //             column={column}\n    //         >\n    //         </SolidVarInputsFilterElement>\n    //     )\n    // };\n\n    // const bodyTemplate = (rowData: any) => {\n    //     const manyToOneFieldData = rowData[column.attrs.name];\n\n    //     // This is the userkey that will be present within the rowData.\n    //     if (manyToOneFieldData) {\n    //         // Since this is a many-to-one field, we fetch the user key field of the associated model.\n    //         const userKeyField = fieldMetadata.relationModel.userKeyField.name;\n\n    //         const manyToOneColVal = manyToOneFieldData[userKeyField];\n\n    //         // TODO: change this to use an anchor tag so that on click we open that entity form view. \n    //         return <span>{manyToOneColVal}</span>;\n    //     }\n    //     else {\n    //         return <span></span>\n    //     }\n    // };\n    // const header = column.attrs.label ?? fieldMetadata.displayName;\n\n    return (\n        <div className='flex flex-col items-start gap-2 md:flex-row md:gap-1'>\n            <div className=\"w-full p-0 px-0 md:w-1/2 md:pl-0 md:pr-0\">\n\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-col gap-2 w-full md:w-1/2 px-0 md:pl-0 md:pr-0 p-0'>\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(e: any) => {\n                        onChange(index, 'value', e)\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.RelationManyToOne}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n\n};\n\nexport default SolidRelationManyToOneField;\n"]}

package/dist/components/core/filter/fields/relations/SolidRelationManyToOneField.tsx

@@ -48,11 +48,12 @@ const SolidRelationManyToOneField = ({ fieldMetadata, onChange, index, rule }: S
     // const header = column.attrs.label ?? fieldMetadata.displayName;
 
     return (
-        <div className='flex flex-column md:flex-row align-items-start gap-6 md:gap-1'>
-            <div className="col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0">
+        <div className='flex flex-col items-start gap-2 md:flex-row md:gap-1'>
+            <div className="w-full p-0 px-0 md:w-1/2 md:pl-0 md:pr-0">
 
             <SolidSelect
                 value={rule.matchMode}
+                native={false}
                 onChange={(e: any) => {
                     onChange(rule.id, 'matchMode', e.value)
                 }}
@@ -64,7 +65,7 @@ const SolidRelationManyToOneField = ({ fieldMetadata, onChange, index, rule }: S
             />
             </div>
 
-            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-0 md:pr-0 p-0'>
+            <div className='flex flex-col gap-2 w-full md:w-1/2 px-0 md:pl-0 md:pr-0 p-0'>
                 <SolidVarInputsFilterElement
                     values={rule.value}
                     onChange={(e: any) => {
@@ -81,4 +82,4 @@ const SolidRelationManyToOneField = ({ fieldMetadata, onChange, index, rule }: S
 
 };
 
-export default SolidRelationManyToOneField;
+export default SolidRelationManyToOneField;

package/dist/components/core/filter/fields/relations/SolidRelationOneToManyField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidRelationOneToManyField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/filter/fields/relations/SolidRelationOneToManyField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAqB,MAAM,yDAAyD,CAAC;AAIrH,QAAA,MAAM,2BAA2B,8CAK9B,uBAAuB,4CA8CzB,CAAC;AAEF,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"SolidRelationOneToManyField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/filter/fields/relations/SolidRelationOneToManyField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAqB,MAAM,yDAAyD,CAAC;AAIrH,QAAA,MAAM,2BAA2B,8CAK9B,uBAAuB,4CA+CzB,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/dist/components/core/filter/fields/relations/SolidRelationOneToManyField.js

@@ -11,13 +11,13 @@ var SolidRelationOneToManyField = function (_a) {
     var noInputOperators = ['$null', '$notNull'];
     var needsInput = !noInputOperators.includes(rule.matchMode);
     var numberOfInputs = needsInput ? getNumberOfInputs(rule.matchMode) : 0;
-    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-col items-start gap-2 md:flex-row md:gap-1", children: [_jsx("div", { className: "w-full md:w-1/2 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);
                         // Clear value if switching to no-input operator
                         if (noInputOperators.includes(e.value)) {
                             onChange(rule.id, '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-2 md:pr-0", children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (value) {
+                    }, options: filterMatchModeOptions, optionLabel: "label", optionValue: "value", placeholder: "Select Operator", className: "p-inputtext-sm w-full" }) }), _jsx("div", { className: "flex flex-col gap-2 w-full md:w-1/2 px-0 md:pl-2 md:pr-0", children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (value) {
                         onChange(index, 'value', value);
                     }, numberOfInputs: numberOfInputs, inputType: InputTypes.RelationOneToMany, fieldMetadata: fieldMetadata }) })] }));
 };

package/dist/components/core/filter/fields/relations/SolidRelationOneToManyField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidRelationOneToManyField.js","sourceRoot":"","sources":["../../../../../../src/components/core/filter/fields/relations/SolidRelationOneToManyField.tsx"],"names":[],"mappings":";AAEA,OAAO,EAA2B,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AACrH,OAAO,EAAE,2BAA2B,EAAE,UAAU,EAAE,MAAM,mEAAmE,CAAC;AAC5H,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEjE,IAAM,2BAA2B,GAAG,UAAC,EAKX;QAJtB,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,IAAI,UAAA;IAGJ,IAAM,sBAAsB,GAAG;QAC3B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;QAC7B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;KACvC,CAAC;IAEF,IAAM,gBAAgB,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAC/C,IAAM,UAAU,GAAG,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC9D,IAAM,cAAc,GAAG,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE1E,OAAO,CACH,eAAK,SAAS,EAAC,+DAA+D,aAE1E,cAAK,SAAS,EAAC,0CAA0C,YACrD,KAAC,WAAW,IACR,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,QAAQ,EAAE,UAAC,CAAC;wBACR,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;wBACxC,gDAAgD;wBAChD,IAAI,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE;4BACpC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;yBAClC;oBACL,CAAC,EACD,OAAO,EAAE,sBAAsB,EAC/B,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,uBAAuB,GACnC,GACA,EAGN,cAAK,SAAS,EAAC,6DAA6D,YACxE,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,KAAU;wBACjB,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;oBACpC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,iBAAiB,EACvC,aAAa,EAAE,aAAa,GAC9B,GACA,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,2BAA2B,CAAC","sourcesContent":["\n\nimport { SolidFilterFieldsParams, getNumberOfInputs } from '../../../../../components/core/filter/SolidFilterFields';\nimport { SolidVarInputsFilterElement, InputTypes } from '../../../../../components/core/filter/SolidVarInputsFilterElement';\nimport { SolidSelect } from \"../../../../shad-cn-ui/SolidSelect\";\n\nconst SolidRelationOneToManyField = ({\n    fieldMetadata,\n    onChange,\n    index,\n    rule,\n}: SolidFilterFieldsParams) => {\n\n    const filterMatchModeOptions = [\n        { label: 'In', value: '$in' },\n        { label: 'Not In', value: '$notIn' }\n    ];\n\n    const noInputOperators = ['$null', '$notNull'];\n    const needsInput = !noInputOperators.includes(rule.matchMode);\n    const numberOfInputs = needsInput ? getNumberOfInputs(rule.matchMode) : 0;\n\n    return (\n        <div className=\"flex flex-column md:flex-row align-items-start gap-6 md:gap-1\">\n            {/* Operator */}\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) => {\n                        onChange(rule.id, 'matchMode', e.value);\n                        // Clear value if switching to no-input operator\n                        if (noInputOperators.includes(e.value)) {\n                            onChange(rule.id, 'value', []);\n                        }\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            {/* MultiSelect input */}\n            <div className=\"flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0\">\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(value: any) => {\n                        onChange(index, 'value', value);\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.RelationOneToMany}\n                    fieldMetadata={fieldMetadata}\n                />\n            </div>\n        </div>\n    );\n};\n\nexport default SolidRelationOneToManyField;"]}
+{"version":3,"file":"SolidRelationOneToManyField.js","sourceRoot":"","sources":["../../../../../../src/components/core/filter/fields/relations/SolidRelationOneToManyField.tsx"],"names":[],"mappings":";AAEA,OAAO,EAA2B,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AACrH,OAAO,EAAE,2BAA2B,EAAE,UAAU,EAAE,MAAM,mEAAmE,CAAC;AAC5H,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEjE,IAAM,2BAA2B,GAAG,UAAC,EAKX;QAJtB,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,IAAI,UAAA;IAGJ,IAAM,sBAAsB,GAAG;QAC3B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;QAC7B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;KACvC,CAAC;IAEF,IAAM,gBAAgB,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAC/C,IAAM,UAAU,GAAG,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC9D,IAAM,cAAc,GAAG,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE1E,OAAO,CACH,eAAK,SAAS,EAAC,sDAAsD,aAEjE,cAAK,SAAS,EAAC,0CAA0C,YACrD,KAAC,WAAW,IACR,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE,UAAC,CAAC;wBACR,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;wBACxC,gDAAgD;wBAChD,IAAI,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE;4BACpC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;yBAClC;oBACL,CAAC,EACD,OAAO,EAAE,sBAAsB,EAC/B,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,uBAAuB,GACnC,GACA,EAGN,cAAK,SAAS,EAAC,0DAA0D,YACrE,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,KAAU;wBACjB,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;oBACpC,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,UAAU,CAAC,iBAAiB,EACvC,aAAa,EAAE,aAAa,GAC9B,GACA,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,2BAA2B,CAAC","sourcesContent":["\n\nimport { SolidFilterFieldsParams, getNumberOfInputs } from '../../../../../components/core/filter/SolidFilterFields';\nimport { SolidVarInputsFilterElement, InputTypes } from '../../../../../components/core/filter/SolidVarInputsFilterElement';\nimport { SolidSelect } from \"../../../../shad-cn-ui/SolidSelect\";\n\nconst SolidRelationOneToManyField = ({\n    fieldMetadata,\n    onChange,\n    index,\n    rule,\n}: SolidFilterFieldsParams) => {\n\n    const filterMatchModeOptions = [\n        { label: 'In', value: '$in' },\n        { label: 'Not In', value: '$notIn' }\n    ];\n\n    const noInputOperators = ['$null', '$notNull'];\n    const needsInput = !noInputOperators.includes(rule.matchMode);\n    const numberOfInputs = needsInput ? getNumberOfInputs(rule.matchMode) : 0;\n\n    return (\n        <div className=\"flex flex-col items-start gap-2 md:flex-row md:gap-1\">\n            {/* Operator */}\n            <div className=\"w-full md:w-1/2 px-0 md:pr-0 md:pl-0 p-0\">\n                <SolidSelect\n                    value={rule.matchMode}\n                    native={false}\n                    onChange={(e) => {\n                        onChange(rule.id, 'matchMode', e.value);\n                        // Clear value if switching to no-input operator\n                        if (noInputOperators.includes(e.value)) {\n                            onChange(rule.id, 'value', []);\n                        }\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            {/* MultiSelect input */}\n            <div className=\"flex flex-col gap-2 w-full md:w-1/2 px-0 md:pl-2 md:pr-0\">\n                <SolidVarInputsFilterElement\n                    values={rule.value}\n                    onChange={(value: any) => {\n                        onChange(index, 'value', value);\n                    }}\n                    numberOfInputs={numberOfInputs}\n                    inputType={InputTypes.RelationOneToMany}\n                    fieldMetadata={fieldMetadata}\n                />\n            </div>\n        </div>\n    );\n};\n\nexport default SolidRelationOneToManyField;\n"]}

package/dist/components/core/filter/fields/relations/SolidRelationOneToManyField.tsx

@@ -21,11 +21,12 @@ const SolidRelationOneToManyField = ({
     const numberOfInputs = needsInput ? getNumberOfInputs(rule.matchMode) : 0;
 
     return (
-        <div className="flex flex-column md:flex-row align-items-start gap-6 md:gap-1">
+        <div className="flex flex-col items-start gap-2 md:flex-row md:gap-1">
             {/* Operator */}
-            <div className="col-12 md:col-6 px-0 md:pr-0 md:pl-0 p-0">
+            <div className="w-full md:w-1/2 px-0 md:pr-0 md:pl-0 p-0">
                 <SolidSelect
                     value={rule.matchMode}
+                    native={false}
                     onChange={(e) => {
                         onChange(rule.id, 'matchMode', e.value);
                         // Clear value if switching to no-input operator
@@ -42,7 +43,7 @@ const SolidRelationOneToManyField = ({
             </div>
 
             {/* MultiSelect input */}
-            <div className="flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0">
+            <div className="flex flex-col gap-2 w-full md:w-1/2 px-0 md:pl-2 md:pr-0">
                 <SolidVarInputsFilterElement
                     values={rule.value}
                     onChange={(value: any) => {
@@ -57,4 +58,4 @@ const SolidRelationOneToManyField = ({
     );
 };
 
-export default SolidRelationOneToManyField;
+export default SolidRelationOneToManyField;