@solidstarters/solid-core-ui 1.1.211 → 1.1.212

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

@@ -0,0 +1,63 @@
+"use client";
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
+
+export const dateFilterMatchModeOptions = [
+    { label: 'Equals', value: "$eqi" },
+    { label: 'Not Equals', value: "$nei" },
+    { label: 'Less Than', value: "$lt" },
+    { label: 'Less Than Or Equal', value: "$lte" },
+    { label: 'Greater Than', value: "$gt" },
+    { label: 'Greater Than Or Equal', value: "$gte" },
+    { label: 'In', value: "$in" },
+    { label: 'Not In', value: "$notIn" },
+    { label: 'Between', value: "$between" },
+    { label: 'Is null', value: "$null" },
+    { label: 'Is Not null', value: "$notNull" }
+
+];
+
+const SolidDateField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    // const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const columnDataType = 'date';
+
+
+    // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.
+    // const header = column.attrs.label ?? fieldMetadata.displayName;
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+    return (
+        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-0'>
+            <div className="col-12 md:col-6 px-0 md:pr-2 md:pl-0">
+                <Dropdown
+                    value={rule.matchMode}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'matchMode', e.value)
+                    }}
+                    options={dateFilterMatchModeOptions}
+                    optionLabel='label'
+                    optionValue='value'
+                    placeholder="Select Operator"
+                    className="p-inputtext-sm w-full "
+                />
+            </div>
+            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Date}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidDateField;

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

@@ -0,0 +1,54 @@
+"use client";
+import React, { useEffect, useState } from 'react';
+import { dateFilterMatchModeOptions } from './SolidDateField';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { Dropdown } from 'primereact/dropdown';
+import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
+
+const SolidDatetimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    // const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const columnDataType = 'date';
+
+    const [numberOfInputs, setNumberOfInputs] = useState<any>(null);
+    // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.
+    // const header = column.attrs.label ?? fieldMetadata.displayName;
+    useEffect(() => {
+        setNumberOfInputs(getNumberOfInputs(rule.matchMode))
+    }, [rule])
+    // const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+    return (
+        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-0'>
+            <div className="col-12 md:col-6 px-0 md:pr-2 md:pl-0">
+                <Dropdown
+                    value={rule.matchMode}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'matchMode', e.value)
+                    }}
+                    options={dateFilterMatchModeOptions}
+                    optionLabel='label'
+                    optionValue='value'
+                    placeholder="Select Operator"
+                    className="p-inputtext-sm w-full "
+                />
+            </div>
+
+            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.DateTime}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidDatetimeField;

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

@@ -0,0 +1,9 @@
+"use client";
+import { SolidFilterFieldsParams } from '../SolidFilterFields';
+import SolidIntField from './SolidIntField';
+
+const SolidDecimalField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    return SolidIntField({ fieldMetadata, onChange, index, rule });
+};
+
+export default SolidDecimalField;

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

@@ -0,0 +1,52 @@
+"use client";
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
+
+const SolidExternalIdField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    const showFilterOperator = false;
+    const columnDataType = 'text';
+    const filterMatchModeOptions = [
+        { label: 'In', value: "$in" },
+        { label: 'Not In', value: "$notIn" },
+        { label: 'Is null', value: "$null" },
+        { label: 'Is Not null', value: "$notNull" }
+
+    ];
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+
+    return (
+        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-0'>
+            <div className="col-12 md:col-6 px-0 md:pr-2 md:pl-0">
+                <Dropdown
+                    value={rule.matchMode}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'matchMode', e.value)
+                    }}
+                    options={filterMatchModeOptions}
+                    optionLabel='label'
+                    optionValue='value'
+                    placeholder="Select Operator"
+                    className="p-inputtext-sm w-full"
+                />
+            </div>
+
+            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Text}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidExternalIdField;

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

@@ -0,0 +1,9 @@
+"use client";
+import { SolidFilterFieldsParams } from '../SolidFilterFields';
+import SolidIntField from './SolidIntField';
+
+const SolidFloatField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    return SolidIntField({ fieldMetadata, onChange, index, rule });
+};
+
+export default SolidFloatField;

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

@@ -0,0 +1,46 @@
+"use client";
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+
+const SolidIdField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    const showFilterOperator = false;
+    const columnDataType = 'text';
+    const filterMatchModeOptions = [
+        { label: 'In', value: "$in" },
+        { label: 'Not In', value: "$notIn" }
+    ];
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+
+    return (
+        <div className='flex align-items-start gap-3 w-full'>
+            <Dropdown
+                value={rule.matchMode}
+                onChange={(e: any) => {
+                    onChange(rule.id, 'matchMode', e.value)
+                }}
+                options={filterMatchModeOptions}
+                optionLabel='label'
+                optionValue='value'
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Numeric}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidIdField;

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

@@ -0,0 +1,61 @@
+"use client";
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
+
+const SolidIntField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    // const filterable = column.attrs.filterable;
+    const filterMatchModeOptions = [
+        { label: 'Equals', value: "$eq" },
+        { label: 'Not Equals', value: "$ne" },
+        { label: 'Less Than', value: "$lt" },
+        { label: 'Less Than Or Equal', value: "$lte" },
+        { label: 'Greater Than', value: "$gt" },
+        { label: 'Greater Than Or Equal', value: "$gte" },
+        { label: 'In', value: "$in" },
+        { label: 'Not In', value: "$notIn" },
+        { label: 'Between', value: "$between" },
+        { label: 'Is null', value: "$null" },
+        { label: 'Is Not null', value: "$notNull" }        
+    ];
+
+
+
+    // const header = column.attrs.label ?? fieldMetadata.displayName;
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+    return (
+        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-0'>
+            <div className="col-12 md:col-6 px-0 md:pr-2 md:pl-0">
+                <Dropdown
+                    value={rule.matchMode}
+                    onChange={(e: any) => {
+                        // 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 "
+                />
+            </div>
+
+            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        // updateEnumValues(index, 'value', e)
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Numeric}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+};
+
+export default SolidIntField;

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

@@ -0,0 +1,9 @@
+"use client";
+import { SolidFilterFieldsParams } from '../SolidFilterFields';
+import SolidShortTextField from './SolidShortTextField';
+
+const SolidLongTextField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    return SolidShortTextField({ fieldMetadata, onChange, index, rule });
+};
+
+export default SolidLongTextField;

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

@@ -0,0 +1,60 @@
+"use client";
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
+
+const SolidMediaMultipleField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    // const filterable = column.attrs.filterable;
+    const filterable = false;
+    // const showFilterOperator = false;
+    // const columnDataType = undefined;
+    // const header = column.attrs.label ?? fieldMetadata.displayName;
+    const columnDataType = 'text';
+    const filterMatchModeOptions = [
+        { label: 'Starts With', value: "$startsWithi" },
+        { label: 'Contains', value: "$containsi" },
+        { label: 'Not Contains', value: "$notContains" },
+        { label: 'Ends With', value: "$endsWith" },
+        { label: 'Equals', value: "$eqi" },
+        { label: 'Not Equals', value: "$nei" },
+        { label: 'In', value: "$in" },
+        { label: 'Not In', value: "$notIn" },
+        { label: 'Is null', value: "$null" },
+        { label: 'Is Not null', value: "$notNull" }
+
+    ];
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+    return (
+        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-0'>
+            <div className="col-12 md:col-6 px-0 md:pr-2 md:pl-0">
+                <Dropdown
+                    value={rule.matchMode}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'matchMode', e.value)
+                    }}
+                    options={filterMatchModeOptions}
+                    optionLabel='label'
+                    optionValue='value'
+                    placeholder="Select Operator"
+                    className="p-inputtext-sm w-full "
+                />
+            </div>
+
+            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Text}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidMediaMultipleField;

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

@@ -0,0 +1,62 @@
+"use client";
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
+
+const SolidMediaSingleField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    // const filterable = column.attrs.filterable;
+    const filterable = false;
+    // const showFilterOperator = false;
+    // const columnDataType = undefined;
+    const columnDataType = 'text';
+    const filterMatchModeOptions = [
+        { label: 'Starts With', value: "$startsWithi" },
+        { label: 'Contains', value: "$containsi" },
+        { label: 'Not Contains', value: "$notContains" },
+        { label: 'Ends With', value: "$endsWith" },
+        { label: 'Equals', value: "$eqi" },
+        { label: 'Not Equals', value: "$nei" },
+        { label: 'In', value: "$in" },
+        { label: 'Not In', value: "$notIn" },
+        { label: 'Is null', value: "$null" },
+        { label: 'Is Not null', value: "$notNull" }
+
+    ];
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+    // const header = column.attrs.label ?? fieldMetadata.displayName;
+
+    return (
+        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-0'>
+            <div className="col-12 md:col-6 px-0 md:pr-2 md:pl-0">
+                <Dropdown
+                    value={rule.matchMode}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'matchMode', e.value)
+                    }}
+                    options={filterMatchModeOptions}
+                    optionLabel='label'
+                    optionValue='value'
+                    placeholder="Select Operator"
+                    className="p-inputtext-sm w-full "
+                />
+            </div>
+
+            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Text}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidMediaSingleField;

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

@@ -0,0 +1,17 @@
+"use client";
+import { SolidFilterFieldsParams } from '../SolidFilterFields';
+import SolidRelationManyToManyField from './relations/SolidRelationManyToManyField';
+import SolidRelationManyToOneField from './relations/SolidRelationManyToOneField';
+
+const SolidRelationField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    if (fieldMetadata.relationType === 'many-to-one') {
+        return SolidRelationManyToOneField({ fieldMetadata, onChange, index, rule });
+    }
+    if (fieldMetadata.relationType === 'many-to-many') {
+        return SolidRelationManyToManyField({ fieldMetadata, onChange, index, rule });
+    }
+    // TODO: Support one-to-many
+    // TODO: Support many-to-many
+};
+
+export default SolidRelationField;

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

@@ -0,0 +1,9 @@
+"use client";
+import { SolidFilterFieldsParams } from '../SolidFilterFields';
+import SolidShortTextField from './SolidShortTextField';
+
+const SolidRichTextField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    return SolidShortTextField({ fieldMetadata, onChange, index, rule });
+};
+
+export default SolidRichTextField;

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

@@ -0,0 +1,52 @@
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
+
+const SolidSelectionDynamicField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    const showFilterOperator = false;
+    const columnDataType = fieldMetadata.selectionValueType === 'int' ? 'numeric' : 'text';
+    const filterMatchModeOptions = [
+        { label: 'In', value: "$in" },
+        { label: 'Not In', value: "$notIn" },
+        { label: 'Is null', value: "$null" },
+        { label: 'Is Not null', value: "$notNull" }
+
+    ];
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+
+
+    return (
+        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-0'>
+            <div className="col-12 md:col-6 px-0 md:pr-2 md:pl-0">
+                <Dropdown
+                    value={rule.matchMode}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'matchMode', e.value)
+                    }}
+                    options={filterMatchModeOptions}
+                    optionLabel='label'
+                    optionValue='value'
+                    placeholder="Select Operator"
+                    className="p-inputtext-sm w-full"
+                />
+            </div>
+
+            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.SelectionDynamic}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidSelectionDynamicField;

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

@@ -0,0 +1,54 @@
+"use client";
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
+
+
+const SolidSelectionStaticField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+
+    // const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const columnDataType = fieldMetadata.selectionValueType === 'int' ? 'numeric' : 'text';
+    const filterMatchModeOptions = [
+        { label: 'In', value: "$in" },
+        { label: 'Not In', value: "$notIn" },
+        { label: 'Is null', value: "$null" },
+        { label: 'Is Not null', value: "$notNull" }
+
+    ];
+
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+    return (
+        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-0'>
+            <div className="col-12 md:col-6 px-0 md:pr-2 md:pl-0">
+                <Dropdown
+                    value={rule.matchMode}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'matchMode', e.value)
+                    }}
+                    options={filterMatchModeOptions}
+                    optionLabel='label'
+                    optionValue='value'
+                    placeholder="Select Operator"
+                    className="p-inputtext-sm w-full"
+                />
+            </div>
+
+            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.SelectionStatic}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+};
+
+export default SolidSelectionStaticField;

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

@@ -0,0 +1,60 @@
+"use client";
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
+
+const SolidShortTextField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    // const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const columnDataType = 'text';
+    const filterMatchModeOptions = [
+        { label: 'Starts With', value: "$startsWithi" },
+        { label: 'Contains', value: "$containsi" },
+        { label: 'Not Contains', value: "$notContains" },
+        { label: 'Ends With', value: "$endsWith" },
+        { label: 'Equals', value: "$eqi" },
+        { label: 'Not Equals', value: "$nei" },
+        { label: 'In', value: "$in" },
+        { label: 'Not In', value: "$notIn" },
+        { label: 'Is null', value: "$null" },
+        { label: 'Is Not null', value: "$notNull" }
+
+    ];
+
+    // const header = column.attrs.label ?? fieldMetadata.displayName;
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+    return (
+        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-0'>
+            <div className="col-12 md:col-6 px-0 md:pr-2 md:pl-0">
+                <Dropdown
+                    value={rule.matchMode}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'matchMode', e.value)
+                    }}
+                    options={filterMatchModeOptions}
+                    optionLabel='label'
+                    optionValue='value'
+                    placeholder="Select Operator"
+                    className="p-inputtext-sm w-full"
+                />
+            </div>
+
+            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Text}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidShortTextField;