@fovestta2/web-react 1.1.0

package/dist/components/FvEmailField.js

@@ -0,0 +1,103 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FvEmailField = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvEmailField = ({ label = 'Email Address', placeholder = 'e.g. john@example.com', value, schema, disabled = false, readonly = false, className = '', inputClassName = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    const defaultSchema = schema || {
+        controlType: 'EntryField',
+        errorPriority: ['required', 'regex'],
+        rules: [
+            {
+                name: 'regex',
+                params: {
+                    pattern: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$',
+                },
+                errorKey: 'ERR_EMAIL_INVALID',
+            },
+        ],
+    };
+    (0, react_1.useEffect)(() => {
+        validateValue(value);
+    }, [value, schema]);
+    const validateValue = (val) => {
+        const result = validation_engine_1.Validator.validate(val, schema || defaultSchema);
+        if (!result.isValid && result.errorKey) {
+            setErrorMessage(result.errorKey);
+        }
+        else {
+            setErrorMessage(null);
+        }
+    };
+    const handleInput = (e) => {
+        onChange(e.target.value);
+    };
+    const handleBlur = (e) => {
+        validateValue(value);
+        if (onBlur)
+            onBlur();
+    };
+    const handleFocus = (e) => {
+        if (onFocus)
+            onFocus();
+    };
+    const isRequired = () => {
+        var _a;
+        return ((_a = (schema || defaultSchema).rules) === null || _a === void 0 ? void 0 : _a.some((r) => { var _a; return r.name === 'required' && ((_a = r.params) === null || _a === void 0 ? void 0 : _a['enabled']); })) || false;
+    };
+    const getErrorMessage = () => {
+        if (!errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'Email is required',
+            ERR_EMAIL_INVALID: 'Invalid email format',
+            ERR_REGEX_MISMATCH: 'Invalid email format',
+            ERR_DUPLICATE: 'Email already exists',
+        };
+        return errorMessages[errorMessage] || errorMessage;
+    };
+    return (react_1.default.createElement("div", { className: `fv-field-container ${className}`, style: { marginBottom: '16px', display: 'flex', flexDirection: 'column' } },
+        label && (react_1.default.createElement("label", { className: `fv-label ${labelClassName}`, style: { marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: disabled ? '#999' : '#333' } },
+            label,
+            isRequired() && react_1.default.createElement("span", { className: "fv-required", style: { color: '#dc3545', fontWeight: 'bold' } }, " *"))),
+        react_1.default.createElement("input", { type: "email", value: value, onChange: handleInput, onBlur: handleBlur, onFocus: handleFocus, disabled: disabled, readOnly: readonly, placeholder: placeholder, className: `fv-input ${errorMessage ? 'fv-input-error' : ''} ${inputClassName}`, style: {
+                padding: '10px',
+                border: errorMessage ? '1px solid #dc3545' : '1px solid #ccc',
+                borderRadius: '4px',
+                fontSize: '14px',
+                backgroundColor: disabled ? '#f5f5f5' : '#fff',
+                cursor: disabled ? 'not-allowed' : 'text',
+                outline: 'none',
+                boxSizing: 'border-box',
+                width: '100%',
+                ...((disabled || readonly) ? { opacity: 0.6 } : {})
+            } }),
+        errorMessage && (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { marginTop: '4px', fontSize: '12px', color: '#dc3545' } },
+            "\u26A0 ",
+            getErrorMessage()))));
+};
+exports.FvEmailField = FvEmailField;

package/dist/components/FvEntryField.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ValidationSchema } from '@fovestta2/validation-engine';
+export interface FvEntryFieldProps {
+    label?: string;
+    placeholder?: string;
+    value: string;
+    schema?: ValidationSchema;
+    disabled?: boolean;
+    readonly?: boolean;
+    type?: 'text' | 'password' | 'email';
+    allowAlphabetsOnly?: boolean;
+    maxLength?: number;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+}
+export declare const FvEntryField: React.FC<FvEntryFieldProps>;

package/dist/components/FvEntryField.js

@@ -0,0 +1,101 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FvEntryField = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvEntryField = ({ label = '', placeholder = '', value, schema, disabled = false, readonly = false, type = 'text', allowAlphabetsOnly = false, maxLength, className = '', inputClassName = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        validateValue(value);
+    }, [value, schema]);
+    const validateValue = (val) => {
+        if (!schema)
+            return;
+        const result = validation_engine_1.Validator.validate(val, schema);
+        // In React this is fully controlled by state, without formControl injection
+        if (!result.isValid && result.errorKey) {
+            setErrorMessage(result.errorKey);
+        }
+        else {
+            setErrorMessage(null);
+        }
+    };
+    const handleInput = (e) => {
+        let newValue = e.target.value;
+        if (allowAlphabetsOnly) {
+            newValue = newValue.replace(/[^a-zA-Z ]/g, '');
+        }
+        if (maxLength && newValue.length > maxLength) {
+            newValue = newValue.substring(0, maxLength);
+        }
+        onChange(newValue);
+    };
+    const handleBlur = (e) => {
+        validateValue(value);
+        if (onBlur)
+            onBlur();
+    };
+    const handleFocus = (e) => {
+        if (onFocus)
+            onFocus();
+    };
+    const isRequired = () => {
+        var _a;
+        return ((_a = schema === null || schema === void 0 ? void 0 : schema.rules) === null || _a === void 0 ? void 0 : _a.some((r) => { var _a; return r.name === 'required' && ((_a = r.params) === null || _a === void 0 ? void 0 : _a['enabled']); })) || false;
+    };
+    const getErrorMessage = () => {
+        if (!errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'This field is required',
+            ERR_MIN_LENGTH: 'Value is too short',
+            ERR_MAX_LENGTH: 'Value is too long',
+            ERR_REGEX_MISMATCH: 'Invalid format',
+            ERR_DUPLICATE: 'This value already exists',
+        };
+        return errorMessages[errorMessage] || errorMessage;
+    };
+    return (react_1.default.createElement("div", { className: `fv-field-container ${className}`, style: { marginBottom: '16px', display: 'flex', flexDirection: 'column' } },
+        label && (react_1.default.createElement("label", { className: `fv-label ${labelClassName}`, style: { marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: disabled ? '#999' : '#333' } },
+            label,
+            isRequired() && react_1.default.createElement("span", { className: "fv-required", style: { color: '#dc3545', fontWeight: 'bold' } }, " *"))),
+        react_1.default.createElement("input", { type: type, value: value, onChange: handleInput, onBlur: handleBlur, onFocus: handleFocus, disabled: disabled, readOnly: readonly, placeholder: placeholder, maxLength: maxLength, className: `fv-input ${errorMessage ? 'fv-input-error' : ''} ${inputClassName}`, style: {
+                padding: '10px',
+                border: errorMessage ? '1px solid #dc3545' : '1px solid #ccc',
+                borderRadius: '4px',
+                fontSize: '14px',
+                backgroundColor: disabled ? '#f5f5f5' : '#fff',
+                cursor: disabled ? 'not-allowed' : 'text',
+                outline: 'none',
+                boxSizing: 'border-box',
+                width: '100%',
+                ...((disabled || readonly) ? { opacity: 0.6 } : {})
+            } }),
+        errorMessage && (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { marginTop: '4px', fontSize: '12px', color: '#dc3545' } },
+            "\u26A0 ",
+            getErrorMessage()))));
+};
+exports.FvEntryField = FvEntryField;

package/dist/components/FvEsiField.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ValidationSchema } from '@fovestta2/validation-engine';
+export interface FvEsiFieldProps {
+    label?: string;
+    value: string;
+    schema?: ValidationSchema;
+    disabled?: boolean;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+}
+export declare const FvEsiField: React.FC<FvEsiFieldProps>;

package/dist/components/FvEsiField.js

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FvEsiField = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvEsiField = ({ label = 'ESI Number', value, schema, disabled = false, className = '', inputClassName = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        validateValue(value);
+    }, [value, schema]);
+    const validateValue = (val) => {
+        if (!schema)
+            return;
+        const result = validation_engine_1.Validator.validate(val, schema);
+        if (!result.isValid && result.errorKey) {
+            setErrorMessage(result.errorKey);
+        }
+        else {
+            setErrorMessage(null);
+        }
+    };
+    const handleInput = (e) => {
+        let rawVal = e.target.value;
+        const numericValue = rawVal.replace(/[^0-9]/g, '');
+        const truncatedValue = numericValue.substring(0, 17);
+        onChange(truncatedValue);
+    };
+    const handleBlur = (e) => {
+        validateValue(value);
+        if (onBlur)
+            onBlur();
+    };
+    const handleFocus = (e) => {
+        if (onFocus)
+            onFocus();
+    };
+    const isRequired = () => {
+        var _a;
+        return ((_a = schema === null || schema === void 0 ? void 0 : schema.rules) === null || _a === void 0 ? void 0 : _a.some((r) => { var _a; return r.name === 'required' && ((_a = r.params) === null || _a === void 0 ? void 0 : _a['enabled']); })) || false;
+    };
+    const getErrorMessage = () => {
+        if (!errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'This field is required',
+        };
+        return errorMessages[errorMessage] || errorMessage;
+    };
+    return (react_1.default.createElement("div", { className: `fv-field-container ${className}`, style: { marginBottom: '16px', display: 'flex', flexDirection: 'column' } },
+        label && (react_1.default.createElement("label", { className: `fv-label ${labelClassName}`, style: { marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: disabled ? '#999' : '#333' } },
+            label,
+            isRequired() && react_1.default.createElement("span", { className: "fv-required", style: { color: '#dc3545', fontWeight: 'bold' } }, " *"))),
+        react_1.default.createElement("input", { type: "text", value: value, onChange: handleInput, onBlur: handleBlur, onFocus: handleFocus, disabled: disabled, className: `fv-input ${errorMessage ? 'fv-input-error' : ''} ${inputClassName}`, style: {
+                padding: '10px',
+                border: errorMessage ? '1px solid #dc3545' : '1px solid #ccc',
+                borderRadius: '4px',
+                fontSize: '14px',
+                backgroundColor: disabled ? '#f5f5f5' : '#fff',
+                cursor: disabled ? 'not-allowed' : 'text',
+                outline: 'none',
+                boxSizing: 'border-box',
+                width: '100%',
+                ...(disabled ? { opacity: 0.6 } : {})
+            } }),
+        errorMessage && (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { marginTop: '4px', fontSize: '12px', color: '#dc3545' } },
+            "\u26A0 ",
+            getErrorMessage()))));
+};
+exports.FvEsiField = FvEsiField;

package/dist/components/FvFileSelector.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ValidationSchema } from '@fovestta2/validation-engine';
+export interface FileInfo {
+    file: File | string;
+    name: string;
+    size: number;
+    type: string;
+}
+export interface FvFileSelectorProps {
+    label?: string;
+    placeholder?: string;
+    value: FileInfo | null;
+    schema?: ValidationSchema;
+    disabled?: boolean;
+    accept?: string;
+    maxSize?: number;
+    className?: string;
+    errorClassName?: string;
+    onChange: (value: FileInfo | null) => void;
+    onBlur?: () => void;
+}
+export declare const FvFileSelector: React.FC<FvFileSelectorProps>;

package/dist/components/FvFileSelector.js

@@ -0,0 +1,153 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FvFileSelector = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvFileSelector = ({ label = '', placeholder = 'Upload', value, schema, disabled = false, accept = '*/*', maxSize, className = '', errorClassName = '', onChange, onBlur, }) => {
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    const fileInputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        validateValue(value);
+    }, [value, schema]);
+    const validateValue = (val) => {
+        if (!schema)
+            return;
+        const result = validation_engine_1.Validator.validate(val, schema);
+        if (!result.isValid && result.errorKey) {
+            setErrorMessage(result.errorKey);
+        }
+        else {
+            setErrorMessage(null);
+        }
+    };
+    const handleFileChange = (e) => {
+        const files = e.target.files;
+        if (files && files.length > 0) {
+            const file = files[0];
+            if (maxSize && file.size > maxSize) {
+                alert(`File size exceeds the maximum allowed size of ${formatFileSize(maxSize)}`);
+                if (fileInputRef.current)
+                    fileInputRef.current.value = '';
+                return;
+            }
+            const fileInfo = {
+                file: file,
+                name: file.name,
+                size: file.size,
+                type: file.type,
+            };
+            onChange(fileInfo);
+            if (onBlur)
+                onBlur();
+        }
+    };
+    const openFileDialog = () => {
+        if (!disabled && fileInputRef.current) {
+            fileInputRef.current.click();
+        }
+    };
+    const removeFile = (e) => {
+        e.stopPropagation();
+        onChange(null);
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+        if (onBlur)
+            onBlur();
+    };
+    const formatFileSize = (bytes) => {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+    };
+    const getFileIcon = () => {
+        if (!value)
+            return 'description';
+        const type = value.type || '';
+        const name = value.name || '';
+        if (type.includes('pdf') || name.toLowerCase().endsWith('.pdf'))
+            return 'picture_as_pdf';
+        if (type.includes('image'))
+            return 'image';
+        if (type.includes('excel') || type.includes('spreadsheet') || name.toLowerCase().endsWith('.xls') || name.toLowerCase().endsWith('.xlsx'))
+            return 'table_view';
+        if (type.includes('word') || name.toLowerCase().endsWith('.doc') || name.toLowerCase().endsWith('.docx'))
+            return 'description';
+        return 'description';
+    };
+    const isRequired = () => {
+        var _a;
+        return ((_a = schema === null || schema === void 0 ? void 0 : schema.rules) === null || _a === void 0 ? void 0 : _a.some((r) => { var _a; return r.name === 'required' && ((_a = r.params) === null || _a === void 0 ? void 0 : _a['enabled']); })) || false;
+    };
+    const getErrorMessage = () => {
+        if (!errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'This field is required',
+            ERR_INVALID_FILE: 'Invalid file',
+        };
+        return errorMessages[errorMessage] || errorMessage;
+    };
+    return (react_1.default.createElement("div", { className: `fv-field-container ${className}`, style: { marginBottom: '16px', display: 'flex', flexDirection: 'column' } },
+        label && (react_1.default.createElement("label", { className: "fv-label", style: { marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: disabled ? '#999' : '#333' } },
+            label,
+            isRequired() && react_1.default.createElement("span", { className: "fv-required", style: { color: '#dc3545', fontWeight: 'bold' } }, " *"))),
+        react_1.default.createElement("div", { className: `fv-file-upload-box ${errorMessage ? 'error' : ''} ${disabled ? 'disabled' : ''}`, onClick: openFileDialog, style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                padding: '12px 16px',
+                border: errorMessage ? '1px dashed #dc3545' : '1px dashed #ccc',
+                borderRadius: '8px',
+                backgroundColor: disabled ? '#f9f9f9' : '#fafafa',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                transition: 'all 0.2sease',
+                opacity: disabled ? 0.6 : 1
+            } },
+            react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', flex: 1, overflow: 'hidden' } },
+                react_1.default.createElement("span", { className: "material-icons-outlined", style: { color: '#007bff', marginRight: '12px', fontSize: '24px' } }, "\uD83D\uDCC1"),
+                react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', overflow: 'hidden' } }, value ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("span", { style: { fontSize: '14px', fontWeight: 500, color: '#333', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, value.name),
+                    value.size > 0 && (react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, formatFileSize(value.size))))) : (react_1.default.createElement("span", { style: { fontSize: '14px', color: '#666' } }, placeholder)))),
+            value && !disabled && (react_1.default.createElement("button", { type: "button", onClick: removeFile, style: {
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    color: '#dc3545',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: '4px'
+                } }, "\u2715"))),
+        react_1.default.createElement("input", { type: "file", ref: fileInputRef, onChange: handleFileChange, accept: accept, disabled: disabled, style: { display: 'none' } }),
+        errorMessage && (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { marginTop: '4px', fontSize: '12px', color: '#dc3545' } },
+            "\u26A0 ",
+            getErrorMessage()))));
+};
+exports.FvFileSelector = FvFileSelector;

package/dist/components/FvIbanField.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ValidationSchema } from '@fovestta2/validation-engine';
+export interface FvIbanFieldProps {
+    label?: string;
+    value: string;
+    schema?: ValidationSchema;
+    disabled?: boolean;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+}
+export declare const FvIbanField: React.FC<FvIbanFieldProps>;

package/dist/components/FvIbanField.js

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FvIbanField = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvIbanField = ({ label = 'IBAN Number', value, schema, disabled = false, className = '', inputClassName = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        validateValue(value);
+    }, [value, schema]);
+    const validateValue = (val) => {
+        if (!schema)
+            return;
+        const result = validation_engine_1.Validator.validate(val, schema);
+        if (!result.isValid && result.errorKey) {
+            setErrorMessage(result.errorKey);
+        }
+        else {
+            setErrorMessage(null);
+        }
+    };
+    const handleInput = (e) => {
+        let rawVal = e.target.value;
+        const formatted = rawVal.replace(/[^a-zA-Z0-9]/g, '').toUpperCase();
+        const truncated = formatted.substring(0, 34);
+        onChange(truncated);
+    };
+    const handleBlur = (e) => {
+        validateValue(value);
+        if (onBlur)
+            onBlur();
+    };
+    const handleFocus = (e) => {
+        if (onFocus)
+            onFocus();
+    };
+    const isRequired = () => {
+        var _a;
+        return ((_a = schema === null || schema === void 0 ? void 0 : schema.rules) === null || _a === void 0 ? void 0 : _a.some((r) => { var _a; return r.name === 'required' && ((_a = r.params) === null || _a === void 0 ? void 0 : _a['enabled']); })) || false;
+    };
+    const getErrorMessage = () => {
+        if (!errorMessage)
+            return '';
+        const errorMessages = {
+            ERR_REQUIRED: 'This field is required',
+        };
+        return errorMessages[errorMessage] || errorMessage;
+    };
+    return (react_1.default.createElement("div", { className: `fv-field-container ${className}`, style: { marginBottom: '16px', display: 'flex', flexDirection: 'column' } },
+        label && (react_1.default.createElement("label", { className: `fv-label ${labelClassName}`, style: { marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: disabled ? '#999' : '#333' } },
+            label,
+            isRequired() && react_1.default.createElement("span", { className: "fv-required", style: { color: '#dc3545', fontWeight: 'bold' } }, " *"))),
+        react_1.default.createElement("input", { type: "text", value: value, onChange: handleInput, onBlur: handleBlur, onFocus: handleFocus, disabled: disabled, className: `fv-input ${errorMessage ? 'fv-input-error' : ''} ${inputClassName}`, style: {
+                padding: '10px',
+                border: errorMessage ? '1px solid #dc3545' : '1px solid #ccc',
+                borderRadius: '4px',
+                fontSize: '14px',
+                backgroundColor: disabled ? '#f5f5f5' : '#fff',
+                cursor: disabled ? 'not-allowed' : 'text',
+                outline: 'none',
+                boxSizing: 'border-box',
+                width: '100%',
+                ...(disabled ? { opacity: 0.6 } : {})
+            } }),
+        errorMessage && (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { marginTop: '4px', fontSize: '12px', color: '#dc3545' } },
+            "\u26A0 ",
+            getErrorMessage()))));
+};
+exports.FvIbanField = FvIbanField;

package/dist/components/FvIfscField.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ValidationSchema } from '@fovestta2/validation-engine';
+export interface FvIfscFieldProps {
+    label?: string;
+    value: string;
+    schema?: ValidationSchema;
+    disabled?: boolean;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+}
+export declare const FvIfscField: React.FC<FvIfscFieldProps>;