@solidstarters/solid-core-ui 1.1.70 → 1.1.72

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

@@ -0,0 +1,180 @@
+import { Calendar } from "primereact/calendar";
+import { InputNumber } from "primereact/inputnumber";
+import { InputText } from "primereact/inputtext";
+import { useEffect, useState } from "react";
+import { SolidManyToOneFilterElement } from "./SolidManyToOneFilterElement";
+import { SolidSelectionDynamicFilterElement } from "./SolidSelectionDynamicFilterElement";
+import { SolidSelectionStaticFilterElement } from "./SolidSelectionStaticFilterElement";
+import { Button } from "primereact/button";
+
+export enum InputTypes {
+    Date = 'Date',
+    DateTime = 'DateTime',
+    Time = 'Time',
+    Numeric = 'Numeric',
+    Text = 'Text',
+    SelectionStatic = 'SelectionStatic',
+    RelationManyToOne = 'RelationManyToOne',
+    SelectionDynamic = 'SelectionDynamic'
+}
+
+
+// Based on numberOfInputs map the input filed and hide add and delete 
+export const SolidVarInputsFilterElement = ({ values, onChange, inputType = InputTypes.Text, numberOfInputs = null, fieldMetadata }: any) => {
+
+    if (!values) {
+        values = numberOfInputs && numberOfInputs > 0 ? Array(numberOfInputs).fill('') : [''];
+        // values = [''];
+    } else {
+        if (values[0] == '') {
+            values = numberOfInputs && numberOfInputs > 0 ? Array(numberOfInputs).fill('') : [''];
+        } else {
+
+            values = values
+        }
+    }
+
+
+
+    // TODO: Ideally values will be an array, so we can spread them here instead of making a nested array.
+    const [inputs, setInputs] = useState([...values]);
+    useEffect(() => {
+        setInputs([...values])
+    }, [numberOfInputs])
+
+    const updateInputs = (index: number, value: any) => {
+        const updatedSpecification = inputs.map((item, i) =>
+            i === index ? value : item
+        );
+        setInputs(updatedSpecification);
+    };
+
+    const addInput = () => {
+        setInputs([...inputs, '']);
+    };
+
+    const deleteInput = (index: number) => {
+        if (inputs.length > 1) {
+            const updatedRows = inputs.filter((_, rowIndex) => rowIndex !== index);
+            setInputs(updatedRows);
+
+        } else {
+        }
+    };
+
+    useEffect(() => {
+        onChange(inputs)
+    }, [inputs])
+
+
+
+    return (
+        <>
+            {inputs && inputs.map((value: any, index: number) => (
+                <div className="flex">
+                    {inputType === InputTypes.Text &&
+                        <InputText
+                            value={value}
+                            onChange={(e) => updateInputs(index, e.target.value)}
+                            placeholder=""
+                            className='w-full p-inputtext-sm'
+                        />
+                    }
+                    {inputType === InputTypes.Numeric &&
+                        <InputNumber
+                            value={value}
+                            onChange={(e) => updateInputs(index, e.value)}
+                            placeholder=""
+                            className='w-full p-inputtext-sm'
+                        />
+                    }
+                    {inputType === InputTypes.Date &&
+                        <Calendar
+                            value={value}
+                            onChange={(e) => updateInputs(index, e.target.value)}
+                            dateFormat="mm/dd/yy"
+                            placeholder="mm/dd/yyyy"
+                            mask="99/99/9999"
+                            className="w-full"
+                            inputClassName="w-full p-inputtext-sm"
+                        />
+                    }
+                    {inputType === InputTypes.DateTime &&
+                        <Calendar
+                            value={value}
+                            onChange={(e) => updateInputs(index, e.target.value)}
+                            dateFormat="mm/dd/yy"
+                            placeholder="mm/dd/yyyy hh:mm"
+                            mask="99/99/9999 99:99"
+                            showTime
+                            hourFormat="24"
+                            className="w-full"
+                            inputClassName="w-full p-inputtext-sm"
+                        />
+                    }
+                    {inputType === InputTypes.Time &&
+                        <Calendar
+                            value={value}
+                            onChange={(e) => updateInputs(index, e.target.value)}
+                            placeholder="hh:mm"
+                            mask="99:99"
+                            timeOnly
+                            hourFormat="24"
+                            className="w-full"
+                            inputClassName="w-full p-inputtext-sm"
+                        />
+                    }
+                    {inputType === InputTypes.RelationManyToOne &&
+                        <SolidManyToOneFilterElement
+                            value={value}
+                            index={index}
+                            updateInputs={updateInputs}
+                            fieldMetadata={fieldMetadata}
+                        ></SolidManyToOneFilterElement>
+                    }
+                    {inputType === InputTypes.SelectionDynamic &&
+                        <SolidSelectionDynamicFilterElement
+                            value={value}
+                            index={index}
+                            updateInputs={updateInputs}
+                            fieldMetadata={fieldMetadata}
+                        ></SolidSelectionDynamicFilterElement>
+                    }
+                    {inputType === InputTypes.SelectionStatic &&
+
+                        <SolidSelectionStaticFilterElement
+                            value={value}
+                            index={index}
+                            updateInputs={updateInputs}
+                            fieldMetadata={fieldMetadata}
+                        ></SolidSelectionStaticFilterElement>
+                    }
+                    {numberOfInputs === null &&
+                        <>
+                            {/* Plus Button to add a new row */}
+                            {/* < Button
+                                    icon="pi pi-plus"
+                                    size="small"
+                                    className="small-button"
+                                    onClick={addInput}
+                                    type="button"
+                                /> */}
+
+                            {/* Trash Button to delete the row */}
+                            {/* <Button
+                                    icon="pi pi-trash"
+                                    size="small"
+                                    className="small-button"
+                                    onClick={() => deleteInput(index)}
+                                    severity="danger"
+                                    type="button"
+                                /> */}
+                            <Button text severity='secondary' icon="pi pi-plus" size='small' onClick={() => addInput()} className='solid-filter-action-btn' />
+                            <Button text severity='secondary' icon="pi pi-trash" size='small' onClick={() => deleteInput(index)} className='solid-filter-action-btn' />
+                        </>
+                    }
+                </div>
+            ))}
+        </>
+    )
+}

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

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

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

@@ -0,0 +1,50 @@
+"use client";
+import { Dropdown } from 'primereact/dropdown';
+import { SolidFilterFieldsParams } from '../SolidFilterFields';
+
+const SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    // const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const columnDataType = 'boolean';
+
+    const booleanOptions = [
+        { label: 'true', value: true },
+        { label: 'false', value: false },
+    ];
+    const filterMatchModeOptions = [
+        { label: 'Equals', value: "$eq" },
+    ];
+
+
+    // const header = column.attrs.label ?? fieldMetadata.displayName;
+
+
+    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'>
+                <Dropdown
+                    value={rule.value}
+                    options={booleanOptions}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e.value)
+                    }}
+                    placeholder="Select"
+                    className="p-column-filter"
+                />
+            </div>
+        </div>
+    );
+};
+
+export default SolidBooleanField;

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

@@ -0,0 +1,23 @@
+"use client";
+import { SolidFilterFieldsParams } from '../SolidFilterFields';
+import SolidDateField from './SolidDateField';
+import SolidDatetimeField from './SolidDatetimeField';
+import SolidIntField from './SolidIntField';
+import SolidShortTextField from './SolidShortTextField';
+
+const SolidComputedField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    if (['text', 'string'].includes(fieldMetadata.computedFieldValueType)) {
+        return SolidShortTextField({ fieldMetadata, onChange, index, rule });
+    }
+    if (['int', 'decimal'].includes(fieldMetadata.computedFieldValueType)) {
+        return SolidIntField({ fieldMetadata, onChange, index, rule });
+    }
+    if (fieldMetadata.computedFieldValueType === 'date') {
+        return SolidDateField({ fieldMetadata, onChange, index, rule });
+    }
+    if (fieldMetadata.computedFieldValueType === 'datetime') {
+        return SolidDatetimeField({ fieldMetadata, onChange, index, rule });
+    }
+};
+
+export default SolidComputedField;

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

@@ -0,0 +1,58 @@
+"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" }
+];
+
+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 align-items-start gap-3 w-full'>
+            <Dropdown
+                value={rule.matchMode}
+                onChange={(e: any) => {
+                    onChange(rule.id, 'matchMode', e.value)
+                }}
+                options={dateFilterMatchModeOptions}
+                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.Date}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidDateField;

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

@@ -0,0 +1,51 @@
+"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 align-items-start gap-3 w-full'>
+            <Dropdown
+                value={rule.matchMode}
+                onChange={(e: any) => {
+                    onChange(rule.id, 'matchMode', e.value)
+                }}
+                options={dateFilterMatchModeOptions}
+                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.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,46 @@
+"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" },
+    ];
+    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.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,56 @@
+"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" }
+    ];
+
+
+
+    // const header = column.attrs.label ?? fieldMetadata.displayName;
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+    return (
+        <div className='flex align-items-start gap-3 w-full'>
+            <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="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <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,54 @@
+"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" }
+    ];
+    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.Text}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidMediaMultipleField;

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

@@ -0,0 +1,56 @@
+"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" }
+    ];
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+    // const header = column.attrs.label ?? fieldMetadata.displayName;
+
+    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.Text}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidMediaSingleField;