@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.10

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

@@ -2,21 +2,31 @@
 import { DropzonePlaceholder } from "../../../../components/common/DropzonePlaceholder";
 import { DropzoneUpload } from "../../../../components/common/DropzoneUpload";
 import { useDeleteMediaMutation } from "../../../../redux/api/mediaApi";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { Message } from "primereact/message";
+import { SolidButton } from "../../../shad-cn-ui/SolidButton";
+import {
+  SolidDialog,
+  SolidDialogBody,
+  SolidDialogClose,
+  SolidDialogFooter,
+  SolidDialogHeader,
+  SolidDialogSeparator,
+  SolidDialogTitle,
+} from "../../../shad-cn-ui/SolidDialog";
+import { SolidMessage } from "../../../shad-cn-ui/SolidMessage";
+import { SolidProgressBar } from "../../../shad-cn-ui/SolidProgressBar";
 import { useEffect, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import * as Yup from 'yup';
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { FileReaderExt } from "../../../../components/common/FileReaderExt";
-import { ProgressBar } from "primereact/progressbar";
 import getAcceptedFileTypes from "../../../../helpers/getAcceptedFileTypes";
 import { downloadMediaFile } from "../../../../helpers/downloadMediaFile";
 import { getExtensionComponent } from "../../../../helpers/registry";
 import { SolidFormFieldWidgetProps, SolidMediaFormFieldWidgetProps } from "../../../../types/solid-core";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
+import styles from "./solidFields.module.css";
+import { SolidIcon } from "../../../shad-cn-ui";
 export class SolidMediaMultipleField implements ISolidField {
 
     private fieldContext: SolidFieldProps;
@@ -158,6 +168,12 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
     const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
     const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
     const readOnlyPermission = fieldContext.readOnly ? fieldContext.readOnly : fieldLayoutInfo.attrs.readonly;
+    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+    const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+    const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+    const isFieldDisabled = formDisabled || fieldDisabled;
+    const isFieldReadonly = formReadonly || fieldReadonly || readOnlyPermission;
 
     const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
     const [imageToBeDeletedData, setImageToBeDeletedData] = useState<any>();
@@ -318,9 +334,9 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
 
     return (
         <div style={readOnlyPermission === true ? { filter: 'opacity(50%)', pointerEvents: 'none' } : {}}>
-            <div className="flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4 relative">
+            <div className={`${styles.fieldWrapper} relative`}>
                 {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>{fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
                         {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
@@ -339,13 +355,13 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
                     </div>
                     {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                         <div className="absolute mt-1">
-                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                            <SolidMessage severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                         </div>
                     )}
                 </div>
                 {
                     fileSizeError &&
-                    <Message severity="error" text={fileSizeError?.toString()} />
+                    <SolidMessage severity="error" text={fileSizeError?.toString()} />
                 }
             </div>
             {fileDetails.length > 0 &&
@@ -353,39 +369,29 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
                     <div className="flex align-items-center md:gap-2">
                         <FileReaderExt fileDetails={fileDetails[0]} />
                         <div className="w-full flex flex-column gap-1">
-                            <div className="flex align-items-center justify-content-between">
-                                <p className="font-normal w-9 text-primary m-0 solid-img-text-wrapper" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails[0])}>{fileDetails[0].name}</p>
-                                <div className="flex align-items-center md:gap-2">
-                                    <div>
-                                        <Button
+                                <div className="flex align-items-center justify-content-between">
+                                    <p className="font-normal w-9 text-primary m-0 solid-img-text-wrapper" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails[0])}>{fileDetails[0].name}</p>
+                                    <div className="flex align-items-center gap-2">
+                                        <button
                                             type="button"
-                                            text
-                                            icon={"pi pi-download"}
-                                            size="small"
-                                            style={{
-                                                height: 16,
-                                                width: 16
-                                            }}
+                                            className="solid-file-icon-btn"
+                                            disabled={isFieldDisabled || isFieldReadonly}
+                                            aria-label="Download file"
                                             onClick={() => downloadMediaFile(fileDetails[0]?.fileUrl, fileDetails[0]?.name)}
-                                        />
-                                    </div>
-                                    <div>
-                                        <Button
+                                        >
+                                            <SolidIcon name="si-download" aria-hidden />
+                                        </button>
+                                        <button
                                             type="button"
-                                            text
-                                            icon={"pi pi-times"}
-                                            size="small"
-                                            severity="secondary"
-                                            // className="p-2"
-                                            style={{
-                                                height: 16,
-                                                width: 16
-                                            }}
+                                            className="solid-file-icon-btn is-danger"
+                                            disabled={isFieldDisabled || isFieldReadonly}
+                                            aria-label="Remove file"
                                             onClick={() => confirmDeleteFile(`${fileDetails[0].name}-${fileDetails[0].size}`, fileDetails[0].id)}
-                                        />
+                                        >
+                                            <SolidIcon name="si-times" aria-hidden />
+                                        </button>
                                     </div>
                                 </div>
-                            </div>
                             <div className="flex align-items-center gap-2 text-sm">
                                 {formatFileSize(fileDetails[0].size)}
                             </div>
@@ -400,18 +406,23 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
                         {fileDetails.length - 1} items
                     </p>
                     <div>
-                        <Button type="button" size="small" text label="View" onClick={() => setShowAllFiles(true)} />
+                        <SolidButton type="button" size="sm" variant="ghost" onClick={() => setShowAllFiles(true)}>
+                            View
+                        </SolidButton>
                     </div>
                 </div>
             }
 
-            <Dialog
-                visible={isShowAllFiles}
-                header="Items Uploaded"
-                modal
-                onHide={() => setShowAllFiles(false)}
+            <SolidDialog
+                open={isShowAllFiles}
+                onOpenChange={setShowAllFiles}
                 style={{ minWidth: 450 }}
             >
+                <SolidDialogHeader>
+                    <SolidDialogTitle>Items Uploaded</SolidDialogTitle>
+                    <SolidDialogClose />
+                </SolidDialogHeader>
+                <SolidDialogBody>
                 {fileDetails.length > 1 &&
                     fileDetails.map((file, index) => {
                         const fileId = `${file.name}-${file.size}`;
@@ -422,35 +433,25 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
                                     <div className="w-full flex flex-column gap-1">
                                         <div className="flex align-items-center justify-content-between">
                                             <p className="font-normal w-11 text-primary m-0 solid-img-text-wrapper" style={{ cursor: 'pointer' }} onClick={() => handleFileView(file)}>{file.name}</p>
-                                            <div className="flex align-items-center md:gap-2">
-                                                <div>
-                                                    <Button
-                                                        type="button"
-                                                        text
-                                                        icon={"pi pi-download"}
-                                                        size="small"
-                                                        style={{
-                                                            height: 16,
-                                                            width: 16
-                                                        }}
-                                                        onClick={() => downloadMediaFile(file?.fileUrl, file?.name)}
-                                                    />
-                                                </div>
-                                                <div>
-                                                    <Button
-                                                        type="button"
-                                                        text
-                                                        icon={"pi pi-times"}
-                                                        size="small"
-                                                        severity="secondary"
-                                                        // className="p-2"
-                                                        style={{
-                                                            height: 16,
-                                                            width: 16
-                                                        }}
-                                                        onClick={() => confirmDeleteFile(fileId, file?.id)}
-                                                    />
-                                                </div>
+                                            <div className="flex align-items-center gap-2">
+                                                <button
+                                                    type="button"
+                                                    className="solid-file-icon-btn"
+                                                    disabled={isFieldDisabled || isFieldReadonly}
+                                                    aria-label="Download file"
+                                                    onClick={() => downloadMediaFile(file?.fileUrl, file?.name)}
+                                                >
+                                                    <SolidIcon name="si-download" aria-hidden />
+                                                </button>
+                                                <button
+                                                    type="button"
+                                                    className="solid-file-icon-btn is-danger"
+                                                    disabled={isFieldDisabled || isFieldReadonly}
+                                                    aria-label="Remove file"
+                                                    onClick={() => confirmDeleteFile(fileId, file?.id)}
+                                                >
+                                                    <SolidIcon name="si-times" aria-hidden />
+                                                </button>
                                             </div>
                                         </div>
                                         <div className="flex align-items-center gap-2 text-sm">
@@ -462,22 +463,30 @@ export const DefaultMediaMultipleFormEditWidget = ({ formik, fieldContext, setLi
                         );
                     })
                 }
-            </Dialog>
-            <Dialog
-                visible={isDeleteImageDialogVisible}
-                header="Confirm Delete"
-                modal
-                className="solid-confirm-dialog"
-                footer={() => (
-                    <div className="flex justify-content-center">
-                        <Button type="button" label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={deleteFile} />
-                        <Button type="button" label="No" icon="pi pi-times" className='small-button' onClick={() => setDeleteImageDialogVisible(false)} />
-                    </div>
-                )}
-                onHide={() => setDeleteImageDialogVisible(false)}
+                </SolidDialogBody>
+            </SolidDialog>
+            <SolidDialog
+                open={isDeleteImageDialogVisible}
+                onOpenChange={setDeleteImageDialogVisible}
+                className="solid-shadcn-confirm-dialog"
             >
-                <p>Are you sure you want to delete image?</p>
-            </Dialog>
+                <SolidDialogHeader className="solid-shadcn-dialog-head">
+                    <SolidDialogTitle>Confirm Delete</SolidDialogTitle>
+                    <SolidDialogClose />
+                </SolidDialogHeader>
+                <SolidDialogSeparator className="solid-shadcn-dialog-sep" />
+                <SolidDialogBody className="solid-shadcn-dialog-body">
+                    <p className="solid-shadcn-dialog-text">Are you sure you want to delete this file?</p>
+                </SolidDialogBody>
+                <SolidDialogFooter className="solid-shadcn-dialog-actions">
+                    <SolidButton variant="destructive" size="sm" autoFocus onClick={deleteFile}>
+                        Delete
+                    </SolidButton>
+                    <SolidButton variant="outline" size="sm" onClick={() => setDeleteImageDialogVisible(false)}>
+                        Cancel
+                    </SolidButton>
+                </SolidDialogFooter>
+            </SolidDialog>
         </div>
     );
 }
@@ -565,11 +574,12 @@ export const DefaultMediaMultipleFormViewWidget = ({ formik, fieldContext, setLi
     }
 
     return (
-        <div>
+        <div className={styles.fieldViewWrapper}>
             {showFieldLabel != false &&
-                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label mt-4 font-medium">{fieldLabel}
+                <p className={`${styles.fieldViewLabel} form-field-label`}>
+                    {fieldLabel}
                     <SolidFieldTooltip fieldContext={fieldContext} />
-                </label>
+                </p>
             }
             {fileDetails.length > 0 &&
                 <div className="solid-file-view-wrapper">
@@ -579,17 +589,17 @@ export const DefaultMediaMultipleFormViewWidget = ({ formik, fieldContext, setLi
                             <div className="flex align-items-center justify-content-between">
                                 <p className="font-normal w-11 text-primary m-0 solid-img-text-wrapper" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails[0])}>{fileDetails[0].name}</p>
                                 <div className="flex align-items-center md:gap-2">
-                                    <div>
-                                        <Button
-                                            type="button"
-                                            text
-                                            icon={"pi pi-download"}
-                                            size="small"
-                                            style={{
-                                                height: 16,
-                                                width: 16
-                                            }}
-                                            onClick={() => downloadMediaFile(fileDetails[0]?.fileUrl, fileDetails[0]?.name)}
+                    <div>
+                        <SolidButton
+                            type="button"
+                            variant="ghost"
+                            icon="si si-download"
+                            size="sm"
+                            style={{
+                                height: 16,
+                                width: 16
+                            }}
+                            onClick={() => downloadMediaFile(fileDetails[0]?.fileUrl, fileDetails[0]?.name)}
                                         />
                                     </div>
                                 </div>
@@ -608,18 +618,23 @@ export const DefaultMediaMultipleFormViewWidget = ({ formik, fieldContext, setLi
                         {fileDetails.length - 1} items
                     </p>
                     <div>
-                        <Button type="button" size="small" text label="View" onClick={() => setShowAllFiles(true)} />
+                        <SolidButton type="button" size="sm" variant="ghost" onClick={() => setShowAllFiles(true)}>
+                            View
+                        </SolidButton>
                     </div>
                 </div>
             }
 
-            <Dialog
-                visible={isShowAllFiles}
-                header="Items Uploaded"
-                modal
-                onHide={() => setShowAllFiles(false)}
+            <SolidDialog
+                open={isShowAllFiles}
+                onOpenChange={setShowAllFiles}
                 style={{ minWidth: 450 }}
             >
+                <SolidDialogHeader>
+                    <SolidDialogTitle>Items Uploaded</SolidDialogTitle>
+                    <SolidDialogClose />
+                </SolidDialogHeader>
+                <SolidDialogBody>
                 {fileDetails.length > 1 &&
                     fileDetails.map((file, index) => {
                         const fileId = `${file.name}-${file.size}`;
@@ -632,11 +647,11 @@ export const DefaultMediaMultipleFormViewWidget = ({ formik, fieldContext, setLi
                                             <p className="font-normal w-11 solid-img-text-wrapper" style={{ cursor: 'pointer' }} onClick={() => handleFileView(file)}>{file.name}</p>
                                             <div className="flex align-items-center md:gap-2">
                                                 <div>
-                                                    <Button
+                                                    <SolidButton
                                                         type="button"
-                                                        text
-                                                        icon={"pi pi-download"}
-                                                        size="small"
+                                                        variant="ghost"
+                                                        icon="si si-download"
+                                                        size="sm"
                                                         style={{
                                                             height: 16,
                                                             width: 16
@@ -655,8 +670,9 @@ export const DefaultMediaMultipleFormViewWidget = ({ formik, fieldContext, setLi
                         );
                     })
                 }
-            </Dialog>
+                </SolidDialogBody>
+            </SolidDialog>
 
         </div>
     );
-}
+}

package/dist/components/core/form/fields/SolidMediaSingleField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidMediaSingleField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidMediaSingleField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAM3E,OAAO,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AAI9E,qBAAa,qBAAsB,YAAW,WAAW;IAErD,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,eAAe,CAAC,CAAyD;IACjF,OAAO,CAAC,eAAe,CAAC,CAA0B;gBACtC,YAAY,EAAE,eAAe,EAAE,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,EAAE,KAAK,IAAI,EAC/G,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;IAM7C,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,YAAY,IAAI,GAAG;IAKnB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IAyC9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAoC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAcjE;AAMD,eAAO,MAAM,gCAAgC,+DAAgE,8BAA8B,4CA0S1I,CAAA;AAED,eAAO,MAAM,gCAAgC,+DAAgE,8BAA8B,4CAqH1I,CAAA"}
+{"version":3,"file":"SolidMediaSingleField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidMediaSingleField.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAK3E,OAAO,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AAM9E,qBAAa,qBAAsB,YAAW,WAAW;IAErD,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,eAAe,CAAC,CAAyD;IACjF,OAAO,CAAC,eAAe,CAAC,CAA0B;gBACtC,YAAY,EAAE,eAAe,EAAE,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,EAAE,KAAK,IAAI,EAC/G,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;IAM7C,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,YAAY,IAAI,GAAG;IAKnB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IAyC9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAoC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAcjE;AAMD,eAAO,MAAM,gCAAgC,+DAAgE,8BAA8B,4CAiT1I,CAAA;AAED,eAAO,MAAM,gCAAgC,+DAAgE,8BAA8B,4CAqH1I,CAAA"}

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

@@ -12,9 +12,9 @@ var __assign = (this && this.__assign) || function () {
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DropzonePlaceholder } from "../../../../components/common/DropzonePlaceholder";
 import { useDeleteMediaMutation } from "../../../../redux/api/mediaApi";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { Message } from "primereact/message";
+import { SolidButton } from "../../../shad-cn-ui/SolidButton";
+import { SolidDialog, SolidDialogBody, SolidDialogClose, SolidDialogFooter, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, } from "../../../shad-cn-ui/SolidDialog";
+import { SolidMessage } from "../../../shad-cn-ui/SolidMessage";
 import { useEffect, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import * as Yup from 'yup';
@@ -24,6 +24,8 @@ import { downloadMediaFile } from "../../../../helpers/downloadMediaFile";
 import { getExtensionComponent } from "../../../../helpers/registry";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
+import styles from "./solidFields.module.css";
+import { SolidIcon } from "../../../shad-cn-ui";
 var SolidMediaSingleField = /** @class */ (function () {
     function SolidMediaSingleField(fieldContext, setLightboxUrls, setOpenLightbox) {
         Object.defineProperty(this, "fieldContext", {
@@ -309,19 +311,9 @@ export var DefaultMediaSingleFormEditWidget = function (_a) {
             setOpenLightbox === null || setOpenLightbox === void 0 ? void 0 : setOpenLightbox(true);
         }
     };
-    return (_jsxs("div", { style: (isFieldDisabled === true || isFieldReadonly === true) ? { filter: 'opacity(50%)', pointerEvents: 'none' } : {}, children: [_jsxs("div", { className: "flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4 relative", children: [showFieldLabel != false &&
-                        _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "form-field-label", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), _jsxs("div", { className: "relative", children: [_jsxs("div", __assign({}, getRootProps(), { className: "solid-dropzone-wrapper", children: [_jsx("input", __assign({}, getInputProps())), _jsx(DropzonePlaceholder, { mediaTypes: fieldMetadata.mediaTypes, mediaMaxSizeKb: fieldMetadata.mediaMaxSizeKb })] })), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: (_p = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _p === void 0 ? void 0 : _p.toString() }) }))] }), fileSizeError &&
-                        _jsx(Message, { severity: "error", text: fileSizeError === null || fileSizeError === void 0 ? void 0 : fileSizeError.toString() }), fileDetails && (_jsx("div", { className: "solid-file-upload-wrapper mt-4", children: _jsxs("div", { className: "flex align-items-center md:gap-2", children: [_jsx(FileReaderExt, { fileDetails: fileDetails }), _jsxs("div", { className: "w-full flex flex-column gap-1", children: [_jsxs("div", { className: "flex align-items-start justify-content-between", children: [_jsx("p", { className: "font-normal w-9 text-primary m-0 solid-img-text-wrapper", style: { cursor: 'pointer' }, onClick: function () { return handleFileView(fileDetails); }, children: fileDetails.name }), _jsxs("div", { className: "flex align-items-center md:gap-2", children: [_jsx("div", { children: _jsx(Button, { type: "button", text: true, icon: "pi pi-download", size: "small", severity: "secondary", 
-                                                                // className="p-2"
-                                                                disabled: isFieldDisabled || isFieldReadonly, style: {
-                                                                    height: 16,
-                                                                    width: 16
-                                                                }, onClick: function () { return downloadMediaFile(fileDetails === null || fileDetails === void 0 ? void 0 : fileDetails.fileUrl, fileDetails === null || fileDetails === void 0 ? void 0 : fileDetails.name); } }) }), _jsx("div", { children: _jsx(Button, { type: "button", text: true, icon: "pi pi-times", size: "small", severity: "secondary", 
-                                                                // className="p-2"
-                                                                disabled: isFieldDisabled || isFieldReadonly, style: {
-                                                                    height: 16,
-                                                                    width: 16
-                                                                }, onClick: function () { return setDeleteImageDialogVisible(true); } }) })] })] }), _jsx("div", { className: "flex align-items-center gap-2 text-sm", children: fileDetails && formatFileSize(fileDetails.fileSize) })] })] }) }))] }), _jsx(Dialog, { visible: isDeleteImageDialogVisible, header: "Confirm Delete", modal: true, className: "solid-confirm-dialog", footer: function () { return (_jsxs("div", { className: "flex justify-content-center", children: [_jsx(Button, { type: "button", label: "Yes", icon: "pi pi-check", className: 'small-button', severity: "danger", autoFocus: true, onClick: handleCancelUpload }), _jsx(Button, { type: "button", label: "No", icon: "pi pi-times", className: 'small-button', onClick: function () { return setDeleteImageDialogVisible(false); } })] })); }, onHide: function () { return setDeleteImageDialogVisible(false); }, children: _jsx("p", { children: "Are you sure you want to delete media?" }) }), _jsx(Dialog, { visible: isReplaceImageDialogVisible, header: "Replace Image", modal: true, className: "solid-confirm-dialog", footer: function () { return (_jsxs("div", { className: "flex justify-content-center", children: [_jsx(Button, { type: "button", label: "Yes, Replace", icon: "pi pi-check", className: 'small-button', severity: "danger", onClick: handleReplaceFile }), _jsx(Button, { type: "button", label: "Cancel", icon: "pi pi-times", className: 'small-button', onClick: function () { return setReplaceImageDialogVisible(false); } })] })); }, onHide: function () { return setReplaceImageDialogVisible(false); }, children: _jsx("p", { children: "An media is already uploaded. Do you want to delete it and upload a new one?" }) })] }));
+    return (_jsxs("div", { style: (isFieldDisabled === true || isFieldReadonly === true) ? { filter: 'opacity(50%)', pointerEvents: 'none' } : {}, children: [_jsxs("div", { className: "".concat(styles.fieldWrapper, " relative"), children: [showFieldLabel != false &&
+                        _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "".concat(styles.fieldLabel, " form-field-label"), children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), _jsxs("div", { className: "relative", children: [_jsxs("div", __assign({}, getRootProps(), { className: "solid-dropzone-wrapper", children: [_jsx("input", __assign({}, getInputProps())), _jsx(DropzonePlaceholder, { mediaTypes: fieldMetadata.mediaTypes, mediaMaxSizeKb: fieldMetadata.mediaMaxSizeKb })] })), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(SolidMessage, { severity: "error", text: (_p = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _p === void 0 ? void 0 : _p.toString() }) }))] }), fileSizeError &&
+                        _jsx(SolidMessage, { severity: "error", text: fileSizeError === null || fileSizeError === void 0 ? void 0 : fileSizeError.toString() }), fileDetails && (_jsx("div", { className: "".concat(styles.mediaAttachmentCard, " mt-4"), children: _jsxs("div", { className: "".concat(styles.mediaAttachmentRow, " flex align-items-center md:gap-2"), children: [_jsx(FileReaderExt, { fileDetails: fileDetails }), _jsxs("div", { className: "".concat(styles.mediaAttachmentMeta, " w-full"), children: [_jsxs("div", { className: "flex align-items-start justify-content-between gap-3", children: [_jsx("button", { type: "button", className: styles.mediaAttachmentName, onClick: function () { return handleFileView(fileDetails); }, title: fileDetails.name, children: fileDetails.name }), _jsxs("div", { className: "".concat(styles.mediaAttachmentActions, " flex align-items-center gap-2"), children: [_jsx("button", { type: "button", className: "solid-file-icon-btn", disabled: isFieldDisabled || isFieldReadonly, "aria-label": "Download file", onClick: function () { return downloadMediaFile(fileDetails === null || fileDetails === void 0 ? void 0 : fileDetails.fileUrl, fileDetails === null || fileDetails === void 0 ? void 0 : fileDetails.name); }, children: _jsx(SolidIcon, { name: "si-download", "aria-hidden": true }) }), _jsx("button", { type: "button", className: "solid-file-icon-btn is-danger", disabled: isFieldDisabled || isFieldReadonly, "aria-label": "Remove file", onClick: function () { return setDeleteImageDialogVisible(true); }, children: _jsx(SolidIcon, { name: "si-times", "aria-hidden": true }) })] })] }), _jsx("div", { className: styles.mediaAttachmentSize, children: fileDetails && formatFileSize(fileDetails.fileSize) })] })] }) }))] }), _jsxs(SolidDialog, { open: isDeleteImageDialogVisible, onOpenChange: setDeleteImageDialogVisible, className: "solid-shadcn-confirm-dialog", children: [_jsxs(SolidDialogHeader, { className: "solid-shadcn-dialog-head", children: [_jsx(SolidDialogTitle, { children: "Confirm Delete" }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogSeparator, { className: "solid-shadcn-dialog-sep" }), _jsx(SolidDialogBody, { className: "solid-shadcn-dialog-body", children: _jsx("p", { className: "solid-shadcn-dialog-text", children: "Are you sure you want to delete media?" }) }), _jsxs(SolidDialogFooter, { className: "solid-shadcn-dialog-actions", children: [_jsx(SolidButton, { variant: "destructive", size: "sm", autoFocus: true, onClick: handleCancelUpload, children: "Delete" }), _jsx(SolidButton, { variant: "outline", size: "sm", onClick: function () { return setDeleteImageDialogVisible(false); }, children: "Cancel" })] })] }), _jsxs(SolidDialog, { open: isReplaceImageDialogVisible, onOpenChange: setReplaceImageDialogVisible, className: "solid-shadcn-confirm-dialog", children: [_jsxs(SolidDialogHeader, { className: "solid-shadcn-dialog-head", children: [_jsx(SolidDialogTitle, { children: "Replace Media" }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogSeparator, { className: "solid-shadcn-dialog-sep" }), _jsx(SolidDialogBody, { className: "solid-shadcn-dialog-body", children: _jsx("p", { className: "solid-shadcn-dialog-text", children: "A media file is already uploaded. Do you want to delete it and upload a new one?" }) }), _jsxs(SolidDialogFooter, { className: "solid-shadcn-dialog-actions", children: [_jsx(SolidButton, { variant: "destructive", size: "sm", onClick: handleReplaceFile, children: "Replace" }), _jsx(SolidButton, { variant: "outline", size: "sm", onClick: function () { return setReplaceImageDialogVisible(false); }, children: "Cancel" })] })] })] }));
 };
 export var DefaultMediaSingleFormViewWidget = function (_a) {
     var _b, _c, _d;
@@ -392,12 +384,7 @@ export var DefaultMediaSingleFormViewWidget = function (_a) {
             setOpenLightbox === null || setOpenLightbox === void 0 ? void 0 : setOpenLightbox(true);
         }
     };
-    return (_jsxs("div", { className: "flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4 relative", children: [showFieldLabel != false &&
-                _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "form-field-label font-medium", children: [fieldLabel, _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), fileDetails && (_jsx("div", { className: "solid-file-view-wrapper mt-4", children: _jsxs("div", { className: "flex align-items-center md:gap-2", children: [_jsx(FileReaderExt, { fileDetails: fileDetails }), _jsxs("div", { className: "w-full flex flex-column gap-1", children: [_jsxs("div", { className: "flex align-items-start justify-content-between", children: [_jsx("p", { className: "font-normal w-9 text-primary m-0 solid-img-text-wrapper", style: { cursor: 'pointer' }, onClick: function () { return handleFileView(fileDetails); }, children: fileDetails.name }), _jsx("div", { className: "flex align-items-center md:gap-2", children: _jsx("div", { children: _jsx(Button, { type: "button", text: true, icon: "pi pi-download", size: "small", severity: "secondary", 
-                                                    // className="p-2"
-                                                    style: {
-                                                        height: 16,
-                                                        width: 16
-                                                    }, onClick: function () { return downloadMediaFile(fileDetails === null || fileDetails === void 0 ? void 0 : fileDetails.fileUrl, fileDetails === null || fileDetails === void 0 ? void 0 : fileDetails.name); } }) }) })] }), _jsx("div", { className: "flex align-items-center gap-2 text-sm", children: fileDetails && formatFileSize(fileDetails.fileSize) })] })] }) }))] }));
+    return (_jsxs("div", { className: "".concat(styles.fieldViewWrapper, " relative"), children: [showFieldLabel != false &&
+                _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "".concat(styles.fieldViewLabel, " form-field-label"), children: [fieldLabel, _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), fileDetails && (_jsx("div", { className: "".concat(styles.mediaAttachmentCard, " ").concat(styles.mediaAttachmentCardView, " mt-4"), children: _jsxs("div", { className: "".concat(styles.mediaAttachmentRow, " flex align-items-center md:gap-2"), children: [_jsx(FileReaderExt, { fileDetails: fileDetails }), _jsxs("div", { className: "".concat(styles.mediaAttachmentMeta, " w-full"), children: [_jsxs("div", { className: "flex align-items-start justify-content-between gap-3", children: [_jsx("button", { type: "button", className: styles.mediaAttachmentName, onClick: function () { return handleFileView(fileDetails); }, title: fileDetails.name, children: fileDetails.name }), _jsx("div", { className: "".concat(styles.mediaAttachmentActions, " flex align-items-center md:gap-2"), children: _jsx("button", { type: "button", className: "solid-file-icon-btn", "aria-label": "Download file", onClick: function () { return downloadMediaFile(fileDetails === null || fileDetails === void 0 ? void 0 : fileDetails.fileUrl, fileDetails === null || fileDetails === void 0 ? void 0 : fileDetails.name); }, children: _jsx(SolidIcon, { name: "si-download", "aria-hidden": true }) }) })] }), _jsx("div", { className: styles.mediaAttachmentSize, children: fileDetails && formatFileSize(fileDetails.fileSize) })] })] }) }))] }));
 };
 //# sourceMappingURL=SolidMediaSingleField.js.map