@fovestta2/web-react 1.1.0

package/dist/components/FvMonthYearField.js

@@ -0,0 +1,139 @@
+"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.FvMonthYearField = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvMonthYearField = ({ label = '', value, schema, disabled = false, readonly = false, min, max, className = '', inputClassName = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    const [derivedMin, setDerivedMin] = (0, react_1.useState)(min);
+    const [derivedMax, setDerivedMax] = (0, react_1.useState)(max);
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        extractConstraintsFromSchema();
+    }, [schema, min, max]);
+    (0, react_1.useEffect)(() => {
+        validateValue(value);
+    }, [value, schema]);
+    const formatMonth = (date) => {
+        if (!date)
+            return undefined;
+        const d = new Date(date);
+        if (isNaN(d.getTime()))
+            return undefined;
+        return d.toISOString().slice(0, 7);
+    };
+    const extractConstraintsFromSchema = () => {
+        var _a, _b;
+        let newMin = min;
+        let newMax = max;
+        if (schema === null || schema === void 0 ? void 0 : schema.rules) {
+            for (const rule of schema.rules) {
+                if (rule.name === 'minDate' && !newMin) {
+                    newMin = formatMonth((_a = rule.params) === null || _a === void 0 ? void 0 : _a['value']);
+                }
+                if (rule.name === 'maxDate' && !newMax) {
+                    newMax = formatMonth((_b = rule.params) === null || _b === void 0 ? void 0 : _b['value']);
+                }
+            }
+        }
+        setDerivedMin(newMin);
+        setDerivedMax(newMax);
+    };
+    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) => {
+        onChange(e.target.value);
+    };
+    const handleBlur = (e) => {
+        validateValue(value);
+        if (onBlur)
+            onBlur();
+    };
+    const handleFocus = (e) => {
+        if (onFocus)
+            onFocus();
+    };
+    const openPicker = () => {
+        if (disabled || readonly)
+            return;
+        if (inputRef.current) {
+            if ('showPicker' in HTMLInputElement.prototype) {
+                try {
+                    inputRef.current.showPicker();
+                }
+                catch (_a) {
+                    inputRef.current.click();
+                }
+            }
+            else {
+                inputRef.current.click();
+            }
+        }
+    };
+    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_DATE: `Date must be after ${derivedMin}`,
+            ERR_MAX_DATE: `Date must be before ${derivedMax}`,
+        };
+        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", { ref: inputRef, type: "month", onClick: openPicker, value: value, onChange: handleInput, onBlur: handleBlur, onFocus: handleFocus, disabled: disabled, readOnly: readonly, min: derivedMin, max: derivedMax, 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' : 'pointer',
+                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.FvMonthYearField = FvMonthYearField;

package/dist/components/FvNameCode.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ValidationSchema } from '@fovestta2/validation-engine';
+export interface SearchSelectOption {
+    code: string;
+    name: string;
+    value: any;
+}
+export interface FvNameCodeProps {
+    label?: string;
+    placeholder?: string;
+    options: SearchSelectOption[];
+    value: any;
+    schema?: ValidationSchema;
+    disabled?: boolean;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    onChange: (value: any) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+}
+export declare const FvNameCode: React.FC<FvNameCodeProps>;

package/dist/components/FvNameCode.js

@@ -0,0 +1,239 @@
+"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.FvNameCode = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvNameCode = ({ label = '', placeholder = 'Search by Code or Name', options = [], value, schema, disabled = false, className = '', inputClassName = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(options);
+    const [highlightedIndex, setHighlightedIndex] = (0, react_1.useState)(-1);
+    const containerRef = (0, react_1.useRef)(null);
+    const listRef = (0, react_1.useRef)(null);
+    // Sync initial and prop changes
+    (0, react_1.useEffect)(() => {
+        validateValue(value);
+        const selectedOption = options.find((o) => o.value === value);
+        if (selectedOption) {
+            setSearchText(`${selectedOption.code} - ${selectedOption.name}`);
+        }
+        else {
+            if (value === null || value === undefined) {
+                setSearchText('');
+            }
+        }
+        setFilteredOptions(options);
+    }, [value, options, schema]);
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                if (isOpen) {
+                    closeDropdown();
+                }
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen, value, options]);
+    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 filterOptions = (term) => {
+        if (!term) {
+            setFilteredOptions(options);
+            return;
+        }
+        const lowerTerm = term.toLowerCase();
+        const filtered = options.filter((opt) => opt.code.toLowerCase().includes(lowerTerm) || opt.name.toLowerCase().includes(lowerTerm));
+        setFilteredOptions(filtered);
+    };
+    const handleSearchChange = (e) => {
+        const term = e.target.value;
+        setSearchText(term);
+        filterOptions(term);
+        if (!isOpen)
+            setIsOpen(true);
+    };
+    const openDropdown = () => {
+        if (disabled)
+            return;
+        setIsOpen(true);
+        filterOptions(searchText);
+        setHighlightedIndex(filteredOptions.length === 1 ? 0 : -1);
+        if (onFocus)
+            onFocus();
+    };
+    const closeDropdown = () => {
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+        const selectedOption = options.find((o) => o.value === value);
+        if (selectedOption) {
+            setSearchText(`${selectedOption.code} - ${selectedOption.name}`);
+        }
+        else if (!value) {
+            setSearchText('');
+        }
+        validateValue(value);
+        if (onBlur)
+            onBlur();
+    };
+    const selectOption = (option) => {
+        onChange(option.value);
+        setSearchText(`${option.code} - ${option.name}`);
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+        validateValue(option.value);
+    };
+    const scrollToHighlighted = (index) => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        const items = list.querySelectorAll('.fv-name-code-dropdown-item');
+        const item = items[index];
+        if (item) {
+            const listRect = list.getBoundingClientRect();
+            const itemRect = item.getBoundingClientRect();
+            if (itemRect.bottom > listRect.bottom) {
+                list.scrollTop += itemRect.bottom - listRect.bottom;
+            }
+            else if (itemRect.top < listRect.top) {
+                list.scrollTop -= listRect.top - itemRect.top;
+            }
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (!isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter')) {
+            openDropdown();
+            e.preventDefault();
+            return;
+        }
+        if (!isOpen)
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                setHighlightedIndex((prev) => {
+                    const next = (prev + 1) % filteredOptions.length;
+                    scrollToHighlighted(next);
+                    return next;
+                });
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setHighlightedIndex((prev) => {
+                    const next = (prev - 1 + filteredOptions.length) % filteredOptions.length;
+                    scrollToHighlighted(next);
+                    return next;
+                });
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (filteredOptions.length === 1) {
+                    selectOption(filteredOptions[0]);
+                }
+                else if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
+                    selectOption(filteredOptions[highlightedIndex]);
+                }
+                break;
+            case 'Escape':
+            case 'Tab':
+                closeDropdown();
+                break;
+        }
+    };
+    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_DUPLICATE: 'This value already exists',
+        };
+        return errorMessages[errorMessage] || errorMessage;
+    };
+    return (react_1.default.createElement("div", { ref: containerRef, className: `fv-name-code-container ${className}`, style: { marginBottom: '16px', display: 'flex', flexDirection: 'column', position: 'relative' }, onKeyDown: handleKeyDown },
+        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: searchText, onChange: handleSearchChange, onFocus: openDropdown, disabled: disabled, placeholder: (searchText || isOpen) ? '' : 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 ? { opacity: 0.6 } : {})
+            } }),
+        isOpen && !disabled && (react_1.default.createElement("div", { ref: listRef, className: "fv-name-code-dropdown-list", style: {
+                position: 'absolute',
+                top: '100%',
+                left: 0,
+                right: 0,
+                marginTop: '4px',
+                backgroundColor: '#fff',
+                border: '1px solid #ccc',
+                borderRadius: '4px',
+                boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+                maxHeight: '200px',
+                overflowY: 'auto',
+                zIndex: 1000
+            } }, filteredOptions.length === 0 ? (react_1.default.createElement("div", { style: { padding: '10px', textAlign: 'center', color: '#999', fontSize: '13px' } }, "No results found")) : (filteredOptions.map((option, index) => {
+            const isHighlighted = index === highlightedIndex;
+            return (react_1.default.createElement("div", { key: index, className: "fv-name-code-dropdown-item", onClick: () => selectOption(option), onMouseEnter: () => setHighlightedIndex(index), style: {
+                    padding: '10px 12px',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    cursor: 'pointer',
+                    borderBottom: '1px solid #f0f0f0',
+                    backgroundColor: isHighlighted ? '#f0f7ff' : '#fff'
+                } },
+                react_1.default.createElement("span", { style: { color: '#0056b3', fontWeight: 600, fontSize: '14px', whiteSpace: 'nowrap' } }, option.code),
+                react_1.default.createElement("span", { style: { color: '#333', fontSize: '14px', overflow: 'hidden', textOverflow: 'ellipsis', textAlign: 'right' } }, option.name)));
+        })))),
+        errorMessage && (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { marginTop: '4px', fontSize: '12px', color: '#dc3545' } },
+            "\u26A0 ",
+            getErrorMessage()))));
+};
+exports.FvNameCode = FvNameCode;

package/dist/components/FvNumberField.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ValidationSchema } from '@fovestta2/validation-engine';
+export interface FvNumberFieldProps {
+    label?: string;
+    placeholder?: string;
+    value: number | '';
+    schema?: ValidationSchema;
+    disabled?: boolean;
+    readonly?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    onChange: (value: number | '') => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+}
+export declare const FvNumberField: React.FC<FvNumberFieldProps>;

package/dist/components/FvNumberField.js

@@ -0,0 +1,98 @@
+"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.FvNumberField = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvNumberField = ({ label = '', placeholder = '', value, schema, disabled = false, readonly = false, min, max, step = 1, 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) => {
+        const val = e.target.value;
+        onChange(val === '' ? '' : Number(val));
+    };
+    const handleBlur = (e) => {
+        validateValue(value);
+        if (onBlur)
+            onBlur();
+    };
+    const handleFocus = (e) => {
+        if (onFocus)
+            onFocus();
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === '-') {
+            e.preventDefault();
+        }
+    };
+    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_NUMERIC_INVALID: 'Please enter a valid number',
+            ERR_RANGE_INVALID: 'Number is out of range',
+            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: "number", value: value, onChange: handleInput, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, disabled: disabled, readOnly: readonly, placeholder: placeholder, min: min, max: max, step: step, 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.FvNumberField = FvNumberField;

package/dist/components/FvPasswordField.d.ts

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

package/dist/components/FvPasswordField.js

@@ -0,0 +1,114 @@
+"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.FvPasswordField = void 0;
+const react_1 = __importStar(require("react"));
+const validation_engine_1 = require("@fovestta2/validation-engine");
+const FvPasswordField = ({ label = 'Password', placeholder = '••••••••', value, schema, disabled = false, readonly = false, className = '', inputClassName = '', labelClassName = '', errorClassName = '', onChange, onBlur, onFocus, }) => {
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    const [showPassword, setShowPassword] = (0, react_1.useState)(false);
+    (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) => {
+        onChange(e.target.value);
+    };
+    const handleBlur = (e) => {
+        validateValue(value);
+        if (onBlur)
+            onBlur();
+    };
+    const handleFocus = (e) => {
+        if (onFocus)
+            onFocus();
+    };
+    const toggleVisibility = () => {
+        if (disabled)
+            return;
+        setShowPassword(!showPassword);
+    };
+    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: 'Password is required',
+            ERR_MIN_LENGTH: 'Password is too short',
+            ERR_REGEX_MISMATCH: 'Invalid password format',
+            ERR_PASSWORD_TOO_SHORT: 'Password must be at least 8 characters',
+            ERR_PASSWORD_MISSING_UPPERCASE: 'Uppercase letter missing',
+            ERR_PASSWORD_MISSING_LOWERCASE: 'Lowercase letter missing',
+            ERR_PASSWORD_MISSING_NUMBER: 'At least one number missing',
+            ERR_PASSWORD_MISSING_SPECIAL_CHAR: 'Special character missing',
+        };
+        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("div", { style: { position: 'relative', display: 'flex', alignItems: 'center', width: '100%' } },
+            react_1.default.createElement("input", { type: showPassword ? 'text' : 'password', 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',
+                    paddingRight: '40px',
+                    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 } : {})
+                } }),
+            react_1.default.createElement("button", { type: "button", onClick: toggleVisibility, disabled: disabled, style: {
+                    position: 'absolute',
+                    right: '10px',
+                    background: 'none',
+                    border: 'none',
+                    cursor: disabled ? 'not-allowed' : 'pointer',
+                    padding: '0',
+                    fontSize: '14px',
+                    color: '#666'
+                } }, showPassword ? 'Hide' : 'Show')),
+        errorMessage && (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { marginTop: '4px', fontSize: '12px', color: '#dc3545' } },
+            "\u26A0 ",
+            getErrorMessage()))));
+};
+exports.FvPasswordField = FvPasswordField;

package/dist/components/FvPfField.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ValidationSchema } from '@fovestta2/validation-engine';
+export interface FvPfFieldProps {
+    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 FvPfField: React.FC<FvPfFieldProps>;