labellife-design-tool 2.2.9 → 2.3.0

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

@@ -4642,7 +4642,7 @@ function ImagesGrid(_ref) {
   });
 }
 
-var _excluded = ["inputField", "promptText", "inputType", "required", "placeholder", "options", "minSelections", "maxSelections"];
+var _excluded = ["inputField", "promptText", "inputType", "required", "removeIfSkipped", "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 ──────────────────────────────────────────
@@ -4883,6 +4883,30 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref3) {
     _useState30 = _slicedToArray(_useState29, 2),
     listOptions = _useState30[0],
     setListOptions = _useState30[1];
+  var _useState31 = react.useState(false),
+    _useState32 = _slicedToArray(_useState31, 2),
+    textRemoveIfSkipped = _useState32[0],
+    setTextRemoveIfSkipped = _useState32[1];
+  var _useState33 = react.useState(false),
+    _useState34 = _slicedToArray(_useState33, 2),
+    dateRemoveIfSkipped = _useState34[0],
+    setDateRemoveIfSkipped = _useState34[1];
+  var _useState35 = react.useState(false),
+    _useState36 = _slicedToArray(_useState35, 2),
+    integerRemoveIfSkipped = _useState36[0],
+    setIntegerRemoveIfSkipped = _useState36[1];
+  var _useState37 = react.useState(false),
+    _useState38 = _slicedToArray(_useState37, 2),
+    imageRemoveIfSkipped = _useState38[0],
+    setImageRemoveIfSkipped = _useState38[1];
+  var _useState39 = react.useState(false),
+    _useState40 = _slicedToArray(_useState39, 2),
+    radioRemoveIfSkipped = _useState40[0],
+    setRadioRemoveIfSkipped = _useState40[1];
+  var _useState41 = react.useState(false),
+    _useState42 = _slicedToArray(_useState41, 2),
+    listRemoveIfSkipped = _useState42[0],
+    setListRemoveIfSkipped = _useState42[1];
   var addInputElement = function addInputElement(inputType) {
     var extra = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var page = store.activePage;
@@ -4902,7 +4926,8 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref3) {
           inputType: 'image',
           placeholder: t('sidePanel.inputFields.imagePlaceholder', 'Upload image'),
           promptText: extra.promptText || t('sidePanel.inputFields.defaultImagePrompt', 'Please upload an image'),
-          required: extra.required || false
+          required: extra.required || false,
+          removeIfSkipped: extra.removeIfSkipped || false
         }
       });
     } else {
@@ -4958,7 +4983,8 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref3) {
           inputType: inputType,
           placeholder: placeholder,
           promptText: extra.promptText || defaultPrompt,
-          required: extra.required || false
+          required: extra.required || false,
+          removeIfSkipped: extra.removeIfSkipped || false
         }, inputType === 'date' ? {
           dateFormat: extra.dateFormat || 'MM-DD-YYYY'
         } : {}), ['radio', 'list'].includes(inputType) ? {
@@ -5009,7 +5035,8 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref3) {
         onClick: function onClick() {
           return addInputElement('text', {
             promptText: textPrompt,
-            required: textRequired
+            required: textRequired,
+            removeIfSkipped: textRemoveIfSkipped
           });
         }
       }), /*#__PURE__*/jsxRuntime.jsx(material.TextField, {
@@ -5044,6 +5071,23 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref3) {
         sx: {
           ml: 5.5
         }
+      }), !textRequired && /*#__PURE__*/jsxRuntime.jsx(material.FormControlLabel, {
+        control: /*#__PURE__*/jsxRuntime.jsx(material.Checkbox, {
+          size: "small",
+          checked: textRemoveIfSkipped,
+          onChange: function onChange(e) {
+            return setTextRemoveIfSkipped(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+        }),
+        sx: {
+          ml: 5.5
+        }
       }), /*#__PURE__*/jsxRuntime.jsx(InputFieldCard, {
         icon: /*#__PURE__*/jsxRuntime.jsx(CalendarTodayIcon, {
           fontSize: "small"
@@ -5054,7 +5098,8 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref3) {
           return addInputElement('date', {
             dateFormat: dateFormat,
             promptText: datePrompt,
-            required: dateRequired
+            required: dateRequired,
+            removeIfSkipped: dateRemoveIfSkipped
           });
         }
       }), /*#__PURE__*/jsxRuntime.jsx(material.TextField, {
@@ -5089,6 +5134,23 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref3) {
         sx: {
           ml: 5.5
         }
+      }), !dateRequired && /*#__PURE__*/jsxRuntime.jsx(material.FormControlLabel, {
+        control: /*#__PURE__*/jsxRuntime.jsx(material.Checkbox, {
+          size: "small",
+          checked: dateRemoveIfSkipped,
+          onChange: function onChange(e) {
+            return setDateRemoveIfSkipped(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+        }),
+        sx: {
+          ml: 5.5
+        }
       }), /*#__PURE__*/jsxRuntime.jsxs(material.FormControl, {
         size: "small",
         sx: {
@@ -5128,7 +5190,8 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref3) {
         onClick: function onClick() {
           return addInputElement('integer', {
             promptText: integerPrompt,
-            required: integerRequired
+            required: integerRequired,
+            removeIfSkipped: integerRemoveIfSkipped
           });
         }
       }), /*#__PURE__*/jsxRuntime.jsx(material.TextField, {
@@ -5163,6 +5226,23 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref3) {
         sx: {
           ml: 5.5
         }
+      }), !integerRequired && /*#__PURE__*/jsxRuntime.jsx(material.FormControlLabel, {
+        control: /*#__PURE__*/jsxRuntime.jsx(material.Checkbox, {
+          size: "small",
+          checked: integerRemoveIfSkipped,
+          onChange: function onChange(e) {
+            return setIntegerRemoveIfSkipped(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+        }),
+        sx: {
+          ml: 5.5
+        }
       }), /*#__PURE__*/jsxRuntime.jsx(InputFieldCard, {
         icon: /*#__PURE__*/jsxRuntime.jsx(ImageIcon, {
           fontSize: "small"
@@ -5172,7 +5252,8 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref3) {
         onClick: function onClick() {
           return addInputElement('image', {
             promptText: imagePrompt,
-            required: imageRequired
+            required: imageRequired,
+            removeIfSkipped: imageRemoveIfSkipped
           });
         }
       }), /*#__PURE__*/jsxRuntime.jsx(material.TextField, {
@@ -5207,6 +5288,23 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref3) {
         sx: {
           ml: 5.5
         }
+      }), !imageRequired && /*#__PURE__*/jsxRuntime.jsx(material.FormControlLabel, {
+        control: /*#__PURE__*/jsxRuntime.jsx(material.Checkbox, {
+          size: "small",
+          checked: imageRemoveIfSkipped,
+          onChange: function onChange(e) {
+            return setImageRemoveIfSkipped(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+        }),
+        sx: {
+          ml: 5.5
+        }
       }), /*#__PURE__*/jsxRuntime.jsx(InputFieldCard, {
         icon: /*#__PURE__*/jsxRuntime.jsx(RadioButtonCheckedIcon, {
           fontSize: "small"
@@ -5217,7 +5315,8 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref3) {
           return addInputElement('radio', {
             promptText: radioPrompt,
             required: radioRequired,
-            options: radioOptions
+            options: radioOptions,
+            removeIfSkipped: radioRemoveIfSkipped
           });
         }
       }), /*#__PURE__*/jsxRuntime.jsx(material.TextField, {
@@ -5252,6 +5351,23 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref3) {
         sx: {
           ml: 5.5
         }
+      }), !radioRequired && /*#__PURE__*/jsxRuntime.jsx(material.FormControlLabel, {
+        control: /*#__PURE__*/jsxRuntime.jsx(material.Checkbox, {
+          size: "small",
+          checked: radioRemoveIfSkipped,
+          onChange: function onChange(e) {
+            return setRadioRemoveIfSkipped(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+        }),
+        sx: {
+          ml: 5.5
+        }
       }), /*#__PURE__*/jsxRuntime.jsx(OptionsEditor, {
         options: radioOptions,
         onChange: setRadioOptions
@@ -5266,7 +5382,8 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref3) {
             promptText: listPrompt,
             minSelections: listMinSelections,
             maxSelections: listMaxSelections,
-            options: listOptions
+            options: listOptions,
+            removeIfSkipped: listRemoveIfSkipped
           });
         }
       }), /*#__PURE__*/jsxRuntime.jsx(material.TextField, {
@@ -5339,6 +5456,23 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref3) {
           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 : '∞')
+      }), listMinSelections === 0 && /*#__PURE__*/jsxRuntime.jsx(material.FormControlLabel, {
+        control: /*#__PURE__*/jsxRuntime.jsx(material.Checkbox, {
+          size: "small",
+          checked: listRemoveIfSkipped,
+          onChange: function onChange(e) {
+            return setListRemoveIfSkipped(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+        }),
+        sx: {
+          ml: 5.5
+        }
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(material.Divider, {
       sx: {
@@ -5371,30 +5505,34 @@ var InputFieldsPanelContent = mobxReactLite.observer(function (_ref3) {
 var MarkAsVariableForm = mobxReactLite.observer(function (_ref4) {
   var _selectedElement$cust;
   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 _useState43 = react.useState(''),
+    _useState44 = _slicedToArray(_useState43, 2),
+    markLabel = _useState44[0],
+    setMarkLabel = _useState44[1];
+  var _useState45 = react.useState(false),
+    _useState46 = _slicedToArray(_useState45, 2),
+    markRequired = _useState46[0],
+    setMarkRequired = _useState46[1];
+  var _useState47 = react.useState('text'),
+    _useState48 = _slicedToArray(_useState47, 2),
+    markInputType = _useState48[0],
+    setMarkInputType = _useState48[1];
+  var _useState49 = react.useState(['Option 1', 'Option 2']),
+    _useState50 = _slicedToArray(_useState49, 2),
+    markOptions = _useState50[0],
+    setMarkOptions = _useState50[1];
+  var _useState51 = react.useState(0),
+    _useState52 = _slicedToArray(_useState51, 2),
+    markMinSelections = _useState52[0],
+    setMarkMinSelections = _useState52[1];
+  var _useState53 = react.useState(2),
+    _useState54 = _slicedToArray(_useState53, 2),
+    markMaxSelections = _useState54[0],
+    setMarkMaxSelections = _useState54[1];
+  var _useState55 = react.useState(false),
+    _useState56 = _slicedToArray(_useState55, 2),
+    markRemoveIfSkipped = _useState56[0],
+    setMarkRemoveIfSkipped = _useState56[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';
@@ -5403,13 +5541,14 @@ var MarkAsVariableForm = mobxReactLite.observer(function (_ref4) {
   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, _selectedElement$cust5, _selectedElement$cust6, _selectedElement$cust7;
+      var _selectedElement$cust2, _selectedElement$cust3, _selectedElement$cust4, _selectedElement$cust5, _selectedElement$cust6, _selectedElement$cust7, _selectedElement$cust8;
       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);
+      setMarkRemoveIfSkipped(!!((_selectedElement$cust8 = selectedElement.custom) !== null && _selectedElement$cust8 !== void 0 && _selectedElement$cust8.removeIfSkipped));
     } else {
       setMarkLabel('');
       setMarkRequired(false);
@@ -5417,6 +5556,7 @@ var MarkAsVariableForm = mobxReactLite.observer(function (_ref4) {
       setMarkOptions(['Option 1', 'Option 2']);
       setMarkMinSelections(0);
       setMarkMaxSelections(2);
+      setMarkRemoveIfSkipped(false);
     }
   }, [selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id]);
   var handleMark = function handleMark() {
@@ -5427,7 +5567,8 @@ var MarkAsVariableForm = mobxReactLite.observer(function (_ref4) {
         inputField: true,
         promptText: markLabel.trim(),
         inputType: effectiveType,
-        required: markRequired
+        required: markRequired,
+        removeIfSkipped: !markRequired && markRemoveIfSkipped
       }, ['radio', 'list'].includes(effectiveType) ? {
         options: markOptions.filter(Boolean)
       } : {}), effectiveType === 'list' ? {
@@ -5444,6 +5585,7 @@ var MarkAsVariableForm = mobxReactLite.observer(function (_ref4) {
       _ref5.promptText;
       _ref5.inputType;
       _ref5.required;
+      _ref5.removeIfSkipped;
       _ref5.placeholder;
       _ref5.options;
       _ref5.minSelections;
@@ -5664,6 +5806,20 @@ var MarkAsVariableForm = mobxReactLite.observer(function (_ref4) {
         },
         children: t('sidePanel.inputFields.required', 'Required')
       })
+    }), !markRequired && /*#__PURE__*/jsxRuntime.jsx(material.FormControlLabel, {
+      control: /*#__PURE__*/jsxRuntime.jsx(material.Checkbox, {
+        size: "small",
+        checked: markRemoveIfSkipped,
+        onChange: function onChange(e) {
+          return setMarkRemoveIfSkipped(e.target.checked);
+        }
+      }),
+      label: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+        sx: {
+          fontSize: 12
+        },
+        children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+      })
     }), /*#__PURE__*/jsxRuntime.jsx(material.Button, {
       variant: "contained",
       size: "small",