@solidstarters/solid-core-ui 1.1.12 → 1.1.14

package/src/components/auth/SolidChangeForcePassword.tsx

@@ -47,8 +47,6 @@ const SolidChangeForcePassword = () => {
                     currentPassword: values.currentPassword,
                     newPassword: values.newPassword,
                 };
-                console.log("Payload:", payload);
-
                 // Call the mutation and handle the response
                 const response = await changePassword(payload).unwrap(); // Await the API call and unwrap to handle errors.
                 if (response?.statusCode === 200) {

package/src/components/auth/SolidForgotPassword.tsx

@@ -61,7 +61,6 @@ const SolidForgotPassword = () => {
                     showToast("error", "Login Error", response.error)
                 )
             } catch (err: any) {
-                console.log("Error", err);
                 showToast("error", "Login Error", err?.data ? err?.data?.message : "Something Went Wrong");
             }
         },

package/src/components/auth/SolidResetPassword.tsx

@@ -52,7 +52,6 @@ const SolidResetPassword = ({ verificationToken, username }: { verificationToken
                     password: values.password,
                     verificationToken: values.verificationToken,
                 };
-                console.log("Paylod", payload);
                 const response = await confirmForgotPassword(payload).unwrap();
                 if (response?.statusCode === 200) {
                     showToast("success", "Login Successfull", "Password Updated Successfully")
@@ -61,7 +60,6 @@ const SolidResetPassword = ({ verificationToken, username }: { verificationToken
                     showToast("error", "Login Error", response.error)
                 )
             } catch (err: any) {
-                console.log("Error", err);
                 showToast("error", "Login Error", err?.data ? err?.data?.message : "Something Went Wrong");
             }
         },

package/src/components/common/AutoCompleteField.tsx

@@ -35,7 +35,7 @@ export const AutoCompleteField = ({ multiple, isFormFieldValid, formik, fieldNam
             invalid={isFormFieldValid(formik, fieldName)}
             completeMethod={searchItems}
             virtualScrollerOptions={{ itemSize: 38 }}
-            className="w-full small-input"
+            className="solid-standard-autocomplete w-full"
             // style={{
             //     maxHeight: 39.67
             // }}

package/src/components/common/CancelButton.tsx

@@ -18,7 +18,7 @@ export const CancelButton = () => {
     };
     return (
         <div>
-            <Button outlined size="small" type="button" label="Cancel" severity="danger" onClick={handleGoBack} className='bg-primary-reverse'/>
+            <Button outlined size="small" type="button" label="Cancel" onClick={handleGoBack} className='bg-primary-reverse'/>
         </div>
     )
 }
@@ -36,7 +36,7 @@ export const SolidCancelButton = () => {
     };
     return (
         <div>
-            <Button outlined size="small" type="button" label="Cancel" severity="danger" onClick={handleGoBack} />
+            <Button outlined size="small" type="button" label="Cancel" onClick={handleGoBack}  className='bg-primary-reverse'/>
         </div>
     )
 }

package/src/components/common/CreateButton.tsx

@@ -6,7 +6,6 @@ import { Button } from 'primereact/button';
 export const CreateButton = () => {
     const router = useRouter();
     const pathName = usePathname();
-    // console.log("pathname", pathName);
     
     const createPAth = pathName.split('/').slice(0, -1).join('/') + '/create';
 

package/src/components/common/GeneralSettings.tsx

@@ -47,7 +47,6 @@ export const GeneralSettings = ({ solidSettingsData }: { solidSettingsData: any
         initialValues: initialValues,
         enableReinitialize: true,
         onSubmit: async (values) => {
-            console.log("Formik Values:", formik.values);
             try {
                 const formData = new FormData()
                 Object.entries(values).forEach(([key, value]) => {
@@ -84,7 +83,6 @@ export const GeneralSettings = ({ solidSettingsData }: { solidSettingsData: any
     useEffect(() => {
 
     }, [pathname])
-    console.log("pathname", pathname);
 
     return (
         <div className="page-parent-wrapper">

package/src/components/common/MultipleSelectAutoCompleteField.tsx

@@ -38,7 +38,7 @@ export const MultipleSelectAutoCompleteField = ({ formik, isFormFieldValid, rela
             invalid={isFormFieldValid(formik, fieldName)}
             completeMethod={searchItems}
             virtualScrollerOptions={{ itemSize: 38 }}
-            className="w-full"
+            className="solid-standard-autocomplete w-full"
             // style={{
             //     maxHeight: 39.67
             // }}

package/src/components/common/SingleSelectAutoCompleteField.tsx

@@ -55,6 +55,7 @@ export const SingleSelectAutoCompleteField = ({ disabled, formik, isFormFieldVal
                     }
 
                 }}
+                className="solid-standard-autocomplete"
             />
 
         </>

package/src/components/core/common/SolidConfigureLayoutElement.tsx

@@ -1,15 +1,17 @@
 "use client"
+import { Accordion, AccordionTab } from "primereact/accordion";
 import { Button } from "primereact/button";
 import { Checkbox, CheckboxChangeEvent } from "primereact/checkbox";
 import { Divider } from "primereact/divider";
 import { OverlayPanel } from "primereact/overlaypanel";
+import { RadioButton } from "primereact/radiobutton";
 import { useRef, useState } from "react";
 
 interface FilterColumns {
     name: string;
     key: string;
 }
-export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, viewData }: any) => {
+export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, viewData, sizeOptions, setSize, size, viewModes, setView, view }: any) => {
 
     // const [visible, setVisible] = useState<boolean>(false);
     const op = useRef(null);
@@ -70,9 +72,62 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                     <p className="mt-3 mb-1 font-medium" style={{ color: 'var(--gray-400)' }}>Saved Layouts</p>
                     <Button text severity="secondary" label="Diet Tracking" icon="pi pi-plus" size="small" />
                     <OverlayPanel ref={customizeLayout} className="customize-layout-panel" style={{ minWidth: 250 }}>
-                        <div className="pl-3 pt-2 flex align-items-center justify-content-between">
-                            <p className="m-0 font-bold">Columns</p>
-                            <Button text label="Save Layout" icon="pi pi-plus" />
+                        <div className="solid-layout-accordion">
+                            <Accordion multiple expandIcon="pi pi-chevron-down" collapseIcon="pi pi-chevron-up">
+                                <AccordionTab header="Switch Type">
+                                    <div className="flex flex-column gap-1">
+                                        {sizeOptions.map((option: any) => (
+                                            <div key={option.value} className={`flex align-items-center ${option.value === size ? 'solid-active-view' : 'solid-view'}`}>
+                                                <RadioButton
+                                                    inputId={option.value}
+                                                    name="sizes"
+                                                    value={option.value}
+                                                    onChange={(e) => setSize(e.value)}
+                                                    checked={option.value === size}
+                                                />
+                                                <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
+                                                    {option.label}
+                                                    <img
+                                                        src={option.image}
+                                                        alt={option.value}
+                                                        className='img-fluid position-relative'
+                                                        style={{ width: '2.75rem' }}
+                                                    />
+                                                </label>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </AccordionTab>
+                                <AccordionTab header="List">
+                                    <div className="flex flex-column gap-1">
+                                        {viewModes.map((option: any) => (
+                                            <div key={option.value} className={`flex align-items-center ${option.value === view ? 'solid-active-view' : 'solid-view'}`}>
+                                                <RadioButton
+                                                    inputId={option.value}
+                                                    name="views"
+                                                    value={option.value}
+                                                    onChange={(e) => setView(e.value)}
+                                                    checked={option.value === view}
+                                                />
+                                                <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
+                                                    {option.label}
+                                                    <img
+                                                        src={option.image}
+                                                        alt={option.value}
+                                                        className='img-fluid position-relative'
+                                                        style={{ width: '2.75rem' }}
+                                                    />
+                                                </label>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </AccordionTab>
+                            </Accordion>
+                        </div>
+                        <Divider className="m-0" />
+                        <div className="pl-3 pt-3 flex align-items-center justify-content-between">
+                            <p className="m-0">Column Selector</p>
+                            {/* <Button text label="Save Layout" icon="pi pi-plus" /> */}
                         </div>
                         <div className="flex flex-column gap-3 p-3">
                             {categories.map((category) => {
@@ -100,6 +155,6 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                     </OverlayPanel>
                 </div>
             </OverlayPanel>
-        </div>
+        </div >
     )
 }

package/src/components/core/common/SolidSearchBox.tsx

@@ -9,7 +9,6 @@ export const SolidSearchBox = ({ viewData }: any) => {
     const search = (event: any) => {
         // setItems([...Array(10).keys()].map(item => event.query + '-' + item));
     }
-    console.log("viewData",viewData?.data?.solidView?.model?.userKeyField);
     return (
         <div className="card flex justify-content-center">
             <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />

package/src/components/core/extension/solid-core/modelMetadata/list/GenerateModelCodeRowAction.tsx

@@ -17,7 +17,6 @@ const GenerateModelCodeRowAction = ({ context }: any) => {
     const generateCodeHandler = async () => {
         const response = await generateCode({ id: context?.rowData?.id });
         context.closeListViewRowActionPopup();
-        console.log("response", response);
     }
 
     useEffect(() => {

package/src/components/core/filter/SolidManyToOneFilterElement.tsx

@@ -53,7 +53,7 @@ export const SolidManyToOneFilterElement = ({ value, updateInputs, index, fieldM
             suggestions={autoCompleteItems}
             completeMethod={autoCompleteSearch}
             onChange={(e) => updateInputs(index, e.value)}
-            className="w-full"
+            className="solid-standard-autocomplete w-full"
         />
     )
 }

package/src/components/core/filter/SolidSelectionDynamicFilterElement.tsx

@@ -41,7 +41,7 @@ export const SolidSelectionDynamicFilterElement = ({ value, updateInputs, index,
             field="label"
             value={value}
             dropdown
-            className="w-full"
+            className="solid-standard-autocomplete w-full"
             suggestions={selectionDynamicItems}
             completeMethod={selectionDynamicSearch}
             onChange={(e) => updateInputs(index, e.value)} />

package/src/components/core/filter/SolidSelectionStaticFilterElement.tsx

@@ -23,7 +23,7 @@ export const SolidSelectionStaticFilterElement = ({ value, updateInputs, index,
             field="label"
             value={value}
             dropdown
-            className="w-full"
+            className="solid-standard-autocomplete w-full"
             suggestions={selectionStaticItems}
             completeMethod={selectionStaticSearch}
             onChange={(e) => updateInputs(index, e.value)} />

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

@@ -24,7 +24,6 @@ const SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilter
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'matchMode', e.value)
                 }}
                 options={filterMatchModeOptions}
@@ -35,7 +34,6 @@ const SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilter
                 value={rule.value}
                 options={booleanOptions}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'value', e.value)
                 }}
                 placeholder="Select"

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

@@ -30,7 +30,6 @@ const SolidDateField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'matchMode', e.value)
                 }}
                 options={dateFilterMatchModeOptions}
@@ -40,7 +39,6 @@ const SolidDateField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
             <SolidVarInputsFilterElement
                 values={rule.value}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'value', e)
                 }}
                 numberOfInputs={numberOfInputs}

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

@@ -23,7 +23,6 @@ const SolidDatetimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilte
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'matchMode', e.value)
                 }}
                 options={dateFilterMatchModeOptions}
@@ -33,7 +32,6 @@ const SolidDatetimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilte
             <SolidVarInputsFilterElement
                 values={rule.value}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'value', e)
                 }}
                 numberOfInputs={numberOfInputs}

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

@@ -18,7 +18,6 @@ const SolidExternalIdField = ({ fieldMetadata, onChange, index, rule }: SolidFil
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'matchMode', e.value)
                 }}
                 options={filterMatchModeOptions}
@@ -28,7 +27,6 @@ const SolidExternalIdField = ({ fieldMetadata, onChange, index, rule }: SolidFil
             <SolidVarInputsFilterElement
                 values={rule.value}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'value', e)
                 }}
                 numberOfInputs={numberOfInputs}

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

@@ -18,7 +18,6 @@ const SolidIdField = ({ fieldMetadata, onChange, index, rule }: SolidFilterField
                   <Dropdown
                       value={rule.matchMode}
                       onChange={(e: any) => {
-                          console.log("e", e);
                           onChange(rule.id, 'matchMode', e.value)
                         }}
                       options={filterMatchModeOptions}
@@ -28,7 +27,6 @@ const SolidIdField = ({ fieldMetadata, onChange, index, rule }: SolidFilterField
                   <SolidVarInputsFilterElement
                       values={rule.value}
                       onChange={(e: any) => {
-                          console.log("e", e);
                           onChange(rule.id, 'value', e)
                         }}
                       numberOfInputs={numberOfInputs}

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

@@ -27,7 +27,6 @@ const SolidIntField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFiel
                     <Dropdown
                         value={rule.matchMode}
                         onChange={(e: any) => {
-                            console.log("e", e);
                             // updateEnumValues(index, 'operator', e.value)
                             onChange(rule.id, 'matchMode', e.value)
                         }}
@@ -38,7 +37,6 @@ const SolidIntField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFiel
                     <SolidVarInputsFilterElement
                         values={rule.value}
                         onChange={(e: any) => {
-                            console.log("e", e);
                             // updateEnumValues(index, 'value', e)
                             onChange(rule.id, 'value', e)
                         }}

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

@@ -27,7 +27,6 @@ const SolidMediaMultipleField = ({ fieldMetadata, onChange, index, rule }: Solid
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'matchMode', e.value)
                 }}
                 options={filterMatchModeOptions}
@@ -37,7 +36,6 @@ const SolidMediaMultipleField = ({ fieldMetadata, onChange, index, rule }: Solid
             <SolidVarInputsFilterElement
                 values={rule.value}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'value', e)
                 }}
                 numberOfInputs={numberOfInputs}

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

@@ -29,7 +29,6 @@ const SolidMediaSingleField = ({ fieldMetadata, onChange, index, rule }: SolidFi
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'matchMode', e.value)
                 }}
                 options={filterMatchModeOptions}
@@ -39,7 +38,6 @@ const SolidMediaSingleField = ({ fieldMetadata, onChange, index, rule }: SolidFi
             <SolidVarInputsFilterElement
                 values={rule.value}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'value', e)
                 }}
                 numberOfInputs={numberOfInputs}

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

@@ -18,7 +18,6 @@ const SolidSelectionDynamicField = ({ fieldMetadata, onChange, index, rule }: So
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'matchMode', e.value)
                 }}
                 options={filterMatchModeOptions}
@@ -28,7 +27,6 @@ const SolidSelectionDynamicField = ({ fieldMetadata, onChange, index, rule }: So
             <SolidVarInputsFilterElement
                 values={rule.value}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'value', e)  
                 }}
                 numberOfInputs={numberOfInputs}

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

@@ -21,7 +21,6 @@ const SolidSelectionStaticField = ({ fieldMetadata, onChange, index, rule }: Sol
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'matchMode', e.value)
                 }}
                 options={filterMatchModeOptions}

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

@@ -26,7 +26,6 @@ const SolidShortTextField = ({ fieldMetadata, onChange, index, rule }: SolidFilt
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'matchMode', e.value)
                 }}
                 options={filterMatchModeOptions}

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

@@ -17,7 +17,6 @@ const SolidTimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'matchMode', e.value)
                 }}
                 options={dateFilterMatchModeOptions}
@@ -27,7 +26,6 @@ const SolidTimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
             <SolidVarInputsFilterElement
                 values={rule.value}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'value', e)
                 }}
                 numberOfInputs={numberOfInputs}

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

@@ -17,7 +17,6 @@ const SolidUuidField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'matchMode', e.value)
                 }}
                 options={filterMatchModeOptions}
@@ -27,7 +26,6 @@ const SolidUuidField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
             <SolidVarInputsFilterElement
                 values={rule.value}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'value', e)
                 }}
                 numberOfInputs={numberOfInputs}

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

@@ -52,7 +52,6 @@ const SolidRelationManyToOneField = ({ fieldMetadata, onChange, index, rule }: S
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'matchMode', e.value)
                 }}
                 options={filterMatchModeOptions}
@@ -62,7 +61,6 @@ const SolidRelationManyToOneField = ({ fieldMetadata, onChange, index, rule }: S
             <SolidVarInputsFilterElement
                 values={rule.value}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(index, 'value', e)
                 }}
                 numberOfInputs={numberOfInputs}

package/src/components/core/form/SolidFormView.tsx

@@ -362,7 +362,6 @@ const SolidFormView = (params: SolidFormViewProps) => {
 
     useEffect(() => {
         if (solidFormViewMetaData) {
-            console.log(`METADATA: `, solidFormViewMetaData);
             setFormViewMetaData(solidFormViewMetaData);
             if (params.customLayout) {
                 setFormViewLayout(params.customLayout);
@@ -447,11 +446,9 @@ const SolidFormView = (params: SolidFormViewProps) => {
         // Trigger validation and get the updated errors
         const errors = await formik.validateForm();
         const errorMessages = Object.values(errors);
-        console.log(`Error message is: `, errorMessages);
     };
 
     const onFormikSubmit = async (values: any) => {
-        console.log(`Form being submitted with: `, values);
         const solidView = solidFormViewMetaData.data.solidView;
         const solidFieldsMetadata = solidFormViewMetaData.data.solidFieldsMetadata;
         const layoutFieldsObj = getLayoutFieldsAsObject([formViewLayout]);
@@ -546,7 +543,6 @@ const SolidFormView = (params: SolidFormViewProps) => {
     } = useGetSolidEntityByIdQuery({ id: params.id, qs: formViewDataQs }, { skip: !solidFormViewMetaData || params.id === 'new' });
     useEffect(() => {
         if (solidFormViewData) {
-            console.log(`DATA: `, solidFormViewData);
             setInitialEntityData(solidFormViewData.data);
         }
     }, [solidFormViewData]);
@@ -600,8 +596,6 @@ const SolidFormView = (params: SolidFormViewProps) => {
 
             }
         }
-        console.log("solidFormViewMetaData", solidFormViewMetaData);
-        console.log("layoutFields", layoutFields);
 
         formik = useFormik({
             initialValues: initialValues,
@@ -631,7 +625,6 @@ const SolidFormView = (params: SolidFormViewProps) => {
                 case "field": {
                     // const fieldMetadata = solidFieldsMetadata[attrs.name];
                     const fieldMetadata = solidFormViewMetaData.data.solidFieldsMetadata[attrs.name];
-                    console.log("initialEntityData", initialEntityData);
 
                     return <SolidField key={key} field={element} formik={formik} fieldMetadata={fieldMetadata} initialEntityData={solidFormViewData ? solidFormViewData.data : null} solidFormViewMetaData={solidFormViewMetaData} modelName={params.modelName} />;
                 }
@@ -685,19 +678,16 @@ const SolidFormView = (params: SolidFormViewProps) => {
             setDeleteDialogVisible(false);
         }
 
-        console.log(`Rendering with formViewLayout:`, formViewLayout);
-        console.log("params.embeded", params.embeded);
-
         return (
             <div className="solid-form-wrapper">
                 <Toast ref={toast} />
 
-                <form style={{ width: '77.5%', borderRight: '1px solid var(--primary-light-color' }} onSubmit={formik.handleSubmit}>
+                <form style={{ width: params.embeded !== true ? '77.5%' : '100%', borderRight: params.embeded !== true ? '1px solid var(--primary-light-color' : '' }} onSubmit={formik.handleSubmit}>
                     <div className="solid-form-header">
                         {params.id === "new" ? (
                             <>
                                 <div className="flex align-items-center gap-3">
-                                    <BackButton />
+                                    {params.embeded !== true && <BackButton />}
                                     <div className="form-wrapper-title"> {createHeaderTitle}</div>
                                 </div>
                                 <div className="gap-3 flex">
@@ -747,7 +737,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                         </div>
                                     }
                                     {params.embeded == true &&
-                                        <Button outlined size="small" type="button" label="Cancel" severity="danger" onClick={() => params.handlePopupClose()} />
+                                        <Button outlined size="small" type="button" label="Cancel" onClick={() => params.handlePopupClose()} className='bg-primary-reverse' />
 
                                     }
                                     {params.embeded !== true &&
@@ -759,7 +749,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                         ) : (
                             <>
                                 <div className="flex align-items-center gap-3">
-                                    <BackButton />
+                                    {params.embeded !== true && <BackButton />}
                                     <div className="form-wrapper-title"> {editHeaderTitle}</div>
                                 </div>
                                 <div className="gap-3 flex">
@@ -851,8 +841,10 @@ const SolidFormView = (params: SolidFormViewProps) => {
                         {renderFormDynamically(formViewMetaData)}
                     </div>
                 </form>
-                <div style={{ width: '22.5%' }}>
-                </div>
+                {params.embeded !== true &&
+                    <div style={{ width: '22.5%' }}>
+                    </div>
+                }
                 <Dialog
                     visible={isDeleteDialogVisible}
                     header="Confirm Delete"

package/src/components/core/form/fields/SolidSelectionDynamicField.tsx

@@ -108,7 +108,9 @@ export class SolidSelectionDynamicField implements ISolidField {
                         suggestions={selectionDynamicItems}
                         completeMethod={selectionDynamicSearch}
                         // onChange={(e) => updateInputs(index, e.value)} />
-                        onChange={formik.handleChange} />
+                        onChange={formik.handleChange}
+                        className="solid-standard-autocomplete"
+                    />
                 </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />

package/src/components/core/form/fields/SolidSelectionStaticField.tsx

@@ -113,7 +113,9 @@ export class SolidSelectionStaticField implements ISolidField {
                         suggestions={selectionStaticItems}
                         completeMethod={selectionStaticSearch}
                         // onChange={(e) => updateInputs(index, e.value)} />
-                        onChange={formik.handleChange} />
+                        onChange={formik.handleChange}
+                        className="solid-standard-autocomplete"
+                    />
                 </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />