@solidstarters/solid-core-ui 1.1.69 → 1.1.71

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

@@ -0,0 +1,522 @@
+'use client';
+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 { useEffect, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import * as Yup from 'yup';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { FileReaderExt } from "@/components/common/FileReaderExt";
+import { ProgressBar } from "primereact/progressbar";
+import Link from "next/link";
+import getAcceptedFileTypes from "@/helpers/getAcceptedFileTypes";
+import { downloadMediaFile } from "@/helpers/downloadMediaFile";
+import { getExtensionComponent } from "@/helpers/registry";
+import { SolidMediaFormFieldWidgetProps } from "@/types/solid-core";
+
+export class SolidMediaSingleField implements ISolidField {
+
+    private fieldContext: SolidFieldProps;
+    private setLightboxUrls?: (urls: { src: string; downloadUrl: string }[]) => void;
+    private setOpenLightbox?: (open: boolean) => void;
+    constructor(fieldContext: SolidFieldProps, setLightboxUrls?: (urls: { src: string; downloadUrl: string }[]) => void,
+        setOpenLightbox?: (open: boolean) => void) {
+        this.fieldContext = fieldContext;
+        this.setLightboxUrls = setLightboxUrls;
+        this.setOpenLightbox = setOpenLightbox;
+    }
+
+    updateFormData(value: any, formData: FormData): any {
+        const fieldLayoutInfo = this.fieldContext.field;
+        if (value instanceof File) {
+            formData.append(fieldLayoutInfo.attrs.name, value);
+        }
+    }
+
+    initialValue(): any {
+        const mediaUrls = this.fieldContext.data && this.fieldContext.data._media && this.fieldContext.data._media[this.fieldContext.field.attrs.name][0];
+        return mediaUrls;
+    }
+
+    validationSchema(): Schema {
+        // let schema: Yup.StringSchema = Yup.object();
+
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        // Dynamically determine the base type based on the 'required' flag
+
+        // Define base schema
+        let schema: Yup.MixedSchema<File | object>;
+
+        if (fieldMetadata.required) {
+            // For required fields: disallow null and undefined
+            schema = Yup.mixed<File | object>()
+                .required(`${fieldLabel} is required.`)
+                .test(
+                    "file-or-object",
+                    `${fieldLabel} must be a file or an object.`,
+                    (value) =>
+                        value instanceof File || typeof value === "object" // Validate File or object
+                );
+        } else {
+            // For optional fields: allow null or undefined
+            schema = Yup.mixed<any>()
+                .nullable() // Allow null explicitly
+                .test(
+                    "file-or-object",
+                    `${fieldLabel} must be a file, an object, or empty.`,
+                    (value) =>
+                        value === null || // Allow null
+                        value === undefined || // Allow undefined
+                        value instanceof File || // Allow File
+                        typeof value === "object" // Allow object
+                );
+        }
+        return schema;
+
+    }
+
+    render(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        let editWidget = fieldLayoutInfo.attrs.editWidget;
+        if (!editWidget) {
+            editWidget = 'DefaultMediaSingleFormEditWidget';
+        }
+        if (!viewWidget) {
+            viewWidget = 'DefaultMediaSingleFormViewWidget';
+        }
+        const viewMode: string = this.fieldContext.viewMode;
+
+
+        return (
+            <>
+                <div className={className}>
+                    {viewMode === "view" &&
+                        this.renderExtensionRenderMode(viewWidget, formik)
+                    }
+                    {viewMode === "edit" &&
+                        <>
+                            {editWidget &&
+                                this.renderExtensionRenderMode(editWidget, formik)
+                            }
+                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                <div className="absolute mt-1">
+                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                </div>
+                            )}
+                        </>
+                    }
+                </div>
+            </>
+        );
+    }
+
+
+    renderExtensionRenderMode(widget: string, formik: FormikObject) {
+        let DynamicWidget = getExtensionComponent(widget);
+        const widgetProps: SolidMediaFormFieldWidgetProps = {
+            formik: formik,
+            fieldContext: this.fieldContext,
+            setLightboxUrls: this.setLightboxUrls,
+            setOpenLightbox: this.setOpenLightbox
+        }
+        return (
+            <>
+                {DynamicWidget && <DynamicWidget {...widgetProps} />}
+            </>
+        )
+    }
+}
+
+
+
+
+
+export const DefaultMediaSingleFormEditWidget = ({ formik, fieldContext, setLightboxUrls, setOpenLightbox }: SolidMediaFormFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+    const viewMode: string = fieldContext.viewMode;
+
+    const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
+    const [imageToBeDeletedData, setImageToBeDeletedData] = useState<any>();
+    const [fileDetails, setFileDetails] = useState<{ name: string; type: string, fileUrl: string, fileSize: number } | null>(null);
+    const [isReplaceImageDialogVisible, setReplaceImageDialogVisible] = useState(false);
+    const [newFileToUpload, setNewFileToUpload] = useState<any>(null);
+    const [fileSizeError, setFileSizeError] = useState<string | null>(null);
+
+    const formatFileSize = (size: number) => {
+        return size >= 1024 * 1024
+            ? `${(size / (1024 * 1024)).toFixed(1)} MB`
+            : `${(size / 1024).toFixed(1)} KB`;
+    };
+
+    const [
+        deleteMedia,
+        { isLoading: isMediaDeleted, isSuccess: isDeleteMediaSuceess, isError: isMediaDeleteError, error: mediaDeleteError, data: DeletedMedia },
+    ] = useDeleteMediaMutation();
+
+    const handleCancelUpload = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (imageToBeDeletedData) {
+            deleteMedia(imageToBeDeletedData);
+        }
+        e.stopPropagation();
+        setFileDetails(null);
+        formik.setFieldValue(fieldLayoutInfo.attrs.name, null);
+        setDeleteImageDialogVisible(false);
+    };
+
+    const handleDropImage = (acceptedFiles: any[]) => {
+        const file = acceptedFiles[0];
+        if (!file) return;
+        setFileSizeError(null);
+        if (fileDetails) {
+            // If a file is already uploaded, show the confirmation dialog
+            setNewFileToUpload(file);
+            setReplaceImageDialogVisible(true);
+        } else {
+            // If no file is present, proceed with upload
+            uploadFile(file);
+        }
+    };
+
+    const uploadFile = (file: File) => {
+        setFileDetails({
+            name: file.name,
+            type: file.type,
+            fileUrl: URL.createObjectURL(file),
+            fileSize: file.size
+        });
+
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        formik.setFieldValue(fieldLayoutInfo.attrs.name, file);
+    };
+
+    const handleReplaceFile = () => {
+        // Delete the existing file first
+        if (imageToBeDeletedData) {
+            deleteMedia(imageToBeDeletedData);
+        }
+        setFileDetails(null);
+        formik.setFieldValue(fieldLayoutInfo.attrs.name, null);
+
+        // Proceed with uploading new file
+        if (newFileToUpload) {
+            uploadFile(newFileToUpload);
+            setNewFileToUpload(null);
+        }
+
+        setReplaceImageDialogVisible(false);
+    };
+
+    useEffect(() => {
+        const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
+
+        if (fieldValue && typeof fieldValue === "object") {
+            let fileUrl = "";
+            let fileName = "Unknown File";
+            let fileSize = 0;
+
+            if (fieldValue instanceof File) {
+                fileUrl = URL.createObjectURL(fieldValue);
+                fileName = fieldValue.name;
+                fileSize = fieldValue.size;
+            } else if (fieldValue._full_url) {
+                fileUrl = fieldValue._full_url;
+                fileName = fieldValue.originalFileName;
+                fileSize = fieldValue.fileSize;
+            }
+
+            setFileDetails({
+                name: fileName,
+                type: fieldValue.mimeType,
+                fileUrl,
+                fileSize
+            });
+
+            // Set file ID for delete operation
+            setImageToBeDeletedData(fieldValue.id);
+
+            // Ensure formik has the correct value
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, fieldValue);
+        }
+    }, [formik.values, fieldLayoutInfo.attrs.name]);
+
+    const {
+        getRootProps: getRootProps,
+        getInputProps: getInputProps,
+        isDragActive: isDragActive,
+    } = useDropzone({
+        onDrop: handleDropImage,
+        onDropRejected: (fileRejections) => {
+            const rejection = fileRejections[0];
+            const sizeError = rejection.errors.find(err => err.code === 'file-too-large');
+            if (sizeError) {
+                setFileSizeError(`File is too large. Max size is ${fieldMetadata.mediaMaxSizeKb} KB.`);
+            } else {
+                setFileSizeError(rejection.errors[0]?.message || "File not accepted.");
+            }
+        },
+        accept: getAcceptedFileTypes(fieldMetadata.mediaTypes),
+        maxSize: fieldMetadata.mediaMaxSizeKb * 1024,
+    });
+
+    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+    let DynamicWidget = getExtensionComponent("SolidFormFieldViewMediaSingleWidget");
+    const widgetProps = {
+        formik: formik,
+        fieldContext: fieldContext,
+        setLightboxUrls: setLightboxUrls,
+        setOpenLightbox: setOpenLightbox
+    }
+
+    const handleFileView = (url: any) => {
+        if (url?.type.includes('image/')) {
+            setLightboxUrls?.([
+                { src: url.fileUrl, downloadUrl: url.fileUrl },
+            ]);
+            setOpenLightbox?.(true);
+        } else {
+            const link = document.createElement('a');
+            link.href = url.fileUrl;
+            link.download = ''; // or specify a file name like 'file.pdf'
+            link.target = '_blank';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+
+
+    return (
+        <div style={readOnlyPermission === true ? { filter: 'opacity(50%)', pointerEvents: 'none' } : {}}>
+            <div className="flex flex-column gap-2 mt-4 relative">
+                {showFieldLabel != false &&
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                    </label>
+                }
+                <div className="relative">
+                    <div
+                        {...getRootProps()}
+                        className="solid-dropzone-wrapper"
+                    >
+                        <input {...getInputProps()} />
+                        <DropzonePlaceholder
+                            mediaTypes={fieldMetadata.mediaTypes}
+                            mediaMaxSizeKb={fieldMetadata.mediaMaxSizeKb}
+                        />
+                    </div>
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <div className="absolute mt-1">
+                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        </div>
+                    )}
+                </div>
+                {
+                    fileSizeError &&
+                    <Message severity="error" text={fileSizeError?.toString()} />
+                }
+                {fileDetails && (
+                    <div className="solid-file-upload-wrapper mt-4">
+                        <div className="flex align-items-center gap-2">
+                            <FileReaderExt fileDetails={fileDetails} />
+                            <div className="w-full flex flex-column gap-1">
+                                <div className="flex align-items-start justify-content-between">
+                                    <p className="font-normal w-9 text-primary m-0" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails)}>{fileDetails.name}</p>
+                                    <div className="flex align-items-center gap-2">
+                                        <div>
+                                            <Button
+                                                type="button"
+                                                text
+                                                icon={"pi pi-download"}
+                                                size="small"
+                                                severity="secondary"
+                                                // className="p-2"
+                                                style={{
+                                                    height: 16,
+                                                    width: 16
+                                                }}
+                                                onClick={() => downloadMediaFile(fileDetails?.fileUrl, fileDetails?.name)}
+                                            />
+                                        </div>
+                                        <div>
+                                            <Button
+                                                type="button"
+                                                text
+                                                icon={"pi pi-times"}
+                                                size="small"
+                                                severity="secondary"
+                                                // className="p-2"
+                                                style={{
+                                                    height: 16,
+                                                    width: 16
+                                                }}
+                                                onClick={() => setDeleteImageDialogVisible(true)}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="flex align-items-center gap-2 text-sm">
+                                    {fileDetails && formatFileSize(fileDetails.fileSize)}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+            <Dialog
+                visible={isDeleteImageDialogVisible}
+                header="Confirm Delete"
+                modal
+                footer={() => (
+                    <div className="flex justify-content-center">
+                        <Button type="button" label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={handleCancelUpload} />
+                        <Button type="button" label="No" icon="pi pi-times" className='small-button' onClick={() => setDeleteImageDialogVisible(false)} />
+                    </div>
+                )}
+                onHide={() => setDeleteImageDialogVisible(false)}
+            >
+                <p>Are you sure you want to delete media?</p>
+            </Dialog>
+            <Dialog
+                visible={isReplaceImageDialogVisible}
+                header="Replace Image"
+                modal
+                footer={() => (
+                    <div className="flex justify-content-center">
+                        <Button type="button" label="Yes, Replace" icon="pi pi-check" className='small-button' severity="danger" onClick={handleReplaceFile} />
+                        <Button type="button" label="Cancel" icon="pi pi-times" className='small-button' onClick={() => setReplaceImageDialogVisible(false)} />
+                    </div>
+                )}
+                onHide={() => setReplaceImageDialogVisible(false)}
+            >
+                <p>An media is already uploaded. Do you want to delete it and upload a new one?</p>
+            </Dialog>
+        </div>
+    );
+}
+
+export const DefaultMediaSingleFormViewWidget = ({ formik, fieldContext, setLightboxUrls, setOpenLightbox }: SolidMediaFormFieldWidgetProps) => {
+    const [fileDetails, setFileDetails] = useState<{ name: string; type: string, fileUrl: string, fileSize: number } | null>(null);
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+
+    useEffect(() => { formik.setFieldValue(fieldLayoutInfo.attrs.name, "false") }, [])
+
+    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+    const formatFileSize = (size: number) => {
+        return size >= 1024 * 1024
+            ? `${(size / (1024 * 1024)).toFixed(1)} MB`
+            : `${(size / 1024).toFixed(1)} KB`;
+    };
+
+    useEffect(() => {
+        const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
+
+        if (fieldValue && typeof fieldValue === "object") {
+            let fileUrl = "";
+            let fileName = "Unknown File";
+            let fileSize = 0;
+
+            if (fieldValue instanceof File) {
+                fileUrl = URL.createObjectURL(fieldValue);
+                fileName = fieldValue.name;
+                fileSize = fieldValue.size;
+            } else if (fieldValue._full_url) {
+                fileUrl = fieldValue._full_url;
+                fileName = fieldValue.originalFileName;
+                fileSize = fieldValue.fileSize;
+            }
+
+            setFileDetails({
+                name: fileName,
+                type: fieldValue.mimeType,
+                fileUrl,
+                fileSize
+            });
+            // Ensure formik has the correct value
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, fieldValue);
+        }
+    }, [formik.values, fieldLayoutInfo.attrs.name]);
+
+    const handleFileView = (url: any) => {
+        if (url?.type.includes('image/')) {
+            setLightboxUrls?.([
+                { src: url.fileUrl, downloadUrl: url.fileUrl },
+            ]);
+            setOpenLightbox?.(true);
+        } else {
+            const link = document.createElement('a');
+            link.href = url.fileUrl;
+            link.download = ''; // or specify a file name like 'file.pdf'
+            link.target = '_blank';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+
+    return (
+        <div className="flex flex-column gap-2 mt-4 relative">
+            {showFieldLabel != false &&
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label font-medium">{fieldLabel}
+                </label>
+            }
+
+            {fileDetails && (
+                <div className="solid-file-view-wrapper mt-4">
+                    <div className="flex align-items-center gap-2">
+                        <FileReaderExt fileDetails={fileDetails} />
+                        <div className="w-full flex flex-column gap-1">
+                            <div className="flex align-items-start justify-content-between">
+                                <p className="font-normal w-9 text-primary m-0" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails)}>{fileDetails.name}</p>
+                                <div className="flex align-items-center gap-2">
+                                    <div>
+                                        <Button
+                                            type="button"
+                                            text
+                                            icon={"pi pi-download"}
+                                            size="small"
+                                            severity="secondary"
+                                            // className="p-2"
+                                            style={{
+                                                height: 16,
+                                                width: 16
+                                            }}
+                                            onClick={() => downloadMediaFile(fileDetails?.fileUrl, fileDetails?.name)}
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex align-items-center gap-2 text-sm">
+                                {fileDetails && formatFileSize(fileDetails.fileSize)}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

package/dist/components/core/form/fields/SolidPasswordField.d.ts

@@ -1,5 +1,6 @@
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { SolidFormFieldWidgetProps } from "../../../../types/solid-core";
 export declare class SolidPasswordField implements ISolidField {
     private fieldContext;
     constructor(fieldContext: SolidFieldProps);
@@ -7,5 +8,8 @@ export declare class SolidPasswordField implements ISolidField {
     initialValue(): any;
     validationSchema(): Schema;
     render(formik: FormikObject): import("react/jsx-runtime").JSX.Element;
+    renderExtensionRenderMode(widget: string, formik: FormikObject): import("react/jsx-runtime").JSX.Element;
 }
+export declare const DefaultPasswordFormEditWidget: ({ formik, fieldContext }: SolidFormFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultPasswordFormViewWidget: ({ formik, fieldContext }: SolidFormFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SolidPasswordField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SolidPasswordField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidPasswordField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAI3E,qBAAa,kBAAmB,YAAW,WAAW;IAElD,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,YAAY,IAAI,GAAG;IASnB,gBAAgB,IAAI,MAAM;IA+B1B,MAAM,CAAC,MAAM,EAAE,YAAY;CAiE9B"}
+{"version":3,"file":"SolidPasswordField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidPasswordField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAG3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAG/D,qBAAa,kBAAmB,YAAW,WAAW;IAElD,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,YAAY,IAAI,GAAG;IASnB,gBAAgB,IAAI,MAAM;IA+B1B,MAAM,CAAC,MAAM,EAAE,YAAY;IAsC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAYjE;AAED,eAAO,MAAM,6BAA6B,6BAA8B,yBAAyB,4CA0ChG,CAAA;AAED,eAAO,MAAM,6BAA6B,6BAA8B,yBAAyB,4CAsBhG,CAAA"}

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

@@ -10,11 +10,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Message } from "primereact/message";
 import * as Yup from 'yup';
 import { Password } from "primereact/password";
 import { getExtensionComponent } from "../../../../helpers/registry";
+import { useState } from "react";
 var SolidPasswordField = /** @class */ (function () {
     function SolidPasswordField(fieldContext) {
         this.fieldContext = fieldContext;
@@ -61,33 +62,62 @@ var SolidPasswordField = /** @class */ (function () {
         return schema;
     };
     SolidPasswordField.prototype.render = function (formik) {
-        var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b;
         var fieldMetadata = this.fieldContext.fieldMetadata;
         var fieldLayoutInfo = this.fieldContext.field;
-        var className = ((_a = fieldLayoutInfo.attrs) === null || _a === void 0 ? void 0 : _a.className) || 'field col-12';
-        var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
-        var fieldDescription = (_c = fieldLayoutInfo.attrs.description) !== null && _c !== void 0 ? _c : fieldMetadata.description;
-        var solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
-        var showFieldLabel = (_d = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.showLabel;
-        var readOnlyPermission = this.fieldContext.readOnly;
         var isFormFieldValid = function (formik, fieldName) { return formik.touched[fieldName] && formik.errors[fieldName]; };
-        var fieldDisabled = (_e = fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.disabled;
-        var fieldReadonly = (_f = fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.readonly;
-        var formDisabled = (_j = (_h = (_g = solidFormViewMetaData.data.solidView) === null || _g === void 0 ? void 0 : _g.layout) === null || _h === void 0 ? void 0 : _h.attrs) === null || _j === void 0 ? void 0 : _j.disabled;
-        var formReadonly = (_m = (_l = (_k = solidFormViewMetaData.data.solidView) === null || _k === void 0 ? void 0 : _k.layout) === null || _l === void 0 ? void 0 : _l.attrs) === null || _m === void 0 ? void 0 : _m.readonly;
+        var className = ((_a = fieldLayoutInfo.attrs) === null || _a === void 0 ? void 0 : _a.className) || 'field col-12';
+        var viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        var editWidget = fieldLayoutInfo.attrs.editWidget;
+        if (!editWidget) {
+            editWidget = 'DefaultPasswordFormEditWidget';
+        }
+        if (!viewWidget) {
+            viewWidget = 'DefaultPasswordFormViewWidget';
+        }
         var viewMode = this.fieldContext.viewMode;
-        var DynamicWidget = getExtensionComponent("SolidFormFieldPasswordViewModeWidget");
+        return (_jsx(_Fragment, { children: _jsxs("div", { className: className, children: [viewMode === "view" &&
+                        this.renderExtensionRenderMode(viewWidget, formik), viewMode === "edit" &&
+                        _jsxs(_Fragment, { children: [editWidget &&
+                                    this.renderExtensionRenderMode(editWidget, formik), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: (_b = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _b === void 0 ? void 0 : _b.toString() }) }))] })] }) }));
+    };
+    SolidPasswordField.prototype.renderExtensionRenderMode = function (widget, formik) {
+        var DynamicWidget = getExtensionComponent(widget);
         var widgetProps = {
-            label: fieldLabel,
-            value: formik.values[fieldLayoutInfo.attrs.name],
+            formik: formik,
+            fieldContext: this.fieldContext,
         };
-        return (_jsxs(_Fragment, { children: [viewMode === "view" &&
-                    _jsx("div", { className: className, children: DynamicWidget && _jsx(DynamicWidget, __assign({}, widgetProps)) }), viewMode === "edit" &&
-                    (_jsx("div", { className: className, children: _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex flex-column gap-2 mt-4", 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(Password, { id: fieldLayoutInfo.attrs.name, name: fieldMetadata.name, value: formik.values[fieldLayoutInfo.attrs.name] || '', onChange: function (e) { return _this.fieldContext.onChange(e, 'onFieldChange'); }, onBlur: function (e) { return _this.fieldContext.onBlur(e, 'onFieldBlur'); }, readOnly: formReadonly || fieldReadonly || readOnlyPermission, disabled: formDisabled || fieldDisabled, toggleMask: true })] }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: (_o = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _o === void 0 ? void 0 : _o.toString() }) }))] }) }))] }));
+        return (_jsx(_Fragment, { children: DynamicWidget && _jsx(DynamicWidget, __assign({}, widgetProps)) }));
     };
     return SolidPasswordField;
 }());
 export { SolidPasswordField };
+export var DefaultPasswordFormEditWidget = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var formik = _a.formik, fieldContext = _a.fieldContext;
+    var fieldMetadata = fieldContext.fieldMetadata;
+    var fieldLayoutInfo = fieldContext.field;
+    var className = ((_b = fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.className) || 'field col-12';
+    var fieldLabel = (_c = fieldLayoutInfo.attrs.label) !== null && _c !== void 0 ? _c : fieldMetadata.displayName;
+    var fieldDescription = (_d = fieldLayoutInfo.attrs.description) !== null && _d !== void 0 ? _d : fieldMetadata.description;
+    var solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    var showFieldLabel = (_e = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.showLabel;
+    var readOnlyPermission = fieldContext.readOnly;
+    var isFormFieldValid = function (formik, fieldName) { return formik.touched[fieldName] && formik.errors[fieldName]; };
+    var fieldDisabled = (_f = fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.disabled;
+    var fieldReadonly = (_g = fieldLayoutInfo.attrs) === null || _g === void 0 ? void 0 : _g.readonly;
+    var formDisabled = (_k = (_j = (_h = solidFormViewMetaData.data.solidView) === null || _h === void 0 ? void 0 : _h.layout) === null || _j === void 0 ? void 0 : _j.attrs) === null || _k === void 0 ? void 0 : _k.disabled;
+    var formReadonly = (_o = (_m = (_l = solidFormViewMetaData.data.solidView) === null || _l === void 0 ? void 0 : _l.layout) === null || _m === void 0 ? void 0 : _m.attrs) === null || _o === void 0 ? void 0 : _o.readonly;
+    return (_jsx("div", { className: "relative", children: _jsxs("div", { className: "flex flex-column gap-2 mt-4", 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(Password, { id: fieldLayoutInfo.attrs.name, name: fieldMetadata.name, value: formik.values[fieldLayoutInfo.attrs.name] || '', onChange: function (e) { return fieldContext.onChange(e, 'onFieldChange'); }, onBlur: function (e) { return fieldContext.onBlur(e, 'onFieldBlur'); }, readOnly: formReadonly || fieldReadonly || readOnlyPermission, disabled: formDisabled || fieldDisabled, toggleMask: true })] }) }));
+};
+export var DefaultPasswordFormViewWidget = function (_a) {
+    var _b;
+    var formik = _a.formik, fieldContext = _a.fieldContext;
+    var fieldMetadata = fieldContext.fieldMetadata;
+    var fieldLayoutInfo = fieldContext.field;
+    var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
+    var _c = useState(false), isText = _c[0], setIsText = _c[1];
+    return (_jsxs("div", { className: "mt-2 flex-column gap-2", children: [_jsx("p", { className: "m-0 form-field-label font-medium", children: fieldLabel }), _jsxs("div", { className: "flex align-items-center gap-4", children: [_jsx("p", { className: "m-0", children: isText ? formik.values[fieldLayoutInfo.attrs.name] : "••••••••" }), _jsx("i", { className: "pi ".concat(isText ? 'pi-eye' : 'pi-eye-slash'), onClick: function () { return setIsText(!isText); }, style: { cursor: 'pointer' } })] })] }));
+};
 //# sourceMappingURL=SolidPasswordField.js.map