labellife-design-tool 2.2.9 → 2.3.0

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

@@ -4640,7 +4640,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 ──────────────────────────────────────────
@@ -4881,6 +4881,30 @@ var InputFieldsPanelContent = observer(function (_ref3) {
     _useState30 = _slicedToArray(_useState29, 2),
     listOptions = _useState30[0],
     setListOptions = _useState30[1];
+  var _useState31 = useState(false),
+    _useState32 = _slicedToArray(_useState31, 2),
+    textRemoveIfSkipped = _useState32[0],
+    setTextRemoveIfSkipped = _useState32[1];
+  var _useState33 = useState(false),
+    _useState34 = _slicedToArray(_useState33, 2),
+    dateRemoveIfSkipped = _useState34[0],
+    setDateRemoveIfSkipped = _useState34[1];
+  var _useState35 = useState(false),
+    _useState36 = _slicedToArray(_useState35, 2),
+    integerRemoveIfSkipped = _useState36[0],
+    setIntegerRemoveIfSkipped = _useState36[1];
+  var _useState37 = useState(false),
+    _useState38 = _slicedToArray(_useState37, 2),
+    imageRemoveIfSkipped = _useState38[0],
+    setImageRemoveIfSkipped = _useState38[1];
+  var _useState39 = useState(false),
+    _useState40 = _slicedToArray(_useState39, 2),
+    radioRemoveIfSkipped = _useState40[0],
+    setRadioRemoveIfSkipped = _useState40[1];
+  var _useState41 = 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;
@@ -4900,7 +4924,8 @@ var InputFieldsPanelContent = 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 {
@@ -4956,7 +4981,8 @@ var InputFieldsPanelContent = 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) ? {
@@ -5007,7 +5033,8 @@ var InputFieldsPanelContent = observer(function (_ref3) {
         onClick: function onClick() {
           return addInputElement('text', {
             promptText: textPrompt,
-            required: textRequired
+            required: textRequired,
+            removeIfSkipped: textRemoveIfSkipped
           });
         }
       }), /*#__PURE__*/jsx(TextField, {
@@ -5042,6 +5069,23 @@ var InputFieldsPanelContent = observer(function (_ref3) {
         sx: {
           ml: 5.5
         }
+      }), !textRequired && /*#__PURE__*/jsx(FormControlLabel, {
+        control: /*#__PURE__*/jsx(Checkbox, {
+          size: "small",
+          checked: textRemoveIfSkipped,
+          onChange: function onChange(e) {
+            return setTextRemoveIfSkipped(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+        }),
+        sx: {
+          ml: 5.5
+        }
       }), /*#__PURE__*/jsx(InputFieldCard, {
         icon: /*#__PURE__*/jsx(CalendarTodayIcon, {
           fontSize: "small"
@@ -5052,7 +5096,8 @@ var InputFieldsPanelContent = observer(function (_ref3) {
           return addInputElement('date', {
             dateFormat: dateFormat,
             promptText: datePrompt,
-            required: dateRequired
+            required: dateRequired,
+            removeIfSkipped: dateRemoveIfSkipped
           });
         }
       }), /*#__PURE__*/jsx(TextField, {
@@ -5087,6 +5132,23 @@ var InputFieldsPanelContent = observer(function (_ref3) {
         sx: {
           ml: 5.5
         }
+      }), !dateRequired && /*#__PURE__*/jsx(FormControlLabel, {
+        control: /*#__PURE__*/jsx(Checkbox, {
+          size: "small",
+          checked: dateRemoveIfSkipped,
+          onChange: function onChange(e) {
+            return setDateRemoveIfSkipped(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+        }),
+        sx: {
+          ml: 5.5
+        }
       }), /*#__PURE__*/jsxs(FormControl, {
         size: "small",
         sx: {
@@ -5126,7 +5188,8 @@ var InputFieldsPanelContent = observer(function (_ref3) {
         onClick: function onClick() {
           return addInputElement('integer', {
             promptText: integerPrompt,
-            required: integerRequired
+            required: integerRequired,
+            removeIfSkipped: integerRemoveIfSkipped
           });
         }
       }), /*#__PURE__*/jsx(TextField, {
@@ -5161,6 +5224,23 @@ var InputFieldsPanelContent = observer(function (_ref3) {
         sx: {
           ml: 5.5
         }
+      }), !integerRequired && /*#__PURE__*/jsx(FormControlLabel, {
+        control: /*#__PURE__*/jsx(Checkbox, {
+          size: "small",
+          checked: integerRemoveIfSkipped,
+          onChange: function onChange(e) {
+            return setIntegerRemoveIfSkipped(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+        }),
+        sx: {
+          ml: 5.5
+        }
       }), /*#__PURE__*/jsx(InputFieldCard, {
         icon: /*#__PURE__*/jsx(ImageIcon, {
           fontSize: "small"
@@ -5170,7 +5250,8 @@ var InputFieldsPanelContent = observer(function (_ref3) {
         onClick: function onClick() {
           return addInputElement('image', {
             promptText: imagePrompt,
-            required: imageRequired
+            required: imageRequired,
+            removeIfSkipped: imageRemoveIfSkipped
           });
         }
       }), /*#__PURE__*/jsx(TextField, {
@@ -5205,6 +5286,23 @@ var InputFieldsPanelContent = observer(function (_ref3) {
         sx: {
           ml: 5.5
         }
+      }), !imageRequired && /*#__PURE__*/jsx(FormControlLabel, {
+        control: /*#__PURE__*/jsx(Checkbox, {
+          size: "small",
+          checked: imageRemoveIfSkipped,
+          onChange: function onChange(e) {
+            return setImageRemoveIfSkipped(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+        }),
+        sx: {
+          ml: 5.5
+        }
       }), /*#__PURE__*/jsx(InputFieldCard, {
         icon: /*#__PURE__*/jsx(RadioButtonCheckedIcon, {
           fontSize: "small"
@@ -5215,7 +5313,8 @@ var InputFieldsPanelContent = observer(function (_ref3) {
           return addInputElement('radio', {
             promptText: radioPrompt,
             required: radioRequired,
-            options: radioOptions
+            options: radioOptions,
+            removeIfSkipped: radioRemoveIfSkipped
           });
         }
       }), /*#__PURE__*/jsx(TextField, {
@@ -5250,6 +5349,23 @@ var InputFieldsPanelContent = observer(function (_ref3) {
         sx: {
           ml: 5.5
         }
+      }), !radioRequired && /*#__PURE__*/jsx(FormControlLabel, {
+        control: /*#__PURE__*/jsx(Checkbox, {
+          size: "small",
+          checked: radioRemoveIfSkipped,
+          onChange: function onChange(e) {
+            return setRadioRemoveIfSkipped(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+        }),
+        sx: {
+          ml: 5.5
+        }
       }), /*#__PURE__*/jsx(OptionsEditor, {
         options: radioOptions,
         onChange: setRadioOptions
@@ -5264,7 +5380,8 @@ var InputFieldsPanelContent = observer(function (_ref3) {
             promptText: listPrompt,
             minSelections: listMinSelections,
             maxSelections: listMaxSelections,
-            options: listOptions
+            options: listOptions,
+            removeIfSkipped: listRemoveIfSkipped
           });
         }
       }), /*#__PURE__*/jsx(TextField, {
@@ -5337,6 +5454,23 @@ var InputFieldsPanelContent = 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__*/jsx(FormControlLabel, {
+        control: /*#__PURE__*/jsx(Checkbox, {
+          size: "small",
+          checked: listRemoveIfSkipped,
+          onChange: function onChange(e) {
+            return setListRemoveIfSkipped(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+        }),
+        sx: {
+          ml: 5.5
+        }
       })]
     }), /*#__PURE__*/jsx(Divider, {
       sx: {
@@ -5369,30 +5503,34 @@ var InputFieldsPanelContent = observer(function (_ref3) {
 var MarkAsVariableForm = observer(function (_ref4) {
   var _selectedElement$cust;
   var store = _ref4.store;
-  var _useState31 = useState(''),
-    _useState32 = _slicedToArray(_useState31, 2),
-    markLabel = _useState32[0],
-    setMarkLabel = _useState32[1];
-  var _useState33 = useState(false),
-    _useState34 = _slicedToArray(_useState33, 2),
-    markRequired = _useState34[0],
-    setMarkRequired = _useState34[1];
-  var _useState35 = useState('text'),
-    _useState36 = _slicedToArray(_useState35, 2),
-    markInputType = _useState36[0],
-    setMarkInputType = _useState36[1];
-  var _useState37 = useState(['Option 1', 'Option 2']),
-    _useState38 = _slicedToArray(_useState37, 2),
-    markOptions = _useState38[0],
-    setMarkOptions = _useState38[1];
-  var _useState39 = useState(0),
-    _useState40 = _slicedToArray(_useState39, 2),
-    markMinSelections = _useState40[0],
-    setMarkMinSelections = _useState40[1];
-  var _useState41 = useState(2),
-    _useState42 = _slicedToArray(_useState41, 2),
-    markMaxSelections = _useState42[0],
-    setMarkMaxSelections = _useState42[1];
+  var _useState43 = useState(''),
+    _useState44 = _slicedToArray(_useState43, 2),
+    markLabel = _useState44[0],
+    setMarkLabel = _useState44[1];
+  var _useState45 = useState(false),
+    _useState46 = _slicedToArray(_useState45, 2),
+    markRequired = _useState46[0],
+    setMarkRequired = _useState46[1];
+  var _useState47 = useState('text'),
+    _useState48 = _slicedToArray(_useState47, 2),
+    markInputType = _useState48[0],
+    setMarkInputType = _useState48[1];
+  var _useState49 = useState(['Option 1', 'Option 2']),
+    _useState50 = _slicedToArray(_useState49, 2),
+    markOptions = _useState50[0],
+    setMarkOptions = _useState50[1];
+  var _useState51 = useState(0),
+    _useState52 = _slicedToArray(_useState51, 2),
+    markMinSelections = _useState52[0],
+    setMarkMinSelections = _useState52[1];
+  var _useState53 = useState(2),
+    _useState54 = _slicedToArray(_useState53, 2),
+    markMaxSelections = _useState54[0],
+    setMarkMaxSelections = _useState54[1];
+  var _useState55 = 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';
@@ -5401,13 +5539,14 @@ var MarkAsVariableForm = observer(function (_ref4) {
   var isAlreadyVariable = !!(selectedElement !== null && selectedElement !== void 0 && (_selectedElement$cust = selectedElement.custom) !== null && _selectedElement$cust !== void 0 && _selectedElement$cust.inputField);
   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);
@@ -5415,6 +5554,7 @@ var MarkAsVariableForm = 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() {
@@ -5425,7 +5565,8 @@ var MarkAsVariableForm = 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' ? {
@@ -5442,6 +5583,7 @@ var MarkAsVariableForm = observer(function (_ref4) {
       _ref5.promptText;
       _ref5.inputType;
       _ref5.required;
+      _ref5.removeIfSkipped;
       _ref5.placeholder;
       _ref5.options;
       _ref5.minSelections;
@@ -5662,6 +5804,20 @@ var MarkAsVariableForm = observer(function (_ref4) {
         },
         children: t('sidePanel.inputFields.required', 'Required')
       })
+    }), !markRequired && /*#__PURE__*/jsx(FormControlLabel, {
+      control: /*#__PURE__*/jsx(Checkbox, {
+        size: "small",
+        checked: markRemoveIfSkipped,
+        onChange: function onChange(e) {
+          return setMarkRemoveIfSkipped(e.target.checked);
+        }
+      }),
+      label: /*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: 12
+        },
+        children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+      })
     }), /*#__PURE__*/jsx(Button, {
       variant: "contained",
       size: "small",