labellife-design-tool 2.2.7 → 2.2.9

package/dist/esm/canvas/workspace.js

@@ -1,7 +1,7 @@
 import { useRef, useState, useEffect, Fragment, useCallback } from 'react';
 import { Image, Group, Rect, Text, Arrow, Path, RegularPolygon, Star, Circle, Line, Shape, Transformer, Stage, Layer } from 'react-konva';
 import { observer } from 'mobx-react-lite';
-import { Box, Typography, IconButton, Button, TextField } from '@mui/material';
+import { Box, Typography, IconButton, Button, TextField, FormGroup, FormControlLabel, Checkbox, RadioGroup, Radio } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import Konva from 'konva';
@@ -971,8 +971,10 @@ var TextElementComponent = observer(function (_ref) {
     var scaleY = absScale.y;
     var cssFontStyle = element.fontStyle === 'italic' ? 'italic' : 'normal';
     var cssFontWeight = String(element.fontWeight || 'normal');
+    var originalText = element.text;
     var textarea = document.createElement('textarea');
-    textarea.value = element.text;
+    textarea.value = '';
+    textarea.placeholder = originalText;
     textarea.style.position = 'absolute';
     textarea.style.top = "".concat(textPosition.y, "px");
     textarea.style.left = "".concat(textPosition.x, "px");
@@ -1005,15 +1007,21 @@ var TextElementComponent = observer(function (_ref) {
     textarea.style.wordBreak = 'break-word';
     textarea.style.minHeight = '0';
     textarea.style.minWidth = '0';
+
+    // Placeholder inherits the element's text color at 40% opacity
+    var placeholderStyle = document.createElement('style');
+    placeholderStyle.textContent = "\n      textarea:placeholder-shown { opacity: 1; }\n      textarea::placeholder { color: ".concat(element.fill, "; opacity: 0.4; }\n    ");
+    stageContainer.appendChild(placeholderStyle);
     stageContainer.appendChild(textarea);
     textarea.focus();
-    textarea.select();
     var removed = false;
     var removeTextarea = function removeTextarea() {
+      var cancel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       if (removed) return;
       removed = true;
+      var newText = !cancel && textarea.value.length > 0 ? textarea.value : originalText;
       element.set({
-        text: textarea.value
+        text: newText
       });
       element.toggleEditMode(false);
       if (grp) grp.show();
@@ -1021,12 +1029,15 @@ var TextElementComponent = observer(function (_ref) {
       if (textarea.parentNode) {
         textarea.parentNode.removeChild(textarea);
       }
+      if (placeholderStyle.parentNode) {
+        placeholderStyle.parentNode.removeChild(placeholderStyle);
+      }
     };
-    textarea.addEventListener('blur', removeTextarea);
+    textarea.addEventListener('blur', function () {
+      return removeTextarea(false);
+    });
     textarea.addEventListener('keydown', function (e) {
-      if (e.key === 'Escape') {
-        removeTextarea();
-      }
+      if (e.key === 'Escape') removeTextarea(true);
     });
   };
 
@@ -1684,12 +1695,20 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
     imagePreview = _useState4[0],
     setImagePreview = _useState4[1];
   var fileInputRef = useRef(null);
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedItems = _useState6[0],
+    setSelectedItems = _useState6[1];
   var config = getInputFieldsConfig();
   var custom = field.custom || {};
   var inputType = custom.inputType || 'text';
   var promptText = custom.promptText || custom.placeholder || 'Please provide input';
   var dateFormat = custom.dateFormat || 'MM-DD-YYYY';
   var isRequired = custom.required === true;
+  var options = custom.options || [];
+  var minSelections = custom.minSelections || 0;
+  var maxSelections = custom.maxSelections || options.length;
+  var isSubmitDisabled = inputType === 'list' ? selectedItems.length < minSelections : isRequired && !value;
   var logoUrl = config.logoUrl || null;
   var headerText = config.headerText || null;
   var accentColor = config.accentColor || '#0d83cd';
@@ -1697,6 +1716,7 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
   useEffect(function () {
     setValue('');
     setImagePreview(null);
+    setSelectedItems([]);
   }, [field.id]);
   var handleImageSelect = function handleImageSelect(e) {
     var _e$target$files;
@@ -1716,12 +1736,14 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
       var dateObj = parseDateFromFormat(value);
       var formatted = formatDate(dateObj, dateFormat);
       onSubmit(field.id, formatted);
+    } else if (inputType === 'list') {
+      onSubmit(field.id, selectedItems.join(', '));
     } else {
       onSubmit(field.id, value);
     }
   };
   var handleKeyDown = function handleKeyDown(e) {
-    if (e.key === 'Enter' && inputType !== 'image') handleSubmit();
+    if (e.key === 'Enter' && inputType !== 'image' && inputType !== 'list' && inputType !== 'radio') handleSubmit();
   };
   var renderInput = function renderInput() {
     var sharedSx = _objectSpread2({
@@ -1861,6 +1883,119 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
             })]
           })]
         });
+      case 'radio':
+        return /*#__PURE__*/jsx(RadioGroup, {
+          value: value,
+          onChange: function onChange(e) {
+            return setValue(e.target.value);
+          },
+          sx: {
+            mt: 1,
+            gap: 1
+          },
+          children: options.map(function (opt) {
+            return /*#__PURE__*/jsx(FormControlLabel, {
+              value: opt,
+              control: /*#__PURE__*/jsx(Radio, {
+                sx: {
+                  color: '#d0d5dd',
+                  '&.Mui-checked': {
+                    color: accentColor
+                  }
+                }
+              }),
+              label: /*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontSize: 18
+                },
+                children: opt
+              }),
+              sx: {
+                m: 0,
+                border: '1px solid',
+                borderColor: value === opt ? accentColor : '#d0d5dd',
+                borderRadius: '8px',
+                px: 2,
+                py: 0.75,
+                transition: 'all 0.15s ease',
+                backgroundColor: value === opt ? 'rgba(13,131,205,0.04)' : 'transparent',
+                '&:hover': {
+                  borderColor: accentColor,
+                  backgroundColor: 'rgba(13,131,205,0.03)'
+                }
+              }
+            }, opt);
+          })
+        });
+      case 'list':
+        {
+          var isAtMax = maxSelections > 0 && selectedItems.length >= maxSelections;
+          return /*#__PURE__*/jsxs(Box, {
+            sx: {
+              mt: 1
+            },
+            children: [/*#__PURE__*/jsx(FormGroup, {
+              sx: {
+                gap: 1
+              },
+              children: options.map(function (opt) {
+                var checked = selectedItems.includes(opt);
+                var disabled = !checked && isAtMax;
+                return /*#__PURE__*/jsx(FormControlLabel, {
+                  control: /*#__PURE__*/jsx(Checkbox, {
+                    checked: checked,
+                    disabled: disabled,
+                    onChange: function onChange(e) {
+                      if (e.target.checked) {
+                        setSelectedItems(function (prev) {
+                          return [].concat(_toConsumableArray(prev), [opt]);
+                        });
+                      } else {
+                        setSelectedItems(function (prev) {
+                          return prev.filter(function (i) {
+                            return i !== opt;
+                          });
+                        });
+                      }
+                    },
+                    sx: {
+                      color: '#d0d5dd',
+                      '&.Mui-checked': {
+                        color: accentColor
+                      }
+                    }
+                  }),
+                  label: /*#__PURE__*/jsx(Typography, {
+                    sx: {
+                      fontSize: 18,
+                      opacity: disabled ? 0.45 : 1
+                    },
+                    children: opt
+                  }),
+                  sx: {
+                    m: 0,
+                    border: '1px solid',
+                    borderColor: checked ? accentColor : '#d0d5dd',
+                    borderRadius: '8px',
+                    px: 2,
+                    py: 0.75,
+                    opacity: disabled ? 0.6 : 1,
+                    transition: 'all 0.15s ease',
+                    backgroundColor: checked ? 'rgba(13,131,205,0.04)' : 'transparent'
+                  }
+                }, opt);
+              })
+            }), /*#__PURE__*/jsxs(Typography, {
+              variant: "caption",
+              sx: {
+                color: '#999',
+                display: 'block',
+                mt: 1.5
+              },
+              children: [selectedItems.length, maxSelections > 0 ? "/".concat(maxSelections) : '', " selected", minSelections > 0 && " \xB7 min ".concat(minSelections, " required")]
+            })]
+          });
+        }
       case 'text':
       default:
         return /*#__PURE__*/jsx(TextField, {
@@ -2003,7 +2138,7 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
           }), /*#__PURE__*/jsx(Button, {
             variant: "contained",
             onClick: handleSubmit,
-            disabled: isRequired && !value,
+            disabled: isSubmitDisabled,
             sx: _objectSpread2({
               textTransform: 'none',
               fontWeight: 600,
@@ -2019,7 +2154,7 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
               }
             }, config.submitButtonStyle),
             children: config.submitButtonText || t('inputFieldsDialog.submit', 'Continue')
-          }), !isRequired && /*#__PURE__*/jsx(Button, {
+          }), (inputType === 'list' ? minSelections === 0 : !isRequired) && /*#__PURE__*/jsx(Button, {
             variant: "outlined",
             onClick: function onClick() {
               return onSkip(field.id);
@@ -2056,10 +2191,10 @@ var InputFieldsDialog = observer(function (_ref2) {
     backTrigger = _ref2$backTrigger === void 0 ? 0 : _ref2$backTrigger;
   // displayIndex counts how many fields have been answered (for step indicator only).
   // Navigation always uses fields[0] — the first remaining pending field.
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    displayIndex = _useState6[0],
-    setDisplayIndex = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    displayIndex = _useState8[0],
+    setDisplayIndex = _useState8[1];
   var initialTotalRef = useRef(0);
   var completedHistoryRef = useRef([]);
   var isGoingBackRef = useRef(false);
@@ -2204,7 +2339,9 @@ var InputFieldsDialog = observer(function (_ref2) {
     text: config.CustomTextDialog,
     date: config.CustomDateDialog,
     integer: config.CustomIntegerDialog,
-    image: config.CustomImageDialog
+    image: config.CustomImageDialog,
+    radio: config.CustomRadioDialog,
+    list: config.CustomListDialog
   };
   var fieldType = currentField.custom && currentField.custom.inputType || 'text';
   var PerTypeDialog = TYPE_DIALOG_MAP[fieldType];