@solidstarters/solid-core-ui 1.1.17 → 1.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidstarters/solid-core-ui",
-  "version": "1.1.17",
+  "version": "1.1.19",
   "scripts": {
     "build": "tsc && tsc-alias",
     "clean": "rm -rf dist",

package/src/components/Svg/FileSvg.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+import { SVGProps } from "react"
+const FileSvg = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={64}
+  height={64}
+  fill="none"
+  {...props}
+>
+  <path
+    fill="#F9F0FF"
+    d="M36.03 25.291a2 2 0 0 1-2-2V6.271H16a6 6 0 0 0-6 6v40.08a6 6 0 0 0 6 6h31.06a6.01 6.01 0 0 0 6-6v-27.06H36.03Z"
+  />
+  <path fill="#722ED1" d="M51.88 21.291 38.03 7.441v13.85h13.85Z" />
+</svg>
+)
+export default FileSvg

package/src/components/auth/AuthLayout.tsx

@@ -103,13 +103,15 @@ export const AuthLayout = ({ children }: { children: React.ReactNode }) => {
                     </div>
                 }
             </div>
-            <div className="absolute solid-auth-footer flex align-items-center justify-content-between">
-                <div>
+            <div className={`absolute  ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'solid-auth-footer flex align-items-center justify-content-between' : 'solid-auth-footer-2 grid'}`}>
+                <div className={solidSettingsData?.data?.authPagesLayout !== 'center' ? 'col-6 flex justify-content-center' : ''}>
                     <p className={`solid-auth-input-label text-sm m-0 ${solidSettingsData?.data?.authPagesLayout === 'right' ? 'right' : ''}`}>Made with <svg className="mx-1" width="12px" height="12px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M1.24264 8.24264L8 15L14.7574 8.24264C15.553 7.44699 16 6.36786 16 5.24264V5.05234C16 2.8143 14.1857 1 11.9477 1C10.7166 1 9.55233 1.55959 8.78331 2.52086L8 3.5L7.21669 2.52086C6.44767 1.55959 5.28338 1 4.05234 1C1.8143 1 0 2.8143 0 5.05234V5.24264C0 6.36786 0.44699 7.44699 1.24264 8.24264Z" fill="#ff0000"></path> </g></svg> in Mumbai</p>
                 </div>
-                <div className={`flex align-items-center gap-5 solid-auth-subtitle ${solidSettingsData?.data?.authPagesLayout === 'left' ? 'left' : ''}`}>
-                    <p className="m-0"> <Link href={solidSettingsData ? solidSettingsData?.data?.appTnc : "#"}>Terms of Service</Link></p>
-                    <p className="m-0"> <Link href={solidSettingsData ? solidSettingsData?.data?.appPrivacyPolicy : "#"}>Privacy Policy.</Link></p>
+                <div className={solidSettingsData?.data?.authPagesLayout !== 'center' ? 'col-6 flex justify-content-center' : ''}>
+                    <div className={`flex align-items-center gap-5 solid-auth-subtitle ${solidSettingsData?.data?.authPagesLayout === 'left' ? 'left' : ''}`}>
+                        <p className="m-0"> <Link href={solidSettingsData ? solidSettingsData?.data?.appTnc : "#"}>Terms of Service</Link></p>
+                        <p className="m-0"> <Link href={solidSettingsData ? solidSettingsData?.data?.appPrivacyPolicy : "#"}>Privacy Policy.</Link></p>
+                    </div>
                 </div>
             </div>
             <Dialog

package/src/components/auth/SolidForgotPassword.tsx

@@ -106,7 +106,7 @@ const SolidForgotPassword = () => {
                     </div>
                     <div className="mt-4">
                         <Button className="w-full font-light auth-submit-button" label="Send OTP" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
-                        <Button type="button" label="Back" className="w-full auth-back-button text-center" link onClick={() => (window.location.href = '/auth/login')} />
+                        <Button type="button" label="Back" className="w-full auth-back-button text-center mt-1" link onClick={() => (window.location.href = '/auth/login')} />
                     </div>
                 </form>
             </div>

package/src/components/auth/SolidInitialLoginOtp.tsx

@@ -119,7 +119,7 @@ const SolidInitialLoginOtp = () => {
                                 </div>
                                 <div className="mt-4">
                                     <Button type="submit" className="w-full font-light auth-submit-button" label="Verify" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
-                                    <Button type="button" label="Back" className="w-full auth-back-button text-center" link onClick={() => (window.location.href = '/auth/login')} />
+                                    <Button type="button" label="Back" className="w-full auth-back-button text-center mt-1" link onClick={() => (window.location.href = '/auth/login')} />
                                 </div>
                             </Form>
                         )}

package/src/components/auth/SolidInitiateRegisterOtp.tsx

@@ -119,7 +119,7 @@ const SolidInitiateRegisterOtp = () => {
                                 </div>
                                 <div className="mt-4">
                                     <Button type="submit" className="w-full font-light auth-submit-button" label="Verify" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
-                                    <Button type="button" label="Back" className="w-full auth-back-button text-center" link onClick={() => (window.location.href = '/auth/login')} />
+                                    <Button type="button" label="Back" className="w-full auth-back-button text-center mt-1" link onClick={() => (window.location.href = '/auth/login')} />
                                 </div>
                             </Form>
                         )}

package/src/components/auth/SolidResetPassword.tsx

@@ -143,7 +143,7 @@ const SolidResetPassword = () => {
                                     </div> */}
                     <div className="mt-4">
                         <Button className="w-full font-light auth-submit-button" label="Reset Password" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
-                        <Button type="button" label="Back" className="w-full auth-back-button text-center" link onClick={() => (window.location.href = '/auth/login')} />
+                        <Button type="button" label="Back" className="w-full auth-back-button text-center mt-1" link onClick={() => (window.location.href = '/auth/login')} />
                     </div>
                 </form>
             </div>

package/src/components/common/DropzonePlaceholder.tsx

@@ -1,18 +1,31 @@
 'use client';
 
 import { Button } from "primereact/button";
+interface DropzonePlaceholderProps {
+    mediaTypes?: string[];
+    mediaMaxSizeKb?: number;
+}
+
+export const DropzonePlaceholder = ({ mediaTypes, mediaMaxSizeKb }: DropzonePlaceholderProps) => {
+    const supportedFormats = mediaTypes?.length
+        ? mediaTypes.map(type => type.toUpperCase()).join(", ")
+        : "PDF, JPEG | File";
+
+    // Convert max size from KB to MB and ensure it's at least 1MB
+    const maxSizeMB = mediaMaxSizeKb ? (mediaMaxSizeKb / 1024).toFixed(1) : "10";
 
-export const DropzonePlaceholder = () => {
     return (
         <div className='solid-dropzone'>
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-                    <path d="M11 16V7.85L8.4 10.45L7 9L12 4L17 9L15.6 10.45L13 7.85V16H11ZM6 20C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V15H6V18H18V15H20V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H6Z" fill="#666666" />
-                </svg>
-                <div className='font-bold'>
-                    Drag and Drop or <span className='text-primary'> choose files</span> to upload
-                </div>
-                <p>Supported format : PDF/JPEG | File size max 10 MB</p>
-                <Button outlined size='small' severity='secondary' label='Click to Brows' type="button"/>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                <path d="M11 16V7.85L8.4 10.45L7 9L12 4L17 9L15.6 10.45L13 7.85V16H11ZM6 20C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V15H6V18H18V15H20V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H6Z" fill="#666666" />
+            </svg>
+            <div className='font-bold mt-2'>
+                Drag and Drop or <span className='text-primary'> choose files</span> to upload
+            </div>
+            <p>Supported format: {supportedFormats} | Max size: {maxSizeMB} MB</p>
+            <div>
+                <Button outlined size='small' severity='secondary' label='Click to Browse' type="button" />
+            </div>
         </div>
     )
 }

package/src/components/common/FileReaderExt.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
+import FileSvg from '../Svg/FileSvg'
 
 export const FileReaderExt = ({ fileDetails }: { fileDetails: any }) => {
-    const renderFile =()=>{
-        const type =fileDetails.type
+    const renderFile = () => {
+        const type = fileDetails.type
         switch (type) {
             case "image/png":
                 return '/images/fileReader/image-jpg.png'
@@ -12,7 +13,8 @@ export const FileReaderExt = ({ fileDetails }: { fileDetails: any }) => {
     }
     return (
         <div>
-            <img src={renderFile()} style={{height: 50, width:50}}/>
+            <FileSvg />
+            {/* <img src={renderFile()} style={{height: 50, width:50}}/> */}
         </div>
     )
 }

package/src/components/common/SingleSelectAutoCompleteField.tsx

@@ -32,7 +32,9 @@ export const SingleSelectAutoCompleteField = ({ disabled, formik, isFormFieldVal
                 disabled={disabled ? disabled : false}
                 value={selectedItem}
                 suggestions={filteredItem}
-                invalid={(isFormFieldValid(formik, fieldName) || (formErrors[fieldName]))}
+                // invalid={(isFormFieldValid(formik, fieldName) || (formErrors[fieldName]))}
+                invalid={isFormFieldValid(formik, fieldName)}
+
                 completeMethod={searchItems}
                 virtualScrollerOptions={{ itemSize: 38 }}
                 // style={{

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

@@ -5,7 +5,7 @@ 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";
+import { useEffect, useRef, useState } from "react";
 
 interface FilterColumns {
     name: string;
@@ -15,9 +15,26 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
 
     // const [visible, setVisible] = useState<boolean>(false);
     const op = useRef(null);
-    const customizeLayout = useRef(null);
-    const [isOverlayOpen, setIsOverlayOpen] = useState(true);
+    const customizeLayout = useRef<OverlayPanel | null>(null);
+    const [isOverlayOpen, setIsOverlayOpen] = useState(false);
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (
+                customizeLayout.current &&
+                !customizeLayout.current.getElement()?.contains(event.target as Node)
+            ) {
+                setIsOverlayOpen(false);
+            }
+        };
 
+        if (isOverlayOpen) {
+            document.addEventListener("click", handleClickOutside);
+        } else {
+            document.removeEventListener("click", handleClickOutside);
+        }
+
+        return () => document.removeEventListener("click", handleClickOutside);
+    }, [isOverlayOpen])
     const categories: FilterColumns[] = [
         { name: 'ID', key: 'A' },
         { name: 'Tracker Date', key: 'M' },
@@ -48,47 +65,69 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                 // @ts-ignore
                 onClick={(e) => op.current.toggle(e)}
             />
-            <OverlayPanel ref={op}>
+            <OverlayPanel ref={op} className="listview-cogwheel-panel">
                 <div className="p-2">
                     <div className="flex flex-column">
                         <Button text icon='pi pi-download' label="Import" size="small" severity="secondary" className="text-left gap-2" />
                         <Button text icon='pi pi-upload' label="Export" size="small" severity="secondary" className="text-left gap-2" />
-                        <Button text icon='pi pi-share-alt' label="Share" size="small" severity="secondary" className="text-left gap-2" />
+                        {/* <Button text icon='pi pi-share-alt' label="Share" size="small" severity="secondary" className="text-left gap-2" /> */}
+                        {/* {viewData?.data?.solidView?.model?.enableSoftDelete &&
+                            <Button text severity="secondary" size="small" className="text-left w-13rem" label={showArchived ? "Hide Archived Records" : "Show Archived Records"} iconPos="left" onClick={() => { setShowArchived(!showArchived); }} />
+                        } */}
+                        {viewData?.data?.solidView?.model?.enableSoftDelete && (
+                            <div className="flex align-items-center px-3 gap-2 mt-2 mb-1">
+                                <Checkbox
+                                    inputId="showArchived"
+                                    checked={showArchived}
+                                    onChange={() => setShowArchived(!showArchived)}
+                                />
+                                <label htmlFor="showArchived" className="ml-2 text-base solid-secondary-text-color">
+                                    Show Archived Records
+                                </label>
+                            </div>
+                        )}
+
+
                     </div>
                 </div>
                 <Divider className="m-0" />
                 <div className="p-2 position-relative flex flex-column gap-1">
-                    {viewData?.data?.solidView?.model?.enableSoftDelete &&
-                        <Button text size="small" className="text-left w-13rem" label={showArchived ? "Hide Archived Records" : "Show Archived Records"} iconPos="left" onClick={() => { setShowArchived(!showArchived); }} />
-                    }
                     <Button
                         icon='pi pi-sliders-h'
                         label="Customize Layout"
+                        severity={isOverlayOpen ? undefined : "secondary"}
                         size="small"
-                        text={isOverlayOpen}
-                        className="text-left gap-2 w-13rem"
+                        text={isOverlayOpen ? false : true}
+                        className="text-left gap-2 w-full"
                         // @ts-ignore
-                        onClick={(e) => customizeLayout.current.toggle(e)}
-                    // onMouseEnter={(e) => customizeLayout.current.show(e)}
-                    />
-                    <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" />
+                        onClick={(e) => {
+                            customizeLayout.current?.toggle(e);
+                            setIsOverlayOpen((prev) => !prev); // ✅ Ensure state updates when toggled
+                        }}
+                    >
+                        <i className="pi pi-chevron-right text-sm"></i>
+                    </Button>
+                    {/* <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 }}
-                        onShow={() => setIsOverlayOpen(false)}
-                        onHide={() => setIsOverlayOpen(true)}
+                        onShow={() => setIsOverlayOpen(true)}
+                        onHide={() => {
+                            console.log("Overlay closed");
+                            setTimeout(() => setIsOverlayOpen(false), 50); // ✅ Ensure state updates
+                        }}
                     >
                         <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'}`}>
+                                    <div className="flex flex-column gap-1 p-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="sizes"
+                                                    name="views"
                                                     value={option.value}
-                                                    onChange={(e) => setSize(e.value)}
-                                                    checked={option.value === size}
+                                                    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}
@@ -104,15 +143,16 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                                     </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'}`}>
+                                    <div className="flex flex-column gap-1 p-1">
+                                        <p className="m-0 px-3">Row Spacing</p>
+                                        {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="views"
+                                                    name="sizes"
                                                     value={option.value}
-                                                    onChange={(e) => setView(e.value)}
-                                                    checked={option.value === view}
+                                                    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}
@@ -134,7 +174,7 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                             <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">
+                        <div className="flex flex-column gap-3 p-3 cogwheel-column-filter">
                             {categories.map((category) => {
                                 return (
                                     <div key={category.key} className="flex align-items-center gap-1">
@@ -144,8 +184,9 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                                             value={category}
                                             onChange={onCategoryChange}
                                             checked={selectedCategories.some((item) => item.key === category.key)}
+                                            className="text-base"
                                         />
-                                        <label htmlFor={category.key} className="ml-2">
+                                        <label htmlFor={category.key} className="ml-2 text-base">
                                             {category.name}
                                         </label>
                                     </div>

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

@@ -254,9 +254,9 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
     ];
 
 
-    useEffect(() => {
-        console.log("Input Value", customChip, "Input Value", searchChips, "Input Value", inputValue);
-    }, [chipsToDisplay])
+    // useEffect(() => {
+    //     console.log("Input Value", customChip, "Input Value", searchChips, "Input Value", inputValue);
+    // }, [chipsToDisplay])
 
     const customChipTemplate = (item: any) => {
         if (item === customChip) {
@@ -340,7 +340,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                 // }}
                 />
             </div>
-            <OverlayPanel ref={op} className="solid-custom-overlay" style={{ minWidth: 378 }}>
+            <OverlayPanel ref={op} className="solid-custom-overlay" style={{ minWidth: 405 }}>
                 {inputValue ? (
                     <>
                         <div className="custom-filter-search-options px-2 py-2 flex flex-column">
@@ -353,6 +353,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                                         onClick={() => handleAddChip(value?.attrs?.name)}
                                         text
                                         severity="secondary"
+                                        size="small"
                                     >
                                         Search <strong>{value?.attrs?.name}</strong> for :
                                         <span className="font-bold" style={{ color: '#000' }}>{inputValue}</span>
@@ -364,12 +365,12 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                     </>
                 ) :
                     <>
-                        <div className="p-3">Search Here...</div>
+                        <div className="p-3 text-base">Search Here...</div>
                         <Divider className="m-0" />
                     </>
                 }
                 <div className="px-2 py-1">
-                    <Button text size="small" label="Custom Filter" iconPos="left" icon='pi pi-plus' onClick={() => setShowGlobalSearchElement(true)} />
+                    <Button text size="small" label="Custom Filter" iconPos="left" icon='pi pi-plus' onClick={() => setShowGlobalSearchElement(true)} className="font-bold" />
                 </div>
                 <Divider className="m-0" />
             </OverlayPanel>

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

@@ -696,8 +696,8 @@ const SolidFormView = (params: SolidFormViewProps) => {
                         size="small"
                         className="bg-primary-reverse p-0"
                         style={{
-                            height: 32,
-                            width: 32
+                            height: 33.06,
+                            width: 33.06
                         }}
                         onClick={(e) =>
                             // @ts-ignore 
@@ -893,11 +893,11 @@ const SolidFormView = (params: SolidFormViewProps) => {
                             </>
                         )}
                     </div>
-                    {params.embeded !== true &&
+                    {/* {params.embeded !== true &&
                         <div className="solid-form-stepper">
                             <SolidFormStepper />
                         </div>
-                    }
+                    } */}
                     <div className="p-4 solid-form-content">
                         {renderFormDynamically(formViewMetaData)}
                     </div>

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

@@ -69,6 +69,7 @@ export class SolidBooleanField implements ISolidField {
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const booleanOptions = ["false", "true"];
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         useEffect(() => { formik.setFieldValue(fieldLayoutInfo.attrs.name, "false") }, [])
 
@@ -83,9 +84,11 @@ export class SolidBooleanField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     {/* <InputText
                         id={fieldLayoutInfo.attrs.name}
                         className="small-input"

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

@@ -52,6 +52,7 @@ export class SolidDateField implements ISolidField {
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
         // const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
@@ -62,9 +63,11 @@ export class SolidDateField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <Calendar
                         disabled={formDisabled || fieldDisabled}
                         ref={calendarRef} // Attach ref to Calendar

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

@@ -51,6 +51,7 @@ export class SolidDateTimeField implements ISolidField {
         const calendarRef = useRef<any>(null); // Reference for the Calendar component
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
@@ -60,9 +61,11 @@ export class SolidDateTimeField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <Calendar
                         disabled={formDisabled || fieldDisabled}
                         ref={calendarRef} // Attach ref to Calendar

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

@@ -52,6 +52,7 @@ export class SolidDecimalField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
@@ -64,9 +65,11 @@ export class SolidDecimalField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <InputNumber
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}

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

@@ -53,6 +53,7 @@ export class SolidIntegerField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
@@ -65,9 +66,11 @@ export class SolidIntegerField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <InputNumber
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}

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

@@ -47,6 +47,7 @@ export class SolidJsonField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
@@ -56,10 +57,12 @@ export class SolidJsonField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
 
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <CodeEditor
                         formik={formik}
                         field={fieldLayoutInfo.attrs.name}

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

@@ -65,6 +65,7 @@ export class SolidLongTextField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
@@ -77,9 +78,11 @@ export class SolidLongTextField implements ISolidField {
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        &nbsp;   {fieldDescription && <span>({fieldDescription}) </span>}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span>({fieldDescription}) </span>}
+                        </label>
+                    }
                     <InputTextarea
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}