@rsuci/shared-form-components 1.0.26 → 1.0.29

package/dist/components/inputs/CheckboxInput.d.ts

@@ -13,6 +13,7 @@ export interface CheckboxInputProps {
     onBlur?: () => void;
     error?: string;
     disabled?: boolean;
+    isConsultationMode?: boolean;
 }
 declare const CheckboxInput: React.FC<CheckboxInputProps>;
 export default CheckboxInput;

package/dist/components/inputs/CheckboxInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/CheckboxInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAKxE,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,UAAU,CAAA;KAAE,CAAC;IACxD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmF/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/CheckboxInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAMxE,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,UAAU,CAAA;KAAE,CAAC;IACxD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuF/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/inputs/CheckboxInput.js

@@ -7,8 +7,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { VariableValueConverter } from '../../lib/utils/variableValueConverter';
 import { AlertCircle } from 'lucide-react';
 import { applyComponentStyle } from '../../utils/styleUtils';
-const CheckboxInput = ({ variable, value, onChange, onBlur, error, disabled }) => {
+import { isComponentReadonly } from '../../utils/componentStateUtils';
+const CheckboxInput = ({ variable, value, onChange, onBlur, error, disabled, isConsultationMode = false }) => {
     const { textStyle, containerStyle } = applyComponentStyle(variable.componentStyle);
+    // Déterminer si le composant est en lecture seule (checkbox ne supporte pas readonly, on utilise disabled)
+    const isReadonly = isComponentReadonly(variable, isConsultationMode);
+    const effectiveDisabled = disabled || isReadonly;
     // Récupérer les options depuis la propriété valeur OU valeurDefaut (format: "Code1#Designation1|Code2#Designation2")
     const optionsSource = variable.proprietes?.valeur || variable.valeurDefaut;
     const options = optionsSource && typeof optionsSource === 'string'
@@ -17,7 +21,7 @@ const CheckboxInput = ({ variable, value, onChange, onBlur, error, disabled }) =
     // Si pas d'options définies, utiliser le mode simple (boolean)
     if (options.length === 0) {
         const booleanValue = Boolean(value);
-        return (_jsx("div", { style: containerStyle, children: _jsxs("label", { className: "flex items-center space-x-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: booleanValue, onChange: (e) => onChange(e.target.checked ? 'true' : ''), onBlur: onBlur, disabled: disabled, className: `w-4 h-4 text-green-600 border-gray-300 rounded focus:ring-green-500 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}` }), _jsx("span", { className: `text-sm ${disabled ? 'text-gray-400' : 'text-gray-700'}`, style: textStyle, children: variable.designation })] }) }));
+        return (_jsx("div", { style: containerStyle, children: _jsxs("label", { className: "flex items-center space-x-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: booleanValue, onChange: (e) => onChange(e.target.checked ? 'true' : ''), onBlur: onBlur, disabled: effectiveDisabled, className: `w-4 h-4 text-green-600 border-gray-300 rounded focus:ring-green-500 ${effectiveDisabled ? 'cursor-not-allowed' : 'cursor-pointer'}` }), _jsx("span", { className: `text-sm ${effectiveDisabled ? 'text-gray-400' : 'text-gray-700'}`, style: textStyle, children: variable.designation })] }) }));
     }
     // Mode multiple avec options (format stockage: "CODE1|CODE2|CODE3")
     const selectedCodes = VariableValueConverter.parse(value, 'CHECKBOX') || [];
@@ -35,6 +39,6 @@ const CheckboxInput = ({ variable, value, onChange, onBlur, error, disabled }) =
         const serializedValue = VariableValueConverter.serialize(newSelectedCodes, 'CHECKBOX');
         onChange(serializedValue);
     };
-    return (_jsxs("div", { className: "space-y-2", style: containerStyle, children: [_jsx("div", { className: "space-y-2", children: options.map((option) => (_jsxs("label", { className: "flex items-center space-x-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: selectedCodes.includes(option.code), onChange: (e) => handleOptionChange(option.code, e.target.checked), onBlur: onBlur, disabled: disabled, className: `w-4 h-4 text-green-600 border-gray-300 rounded focus:ring-green-500 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}` }), _jsx("span", { className: `text-sm ${disabled ? 'text-gray-400' : 'text-gray-700'}`, style: textStyle, children: option.designation })] }, option.code))) }), error && (_jsxs("div", { className: "flex items-center space-x-1 text-red-600 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsx("span", { children: error })] }))] }));
+    return (_jsxs("div", { className: "space-y-2", style: containerStyle, children: [_jsx("div", { className: "space-y-2", children: options.map((option) => (_jsxs("label", { className: "flex items-center space-x-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: selectedCodes.includes(option.code), onChange: (e) => handleOptionChange(option.code, e.target.checked), onBlur: onBlur, disabled: effectiveDisabled, className: `w-4 h-4 text-green-600 border-gray-300 rounded focus:ring-green-500 ${effectiveDisabled ? 'cursor-not-allowed' : 'cursor-pointer'}` }), _jsx("span", { className: `text-sm ${effectiveDisabled ? 'text-gray-400' : 'text-gray-700'}`, style: textStyle, children: option.designation })] }, option.code))) }), error && (_jsxs("div", { className: "flex items-center space-x-1 text-red-600 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsx("span", { children: error })] }))] }));
 };
 export default CheckboxInput;

package/dist/components/inputs/ComboboxInput.d.ts

@@ -13,6 +13,7 @@ export interface ComboboxInputProps {
     onBlur?: () => void;
     error?: string;
     disabled?: boolean;
+    isConsultationMode?: boolean;
 }
 declare const ComboboxInput: React.FC<ComboboxInputProps>;
 export default ComboboxInput;

package/dist/components/inputs/ComboboxInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/ComboboxInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIxE,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,UAAU,CAAA;KAAE,CAAC;IACxD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiD/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/ComboboxInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAKxE,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,UAAU,CAAA;KAAE,CAAC;IACxD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoD/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/inputs/ComboboxInput.js

@@ -6,7 +6,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { VariableValueConverter } from '../../lib/utils/variableValueConverter';
 import { AlertCircle } from 'lucide-react';
-const ComboboxInput = ({ variable, value, onChange, onBlur, error, disabled }) => {
+import { isComponentReadonly } from '../../utils/componentStateUtils';
+const ComboboxInput = ({ variable, value, onChange, onBlur, error, disabled, isConsultationMode = false }) => {
+    // Déterminer si le composant est en lecture seule (select ne supporte pas readonly, on utilise disabled)
+    const isReadonly = isComponentReadonly(variable, isConsultationMode);
+    const effectiveDisabled = disabled || isReadonly;
     // Récupérer les options depuis la propriété valeur OU valeurDefaut (format: "Code1#Designation1|Code2#Designation2")
     const optionsSource = variable.proprietes?.valeur || variable.valeurDefaut;
     const allOptions = optionsSource && typeof optionsSource === 'string'
@@ -16,6 +20,6 @@ const ComboboxInput = ({ variable, value, onChange, onBlur, error, disabled }) =
             designation: opt.label
         }));
     const selectedValue = value || '';
-    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("select", { value: selectedValue, onChange: (e) => onChange(e.target.value || ''), onBlur: onBlur, disabled: disabled, className: `w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-gray-900 ${error ? 'border-red-500' : 'border-gray-300'} ${disabled ? 'bg-gray-100 cursor-not-allowed text-gray-500' : 'bg-white'}`, children: [_jsx("option", { value: "", children: "S\u00E9lectionner..." }), allOptions.map((option) => (_jsx("option", { value: option.code, children: option.designation }, option.code)))] }), selectedValue && (_jsx("div", { className: "p-2 bg-green-50 border border-green-200 rounded text-sm", children: _jsxs("span", { className: "text-green-800", children: ["S\u00E9lectionn\u00E9: ", allOptions.find(opt => opt.code === selectedValue)?.designation || selectedValue] }) })), error && (_jsxs("div", { className: "flex items-center space-x-1 text-red-600 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsx("span", { children: error })] }))] }));
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("select", { value: selectedValue, onChange: (e) => onChange(e.target.value || ''), onBlur: onBlur, disabled: effectiveDisabled, className: `w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-gray-900 ${error ? 'border-red-500' : 'border-gray-300'} ${effectiveDisabled ? 'bg-gray-100 cursor-not-allowed text-gray-500' : 'bg-white'}`, children: [_jsx("option", { value: "", children: "S\u00E9lectionner..." }), allOptions.map((option) => (_jsx("option", { value: option.code, children: option.designation }, option.code)))] }), selectedValue && (_jsx("div", { className: "p-2 bg-green-50 border border-green-200 rounded text-sm", children: _jsxs("span", { className: "text-green-800", children: ["S\u00E9lectionn\u00E9: ", allOptions.find(opt => opt.code === selectedValue)?.designation || selectedValue] }) })), error && (_jsxs("div", { className: "flex items-center space-x-1 text-red-600 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsx("span", { children: error })] }))] }));
 };
 export default ComboboxInput;

package/dist/components/inputs/DatePicker.d.ts

@@ -13,6 +13,7 @@ export interface DatePickerProps {
     onBlur?: () => void;
     error?: string;
     disabled?: boolean;
+    isConsultationMode?: boolean;
 }
 declare const DatePicker: React.FC<DatePickerProps>;
 export default DatePicker;

package/dist/components/inputs/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/DatePicker.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIxE,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,MAAM,GAAG,WAAW,CAAA;KAAE,CAAC;IAClE,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoDzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/DatePicker.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAKxE,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,MAAM,GAAG,WAAW,CAAA;KAAE,CAAC;IAClE,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+DzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/inputs/DatePicker.js

@@ -6,9 +6,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { VariableValueConverter } from '../../lib/utils/variableValueConverter';
 import { applyComponentStyle } from '../../utils/styleUtils';
-const DatePicker = ({ variable, value, onChange, onBlur, error, disabled }) => {
+import { isComponentReadonly, readonlyClasses } from '../../utils/componentStateUtils';
+const DatePicker = ({ variable, value, onChange, onBlur, error, disabled, isConsultationMode = false }) => {
     const props = variable.proprietes;
     const { textStyle, containerStyle } = applyComponentStyle(variable.componentStyle);
+    // Déterminer si le composant est en lecture seule
+    const isReadonly = isComponentReadonly(variable, isConsultationMode);
+    // Générer les classes CSS
+    const getInputClasses = () => {
+        const baseClasses = 'w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-gray-900';
+        const errorClasses = error ? 'border-red-500' : 'border-gray-300';
+        if (disabled)
+            return `${baseClasses} ${errorClasses} bg-gray-100 cursor-not-allowed text-gray-500`;
+        if (isReadonly)
+            return `${baseClasses} ${errorClasses} ${readonlyClasses.readonly}`;
+        return `${baseClasses} ${errorClasses} bg-white`;
+    };
     // Conversion de la valeur string vers Date pour l'affichage
     const parsedDate = VariableValueConverter.parse(value, variable.typeCode);
     // Formatage pour l'input selon le type
@@ -36,6 +49,6 @@ const DatePicker = ({ variable, value, onChange, onBlur, error, disabled }) => {
             onChange(serializedValue);
         }
     };
-    return (_jsx("div", { style: containerStyle, children: _jsx("input", { type: inputType, value: inputValue, onChange: handleChange, onBlur: onBlur, min: props?.minDate ? VariableValueConverter.serialize(props.minDate, variable.typeCode) : undefined, max: props?.maxDate ? VariableValueConverter.serialize(props.maxDate, variable.typeCode) : undefined, disabled: disabled, style: textStyle, className: `w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-gray-900 ${error ? 'border-red-500' : 'border-gray-300'} ${disabled ? 'bg-gray-100 cursor-not-allowed text-gray-500' : 'bg-white'}` }) }));
+    return (_jsx("div", { style: containerStyle, children: _jsx("input", { type: inputType, value: inputValue, onChange: handleChange, onBlur: onBlur, min: props?.minDate ? VariableValueConverter.serialize(props.minDate, variable.typeCode) : undefined, max: props?.maxDate ? VariableValueConverter.serialize(props.maxDate, variable.typeCode) : undefined, disabled: disabled, readOnly: isReadonly, style: textStyle, className: getInputClasses() }) }));
 };
 export default DatePicker;

package/dist/components/inputs/EmailInput.d.ts

@@ -13,6 +13,7 @@ export interface EmailInputProps {
     onBlur?: () => void;
     error?: string;
     disabled?: boolean;
+    isConsultationMode?: boolean;
 }
 declare const EmailInput: React.FC<EmailInputProps>;
 export default EmailInput;

package/dist/components/inputs/EmailInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmailInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/EmailInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGxE,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IACrD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwCzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"EmailInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/EmailInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIxE,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IACrD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAID,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmDzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/inputs/EmailInput.js

@@ -6,11 +6,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { applyComponentStyle } from '../../utils/styleUtils';
+import { isComponentReadonly, readonlyClasses } from '../../utils/componentStateUtils';
 const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-const EmailInput = ({ variable, value, onChange, onBlur, error, disabled }) => {
+const EmailInput = ({ variable, value, onChange, onBlur, error, disabled, isConsultationMode = false }) => {
     const stringValue = value || '';
     const [localError, setLocalError] = useState(null);
     const { textStyle, containerStyle } = applyComponentStyle(variable.componentStyle);
+    // Déterminer si le composant est en lecture seule
+    const isReadonly = isComponentReadonly(variable, isConsultationMode);
+    // Générer les classes CSS
+    const getInputClasses = () => {
+        const baseClasses = 'w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-gray-900';
+        const errorClasses = displayError ? 'border-red-500' : 'border-gray-300';
+        if (disabled)
+            return `${baseClasses} ${errorClasses} bg-gray-100 cursor-not-allowed text-gray-500`;
+        if (isReadonly)
+            return `${baseClasses} ${errorClasses} ${readonlyClasses.readonly}`;
+        return `${baseClasses} ${errorClasses} bg-white`;
+    };
     const handleBlur = () => {
         if (stringValue && !EMAIL_REGEX.test(stringValue)) {
             setLocalError('Veuillez saisir une adresse email valide');
@@ -28,6 +41,6 @@ const EmailInput = ({ variable, value, onChange, onBlur, error, disabled }) => {
         }
     };
     const displayError = error || localError;
-    return (_jsx("div", { style: containerStyle, children: _jsx("input", { type: "email", value: stringValue, onChange: handleChange, onBlur: handleBlur, placeholder: variable.proprietes?.placeholder || "exemple@domaine.com", disabled: disabled, style: textStyle, className: `w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-gray-900 ${displayError ? 'border-red-500' : 'border-gray-300'} ${disabled ? 'bg-gray-100 cursor-not-allowed text-gray-500' : 'bg-white'}` }) }));
+    return (_jsx("div", { style: containerStyle, children: _jsx("input", { type: "email", value: stringValue, onChange: handleChange, onBlur: handleBlur, placeholder: variable.proprietes?.placeholder || "exemple@domaine.com", disabled: disabled, readOnly: isReadonly, style: textStyle, className: getInputClasses() }) }));
 };
 export default EmailInput;

package/dist/components/inputs/GPSInput.d.ts

@@ -12,6 +12,7 @@ export interface GPSInputProps {
     onChange: (value: VariableValue) => void;
     error?: string;
     disabled?: boolean;
+    isConsultationMode?: boolean;
 }
 declare const GPSInput: React.FC<GPSInputProps>;
 export default GPSInput;

package/dist/components/inputs/GPSInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GPSInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/GPSInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGxE,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,KAAK,CAAA;KAAE,CAAC;IACnD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuFrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"GPSInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/GPSInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIxE,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,KAAK,CAAA;KAAE,CAAC;IACnD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA2FrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/inputs/GPSInput.js

@@ -6,12 +6,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { AlertCircle } from 'lucide-react';
-const GPSInput = ({ variable, value, onChange, error, disabled }) => {
+import { isComponentReadonly } from '../../utils/componentStateUtils';
+const GPSInput = ({ variable, value, onChange, error, disabled, isConsultationMode = false }) => {
     const [isLoading, setIsLoading] = useState(false);
     const [gpsError, setGpsError] = useState(null);
+    // Déterminer si le composant est en lecture seule (GPS button ne supporte pas readonly, on utilise disabled)
+    const isReadonly = isComponentReadonly(variable, isConsultationMode);
+    const effectiveDisabled = disabled || isReadonly;
     const gpsValue = value;
     const getCurrentLocation = () => {
-        if (disabled)
+        if (effectiveDisabled)
             return;
         setIsLoading(true);
         setGpsError(null);
@@ -39,6 +43,6 @@ const GPSInput = ({ variable, value, onChange, error, disabled }) => {
             setIsLoading(false);
         }, options);
     };
-    return (_jsxs("div", { className: "space-y-3", children: [_jsx("button", { type: "button", onClick: getCurrentLocation, disabled: isLoading || disabled, className: `w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors ${isLoading || disabled ? 'opacity-50 cursor-not-allowed' : ''}`, children: isLoading ? 'Localisation en cours...' : 'Obtenir Position GPS' }), gpsValue && (_jsx("div", { className: "p-3 bg-gray-50 rounded-lg text-sm", children: _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { children: [_jsx("span", { className: "text-gray-700 font-medium", children: "Latitude:" }), _jsx("p", { className: "font-semibold text-gray-900", children: gpsValue.latitude?.toFixed(6) })] }), _jsxs("div", { children: [_jsx("span", { className: "text-gray-700 font-medium", children: "Longitude:" }), _jsx("p", { className: "font-semibold text-gray-900", children: gpsValue.longitude?.toFixed(6) })] }), _jsxs("div", { children: [_jsx("span", { className: "text-gray-700 font-medium", children: "Pr\u00E9cision:" }), _jsxs("p", { className: "font-semibold text-gray-900", children: [gpsValue.precision?.toFixed(0), "m"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-gray-700 font-medium", children: "Horodatage:" }), _jsx("p", { className: "font-semibold text-gray-900", children: new Date(gpsValue.timestamp).toLocaleTimeString() })] })] }) })), (gpsError || error) && (_jsxs("div", { className: "flex items-center space-x-2 text-red-600 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsx("span", { children: gpsError || error })] }))] }));
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("button", { type: "button", onClick: getCurrentLocation, disabled: isLoading || effectiveDisabled, className: `w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors ${isLoading || effectiveDisabled ? 'opacity-50 cursor-not-allowed' : ''}`, children: isLoading ? 'Localisation en cours...' : 'Obtenir Position GPS' }), gpsValue && (_jsx("div", { className: "p-3 bg-gray-50 rounded-lg text-sm", children: _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { children: [_jsx("span", { className: "text-gray-700 font-medium", children: "Latitude:" }), _jsx("p", { className: "font-semibold text-gray-900", children: gpsValue.latitude?.toFixed(6) })] }), _jsxs("div", { children: [_jsx("span", { className: "text-gray-700 font-medium", children: "Longitude:" }), _jsx("p", { className: "font-semibold text-gray-900", children: gpsValue.longitude?.toFixed(6) })] }), _jsxs("div", { children: [_jsx("span", { className: "text-gray-700 font-medium", children: "Pr\u00E9cision:" }), _jsxs("p", { className: "font-semibold text-gray-900", children: [gpsValue.precision?.toFixed(0), "m"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-gray-700 font-medium", children: "Horodatage:" }), _jsx("p", { className: "font-semibold text-gray-900", children: new Date(gpsValue.timestamp).toLocaleTimeString() })] })] }) })), (gpsError || error) && (_jsxs("div", { className: "flex items-center space-x-2 text-red-600 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsx("span", { children: gpsError || error })] }))] }));
 };
 export default GPSInput;

package/dist/components/inputs/GeographicCascadeInput.d.ts

@@ -21,6 +21,7 @@ interface GeographicCascadeInputProps {
     disabled?: boolean;
     required?: boolean;
     className?: string;
+    isConsultationMode?: boolean;
 }
 export declare const GeographicCascadeInput: React.FC<GeographicCascadeInputProps>;
 export default GeographicCascadeInput;

package/dist/components/inputs/GeographicCascadeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GeographicCascadeInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/GeographicCascadeInput.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAUxE;;GAEG;AACH,UAAU,SAAS;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACrB;AAWD,UAAU,2BAA2B;IACnC,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAwNxE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"GeographicCascadeInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/GeographicCascadeInput.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAWxE;;GAEG;AACH,UAAU,SAAS;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACrB;AAWD,UAAU,2BAA2B;IACnC,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA0NxE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/components/inputs/GeographicCascadeInput.js

@@ -8,7 +8,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useCallback, useRef } from 'react';
 import SearchableSelect from './SearchableSelect';
 import { extractVariableCode, resolveParentValue, getApiEndpoint, getParentLabel, requiresParent } from '../../utils/variableDependencyResolver';
-export const GeographicCascadeInput = ({ variable, value, onChange, reponses, disabled = false, required = false, className = '' }) => {
+import { isComponentReadonly } from '../../utils/componentStateUtils';
+export const GeographicCascadeInput = ({ variable, value, onChange, reponses, disabled = false, required = false, className = '', isConsultationMode = false }) => {
     const [items, setItems] = useState([]);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
@@ -125,8 +126,9 @@ export const GeographicCascadeInput = ({ variable, value, onChange, reponses, di
         };
         onChange(selectDto);
     };
-    // 8. Déterminer si le champ est désactivé
-    const isDisabled = disabled || loading || (needsParent && !parentValue);
+    // 8. Déterminer si le champ est désactivé (select ne supporte pas readonly, on utilise disabled)
+    const isReadonly = isComponentReadonly(variable, isConsultationMode);
+    const isDisabled = disabled || isReadonly || loading || (needsParent && !parentValue);
     // 9. Déterminer le message du placeholder
     const getPlaceholder = () => {
         if (loading)

package/dist/components/inputs/HourInput.d.ts

@@ -13,6 +13,7 @@ export interface HourInputProps {
     onBlur?: () => void;
     error?: string;
     disabled?: boolean;
+    isConsultationMode?: boolean;
 }
 declare const HourInput: React.FC<HourInputProps>;
 export default HourInput;

package/dist/components/inputs/HourInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HourInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/HourInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIxE,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqCvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"HourInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/HourInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAKxE,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAgDvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/inputs/HourInput.js

@@ -6,8 +6,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { VariableValueConverter } from '../../lib/utils/variableValueConverter';
 import { AlertCircle } from 'lucide-react';
-const HourInput = ({ variable, value, onChange, onBlur, error, disabled }) => {
+import { isComponentReadonly, readonlyClasses } from '../../utils/componentStateUtils';
+const HourInput = ({ variable, value, onChange, onBlur, error, disabled, isConsultationMode = false }) => {
     const hourValue = value || '';
+    // Déterminer si le composant est en lecture seule
+    const isReadonly = isComponentReadonly(variable, isConsultationMode);
+    // Générer les classes CSS
+    const getInputClasses = () => {
+        const baseClasses = 'w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-gray-900';
+        const errorClasses = error ? 'border-red-500' : 'border-gray-300';
+        if (disabled)
+            return `${baseClasses} ${errorClasses} bg-gray-100 cursor-not-allowed text-gray-500`;
+        if (isReadonly)
+            return `${baseClasses} ${errorClasses} ${readonlyClasses.readonly}`;
+        return `${baseClasses} ${errorClasses} bg-white`;
+    };
     const handleChange = (e) => {
         const newValue = e.target.value;
         // Validation du format HH:mm
@@ -15,6 +28,6 @@ const HourInput = ({ variable, value, onChange, onBlur, error, disabled }) => {
             onChange(newValue);
         }
     };
-    return (_jsxs("div", { className: "space-y-2", children: [_jsx("input", { type: "time", value: hourValue, onChange: handleChange, onBlur: onBlur, disabled: disabled, className: `w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-gray-900 ${error ? 'border-red-500' : 'border-gray-300'} ${disabled ? 'bg-gray-100 cursor-not-allowed text-gray-500' : 'bg-white'}` }), variable.proprietes?.helpText && (_jsx("p", { className: "text-xs text-gray-500", children: variable.proprietes.helpText })), error && (_jsxs("div", { className: "flex items-center space-x-1 text-red-600 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsx("span", { children: error })] }))] }));
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx("input", { type: "time", value: hourValue, onChange: handleChange, onBlur: onBlur, disabled: disabled, readOnly: isReadonly, className: getInputClasses() }), variable.proprietes?.helpText && (_jsx("p", { className: "text-xs text-gray-500", children: variable.proprietes.helpText })), error && (_jsxs("div", { className: "flex items-center space-x-1 text-red-600 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsx("span", { children: error })] }))] }));
 };
 export default HourInput;

package/dist/components/inputs/NumberInput.d.ts

@@ -14,6 +14,7 @@ export interface NumberInputProps {
     error?: string;
     disabled?: boolean;
     valeurMin?: number;
+    isConsultationMode?: boolean;
 }
 declare const NumberInput: React.FC<NumberInputProps>;
 export default NumberInput;

package/dist/components/inputs/NumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/NumberInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGxE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,WAAW,CAAA;KAAE,CAAC;IACzD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6D3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/NumberInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIxE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,WAAW,CAAA;KAAE,CAAC;IACzD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0E3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/inputs/NumberInput.js

@@ -5,10 +5,13 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { applyComponentStyle } from '../../utils/styleUtils';
-const NumberInput = ({ variable, value, onChange, onBlur, error, disabled, valeurMin }) => {
+import { isComponentReadonly, readonlyClasses } from '../../utils/componentStateUtils';
+const NumberInput = ({ variable, value, onChange, onBlur, error, disabled, valeurMin, isConsultationMode = false }) => {
     const props = variable.proprietes;
-    const numericValue = value || '';
+    const numericValue = value !== null && value !== undefined ? value : '';
     const { textStyle, containerStyle } = applyComponentStyle(variable.componentStyle);
+    // Déterminer si le composant est en lecture seule
+    const isReadonly = isComponentReadonly(variable, isConsultationMode);
     // Calculer la valeur minimale effective : utiliser valeurMin si définie, sinon props.min
     const effectiveMin = valeurMin !== undefined ? valeurMin : props?.min;
     console.log('NumberInput - Contrainte de valeur minimale:', {
@@ -19,6 +22,8 @@ const NumberInput = ({ variable, value, onChange, onBlur, error, disabled, valeu
         currentValue: numericValue
     });
     const handleChange = (e) => {
+        if (isReadonly)
+            return;
         const inputValue = e.target.value;
         if (inputValue === '') {
             onChange(null);
@@ -39,6 +44,16 @@ const NumberInput = ({ variable, value, onChange, onBlur, error, disabled, valeu
         }
         onChange(isNaN(parsedValue) ? null : parsedValue);
     };
-    return (_jsx("div", { style: containerStyle, children: _jsx("input", { type: "number", value: numericValue, onChange: handleChange, onBlur: onBlur, min: effectiveMin, max: props?.max, step: props?.step || 1, disabled: disabled, style: textStyle, className: `w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-gray-900 ${error ? 'border-red-500' : 'border-gray-300'} ${disabled ? 'bg-gray-100 cursor-not-allowed text-gray-500' : 'bg-white'}` }) }));
+    // Générer les classes CSS
+    const getInputClasses = () => {
+        const baseClasses = 'w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-gray-900';
+        const errorClasses = error ? 'border-red-500' : 'border-gray-300';
+        if (disabled)
+            return `${baseClasses} ${errorClasses} bg-gray-100 cursor-not-allowed text-gray-500`;
+        if (isReadonly)
+            return `${baseClasses} ${errorClasses} ${readonlyClasses.readonly}`;
+        return `${baseClasses} ${errorClasses} bg-white`;
+    };
+    return (_jsx("div", { style: containerStyle, children: _jsx("input", { type: "number", value: numericValue, onChange: handleChange, onBlur: onBlur, min: effectiveMin, max: props?.max, step: props?.step || 1, disabled: disabled, readOnly: isReadonly, style: textStyle, className: getInputClasses() }) }));
 };
 export default NumberInput;

package/dist/components/inputs/PhoneInput.d.ts

@@ -13,6 +13,7 @@ export interface PhoneInputProps {
     onBlur?: () => void;
     error?: string;
     disabled?: boolean;
+    isConsultationMode?: boolean;
 }
 declare const PhoneInput: React.FC<PhoneInputProps>;
 export default PhoneInput;

package/dist/components/inputs/PhoneInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/PhoneInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGxE,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IACrD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoBzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/PhoneInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIxE,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IACrD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+BzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/inputs/PhoneInput.js

@@ -5,9 +5,22 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { applyComponentStyle } from '../../utils/styleUtils';
-const PhoneInput = ({ variable, value, onChange, onBlur, error, disabled }) => {
+import { isComponentReadonly, readonlyClasses } from '../../utils/componentStateUtils';
+const PhoneInput = ({ variable, value, onChange, onBlur, error, disabled, isConsultationMode = false }) => {
     const stringValue = value || '';
     const { textStyle, containerStyle } = applyComponentStyle(variable.componentStyle);
-    return (_jsx("div", { style: containerStyle, children: _jsx("input", { type: "tel", value: stringValue, onChange: (e) => onChange(e.target.value), onBlur: onBlur, placeholder: variable.proprietes?.placeholder || "+225 XX XX XX XX", disabled: disabled, style: textStyle, className: `w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-gray-900 ${error ? 'border-red-500' : 'border-gray-300'} ${disabled ? 'bg-gray-100 cursor-not-allowed text-gray-500' : 'bg-white'}` }) }));
+    // Déterminer si le composant est en lecture seule
+    const isReadonly = isComponentReadonly(variable, isConsultationMode);
+    // Générer les classes CSS
+    const getInputClasses = () => {
+        const baseClasses = 'w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-gray-900';
+        const errorClasses = error ? 'border-red-500' : 'border-gray-300';
+        if (disabled)
+            return `${baseClasses} ${errorClasses} bg-gray-100 cursor-not-allowed text-gray-500`;
+        if (isReadonly)
+            return `${baseClasses} ${errorClasses} ${readonlyClasses.readonly}`;
+        return `${baseClasses} ${errorClasses} bg-white`;
+    };
+    return (_jsx("div", { style: containerStyle, children: _jsx("input", { type: "tel", value: stringValue, onChange: (e) => onChange(e.target.value), onBlur: onBlur, placeholder: variable.proprietes?.placeholder || "+225 XX XX XX XX", disabled: disabled, readOnly: isReadonly, style: textStyle, className: getInputClasses() }) }));
 };
 export default PhoneInput;

package/dist/components/inputs/RadioInput.d.ts

@@ -13,6 +13,7 @@ export interface RadioInputProps {
     onBlur?: () => void;
     error?: string;
     disabled?: boolean;
+    isConsultationMode?: boolean;
 }
 declare const RadioInput: React.FC<RadioInputProps>;
 export default RadioInput;

package/dist/components/inputs/RadioInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/RadioInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIxE,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IACrD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4CzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"RadioInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/RadioInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAKxE,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IACrD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgDzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/inputs/RadioInput.js

@@ -6,8 +6,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { VariableValueConverter } from '../../lib/utils/variableValueConverter';
 import { applyComponentStyle } from '../../utils/styleUtils';
-const RadioInput = ({ variable, value, onChange, onBlur, error, disabled }) => {
+import { isComponentReadonly } from '../../utils/componentStateUtils';
+const RadioInput = ({ variable, value, onChange, onBlur, error, disabled, isConsultationMode = false }) => {
     const { textStyle, containerStyle } = applyComponentStyle(variable.componentStyle);
+    // Déterminer si le composant est en lecture seule (radio ne supporte pas readonly, on utilise disabled)
+    const isReadonly = isComponentReadonly(variable, isConsultationMode);
+    const effectiveDisabled = disabled || isReadonly;
     // Récupérer les options depuis la propriété valeur OU valeurDefaut (format: "Code1#Designation1|Code2#Designation2")
     const optionsSource = variable.proprietes?.valeur || variable.valeurDefaut;
     const options = typeof optionsSource === 'string'
@@ -16,6 +20,6 @@ const RadioInput = ({ variable, value, onChange, onBlur, error, disabled }) => {
     const handleChange = (selectedValue) => {
         onChange(selectedValue || null);
     };
-    return (_jsxs("div", { className: "space-y-2", style: containerStyle, children: [_jsx("div", { className: "space-y-2", children: options.map((option) => (_jsxs("label", { className: "flex items-center space-x-3 cursor-pointer", children: [_jsx("input", { type: "radio", name: `radio-${variable.code}`, value: option.code, checked: value === option.code, onChange: (e) => handleChange(e.target.value), onBlur: onBlur, disabled: disabled, className: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 disabled:opacity-50" }), _jsxs("span", { className: "text-sm text-gray-900", style: textStyle, children: [option.code, " - ", option.designation] })] }, option.code))) }), options.length === 0 && (_jsx("p", { className: "text-sm text-gray-500", children: "Aucune option disponible" })), error && (_jsx("p", { className: "text-sm text-red-600", children: error }))] }));
+    return (_jsxs("div", { className: "space-y-2", style: containerStyle, children: [_jsx("div", { className: "space-y-2", children: options.map((option) => (_jsxs("label", { className: `flex items-center space-x-3 ${effectiveDisabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, children: [_jsx("input", { type: "radio", name: `radio-${variable.code}`, value: option.code, checked: value === option.code, onChange: (e) => handleChange(e.target.value), onBlur: onBlur, disabled: effectiveDisabled, className: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 disabled:opacity-50" }), _jsxs("span", { className: `text-sm ${effectiveDisabled ? 'text-gray-400' : 'text-gray-900'}`, style: textStyle, children: [option.code, " - ", option.designation] })] }, option.code))) }), options.length === 0 && (_jsx("p", { className: "text-sm text-gray-500", children: "Aucune option disponible" })), error && (_jsx("p", { className: "text-sm text-red-600", children: error }))] }));
 };
 export default RadioInput;

package/dist/components/inputs/SelectInput.d.ts

@@ -13,6 +13,7 @@ export interface SelectInputProps {
     onBlur?: () => void;
     error?: string;
     disabled?: boolean;
+    isConsultationMode?: boolean;
 }
 declare const SelectInput: React.FC<SelectInputProps>;
 export default SelectInput;

package/dist/components/inputs/SelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/SelectInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAKxE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IACrD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAyF3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/SelectInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAMxE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IACrD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6F3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/inputs/SelectInput.js

@@ -7,8 +7,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { VariableValueConverter } from '../../lib/utils/variableValueConverter';
 import SearchableSelect from './SearchableSelect';
 import { applyComponentStyle } from '../../utils/styleUtils';
-const SelectInput = ({ variable, value, onChange, onBlur, error, disabled }) => {
+import { isComponentReadonly } from '../../utils/componentStateUtils';
+const SelectInput = ({ variable, value, onChange, onBlur, error, disabled, isConsultationMode = false }) => {
     const { textStyle, containerStyle } = applyComponentStyle(variable.componentStyle);
+    // Déterminer si le composant est en lecture seule (select ne supporte pas readonly, on utilise disabled)
+    const isReadonly = isComponentReadonly(variable, isConsultationMode);
+    const effectiveDisabled = disabled || isReadonly;
     // Récupérer les options depuis la propriété valeur OU valeurDefaut (format: "Code1#Designation1|Code2#Designation2")
     const optionsSource = variable.proprietes?.valeur || variable.valeurDefaut;
     const allOptions = optionsSource && typeof optionsSource === 'string'
@@ -20,7 +24,7 @@ const SelectInput = ({ variable, value, onChange, onBlur, error, disabled }) =>
     const selectedValue = value || '';
     // Affichage radio pour peu d'options (≤5)
     if (allOptions.length <= 5) {
-        return (_jsx("div", { className: "space-y-2", style: containerStyle, children: allOptions.map((option) => (_jsxs("label", { className: "flex items-center space-x-2 cursor-pointer", children: [_jsx("input", { type: "radio", name: variable.code, value: option.code, checked: selectedValue === option.code, onChange: (e) => onChange(e.target.value), onBlur: onBlur, disabled: disabled, className: `w-4 h-4 text-green-600 border-gray-300 focus:ring-green-500 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}` }), _jsx("span", { className: `text-sm ${disabled ? 'text-gray-400' : 'text-gray-700'}`, style: textStyle, children: option.designation })] }, option.code))) }));
+        return (_jsx("div", { className: "space-y-2", style: containerStyle, children: allOptions.map((option) => (_jsxs("label", { className: "flex items-center space-x-2 cursor-pointer", children: [_jsx("input", { type: "radio", name: variable.code, value: option.code, checked: selectedValue === option.code, onChange: (e) => onChange(e.target.value), onBlur: onBlur, disabled: effectiveDisabled, className: `w-4 h-4 text-green-600 border-gray-300 focus:ring-green-500 ${effectiveDisabled ? 'cursor-not-allowed' : 'cursor-pointer'}` }), _jsx("span", { className: `text-sm ${effectiveDisabled ? 'text-gray-400' : 'text-gray-700'}`, style: textStyle, children: option.designation })] }, option.code))) }));
     }
     // Convertir les options au format SelectOption pour SearchableSelect
     const selectOptions = allOptions.map(opt => ({
@@ -41,6 +45,6 @@ const SelectInput = ({ variable, value, onChange, onBlur, error, disabled }) =>
         return `${option.code} - ${option.designation}`;
     };
     // Affichage avec SearchableSelect pour beaucoup d'options (>5)
-    return (_jsxs("div", { className: "space-y-2", style: containerStyle, children: [_jsx(SearchableSelect, { options: selectOptions, value: selectedOption, onChange: handleChange, placeholder: "S\u00E9lectionner...", searchPlaceholder: "Rechercher...", disabled: disabled, required: variable.estObligatoire, error: error, formatOptionLabel: formatOptionLabel, noOptionsMessage: "Aucune option trouv\u00E9e" }), selectedValue && selectedOption && (_jsx("div", { className: "p-2 bg-green-50 border border-green-200 rounded text-sm", children: _jsxs("span", { className: "text-green-800", style: textStyle, children: ["S\u00E9lectionn\u00E9: ", selectedOption.designation] }) }))] }));
+    return (_jsxs("div", { className: "space-y-2", style: containerStyle, children: [_jsx(SearchableSelect, { options: selectOptions, value: selectedOption, onChange: handleChange, placeholder: "S\u00E9lectionner...", searchPlaceholder: "Rechercher...", disabled: effectiveDisabled, required: variable.estObligatoire, error: error, formatOptionLabel: formatOptionLabel, noOptionsMessage: "Aucune option trouv\u00E9e" }), selectedValue && selectedOption && (_jsx("div", { className: "p-2 bg-green-50 border border-green-200 rounded text-sm", children: _jsxs("span", { className: "text-green-800", style: textStyle, children: ["S\u00E9lectionn\u00E9: ", selectedOption.designation] }) }))] }));
 };
 export default SelectInput;

package/dist/components/inputs/StringInput.d.ts

@@ -15,6 +15,7 @@ export interface StringInputProps {
     error?: string;
     disabled?: boolean;
     services?: FormRendererServices;
+    isConsultationMode?: boolean;
 }
 declare const StringInput: React.FC<StringInputProps>;
 export default StringInput;

package/dist/components/inputs/StringInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StringInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/StringInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAG5D,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,QAAQ,CAAA;KAAE,CAAC;IACtD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,oBAAoB,CAAC;CACjC;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiD3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"StringInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/StringInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAI5D,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,QAAQ,CAAA;KAAE,CAAC;IACtD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4D3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/inputs/StringInput.js

@@ -5,18 +5,33 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { applyComponentStyle } from '../../utils/styleUtils';
-const StringInput = ({ variable, value, onChange, onBlur, error, disabled, services }) => {
+import { isComponentReadonly, readonlyClasses } from '../../utils/componentStateUtils';
+const StringInput = ({ variable, value, onChange, onBlur, error, disabled, services, isConsultationMode = false }) => {
     const props = variable.proprietes;
     const stringValue = value || '';
     const forceUppercase = services?.forceUppercase ?? false;
     const { textStyle, containerStyle } = applyComponentStyle(variable.componentStyle);
+    // Déterminer si le composant est en lecture seule
+    const isReadonly = isComponentReadonly(variable, isConsultationMode);
     const handleChange = (newValue) => {
+        if (isReadonly)
+            return;
         const transformed = forceUppercase ? newValue.toLocaleUpperCase('fr-FR') : newValue;
         onChange(transformed);
     };
+    // Générer les classes CSS
+    const getInputClasses = () => {
+        const baseClasses = 'w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-gray-900';
+        const errorClasses = error ? 'border-red-500' : 'border-gray-300';
+        if (disabled)
+            return `${baseClasses} ${errorClasses} bg-gray-100 cursor-not-allowed text-gray-500`;
+        if (isReadonly)
+            return `${baseClasses} ${errorClasses} ${readonlyClasses.readonly}`;
+        return `${baseClasses} ${errorClasses} bg-white`;
+    };
     if (props?.displayAs === 'textarea') {
-        return (_jsx("div", { style: containerStyle, children: _jsx("textarea", { value: stringValue, onChange: (e) => handleChange(e.target.value), onBlur: onBlur, placeholder: props.placeholder, maxLength: props.maxLength, rows: props.rows || 3, disabled: disabled, style: textStyle, className: `w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent resize-vertical text-gray-900 ${error ? 'border-red-500' : 'border-gray-300'} ${disabled ? 'bg-gray-100 cursor-not-allowed text-gray-500' : 'bg-white'}` }) }));
+        return (_jsx("div", { style: containerStyle, children: _jsx("textarea", { value: stringValue, onChange: (e) => handleChange(e.target.value), onBlur: onBlur, placeholder: props.placeholder, maxLength: props.maxLength, rows: props.rows || 3, disabled: disabled, readOnly: isReadonly, style: textStyle, className: `${getInputClasses()} resize-vertical` }) }));
     }
-    return (_jsx("div", { style: containerStyle, children: _jsx("input", { type: "text", value: stringValue, onChange: (e) => handleChange(e.target.value), onBlur: onBlur, placeholder: props?.placeholder, maxLength: props?.maxLength, pattern: props?.pattern, disabled: disabled, style: textStyle, className: `w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-gray-900 ${error ? 'border-red-500' : 'border-gray-300'} ${disabled ? 'bg-gray-100 cursor-not-allowed text-gray-500' : 'bg-white'}` }) }));
+    return (_jsx("div", { style: containerStyle, children: _jsx("input", { type: "text", value: stringValue, onChange: (e) => handleChange(e.target.value), onBlur: onBlur, placeholder: props?.placeholder, maxLength: props?.maxLength, pattern: props?.pattern, disabled: disabled, readOnly: isReadonly, style: textStyle, className: getInputClasses() }) }));
 };
 export default StringInput;