lisichatbot 1.8.6 → 1.8.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lisichatbot",
-  "version": "1.8.6",
+  "version": "1.8.8",
   "type": "module",
   "main": "./src/index.js",
   "exports": {

package/src/index.js

@@ -587,6 +587,7 @@ function renderOptions(options, field, isSingleSelect = true) {
     const optionsWrapper = document.createElement('div');
     optionsWrapper.setAttribute('data-chat-element', 'options-wrapper');
     optionsWrapper.style.display = 'flex';
+    optionsWrapper.style.flexDirection = 'row';
     optionsWrapper.style.flexWrap = 'wrap';
     optionsWrapper.style.alignItems = 'flex-start';
     optionsWrapper.style.gap = '8px';
@@ -726,6 +727,7 @@ function renderColorOptions(options, field) {
     const optionsWrapper = document.createElement('div');
     optionsWrapper.setAttribute('data-chat-element', 'options-wrapper');
     optionsWrapper.style.display = 'flex';
+    optionsWrapper.style.flexDirection = 'row';
     optionsWrapper.style.flexWrap = 'wrap';
     optionsWrapper.style.alignItems = 'flex-start';
     optionsWrapper.style.gap = '8px';
@@ -862,6 +864,7 @@ function renderCustomSelectOptions(options, field, customConfig) {
     const optionsWrapper = document.createElement('div');
     optionsWrapper.setAttribute('data-chat-element', 'options-wrapper');
     optionsWrapper.style.display = 'flex';
+    optionsWrapper.style.flexDirection = 'row';
     optionsWrapper.style.flexWrap = 'wrap';
     optionsWrapper.style.alignItems = 'flex-start';
     optionsWrapper.style.gap = '8px';
@@ -1072,13 +1075,16 @@ function renderMinMaxInputs(field, customConfig, existingData) {
     if (minInput) {
         minInput.setAttribute('data-field', field);
         minInput.setAttribute('data-input-type', 'min');
-        minInput.type = 'number';
-        minInput.min = customConfig.min !== undefined ? customConfig.min : 0;
-        minInput.max = customConfig.max !== undefined ? customConfig.max : 100;
-        minInput.value = showMinMax && existingData[0] !== undefined ? existingData[0] : '';
+        minInput.type = 'text'; // Changed from 'number' to 'text' for locale formatting
+        minInput.setAttribute('inputmode', 'numeric'); // Show numeric keyboard on mobile
+        minInput.setAttribute('data-min', customConfig.min !== undefined ? customConfig.min : 0);
+        minInput.setAttribute('data-max', customConfig.max !== undefined ? customConfig.max : 100);
         
-        if (showMinMax) {
-            console.log(`  ✅ Pre-filled min: ${existingData[0]}`);
+        if (showMinMax && existingData[0] !== undefined) {
+            const numValue = Number(existingData[0]);
+            minInput.value = numValue.toLocaleString();
+            minInput.setAttribute('data-raw-value', existingData[0]);
+            console.log(`  ✅ Pre-filled min: ${existingData[0]} (display: ${numValue.toLocaleString()})`);
         }
     }
 
@@ -1093,13 +1099,16 @@ function renderMinMaxInputs(field, customConfig, existingData) {
     if (maxInput) {
         maxInput.setAttribute('data-field', field);
         maxInput.setAttribute('data-input-type', 'max');
-        maxInput.type = 'number';
-        maxInput.min = customConfig.min !== undefined ? customConfig.min : 0;
-        maxInput.max = customConfig.max !== undefined ? customConfig.max : 100;
-        maxInput.value = showMinMax && existingData[1] !== undefined ? existingData[1] : '';
+        maxInput.type = 'text'; // Changed from 'number' to 'text' for locale formatting
+        maxInput.setAttribute('inputmode', 'numeric'); // Show numeric keyboard on mobile
+        maxInput.setAttribute('data-min', customConfig.min !== undefined ? customConfig.min : 0);
+        maxInput.setAttribute('data-max', customConfig.max !== undefined ? customConfig.max : 100);
         
-        if (showMinMax) {
-            console.log(`  ✅ Pre-filled max: ${existingData[1]}`);
+        if (showMinMax && existingData[1] !== undefined) {
+            const numValue = Number(existingData[1]);
+            maxInput.value = numValue.toLocaleString();
+            maxInput.setAttribute('data-raw-value', existingData[1]);
+            console.log(`  ✅ Pre-filled max: ${existingData[1]} (display: ${numValue.toLocaleString()})`);
         }
     }
 
@@ -1134,8 +1143,8 @@ function renderMinMaxInputs(field, customConfig, existingData) {
 
     if (minInput && maxInput) {
         const updateVisualFeedback = () => {
-            const minFilled = minInput.value.trim() !== '';
-            const maxFilled = maxInput.value.trim() !== '';
+            const minFilled = (minInput.getAttribute('data-raw-value') || minInput.value.trim()) !== '';
+            const maxFilled = (maxInput.getAttribute('data-raw-value') || maxInput.value.trim()) !== '';
             const anyFilled = minFilled || maxFilled;
             
             const minTick = minClone.querySelector('[data-chat-input-element="tick-icon"]');
@@ -1160,20 +1169,40 @@ function renderMinMaxInputs(field, customConfig, existingData) {
             console.log('  ✅ Applied visual feedback for pre-filled values');
         }
         
-        minInput.onfocus = () => {
+        minInput.onchange = () => {
             selectCustomOption(field);
-            updateVisualFeedback();
-        };
-        minInput.oninput = () => {
+            // Remove non-numeric characters except minus sign at start
+            let value = minInput.value.replace(/[^\d-]/g, '');
+            if (value.indexOf('-') > 0) {
+                value = value.replace(/-/g, '');
+            }
+            minInput.setAttribute('data-raw-value', value);
+            
+            // Format with locale string if valid number
+            if (value && value !== '' && !isNaN(value)) {
+                const numValue = Number(value);
+                minInput.value = numValue.toLocaleString();
+            }
+            
             updateVisualFeedback();
             validateMinMax(field, customConfig);
         };
         
-        maxInput.onfocus = () => {
+        maxInput.onchange = () => {
             selectCustomOption(field);
-            updateVisualFeedback();
-        };
-        maxInput.oninput = () => {
+            // Remove non-numeric characters except minus sign at start
+            let value = maxInput.value.replace(/[^\d-]/g, '');
+            if (value.indexOf('-') > 0) {
+                value = value.replace(/-/g, '');
+            }
+            maxInput.setAttribute('data-raw-value', value);
+            
+            // Format with locale string if valid number
+            if (value && value !== '' && !isNaN(value)) {
+                const numValue = Number(value);
+                maxInput.value = numValue.toLocaleString();
+            }
+            
             updateVisualFeedback();
             validateMinMax(field, customConfig);
         };
@@ -1325,10 +1354,12 @@ function handleCustomSelectClick(element, field, customConfig) {
             
             if (minInput) {
                 minInput.value = '';
+                minInput.removeAttribute('data-raw-value');
                 console.log('  🧹 Cleared min input');
             }
             if (maxInput) {
                 maxInput.value = '';
+                maxInput.removeAttribute('data-raw-value');
                 console.log('  🧹 Cleared max input');
             }
             
@@ -1398,17 +1429,20 @@ function validateMinMax(field, customConfig) {
         return { valid: false, error: null };
     }
 
-    const minValue = parseFloat(minInput.value);
-    const maxValue = parseFloat(maxInput.value);
-    const minFilled = minInput.value.trim() !== '';
-    const maxFilled = maxInput.value.trim() !== '';
+    // Use data-raw-value for validation instead of formatted display value
+    const minRawValue = minInput.getAttribute('data-raw-value') || '';
+    const maxRawValue = maxInput.getAttribute('data-raw-value') || '';
+    const minValue = parseFloat(minRawValue);
+    const maxValue = parseFloat(maxRawValue);
+    const minFilled = minRawValue.trim() !== '';
+    const maxFilled = maxRawValue.trim() !== '';
 
     const minConstraint = customConfig.min !== undefined ? customConfig.min : 0;
     const maxConstraint = customConfig.max !== undefined ? customConfig.max : 100;
 
     console.log(`📊 Input values:
-  Min input value: "${minInput.value}" (filled: ${minFilled}, parsed: ${minValue})
-  Max input value: "${maxInput.value}" (filled: ${maxFilled}, parsed: ${maxValue})`);
+  Min raw value: "${minRawValue}" (filled: ${minFilled}, parsed: ${minValue})
+  Max raw value: "${maxRawValue}" (filled: ${maxFilled}, parsed: ${maxValue})`);
     
     console.log(`📏 Constraints:
   Min constraint: >= ${minConstraint}