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

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,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,wBAAwB,GACpC,GACA,EACN,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\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-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            <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.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="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)
                     }}
@@ -41,7 +42,7 @@ const SolidDateField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
                     className="p-inputtext-sm w-full "
                 />
             </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/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,9 +16,9 @@ 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-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.DateTime, fieldMetadata: fieldMetadata }) })] }));
 };

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,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,wBAAwB,GACpC,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,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-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.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="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)
                     }}
@@ -34,7 +35,7 @@ const SolidDatetimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilte
                 />
             </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 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,9 +13,9 @@ 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-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/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,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,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-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 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="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)
                     }}
@@ -32,7 +33,7 @@ const SolidExternalIdField = ({ fieldMetadata, onChange, index, rule }: SolidFil
                 />
             </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/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,9 +18,9 @@ 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 items-start gap-4 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) {
+                }, 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', children: _jsx(SolidVarInputsFilterElement, { values: rule.value, onChange: function (e) {
                         onChange(rule.id, 'value', e);
                     }, numberOfInputs: numberOfInputs, inputType: InputTypes.Numeric, fieldMetadata: fieldMetadata }) })] }));
 };

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,+BAA+B,aAC1C,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,4BAA4B,YACvC,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 items-start gap-4 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-col 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

@@ -21,9 +21,10 @@ const SolidIdField = ({ fieldMetadata, onChange, index, rule }: SolidFilterField
 
 
     return (
-        <div className='flex align-items-start gap-3 w-full'>
+        <div className='flex items-start gap-4 w-full'>
             <SolidSelect
                 value={rule.matchMode}
+                native={false}
                 onChange={(e: any) => {
                     onChange(rule.id, 'matchMode', e.value)
                 }}
@@ -33,7 +34,7 @@ const SolidIdField = ({ fieldMetadata, onChange, index, rule }: SolidFilterField
                 placeholder="Select Operator"
                 className="w-full p-inputtext-sm"
             />
-            <div className='flex flex-column gap-2 w-full'>
+            <div className='flex flex-col gap-2 w-full'>
                 <SolidVarInputsFilterElement
                     values={rule.value}
                     onChange={(e: any) => {

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,10 +18,10 @@ 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-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) {
                         // 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) {
+                    }, 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) {
                         // updateEnumValues(index, 'value', e)
                         onChange(rule.id, 'value', e);
                     }, numberOfInputs: numberOfInputs, inputType: InputTypes.Numeric, fieldMetadata: fieldMetadata }) })] }));

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

@@ -1 +1 @@
-{"version":3,"file":"SolidIntField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidIntField.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,aAAa,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IACzD,8CAA8C;IAC9C,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;IAIF,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,+CAA+C;wBAC/C,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,YAC5E,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,sCAAsC;wBACtC,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,aAAa,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidIntField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\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\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                        // updateEnumValues(index, 'operator', e.value)\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                        // updateEnumValues(index, 'value', e)\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\nexport default SolidIntField;\n"]}
+{"version":3,"file":"SolidIntField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidIntField.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,aAAa,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IACzD,8CAA8C;IAC9C,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;IAIF,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,+CAA+C;wBAC/C,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,8DAA8D,YACzE,KAAC,2BAA2B,IACxB,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,QAAQ,EAAE,UAAC,CAAM;wBACb,sCAAsC;wBACtC,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,aAAa,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidIntField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\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\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                        // updateEnumValues(index, 'operator', e.value)\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                        // updateEnumValues(index, 'value', e)\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\nexport default SolidIntField;\n"]}

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

@@ -23,10 +23,11 @@ const SolidIntField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFiel
     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) => {
                         // updateEnumValues(index, 'operator', e.value)
                         onChange(rule.id, 'matchMode', e.value)
@@ -39,7 +40,7 @@ const SolidIntField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFiel
                 />
             </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/SolidMediaMultipleField.d.ts.map

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

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

@@ -21,9 +21,9 @@ var SolidMediaMultipleField = 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: "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/SolidMediaMultipleField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidMediaMultipleField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidMediaMultipleField.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,uBAAuB,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IACnE,8CAA8C;IAC9C,IAAM,UAAU,GAAG,KAAK,CAAC;IACzB,oCAAoC;IACpC,oCAAoC;IACpC,kEAAkE;IAClE,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;IACF,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,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,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,uBAAuB,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidMediaMultipleField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const filterable = false;\n    // const showFilterOperator = false;\n    // const columnDataType = undefined;\n    // const header = column.attrs.label ?? fieldMetadata.displayName;\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    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={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 SolidMediaMultipleField;\n"]}
+{"version":3,"file":"SolidMediaMultipleField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidMediaMultipleField.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,uBAAuB,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IACnE,8CAA8C;IAC9C,IAAM,UAAU,GAAG,KAAK,CAAC;IACzB,oCAAoC;IACpC,oCAAoC;IACpC,kEAAkE;IAClE,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;IACF,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,sBAAsB,EAC/B,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,wBAAwB,GACpC,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,uBAAuB,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidMediaMultipleField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const filterable = false;\n    // const showFilterOperator = false;\n    // const columnDataType = undefined;\n    // const header = column.attrs.label ?? fieldMetadata.displayName;\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    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={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 SolidMediaMultipleField;\n"]}

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

@@ -23,10 +23,11 @@ const SolidMediaMultipleField = ({ fieldMetadata, onChange, index, rule }: Solid
     ];
     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 SolidMediaMultipleField = ({ fieldMetadata, onChange, index, rule }: Solid
                 />
             </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/SolidMediaSingleField.d.ts.map

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

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

@@ -21,9 +21,9 @@ var SolidMediaSingleField = function (_a) {
     ];
     var numberOfInputs = getNumberOfInputs(rule.matchMode);
     // 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(rule.id, 'value', e);
                     }, numberOfInputs: numberOfInputs, inputType: InputTypes.Text, fieldMetadata: fieldMetadata }) })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SolidMediaSingleField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidMediaSingleField.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,qBAAqB,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IACjE,8CAA8C;IAC9C,IAAM,UAAU,GAAG,KAAK,CAAC;IACzB,oCAAoC;IACpC,oCAAoC;IACpC,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;IACF,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEzD,kEAAkE;IAElE,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,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,qBAAqB,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidMediaSingleField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const filterable = false;\n    // const showFilterOperator = false;\n    // const columnDataType = undefined;\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    const numberOfInputs = getNumberOfInputs(rule.matchMode);\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                <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 SolidMediaSingleField;\n"]}
+{"version":3,"file":"SolidMediaSingleField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidMediaSingleField.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,qBAAqB,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IACjE,8CAA8C;IAC9C,IAAM,UAAU,GAAG,KAAK,CAAC;IACzB,oCAAoC;IACpC,oCAAoC;IACpC,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;IACF,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEzD,kEAAkE;IAElE,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,wBAAwB,GACpC,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,qBAAqB,CAAC","sourcesContent":["\nimport { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidMediaSingleField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\n    // const filterable = column.attrs.filterable;\n    const filterable = false;\n    // const showFilterOperator = false;\n    // const columnDataType = undefined;\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    const numberOfInputs = getNumberOfInputs(rule.matchMode);\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                <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 SolidMediaSingleField;\n"]}

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

@@ -25,10 +25,11 @@ const SolidMediaSingleField = ({ fieldMetadata, onChange, index, rule }: SolidFi
     // 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)
                     }}
@@ -40,7 +41,7 @@ const SolidMediaSingleField = ({ fieldMetadata, onChange, index, rule }: SolidFi
                 />
             </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/SolidSelectionDynamicField.d.ts.map

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

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

@@ -13,9 +13,9 @@ var SolidSelectionDynamicField = 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: "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.SelectionDynamic, fieldMetadata: fieldMetadata }) })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SolidSelectionDynamicField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidSelectionDynamicField.tsx"],"names":[],"mappings":";AAAA,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,0BAA0B,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IACtE,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;IACF,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAIzD,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,gBAAgB,EACtC,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AAEN,CAAC,CAAC;AAEF,eAAe,0BAA0B,CAAC","sourcesContent":["import { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidSelectionDynamicField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\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    const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\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.SelectionDynamic}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n\n};\n\nexport default SolidSelectionDynamicField;"]}
+{"version":3,"file":"SolidSelectionDynamicField.js","sourceRoot":"","sources":["../../../../../src/components/core/filter/fields/SolidSelectionDynamicField.tsx"],"names":[],"mappings":";AAAA,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,0BAA0B,GAAG,UAAC,EAAiE;QAA/D,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IACtE,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;IACF,IAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAIzD,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,gBAAgB,EACtC,aAAa,EAAE,aAAa,GAEF,GAC5B,IACJ,CACT,CAAC;AAEN,CAAC,CAAC;AAEF,eAAe,0BAA0B,CAAC","sourcesContent":["import { SolidSelect } from \"../../../shad-cn-ui/SolidSelect\";\nimport { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';\nimport { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';\n\nconst SolidSelectionDynamicField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {\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    const numberOfInputs = getNumberOfInputs(rule.matchMode);\n\n\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.SelectionDynamic}\n                    fieldMetadata={fieldMetadata}\n                >\n                </SolidVarInputsFilterElement>\n            </div>\n        </div>\n    );\n\n};\n\nexport default SolidSelectionDynamicField;\n"]}

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

@@ -17,10 +17,11 @@ const SolidSelectionDynamicField = ({ fieldMetadata, onChange, index, rule }: So
 
 
     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)
                     }}
@@ -32,7 +33,7 @@ const SolidSelectionDynamicField = ({ fieldMetadata, onChange, index, rule }: So
                 />
             </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) => {
@@ -49,4 +50,4 @@ const SolidSelectionDynamicField = ({ fieldMetadata, onChange, index, rule }: So
 
 };
 
-export default SolidSelectionDynamicField;
+export default SolidSelectionDynamicField;

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

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

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

@@ -14,9 +14,9 @@ var SolidSelectionStaticField = 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: "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.SelectionStatic, fieldMetadata: fieldMetadata }) })] }));
 };