labellife-design-tool 2.2.6 → 2.2.8

package/dist/cjs/side-panel/index.js

@@ -27,6 +27,9 @@ var CloseIcon = require('@mui/icons-material/Close');
 var InputIcon = require('@mui/icons-material/Input');
 var CalendarTodayIcon = require('@mui/icons-material/CalendarToday');
 var NumbersIcon = require('@mui/icons-material/Numbers');
+var RadioButtonCheckedIcon = require('@mui/icons-material/RadioButtonChecked');
+var FormatListBulletedIcon = require('@mui/icons-material/FormatListBulleted');
+var AddIcon = require('@mui/icons-material/Add');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -4639,7 +4642,7 @@ function ImagesGrid(_ref) {
   });
 }
 
-var _excluded = ["inputField", "promptText", "inputType", "required", "placeholder"];
+var _excluded = ["inputField", "promptText", "inputType", "required", "placeholder", "options", "minSelections", "maxSelections"];
 var IMAGE_PLACEHOLDER_SRC = "data:image/svg+xml;charset=utf-8,".concat(encodeURIComponent("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"400\" viewBox=\"0 0 400 400\">\n    <rect width=\"400\" height=\"400\" fill=\"#f0f2f5\" rx=\"12\"/>\n    <rect x=\"110\" y=\"90\" width=\"180\" height=\"145\" rx=\"10\" fill=\"#dde1e7\"/>\n    <circle cx=\"158\" cy=\"135\" r=\"22\" fill=\"#f0f2f5\"/>\n    <polygon points=\"110,235 168,163 210,205 250,163 290,235\" fill=\"#c8cdd6\"/>\n    <rect x=\"140\" y=\"268\" width=\"120\" height=\"14\" rx=\"7\" fill=\"#c8cdd6\"/>\n    <rect x=\"160\" y=\"292\" width=\"80\" height=\"10\" rx=\"5\" fill=\"#dde1e7\"/>\n  </svg>"));
 
 // ── Date formatting helpers ──────────────────────────────────────────
@@ -4681,12 +4684,84 @@ function formatDate(date, format) {
   }
 }
 
+// ── Options list editor ──────────────────────────────────────────────
+var OptionsEditor = function OptionsEditor(_ref) {
+  var options = _ref.options,
+    _onChange = _ref.onChange;
+  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+    sx: {
+      ml: 6.5,
+      mr: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 0.75
+    },
+    children: [options.map(function (opt, i) {
+      return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+        sx: {
+          display: 'flex',
+          gap: 0.5,
+          alignItems: 'center'
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(material.TextField, {
+          size: "small",
+          value: opt,
+          onChange: function onChange(e) {
+            var next = _toConsumableArray(options);
+            next[i] = e.target.value;
+            _onChange(next);
+          },
+          placeholder: "Option ".concat(i + 1),
+          sx: {
+            flex: 1,
+            '& .MuiInputBase-input': {
+              fontSize: 12,
+              py: 0.75
+            }
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
+          size: "small",
+          onClick: function onClick() {
+            return _onChange(options.filter(function (_, j) {
+              return j !== i;
+            }));
+          },
+          disabled: options.length <= 1,
+          sx: {
+            color: '#bbb',
+            '&:hover': {
+              color: '#e57373'
+            }
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(DeleteIcon, {
+            fontSize: "small"
+          })
+        })]
+      }, i);
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Button, {
+      size: "small",
+      startIcon: /*#__PURE__*/jsxRuntime.jsx(AddIcon, {}),
+      onClick: function onClick() {
+        return _onChange([].concat(_toConsumableArray(options), ['']));
+      },
+      sx: {
+        alignSelf: 'flex-start',
+        fontSize: 11,
+        textTransform: 'none',
+        color: '#0d83cd',
+        p: 0.5
+      },
+      children: "Add option"
+    })]
+  });
+};
+
 // ── Card component ───────────────────────────────────────────────────
-var InputFieldCard = function InputFieldCard(_ref) {
-  var icon = _ref.icon,
-    label = _ref.label,
-    description = _ref.description,
-    onClick = _ref.onClick;
+var InputFieldCard = function InputFieldCard(_ref2) {
+  var icon = _ref2.icon,
+    label = _ref2.label,
+    description = _ref2.description,
+    onClick = _ref2.onClick;
   return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
     onClick: onClick,
     sx: {
@@ -4742,8 +4817,8 @@ var InputFieldCard = function InputFieldCard(_ref) {
 };
 
 // ── Panel content ────────────────────────────────────────────────────
-var InputFieldsPanelContent = mobxReactLite.observer(function (_ref2) {
-  var store = _ref2.store;
+var InputFieldsPanelContent = mobxReactLite.observer(function (_ref3) {
+  var store = _ref3.store;
   var _useState = react.useState('MM-DD-YYYY'),
     _useState2 = _slicedToArray(_useState, 2),
     dateFormat = _useState2[0],
@@ -4780,6 +4855,34 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref2) {
     _useState16 = _slicedToArray(_useState15, 2),
     imageRequired = _useState16[0],
     setImageRequired = _useState16[1];
+  var _useState17 = react.useState(''),
+    _useState18 = _slicedToArray(_useState17, 2),
+    radioPrompt = _useState18[0],
+    setRadioPrompt = _useState18[1];
+  var _useState19 = react.useState(false),
+    _useState20 = _slicedToArray(_useState19, 2),
+    radioRequired = _useState20[0],
+    setRadioRequired = _useState20[1];
+  var _useState21 = react.useState(['Option 1', 'Option 2']),
+    _useState22 = _slicedToArray(_useState21, 2),
+    radioOptions = _useState22[0],
+    setRadioOptions = _useState22[1];
+  var _useState23 = react.useState(''),
+    _useState24 = _slicedToArray(_useState23, 2),
+    listPrompt = _useState24[0],
+    setListPrompt = _useState24[1];
+  var _useState25 = react.useState(0),
+    _useState26 = _slicedToArray(_useState25, 2),
+    listMinSelections = _useState26[0],
+    setListMinSelections = _useState26[1];
+  var _useState27 = react.useState(2),
+    _useState28 = _slicedToArray(_useState27, 2),
+    listMaxSelections = _useState28[0],
+    setListMaxSelections = _useState28[1];
+  var _useState29 = react.useState(['Option 1', 'Option 2']),
+    _useState30 = _slicedToArray(_useState29, 2),
+    listOptions = _useState30[0],
+    setListOptions = _useState30[1];
   var addInputElement = function addInputElement(inputType) {
     var extra = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var page = store.activePage;
@@ -4822,6 +4925,16 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref2) {
           placeholder = t('sidePanel.inputFields.integerPlaceholder', 'Enter number');
           defaultPrompt = t('sidePanel.inputFields.defaultIntegerPrompt', 'Please enter a number');
           break;
+        case 'radio':
+          dummyText = (extra.options || []).filter(Boolean)[0] || 'Option 1';
+          placeholder = t('sidePanel.inputFields.radioPlaceholder', 'Select an option');
+          defaultPrompt = t('sidePanel.inputFields.defaultRadioPrompt', 'Please select an option');
+          break;
+        case 'list':
+          dummyText = (extra.options || []).filter(Boolean).slice(0, 2).join(', ') || 'Option 1, Option 2';
+          placeholder = t('sidePanel.inputFields.listPlaceholder', 'Select options');
+          defaultPrompt = t('sidePanel.inputFields.defaultListPrompt', 'Please select options');
+          break;
         default:
           dummyText = 'Input';
           placeholder = 'Input';
@@ -4840,7 +4953,7 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref2) {
         fontFamily: 'Roboto',
         align: 'center',
         fill: '#333333',
-        custom: _objectSpread2({
+        custom: _objectSpread2(_objectSpread2(_objectSpread2({
           inputField: true,
           inputType: inputType,
           placeholder: placeholder,
@@ -4848,6 +4961,11 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref2) {
           required: extra.required || false
         }, inputType === 'date' ? {
           dateFormat: extra.dateFormat || 'MM-DD-YYYY'
+        } : {}), ['radio', 'list'].includes(inputType) ? {
+          options: (extra.options || []).filter(Boolean)
+        } : {}), inputType === 'list' ? {
+          minSelections: extra.minSelections || 0,
+          maxSelections: extra.maxSelections || 0
         } : {})
       });
     }
@@ -5089,6 +5207,138 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref2) {
         sx: {
           ml: 5.5
         }
+      }), /*#__PURE__*/jsxRuntime.jsx(InputFieldCard, {
+        icon: /*#__PURE__*/jsxRuntime.jsx(RadioButtonCheckedIcon, {
+          fontSize: "small"
+        }),
+        label: t('sidePanel.inputFields.radioInput', 'Radio Input'),
+        description: t('sidePanel.inputFields.radioInputDesc', 'Single option selection'),
+        onClick: function onClick() {
+          return addInputElement('radio', {
+            promptText: radioPrompt,
+            required: radioRequired,
+            options: radioOptions
+          });
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(material.TextField, {
+        size: "small",
+        placeholder: t('sidePanel.inputFields.promptTextHint', 'Prompt text shown to user...'),
+        value: radioPrompt,
+        onChange: function onChange(e) {
+          return setRadioPrompt(e.target.value);
+        },
+        sx: {
+          ml: 6.5,
+          mr: 1,
+          '& .MuiInputBase-input': {
+            fontSize: 12,
+            py: 0.75
+          }
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(material.FormControlLabel, {
+        control: /*#__PURE__*/jsxRuntime.jsx(material.Checkbox, {
+          size: "small",
+          checked: radioRequired,
+          onChange: function onChange(e) {
+            return setRadioRequired(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.required', 'Required')
+        }),
+        sx: {
+          ml: 5.5
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionsEditor, {
+        options: radioOptions,
+        onChange: setRadioOptions
+      }), /*#__PURE__*/jsxRuntime.jsx(InputFieldCard, {
+        icon: /*#__PURE__*/jsxRuntime.jsx(FormatListBulletedIcon, {
+          fontSize: "small"
+        }),
+        label: t('sidePanel.inputFields.listInput', 'List Input'),
+        description: t('sidePanel.inputFields.listInputDesc', 'Multiple option selection'),
+        onClick: function onClick() {
+          return addInputElement('list', {
+            promptText: listPrompt,
+            minSelections: listMinSelections,
+            maxSelections: listMaxSelections,
+            options: listOptions
+          });
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(material.TextField, {
+        size: "small",
+        placeholder: t('sidePanel.inputFields.promptTextHint', 'Prompt text shown to user...'),
+        value: listPrompt,
+        onChange: function onChange(e) {
+          return setListPrompt(e.target.value);
+        },
+        sx: {
+          ml: 6.5,
+          mr: 1,
+          '& .MuiInputBase-input': {
+            fontSize: 12,
+            py: 0.75
+          }
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionsEditor, {
+        options: listOptions,
+        onChange: setListOptions
+      }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+        sx: {
+          display: 'flex',
+          gap: 1,
+          ml: 6.5,
+          mr: 1
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(material.TextField, {
+          size: "small",
+          type: "number",
+          label: t('sidePanel.inputFields.minSelections', 'Min select'),
+          value: listMinSelections,
+          onChange: function onChange(e) {
+            return setListMinSelections(Math.max(0, parseInt(e.target.value) || 0));
+          },
+          inputProps: {
+            min: 0
+          },
+          sx: {
+            flex: 1,
+            '& .MuiInputBase-input': {
+              fontSize: 12,
+              py: 0.75
+            }
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(material.TextField, {
+          size: "small",
+          type: "number",
+          label: t('sidePanel.inputFields.maxSelections', 'Max select'),
+          value: listMaxSelections,
+          onChange: function onChange(e) {
+            return setListMaxSelections(Math.max(0, parseInt(e.target.value) || 0));
+          },
+          inputProps: {
+            min: 0
+          },
+          sx: {
+            flex: 1,
+            '& .MuiInputBase-input': {
+              fontSize: 12,
+              py: 0.75
+            }
+          }
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+        variant: "caption",
+        sx: {
+          ml: 6.5,
+          color: '#999',
+          fontSize: 10
+        },
+        children: listMinSelections > 0 ? "Required \xB7 min ".concat(listMinSelections).concat(listMaxSelections > 0 ? ", max ".concat(listMaxSelections) : ', no max') : "Optional \xB7 max ".concat(listMaxSelections > 0 ? listMaxSelections : '∞')
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(material.Divider, {
       sx: {
@@ -5118,21 +5368,33 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref2) {
 });
 
 // ── Mark-as-variable sub-form ─────────────────────────────────────────
-var MarkAsVariableForm = mobxReactLite.observer(function (_ref3) {
+var MarkAsVariableForm = mobxReactLite.observer(function (_ref4) {
   var _selectedElement$cust;
-  var store = _ref3.store;
-  var _useState17 = react.useState(''),
-    _useState18 = _slicedToArray(_useState17, 2),
-    markLabel = _useState18[0],
-    setMarkLabel = _useState18[1];
-  var _useState19 = react.useState(false),
-    _useState20 = _slicedToArray(_useState19, 2),
-    markRequired = _useState20[0],
-    setMarkRequired = _useState20[1];
-  var _useState21 = react.useState('text'),
-    _useState22 = _slicedToArray(_useState21, 2),
-    markInputType = _useState22[0],
-    setMarkInputType = _useState22[1];
+  var store = _ref4.store;
+  var _useState31 = react.useState(''),
+    _useState32 = _slicedToArray(_useState31, 2),
+    markLabel = _useState32[0],
+    setMarkLabel = _useState32[1];
+  var _useState33 = react.useState(false),
+    _useState34 = _slicedToArray(_useState33, 2),
+    markRequired = _useState34[0],
+    setMarkRequired = _useState34[1];
+  var _useState35 = react.useState('text'),
+    _useState36 = _slicedToArray(_useState35, 2),
+    markInputType = _useState36[0],
+    setMarkInputType = _useState36[1];
+  var _useState37 = react.useState(['Option 1', 'Option 2']),
+    _useState38 = _slicedToArray(_useState37, 2),
+    markOptions = _useState38[0],
+    setMarkOptions = _useState38[1];
+  var _useState39 = react.useState(0),
+    _useState40 = _slicedToArray(_useState39, 2),
+    markMinSelections = _useState40[0],
+    setMarkMinSelections = _useState40[1];
+  var _useState41 = react.useState(2),
+    _useState42 = _slicedToArray(_useState41, 2),
+    markMaxSelections = _useState42[0],
+    setMarkMaxSelections = _useState42[1];
   var selectedIds = store.selectedElementsIds || [];
   var selectedElement = selectedIds.length === 1 ? store.getElementById(selectedIds[0]) : null;
   var isImageElement = (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.type) === 'image';
@@ -5141,37 +5403,52 @@ var MarkAsVariableForm = mobxReactLite.observer(function (_ref3) {
   var isAlreadyVariable = !!(selectedElement !== null && selectedElement !== void 0 && (_selectedElement$cust = selectedElement.custom) !== null && _selectedElement$cust !== void 0 && _selectedElement$cust.inputField);
   react.useEffect(function () {
     if (selectedElement && isSupportedElement) {
-      var _selectedElement$cust2, _selectedElement$cust3, _selectedElement$cust4;
+      var _selectedElement$cust2, _selectedElement$cust3, _selectedElement$cust4, _selectedElement$cust5, _selectedElement$cust6, _selectedElement$cust7;
       setMarkLabel(((_selectedElement$cust2 = selectedElement.custom) === null || _selectedElement$cust2 === void 0 ? void 0 : _selectedElement$cust2.promptText) || '');
       setMarkRequired(!!((_selectedElement$cust3 = selectedElement.custom) !== null && _selectedElement$cust3 !== void 0 && _selectedElement$cust3.required));
       setMarkInputType(isImageElement ? 'image' : ((_selectedElement$cust4 = selectedElement.custom) === null || _selectedElement$cust4 === void 0 ? void 0 : _selectedElement$cust4.inputType) || 'text');
+      setMarkOptions(((_selectedElement$cust5 = selectedElement.custom) === null || _selectedElement$cust5 === void 0 ? void 0 : _selectedElement$cust5.options) || ['Option 1', 'Option 2']);
+      setMarkMinSelections(((_selectedElement$cust6 = selectedElement.custom) === null || _selectedElement$cust6 === void 0 ? void 0 : _selectedElement$cust6.minSelections) || 0);
+      setMarkMaxSelections(((_selectedElement$cust7 = selectedElement.custom) === null || _selectedElement$cust7 === void 0 ? void 0 : _selectedElement$cust7.maxSelections) || 2);
     } else {
       setMarkLabel('');
       setMarkRequired(false);
       setMarkInputType('text');
+      setMarkOptions(['Option 1', 'Option 2']);
+      setMarkMinSelections(0);
+      setMarkMaxSelections(2);
     }
   }, [selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id]);
   var handleMark = function handleMark() {
     if (!selectedElement || !markLabel.trim()) return;
+    var effectiveType = isImageElement ? 'image' : markInputType;
     selectedElement.set({
-      custom: _objectSpread2(_objectSpread2({}, selectedElement.custom), {}, {
+      custom: _objectSpread2(_objectSpread2(_objectSpread2({}, selectedElement.custom), {}, {
         inputField: true,
         promptText: markLabel.trim(),
-        inputType: isImageElement ? 'image' : markInputType,
+        inputType: effectiveType,
         required: markRequired
-      })
+      }, ['radio', 'list'].includes(effectiveType) ? {
+        options: markOptions.filter(Boolean)
+      } : {}), effectiveType === 'list' ? {
+        minSelections: markMinSelections,
+        maxSelections: markMaxSelections
+      } : {})
     });
     store.history.addUndoState();
   };
   var handleUnmark = function handleUnmark() {
     if (!selectedElement) return;
-    var _ref4 = selectedElement.custom || {};
-      _ref4.inputField;
-      _ref4.promptText;
-      _ref4.inputType;
-      _ref4.required;
-      _ref4.placeholder;
-      var rest = _objectWithoutProperties(_ref4, _excluded);
+    var _ref5 = selectedElement.custom || {};
+      _ref5.inputField;
+      _ref5.promptText;
+      _ref5.inputType;
+      _ref5.required;
+      _ref5.placeholder;
+      _ref5.options;
+      _ref5.minSelections;
+      _ref5.maxSelections;
+      var rest = _objectWithoutProperties(_ref5, _excluded);
     selectedElement.set({
       custom: rest
     });
@@ -5296,9 +5573,84 @@ var MarkAsVariableForm = mobxReactLite.observer(function (_ref3) {
             fontSize: 12
           },
           children: t('sidePanel.inputFields.dateInput', 'Date Input')
+        }), /*#__PURE__*/jsxRuntime.jsx(material.MenuItem, {
+          value: "radio",
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.radioInput', 'Radio Input')
+        }), /*#__PURE__*/jsxRuntime.jsx(material.MenuItem, {
+          value: "list",
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.listInput', 'List Input')
         })]
       })]
-    }), /*#__PURE__*/jsxRuntime.jsx(material.FormControlLabel, {
+    }), isTextElement && (markInputType === 'radio' || markInputType === 'list') && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+        variant: "caption",
+        sx: {
+          color: '#888',
+          fontSize: 11
+        },
+        children: "Options"
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionsEditor, {
+        options: markOptions,
+        onChange: setMarkOptions
+      })]
+    }), isTextElement && markInputType === 'list' && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+        sx: {
+          display: 'flex',
+          gap: 1
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(material.TextField, {
+          size: "small",
+          type: "number",
+          label: t('sidePanel.inputFields.minSelections', 'Min select'),
+          value: markMinSelections,
+          onChange: function onChange(e) {
+            return setMarkMinSelections(Math.max(0, parseInt(e.target.value) || 0));
+          },
+          inputProps: {
+            min: 0
+          },
+          sx: {
+            flex: 1,
+            '& .MuiInputBase-input': {
+              fontSize: 12,
+              py: 0.75
+            }
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(material.TextField, {
+          size: "small",
+          type: "number",
+          label: t('sidePanel.inputFields.maxSelections', 'Max select'),
+          value: markMaxSelections,
+          onChange: function onChange(e) {
+            return setMarkMaxSelections(Math.max(0, parseInt(e.target.value) || 0));
+          },
+          inputProps: {
+            min: 0
+          },
+          sx: {
+            flex: 1,
+            '& .MuiInputBase-input': {
+              fontSize: 12,
+              py: 0.75
+            }
+          }
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+        variant: "caption",
+        sx: {
+          color: '#999',
+          fontSize: 10
+        },
+        children: markMinSelections > 0 ? "Required \xB7 min ".concat(markMinSelections).concat(markMaxSelections > 0 ? ", max ".concat(markMaxSelections) : ', no max') : "Optional \xB7 max ".concat(markMaxSelections > 0 ? markMaxSelections : '∞')
+      })]
+    }), (!isTextElement || markInputType !== 'list') && /*#__PURE__*/jsxRuntime.jsx(material.FormControlLabel, {
       control: /*#__PURE__*/jsxRuntime.jsx(material.Checkbox, {
         size: "small",
         checked: markRequired,