easy-email-extensions 4.4.5 → 4.6.0

Sign up to get free protection for your applications and to get access to all the features.
package/lib/index2.js CHANGED
@@ -56,7 +56,7 @@ var __async = (__this, __arguments, generator) => {
56
56
  };
57
57
  import * as React from "react";
58
58
  import React__default, { Children, isValidElement, cloneElement, createContext, useContext, Component, useMemo, memo, forwardRef, useEffect, useRef, useLayoutEffect, useState, useImperativeHandle, PureComponent, useCallback, useReducer, createRef, Fragment, createElement, Suspense } from "react";
59
- import { IconFont, useEditorProps, useRefState, Stack as Stack$4, getShadowRoot, DATA_CONTENT_EDITABLE_TYPE, ContentEditableType, TextStyle, useEditorContext, useBlock, useFocusIdx, useFocusBlockLayout, MergeTagBadge, FIXED_CONTAINER_ID, getPluginElement, RICH_TEXT_BAR_ID, CONTENT_EDITABLE_CLASS_NAME, getEditorRoot, DATA_CONTENT_EDITABLE_IDX, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, isTextBlock, getBlockNodeByIdx, useLazyState, useActiveTab, ActiveTabKeys } from "easy-email-editor";
59
+ import { IconFont, useEditorProps, Stack as Stack$4, useRefState, getShadowRoot, DATA_CONTENT_EDITABLE_TYPE, ContentEditableType, TextStyle, useEditorContext, useBlock, useFocusIdx, useFocusBlockLayout, MergeTagBadge, FIXED_CONTAINER_ID, getPluginElement, RICH_TEXT_BAR_ID, CONTENT_EDITABLE_CLASS_NAME, getEditorRoot, DATA_CONTENT_EDITABLE_IDX, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, isTextBlock, getBlockNodeByIdx, useLazyState, useActiveTab, ActiveTabKeys } from "easy-email-editor";
60
60
  import { BasicType, ImageManager, EMAIL_BLOCK_CLASS_NAME, BlockManager, createBlockDataByType, AdvancedType, Operator, OperatorSymbol, isAdvancedBlock, getParentByIdx, getParentIdx, getIndexByIdx, getSiblingIdx, getNodeIdxFromClassName, getNodeIdxClassName, getPageIdx, getChildIdx, MjmlToJson, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
61
61
  import ReactDOM, { findDOMNode, createPortal } from "react-dom";
62
62
  import { Field, useForm as useForm$1, useField, Form as Form$3, version as version$2, useFormState } from "react-final-form";
@@ -6669,7 +6669,7 @@ function isObject$e(obj) {
6669
6669
  function isString$1(obj) {
6670
6670
  return opt$1.call(obj) === "[object String]";
6671
6671
  }
6672
- function isNumber$1(obj) {
6672
+ function isNumber$2(obj) {
6673
6673
  return opt$1.call(obj) === "[object Number]" && obj === obj;
6674
6674
  }
6675
6675
  function isUndefined(obj) {
@@ -7829,7 +7829,7 @@ var Notification = function(_super) {
7829
7829
  if (options2.prefixCls) {
7830
7830
  prefixCls = options2.prefixCls;
7831
7831
  }
7832
- if (isNumber$1(options2.duration)) {
7832
+ if (isNumber$2(options2.duration)) {
7833
7833
  duration = options2.duration;
7834
7834
  }
7835
7835
  if (options2.getContainer && options2.getContainer() !== container$1) {
@@ -9621,7 +9621,7 @@ function autoSizeTextAreaHeight(autoSize, node) {
9621
9621
  if (minRows || maxRows) {
9622
9622
  mirrorTextArea.value = "";
9623
9623
  var singleRowHeight = mirrorTextArea.scrollHeight - paddingSize;
9624
- if (isNumber$1(minRows)) {
9624
+ if (isNumber$2(minRows)) {
9625
9625
  minHeight = singleRowHeight * minRows;
9626
9626
  if (boxSizing === "border-box") {
9627
9627
  minHeight += paddingSize;
@@ -9629,7 +9629,7 @@ function autoSizeTextAreaHeight(autoSize, node) {
9629
9629
  }
9630
9630
  mirrorTextAreaHeight = Math.max(mirrorTextAreaHeight, minHeight);
9631
9631
  }
9632
- if (isNumber$1(maxRows)) {
9632
+ if (isNumber$2(maxRows)) {
9633
9633
  maxHeight = singleRowHeight * maxRows;
9634
9634
  if (boxSizing === "border-box") {
9635
9635
  maxHeight += paddingSize;
@@ -13123,7 +13123,7 @@ var VirtualList = React__default.forwardRef(function(props, ref) {
13123
13123
  useComputeVirtualItemHeight(refItemHeightMap);
13124
13124
  var itemCount = data.length;
13125
13125
  var itemHeight = propItemHeight || refItemHeightMap.current[KEY_VIRTUAL_ITEM_HEIGHT] || DEFAULT_VIRTUAL_ITEM_HEIGHT;
13126
- var viewportHeight = isNumber$1(styleListMaxHeight) ? styleListMaxHeight : stateHeight;
13126
+ var viewportHeight = isNumber$2(styleListMaxHeight) ? styleListMaxHeight : stateHeight;
13127
13127
  var itemCountVisible = Math.ceil(viewportHeight / itemHeight);
13128
13128
  var itemTotalHeight = itemHeight * itemCount;
13129
13129
  var isVirtual = threshold !== null && itemCount >= threshold && itemTotalHeight > viewportHeight;
@@ -13446,7 +13446,7 @@ var VirtualList = React__default.forwardRef(function(props, ref) {
13446
13446
  return null;
13447
13447
  };
13448
13448
  return React__default.createElement(ResizeObserver, { onResize: function() {
13449
- if (refList.current && !isNumber$1(styleListMaxHeight)) {
13449
+ if (refList.current && !isNumber$2(styleListMaxHeight)) {
13450
13450
  var clientHeight = refList.current.clientHeight;
13451
13451
  setStateHeight(clientHeight);
13452
13452
  }
@@ -13956,7 +13956,7 @@ function flatChildren(_a, _b, _c) {
13956
13956
  var extendChildren = function(arr, origin) {
13957
13957
  if (origin && isArray$c(arr) && arr.length) {
13958
13958
  arr.forEach(function(option) {
13959
- option = isString$1(option) || isNumber$1(option) ? {
13959
+ option = isString$1(option) || isNumber$2(option) ? {
13960
13960
  label: option,
13961
13961
  value: option
13962
13962
  } : option;
@@ -16636,7 +16636,7 @@ function SplitGroup(props, ref) {
16636
16636
  };
16637
16637
  function formatSize(size) {
16638
16638
  var totalPX = isHorizontal ? wrapperRef.current.offsetWidth : wrapperRef.current.offsetHeight;
16639
- if (!size || isNumber$1(size) && size < 0) {
16639
+ if (!size || isNumber$2(size) && size < 0) {
16640
16640
  return 0;
16641
16641
  }
16642
16642
  var percent = isString$1(size) ? parseFloat(size) / totalPX : size;
@@ -16983,7 +16983,7 @@ function ResizeBox(baseProps, ref) {
16983
16983
  return __assign$X(__assign$X({}, pre), (_a2 = {}, _a2["padding" + styleDirection] = size, _a2));
16984
16984
  });
16985
16985
  }
16986
- var wrapperStyles = __assign$X(__assign$X(__assign$X(__assign$X({}, paddingStyles), style || {}), isNumber$1(width) ? { width } : {}), isNumber$1(height) ? { height } : {});
16986
+ var wrapperStyles = __assign$X(__assign$X(__assign$X(__assign$X({}, paddingStyles), style || {}), isNumber$2(width) ? { width } : {}), isNumber$2(height) ? { height } : {});
16987
16987
  var Tag2 = component;
16988
16988
  return React__default.createElement(Tag2, { style: wrapperStyles, className: classNames, ref: wrapperRef }, children, directions.map(function(direction) {
16989
16989
  if (allDirections.indexOf(direction) !== -1) {
@@ -17144,7 +17144,7 @@ function Sider(props, ref) {
17144
17144
  var _g = __read$L(useMergeValue(false, {
17145
17145
  value: props.collapsed
17146
17146
  }), 2), collapsed = _g[0], setCollapsed = _g[1];
17147
- var propsWidth = isNumber$1(width) ? width + "px" : String(width);
17147
+ var propsWidth = isNumber$2(width) ? width + "px" : String(width);
17148
17148
  var _h = __read$L(useState(propsWidth), 2), siderWidth = _h[0], setSiderWidth = _h[1];
17149
17149
  var refResponsiveHandlerToken = useRef(null);
17150
17150
  var refStateForResponsiveHandler = useRef(null);
@@ -17177,7 +17177,7 @@ function Sider(props, ref) {
17177
17177
  };
17178
17178
  }, []);
17179
17179
  useEffect(function() {
17180
- var _collapsedWidth = isNumber$1(collapsedWidth) ? collapsedWidth + "px" : String(collapsedWidth);
17180
+ var _collapsedWidth = isNumber$2(collapsedWidth) ? collapsedWidth + "px" : String(collapsedWidth);
17181
17181
  setSiderWidth(collapsed ? _collapsedWidth : propsWidth);
17182
17182
  }, [collapsed, propsWidth, collapsedWidth]);
17183
17183
  var resizable = resizeDirections && isArray$c(resizeDirections) || ((_b = resizeBoxProps.directions) === null || _b === void 0 ? void 0 : _b.length);
@@ -18519,7 +18519,7 @@ function DotLoading(props) {
18519
18519
  var sizeNumber = props.size ? parseInt(String(props.size)) : 0;
18520
18520
  return React__default.createElement("div", { className: prefixCls2 + "-list", style: {
18521
18521
  height: props.size,
18522
- width: isNumber$1(sizeNumber) && sizeNumber > 0 ? sizeNumber * 7 : ""
18522
+ width: isNumber$2(sizeNumber) && sizeNumber > 0 ? sizeNumber * 7 : ""
18523
18523
  } }, __spreadArray$h([], __read$G(new Array(5)), false).map(function(_, index2) {
18524
18524
  return React__default.createElement("div", { key: index2, className: prefixCls2, style: dotStyle });
18525
18525
  }));
@@ -20946,7 +20946,7 @@ function isObject(obj) {
20946
20946
  function isString(obj) {
20947
20947
  return opt.call(obj) === "[object String]";
20948
20948
  }
20949
- function isNumber(obj) {
20949
+ function isNumber$1(obj) {
20950
20950
  return opt.call(obj) === "[object Number]" && obj === obj;
20951
20951
  }
20952
20952
  function isBoolean(obj) {
@@ -21163,7 +21163,7 @@ var StringValidator = /* @__PURE__ */ function(Base3) {
21163
21163
  var NumberValidator = /* @__PURE__ */ function(Base3) {
21164
21164
  function NumberValidator2(obj, options2) {
21165
21165
  Base3.call(this, obj, Object.assign(Object.assign({}, options2), { type: "number" }));
21166
- this.validate(options2 && options2.strict ? isNumber(this.obj) : true, this.getValidateMsg("type.number"));
21166
+ this.validate(options2 && options2.strict ? isNumber$1(this.obj) : true, this.getValidateMsg("type.number"));
21167
21167
  }
21168
21168
  if (Base3)
21169
21169
  NumberValidator2.__proto__ = Base3;
@@ -22399,7 +22399,7 @@ function Col$1(baseProps, ref) {
22399
22399
  var screenList = { xs, sm, md, lg, xl, xxl };
22400
22400
  Object.keys(screenList).forEach(function(screen) {
22401
22401
  var screenValue = screenList[screen];
22402
- if (isNumber$1(screenValue)) {
22402
+ if (isNumber$2(screenValue)) {
22403
22403
  if (screenValue >= 0) {
22404
22404
  mergeClassName2[prefixCls3 + "-" + screen + "-" + screenValue] = true;
22405
22405
  }
@@ -23663,7 +23663,7 @@ function InputNumber(baseProps, ref) {
23663
23663
  var prefixCls2 = getPrefixCls("input-number");
23664
23664
  var mergedSize = size || ctxSize;
23665
23665
  var mergedPrecision = function() {
23666
- if (isNumber$1(precision)) {
23666
+ if (isNumber$2(precision)) {
23667
23667
  var decimal = ("" + step).split(".")[1];
23668
23668
  var stepPrecision = decimal && decimal.length || 0;
23669
23669
  return Math.max(stepPrecision, precision);
@@ -23687,7 +23687,7 @@ function InputNumber(baseProps, ref) {
23687
23687
  }, []);
23688
23688
  var setValue = function(newVal) {
23689
23689
  setInnerValue(newVal);
23690
- var newValue = isNumber$1(+newVal) ? +newVal : void 0;
23690
+ var newValue = isNumber$2(+newVal) ? +newVal : void 0;
23691
23691
  if (newValue !== value) {
23692
23692
  onChange && onChange(newValue);
23693
23693
  }
@@ -23700,7 +23700,7 @@ function InputNumber(baseProps, ref) {
23700
23700
  var finalValue = Number(changedValue);
23701
23701
  if (!changedValue && changedValue !== 0) {
23702
23702
  finalValue = void 0;
23703
- } else if (!isNumber$1(finalValue)) {
23703
+ } else if (!isNumber$2(finalValue)) {
23704
23704
  finalValue = changedValue === "-" ? changedValue : "";
23705
23705
  }
23706
23706
  if (finalValue < min) {
@@ -23709,7 +23709,7 @@ function InputNumber(baseProps, ref) {
23709
23709
  if (finalValue > max) {
23710
23710
  finalValue = max;
23711
23711
  }
23712
- return isNumber$1(finalValue) ? isNumber$1(mergedPrecision) ? Number(toFixed(finalValue, mergedPrecision)) : finalValue : void 0;
23712
+ return isNumber$2(finalValue) ? isNumber$2(mergedPrecision) ? Number(toFixed(finalValue, mergedPrecision)) : finalValue : void 0;
23713
23713
  }, [min, max, mergedPrecision]);
23714
23714
  useEffect(function() {
23715
23715
  return function() {
@@ -23720,7 +23720,7 @@ function InputNumber(baseProps, ref) {
23720
23720
  refHasOperateSincePropValueChanged.current = false;
23721
23721
  }, [props.value]);
23722
23722
  useEffect(function() {
23723
- var _isOutOfRange = isNumber$1(min) && value < min || isNumber$1(max) && value > max;
23723
+ var _isOutOfRange = isNumber$2(min) && value < min || isNumber$2(max) && value > max;
23724
23724
  if (_isOutOfRange && refHasOperateSincePropValueChanged.current) {
23725
23725
  setValue(getLegalValue(value));
23726
23726
  }
@@ -23753,7 +23753,7 @@ function InputNumber(baseProps, ref) {
23753
23753
  var _value;
23754
23754
  if (isUserInputting) {
23755
23755
  _value = inputValue;
23756
- } else if (isNumber$1(value) && isNumber$1(mergedPrecision)) {
23756
+ } else if (isNumber$2(value) && isNumber$2(mergedPrecision)) {
23757
23757
  _value = toFixed(value, mergedPrecision);
23758
23758
  } else if (value == null) {
23759
23759
  _value = "";
@@ -23767,7 +23767,7 @@ function InputNumber(baseProps, ref) {
23767
23767
  setIsUserInputting(true);
23768
23768
  var targetValue = value2.trim().replace(/。/g, ".");
23769
23769
  targetValue = parser ? parser(targetValue) : targetValue;
23770
- if (isNumber$1(+targetValue) || targetValue === "-" || !targetValue || targetValue === ".") {
23770
+ if (isNumber$2(+targetValue) || targetValue === "-" || !targetValue || targetValue === ".") {
23771
23771
  var formatValue2 = getLegalValue(targetValue);
23772
23772
  setInputValue(targetValue);
23773
23773
  setValue(formatValue2);
@@ -25204,7 +25204,7 @@ var SliderButton = function(props) {
25204
25204
  bottom: 12
25205
25205
  }, ref: tooltip, popup: function() {
25206
25206
  return renderTooltipContent(position);
25207
- }, popupVisible, disabled: tooltipVisible === false, getPopupContainer: getTooltipContainer, position, childrenPrefix: getPrefixCls("tooltip") }, React__default.createElement("div", { className: cs$1(prefixCls2 + "-button", (_a = {}, _a[prefixCls2 + "-button-active"] = isActive, _a)), onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style, role: "slider", "aria-valuemax": props.maxValue, "aria-valuemin": props.minValue, "aria-valuenow": value, "aria-disabled": !!disabled, tabIndex: 0, "aria-valuetext": isString$1(tooltipText) || isNumber$1(tooltipText) ? String(tooltipText) : void 0 }));
25207
+ }, popupVisible, disabled: tooltipVisible === false, getPopupContainer: getTooltipContainer, position, childrenPrefix: getPrefixCls("tooltip") }, React__default.createElement("div", { className: cs$1(prefixCls2 + "-button", (_a = {}, _a[prefixCls2 + "-button-active"] = isActive, _a)), onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style, role: "slider", "aria-valuemax": props.maxValue, "aria-valuemin": props.minValue, "aria-valuenow": value, "aria-disabled": !!disabled, tabIndex: 0, "aria-valuetext": isString$1(tooltipText) || isNumber$2(tooltipText) ? String(tooltipText) : void 0 }));
25208
25208
  };
25209
25209
  var SliderButton$1 = memo(SliderButton);
25210
25210
  var __read$l = globalThis && globalThis.__read || function(o, n) {
@@ -25498,7 +25498,7 @@ function useLegalValue(props) {
25498
25498
  } else {
25499
25499
  console.error("value must be an array when range is true");
25500
25500
  }
25501
- } else if (isNumber$1(val)) {
25501
+ } else if (isNumber$2(val)) {
25502
25502
  endVal = getLegalValue(val);
25503
25503
  } else {
25504
25504
  console.error("value must be a number when range is false");
@@ -25548,7 +25548,7 @@ function useInterval(props) {
25548
25548
  var _a = props.marks, marks = _a === void 0 ? {} : _a, getIntervalConfig = props.getIntervalConfig, max = props.max, min = props.min;
25549
25549
  var _b = useMemo(function() {
25550
25550
  var markKeys = Object.keys(marks).filter(function(key) {
25551
- return isNumber$1(+key) && +key >= min && +key <= max;
25551
+ return isNumber$2(+key) && +key >= min && +key <= max;
25552
25552
  }).sort(function(a, b) {
25553
25553
  return +a > +b ? 1 : -1;
25554
25554
  });
@@ -25587,10 +25587,10 @@ function useInterval(props) {
25587
25587
  var customConfig = getIntervalConfig([begin, end], index2) || {};
25588
25588
  var step = customConfig.step;
25589
25589
  var width = rateToFloat(customConfig.width);
25590
- if (isNumber$1(step) && step) {
25590
+ if (isNumber$2(step) && step) {
25591
25591
  config2.step = step;
25592
25592
  }
25593
- if (isNumber$1(width) && width) {
25593
+ if (isNumber$2(width) && width) {
25594
25594
  config2.width = width;
25595
25595
  }
25596
25596
  return config2;
@@ -25936,7 +25936,7 @@ function Space(baseProps, ref) {
25936
25936
  var innerAlign = align || (direction === "horizontal" ? "center" : "");
25937
25937
  var classNames = cs$1(prefixCls2, (_a = {}, _a[prefixCls2 + "-" + direction] = direction, _a[prefixCls2 + "-align-" + innerAlign] = innerAlign, _a[prefixCls2 + "-wrap"] = wrap2, _a[prefixCls2 + "-rtl"] = rtl, _a), className);
25938
25938
  function getMargin(size2) {
25939
- if (isNumber$1(size2)) {
25939
+ if (isNumber$2(size2)) {
25940
25940
  return size2;
25941
25941
  }
25942
25942
  switch (size2) {
@@ -26604,7 +26604,7 @@ var TabHeader = React__default.forwardRef(function(props, ref) {
26604
26604
  nextOffset_1 = bottomOffset;
26605
26605
  } else if (scrollAlign_1 === "center") {
26606
26606
  nextOffset_1 = topOffset - (diffStyle.top - diffStyle.bottom) / 2;
26607
- } else if (isNumber$1(scrollAlign_1)) {
26607
+ } else if (isNumber$2(scrollAlign_1)) {
26608
26608
  nextOffset_1 = Math.max(topOffset - scrollAlign_1, bottomOffset);
26609
26609
  }
26610
26610
  return nextOffset_1;
@@ -26623,7 +26623,7 @@ var TabHeader = React__default.forwardRef(function(props, ref) {
26623
26623
  nextOffset_2 = endOffset_1;
26624
26624
  } else if (scrollAlign_2 === "center") {
26625
26625
  nextOffset_2 = startOffset_1 + (diffStyle.left - diffStyle.right) / 2;
26626
- } else if (isNumber$1(scrollAlign_2)) {
26626
+ } else if (isNumber$2(scrollAlign_2)) {
26627
26627
  nextOffset_2 = Math.min(startOffset_1 + scrollAlign_2, endOffset_1);
26628
26628
  }
26629
26629
  return nextOffset_2;
@@ -26641,7 +26641,7 @@ var TabHeader = React__default.forwardRef(function(props, ref) {
26641
26641
  nextOffset = endOffset;
26642
26642
  } else if (scrollAlign === "center") {
26643
26643
  nextOffset = startOffset - (diffStyle.left - diffStyle.right) / 2;
26644
- } else if (isNumber$1(scrollAlign)) {
26644
+ } else if (isNumber$2(scrollAlign)) {
26645
26645
  nextOffset = Math.max(startOffset - scrollAlign, endOffset);
26646
26646
  }
26647
26647
  return nextOffset;
@@ -27070,7 +27070,7 @@ var TreeAnimation = function(props) {
27070
27070
  return result;
27071
27071
  }, [childrenPropsList, props._key, expanded]);
27072
27072
  var realHeight = (_a = treeContext.virtualListProps) === null || _a === void 0 ? void 0 : _a.height;
27073
- realHeight = isNumber$1(realHeight) ? realHeight : 0;
27073
+ realHeight = isNumber$2(realHeight) ? realHeight : 0;
27074
27074
  useEffect(function() {
27075
27075
  if (currentExpandKeys.indexOf(props._key) > -1 && filtedData.length === 0) {
27076
27076
  treeContext.onExpandEnd(props._key);
@@ -29513,7 +29513,7 @@ IconEdit.defaultProps = {
29513
29513
  IconEdit.displayName = "IconEdit";
29514
29514
  var IconEdit$1 = IconEdit;
29515
29515
  var isSingleNode = function(child) {
29516
- return isString$1(child) || isNumber$1(child);
29516
+ return isString$1(child) || isNumber$2(child);
29517
29517
  };
29518
29518
  function mergedToString(children) {
29519
29519
  var mergedResult = [""];
@@ -29668,7 +29668,7 @@ function useEllipsis(props) {
29668
29668
  onEllipsis && onEllipsis(isEllipsis);
29669
29669
  }, [isEllipsis]);
29670
29670
  var isSimpleNode = function(node) {
29671
- return isString$1(node) || isNumber$1(node);
29671
+ return isString$1(node) || isNumber$2(node);
29672
29672
  };
29673
29673
  var getTotalLen = function(list2) {
29674
29674
  var total = 0;
@@ -30970,125 +30970,255 @@ function UploadField$1(props) {
30970
30970
  onChange: inputDisabled ? void 0 : (value) => onChange(value)
30971
30971
  });
30972
30972
  }
30973
- const defaultImagesMap$1 = {
30974
- IMAGE_59: "https://easy-email-m-ryan.vercel.app/images/06ca521d-9728-4de6-a709-1b75a828bfc3-2a9b1224-3d71-43b8-b52f-e7cdcdc9107b.png",
30975
- AttributePanel_01: "https://easy-email-m-ryan.vercel.app/images/e22f78f2-aa76-408d-ba94-c95c7abe1908-image.png",
30976
- AttributePanel_02: "https://easy-email-m-ryan.vercel.app/images/3e952a6e-2506-470e-b395-3e0d995157c5.png",
30977
- AttributePanel_03: "https://easy-email-m-ryan.vercel.app/images/Fi_vI4vyLhTM-Tp6ivq4dR_ieGHk.png"
30978
- };
30979
- ImageManager.add(defaultImagesMap$1);
30980
- function getImg$1(name2) {
30981
- return ImageManager.get(name2);
30973
+ function Select(props) {
30974
+ return /* @__PURE__ */ React__default.createElement(Select$2, __spreadProps(__spreadValues({}, props), {
30975
+ dropdownMenuClassName: "easy-email-overlay",
30976
+ style: lodash.exports.merge({ width: "100%" }, props.style),
30977
+ value: props.value,
30978
+ onChange: props.onChange
30979
+ }), props.options.map((item2, index2) => /* @__PURE__ */ React__default.createElement(Select$2.Option, {
30980
+ key: index2,
30981
+ value: item2.value
30982
+ }, item2.label)));
30982
30983
  }
30983
- var noop = function() {
30984
- };
30985
- var isBrowser = typeof window !== "undefined";
30986
- var useLocalStorage = function(key, initialValue, options2) {
30987
- if (!isBrowser) {
30988
- return [initialValue, noop, noop];
30989
- }
30990
- if (!key) {
30991
- throw new Error("useLocalStorage key may not be falsy");
30992
- }
30993
- var deserializer = options2 ? options2.raw ? function(value) {
30994
- return value;
30995
- } : options2.deserializer : JSON.parse;
30996
- var initializer = useRef(function(key2) {
30997
- try {
30998
- var serializer = options2 ? options2.raw ? String : options2.serializer : JSON.stringify;
30999
- var localStorageValue = localStorage.getItem(key2);
31000
- if (localStorageValue !== null) {
31001
- return deserializer(localStorageValue);
31002
- } else {
31003
- initialValue && localStorage.setItem(key2, serializer(initialValue));
31004
- return initialValue;
30984
+ function RadioGroup(props) {
30985
+ const _a = props, { type, vertical } = _a, rest = __objRest(_a, ["type", "vertical"]);
30986
+ return /* @__PURE__ */ React__default.createElement(Radio.Group, __spreadProps(__spreadValues({}, rest), {
30987
+ style: lodash.exports.merge({ width: "100%" }, rest.style),
30988
+ value: rest.value,
30989
+ onChange: rest.onChange
30990
+ }), /* @__PURE__ */ React__default.createElement(Stack$4, {
30991
+ vertical,
30992
+ spacing: "extraTight"
30993
+ }, rest.options.map((item2, index2) => /* @__PURE__ */ React__default.createElement(Radio, {
30994
+ key: index2,
30995
+ value: item2.value
30996
+ }, item2.label))));
30997
+ }
30998
+ const parse = (v) => v;
30999
+ function enhancer(Component2, changeAdapter, option) {
31000
+ return (props) => {
31001
+ const _a = props, {
31002
+ name: name2,
31003
+ validate: validate3,
31004
+ onChangeAdapter,
31005
+ changeOnBlur,
31006
+ inline,
31007
+ equalSpacing,
31008
+ formItem,
31009
+ label,
31010
+ required,
31011
+ style,
31012
+ helpText,
31013
+ autoComplete,
31014
+ labelHidden: labelHidden2
31015
+ } = _a, rest = __objRest(_a, [
31016
+ "name",
31017
+ "validate",
31018
+ "onChangeAdapter",
31019
+ "changeOnBlur",
31020
+ "inline",
31021
+ "equalSpacing",
31022
+ "formItem",
31023
+ "label",
31024
+ "required",
31025
+ "style",
31026
+ "helpText",
31027
+ "autoComplete",
31028
+ "labelHidden"
31029
+ ]);
31030
+ const debounceTime = props.debounceTime || (option == null ? void 0 : option.debounceTime) || 300;
31031
+ const config2 = useMemo(() => {
31032
+ var _a2;
31033
+ return __spreadProps(__spreadValues({}, props.config), {
31034
+ validate: validate3,
31035
+ parse: ((_a2 = props.config) == null ? void 0 : _a2.parse) || parse
31036
+ });
31037
+ }, [props.config, validate3]);
31038
+ const [currentValue, setCurrentValue] = useState("");
31039
+ const currentValueRef = useRefState(currentValue);
31040
+ const layoutStyle = useMemo(() => {
31041
+ if (equalSpacing) {
31042
+ return {
31043
+ labelCol: {
31044
+ span: 11,
31045
+ style: {
31046
+ textAlign: "left",
31047
+ paddingRight: 0
31048
+ }
31049
+ },
31050
+ wrapperCol: {
31051
+ span: 11,
31052
+ offset: 1,
31053
+ style: {
31054
+ textAlign: "right"
31055
+ }
31056
+ }
31057
+ };
31005
31058
  }
31006
- } catch (_a2) {
31007
- return initialValue;
31008
- }
31009
- });
31010
- var _a = useState(function() {
31011
- return initializer.current(key);
31012
- }), state = _a[0], setState = _a[1];
31013
- useLayoutEffect(function() {
31014
- return setState(initializer.current(key));
31015
- }, [key]);
31016
- var set2 = useCallback(function(valOrFunc) {
31017
- try {
31018
- var newState = typeof valOrFunc === "function" ? valOrFunc(state) : valOrFunc;
31019
- if (typeof newState === "undefined")
31020
- return;
31021
- var value = void 0;
31022
- if (options2)
31023
- if (options2.raw)
31024
- if (typeof newState === "string")
31025
- value = newState;
31026
- else
31027
- value = JSON.stringify(newState);
31028
- else if (options2.serializer)
31029
- value = options2.serializer(newState);
31030
- else
31031
- value = JSON.stringify(newState);
31032
- else
31033
- value = JSON.stringify(newState);
31034
- localStorage.setItem(key, value);
31035
- setState(deserializer(value));
31036
- } catch (_a2) {
31037
- }
31038
- }, [key, setState]);
31039
- var remove = useCallback(function() {
31040
- try {
31041
- localStorage.removeItem(key);
31042
- setState(void 0);
31043
- } catch (_a2) {
31059
+ if (inline) {
31060
+ return {
31061
+ labelCol: {
31062
+ span: 7,
31063
+ style: {
31064
+ textAlign: "right",
31065
+ paddingRight: 0
31066
+ }
31067
+ },
31068
+ wrapperCol: {
31069
+ span: 16,
31070
+ offset: 1,
31071
+ style: {}
31072
+ }
31073
+ };
31074
+ }
31075
+ return {
31076
+ labelCol: {
31077
+ span: 24,
31078
+ style: {
31079
+ paddingRight: 0
31080
+ }
31081
+ },
31082
+ wrapperCol: {
31083
+ span: 24
31084
+ }
31085
+ };
31086
+ }, [equalSpacing, inline]);
31087
+ return useMemo(() => {
31088
+ return /* @__PURE__ */ React__default.createElement(Field, __spreadValues({
31089
+ name: name2
31090
+ }, config2), ({ input: { onBlur: onBlur3, onChange, value }, meta }) => {
31091
+ const debounceCallbackChange = useCallback(lodash.exports.debounce((val) => {
31092
+ onChange(val);
31093
+ onBlur3();
31094
+ }, debounceTime, {}), [onChange, onBlur3]);
31095
+ const onFieldChange = useCallback((e) => {
31096
+ const newVal = onChangeAdapter ? onChangeAdapter(changeAdapter(e)) : changeAdapter(e);
31097
+ setCurrentValue(newVal);
31098
+ if (!changeOnBlur) {
31099
+ debounceCallbackChange(newVal);
31100
+ }
31101
+ }, [debounceCallbackChange]);
31102
+ const onFieldBlur = useCallback(() => {
31103
+ if (changeOnBlur) {
31104
+ onChange(currentValueRef.current);
31105
+ onBlur3();
31106
+ }
31107
+ }, [onBlur3, onChange]);
31108
+ useEffect(() => {
31109
+ setCurrentValue(value);
31110
+ }, [value]);
31111
+ return /* @__PURE__ */ React__default.createElement(Form.Item, __spreadProps(__spreadValues(__spreadValues({
31112
+ style: __spreadProps(__spreadValues({}, style), {
31113
+ margin: "0px"
31114
+ }),
31115
+ rules: required ? [{ required: true }] : void 0
31116
+ }, layoutStyle), formItem), {
31117
+ label: labelHidden2 ? void 0 : label || (formItem == null ? void 0 : formItem.label),
31118
+ labelAlign: "left",
31119
+ validateStatus: meta.touched && meta.error ? "error" : void 0,
31120
+ help: meta.touched && meta.error ? meta.error : helpText
31121
+ }), /* @__PURE__ */ React__default.createElement(Component2, __spreadProps(__spreadValues({
31122
+ autoComplete
31123
+ }, rest), {
31124
+ name: name2,
31125
+ checked: currentValue,
31126
+ value: currentValue,
31127
+ onChange: onFieldChange,
31128
+ onBlur: onFieldBlur
31129
+ })));
31130
+ });
31131
+ }, [
31132
+ autoComplete,
31133
+ changeOnBlur,
31134
+ config2,
31135
+ currentValue,
31136
+ currentValueRef,
31137
+ debounceTime,
31138
+ formItem,
31139
+ helpText,
31140
+ label,
31141
+ labelHidden2,
31142
+ layoutStyle,
31143
+ name2,
31144
+ onChangeAdapter,
31145
+ required,
31146
+ rest,
31147
+ style
31148
+ ]);
31149
+ };
31150
+ }
31151
+ function Input(props) {
31152
+ const {
31153
+ quickchange,
31154
+ value = "",
31155
+ onKeyDown: onPropsKeyDown,
31156
+ onChange: propsOnChange
31157
+ } = props;
31158
+ const onChange = useCallback((val) => {
31159
+ propsOnChange(val);
31160
+ }, [propsOnChange]);
31161
+ const onKeyDown = useCallback((ev) => {
31162
+ if (onPropsKeyDown) {
31163
+ onPropsKeyDown == null ? void 0 : onPropsKeyDown(ev);
31044
31164
  }
31045
- }, [key, setState]);
31046
- return [state, set2, remove];
31047
- };
31048
- var useLocalStorage$1 = useLocalStorage;
31049
- const defaultPresetColor = [
31050
- "#000000",
31051
- "#FFFFFF",
31052
- "#9b9b9b",
31053
- "#d0021b",
31054
- "#4a90e2",
31055
- "#7ed321",
31056
- "#bd10e0",
31057
- "#f8e71c"
31058
- ];
31059
- const CURRENT_COLORS_KEY = "CURRENT_COLORS_KEY";
31060
- const MAX_RECORD_SIZE = 20;
31061
- const PresetColorsContext = React__default.createContext({
31062
- colors: [],
31063
- addCurrentColor: () => {
31064
- }
31065
- });
31066
- const PresetColorsProvider = (props) => {
31067
- const [currentColors, setCurrentColors] = useLocalStorage$1(CURRENT_COLORS_KEY, defaultPresetColor);
31068
- const currentColorsRef = useRefState(currentColors);
31069
- const colorDivRef = useRef(document.createElement("div"));
31070
- const addCurrentColor = useCallback(lodash.exports.debounce((newColor) => {
31071
- colorDivRef.current.style.color = "";
31072
- colorDivRef.current.style.color = newColor;
31073
- if (colorDivRef.current.style.color) {
31074
- if (currentColorsRef.current.includes(newColor))
31075
- return;
31076
- const newColors = [...new Set([...currentColorsRef.current, newColor])].filter(Boolean).slice(-MAX_RECORD_SIZE);
31077
- setCurrentColors(newColors);
31165
+ if (quickchange) {
31166
+ let step = 0;
31167
+ if (ev.key === "ArrowUp") {
31168
+ step = 1;
31169
+ }
31170
+ if (ev.key === "ArrowDown") {
31171
+ step = -1;
31172
+ }
31173
+ if (step) {
31174
+ if (/^\d+/.test(value)) {
31175
+ ev.preventDefault();
31176
+ onChange(String(value).replace(/^(\d+)/, (_, match) => {
31177
+ return (Number(match) + step).toString();
31178
+ }));
31179
+ }
31180
+ }
31078
31181
  }
31079
- }, 500), [currentColorsRef, setCurrentColors]);
31080
- const value = useMemo(() => {
31081
- return {
31082
- colors: currentColors,
31083
- addCurrentColor
31084
- };
31085
- }, [addCurrentColor, currentColors]);
31086
- return useMemo(() => {
31087
- return /* @__PURE__ */ React__default.createElement(PresetColorsContext.Provider, {
31088
- value
31089
- }, props.children);
31090
- }, [props.children, value]);
31091
- };
31182
+ }, [onPropsKeyDown, quickchange, value, onChange]);
31183
+ return /* @__PURE__ */ React__default.createElement(Input$4, __spreadProps(__spreadValues({}, __spreadProps(__spreadValues({}, props), { quickchange: void 0 })), {
31184
+ onChange: (value2) => onChange(value2),
31185
+ onKeyDown
31186
+ }));
31187
+ }
31188
+ function InputWithUnit(props) {
31189
+ const _a = props, {
31190
+ value = "",
31191
+ onKeyDown: onPropsKeyDown,
31192
+ unitOptions: propsUnitOptions
31193
+ } = _a, restProps = __objRest(_a, [
31194
+ "value",
31195
+ "onKeyDown",
31196
+ "unitOptions"
31197
+ ]);
31198
+ return /* @__PURE__ */ React__default.createElement(Input, __spreadProps(__spreadValues({
31199
+ value
31200
+ }, restProps), {
31201
+ quickchange: true
31202
+ }));
31203
+ }
31204
+ function CheckBoxGroup(props) {
31205
+ const _a = props, { vertical = false } = _a, rest = __objRest(_a, ["vertical"]);
31206
+ return /* @__PURE__ */ React__default.createElement(Checkbox$1.Group, {
31207
+ style: lodash.exports.merge({ width: "100%" }, rest.style),
31208
+ value: rest.value,
31209
+ onChange: rest.onChange
31210
+ }, /* @__PURE__ */ React__default.createElement(Stack$4, {
31211
+ vertical,
31212
+ spacing: "extraTight"
31213
+ }, rest.options.map((item2, index2) => /* @__PURE__ */ React__default.createElement(Checkbox$1, {
31214
+ style: rest.checkboxStyle,
31215
+ key: index2,
31216
+ value: item2.value
31217
+ }, item2.label))));
31218
+ }
31219
+ function classnames(...rest) {
31220
+ return rest.filter((item2) => typeof item2 === "string").join(" ");
31221
+ }
31092
31222
  const helperText = "_helperText_1m9nq_1";
31093
31223
  const labelHidden = "_label-hidden_1m9nq_9";
31094
31224
  const editTab = "_editTab_1m9nq_20";
@@ -31104,6 +31234,145 @@ var styles$7 = {
31104
31234
  inputWithUnitSelectOption,
31105
31235
  colorPicker
31106
31236
  };
31237
+ const { TabPane: TabPane$1 } = Tabs$1;
31238
+ function EditTab(props) {
31239
+ const { value, additionItem } = props;
31240
+ const [activeTab, setActiveTab] = useState("0");
31241
+ const onAddTab = () => {
31242
+ setActiveTab(value.length.toString());
31243
+ props.onChange([...value, additionItem]);
31244
+ };
31245
+ const onDeleteTab = (index2) => {
31246
+ if (index2 < activeTab) {
31247
+ setActiveTab((Number(activeTab) - 1).toString());
31248
+ }
31249
+ if (index2 === activeTab) {
31250
+ setActiveTab(Number(index2) > 0 ? `${Number(index2) - 1}` : "0");
31251
+ }
31252
+ props.onChange(value.filter((_, vIndex) => Number(index2) !== vIndex));
31253
+ };
31254
+ return /* @__PURE__ */ React__default.createElement(Tabs$1, {
31255
+ destroyOnHide: true,
31256
+ className: classnames(styles$7.editTab),
31257
+ style: { border: "none" },
31258
+ type: "card",
31259
+ activeTab,
31260
+ tabPosition: props.tabPosition,
31261
+ editable: true,
31262
+ onAddTab,
31263
+ onDeleteTab,
31264
+ onChange: setActiveTab
31265
+ }, (Array.isArray(value) ? value : []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(TabPane$1, {
31266
+ style: { paddingLeft: 12 },
31267
+ title: `${props.label || "Tab"} ${index2 + 1}`,
31268
+ key: index2
31269
+ }, props.renderItem(item2, index2))));
31270
+ }
31271
+ function EditGridTab(props) {
31272
+ const { value, additionItem } = props;
31273
+ const onAdd = (index2) => {
31274
+ let newItem = additionItem || lodash.exports.cloneDeep(value[index2]);
31275
+ value.splice(index2 + 1, 0, newItem);
31276
+ props.onChange([...value]);
31277
+ };
31278
+ const onDelete = (index2) => {
31279
+ props.onChange(value.filter((_, vIndex) => Number(index2) !== vIndex));
31280
+ };
31281
+ return /* @__PURE__ */ React__default.createElement(Card$1, {
31282
+ bordered: false
31283
+ }, (Array.isArray(value) ? value : []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(Card$1.Grid, {
31284
+ style: { width: "100%" },
31285
+ key: index2
31286
+ }, /* @__PURE__ */ React__default.createElement(Card$1, {
31287
+ title: /* @__PURE__ */ React__default.createElement(Space$1, null, /* @__PURE__ */ React__default.createElement(Typography$1.Text, null, "Item ", index2 + 1)),
31288
+ extra: /* @__PURE__ */ React__default.createElement(Space$1, {
31289
+ size: "large"
31290
+ }, /* @__PURE__ */ React__default.createElement(IconPlus$1, {
31291
+ style: { color: "#000", cursor: "pointer" },
31292
+ onClick: () => onAdd(index2)
31293
+ }), /* @__PURE__ */ React__default.createElement(IconClose$1, {
31294
+ style: { color: "#000", cursor: "pointer" },
31295
+ onClick: () => onDelete(index2)
31296
+ }))
31297
+ }, props.renderItem(item2, index2)))));
31298
+ }
31299
+ function InlineText({ idx, onChange, children }) {
31300
+ const {
31301
+ mutators: { setFieldTouched }
31302
+ } = useForm$1();
31303
+ useField(idx);
31304
+ useEffect(() => {
31305
+ const shadowRoot = getShadowRoot();
31306
+ const onPaste = (e) => {
31307
+ var _a, _b;
31308
+ if (!(e.target instanceof Element) || !e.target.getAttribute("contenteditable"))
31309
+ return;
31310
+ e.preventDefault();
31311
+ const text = ((_a = e.clipboardData) == null ? void 0 : _a.getData("text/plain")) || "";
31312
+ document.execCommand("insertHTML", false, text);
31313
+ const contentEditableType = e.target.getAttribute(DATA_CONTENT_EDITABLE_TYPE);
31314
+ if (contentEditableType === ContentEditableType.RichText) {
31315
+ onChange(e.target.innerHTML || "");
31316
+ } else if (contentEditableType === ContentEditableType.Text) {
31317
+ onChange(((_b = e.target.textContent) == null ? void 0 : _b.trim()) || "");
31318
+ }
31319
+ };
31320
+ const onInput = (e) => {
31321
+ var _a;
31322
+ if (e.target instanceof Element && e.target.getAttribute("contenteditable")) {
31323
+ const contentEditableType = e.target.getAttribute(DATA_CONTENT_EDITABLE_TYPE);
31324
+ if (contentEditableType === ContentEditableType.RichText) {
31325
+ onChange(e.target.innerHTML || "");
31326
+ } else if (contentEditableType === ContentEditableType.Text) {
31327
+ onChange(((_a = e.target.textContent) == null ? void 0 : _a.trim()) || "");
31328
+ }
31329
+ }
31330
+ };
31331
+ shadowRoot.addEventListener("paste", onPaste, true);
31332
+ shadowRoot.addEventListener("input", onInput);
31333
+ return () => {
31334
+ shadowRoot.removeEventListener("paste", onPaste, true);
31335
+ shadowRoot.removeEventListener("input", onInput);
31336
+ };
31337
+ }, [onChange, setFieldTouched]);
31338
+ return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
31339
+ }
31340
+ function AutoComplete(props) {
31341
+ const options2 = useMemo(() => {
31342
+ const selectedValue = (props.value || "").toLowerCase();
31343
+ return props.options.filter((item2) => {
31344
+ return lodash.exports.isString(item2.value) && item2.value.toLowerCase().startsWith(selectedValue) || lodash.exports.isString(item2.label) && item2.label.toLowerCase().startsWith(selectedValue);
31345
+ }).map((item2) => __spreadProps(__spreadValues({}, item2), { name: item2.label }));
31346
+ }, [props.options, props.value]);
31347
+ return /* @__PURE__ */ React__default.createElement(ArcoAutoComplete, __spreadProps(__spreadValues({}, props), {
31348
+ data: options2
31349
+ }));
31350
+ }
31351
+ function isNumber(num) {
31352
+ if (typeof num !== "string" && typeof num !== "number")
31353
+ return false;
31354
+ return new RegExp("^(\\-|\\+)?\\d+(\\.\\d+)?$").test(num.toString());
31355
+ }
31356
+ const pixelAdapter = {
31357
+ format(val) {
31358
+ if (!lodash.exports.isString(val) && !val)
31359
+ return "";
31360
+ val = val.toString();
31361
+ if (/^\d+px$/.test(val.trim()))
31362
+ return val.trim().replace("px", "");
31363
+ return val.trim();
31364
+ },
31365
+ parse(val) {
31366
+ if (!lodash.exports.isString(val) && !isNumber(val))
31367
+ return void 0;
31368
+ val = val.toString().trim();
31369
+ if (!val)
31370
+ return void 0;
31371
+ if (/^\d+$/.test(val))
31372
+ return val + "px";
31373
+ return val;
31374
+ }
31375
+ };
31107
31376
  var colorString$1 = { exports: {} };
31108
31377
  var colorName = {
31109
31378
  "aliceblue": [240, 248, 255],
@@ -32615,6 +32884,171 @@ function zeroArray(array, length2) {
32615
32884
  }
32616
32885
  var color = Color$1;
32617
32886
  var Color$2 = color;
32887
+ const colorAdapter = {
32888
+ format(val) {
32889
+ if (!lodash.exports.isString(val) && !val)
32890
+ return "";
32891
+ val = val.toString();
32892
+ if (val.length === 7 && val.startsWith("#"))
32893
+ return val.replace("#", "");
32894
+ return val;
32895
+ },
32896
+ parse(val) {
32897
+ if (!lodash.exports.isString(val))
32898
+ return void 0;
32899
+ val = val.toString().trim();
32900
+ if (!val)
32901
+ return void 0;
32902
+ try {
32903
+ if (val.length === 6 && Color$2(`#${val}`).hex())
32904
+ return `#${val}`;
32905
+ } catch (error2) {
32906
+ console.log("err", val);
32907
+ }
32908
+ return val;
32909
+ }
32910
+ };
32911
+ const imageHeightAdapter = {
32912
+ format(val) {
32913
+ if (!lodash.exports.isString(val) && !val)
32914
+ return "";
32915
+ val = val.toString();
32916
+ if (val === "auto")
32917
+ return void 0;
32918
+ if (/^\d+px$/.test(val.trim()))
32919
+ return val.trim().replace("px", "");
32920
+ return val.trim();
32921
+ },
32922
+ parse(val) {
32923
+ if (!lodash.exports.isString(val) && !isNumber(val))
32924
+ return void 0;
32925
+ val = val.toString().trim();
32926
+ if (!val)
32927
+ return void 0;
32928
+ if (/^\d+$/.test(val))
32929
+ return val + "px";
32930
+ return val;
32931
+ }
32932
+ };
32933
+ const defaultImagesMap$1 = {
32934
+ IMAGE_59: "https://easy-email-m-ryan.vercel.app/images/06ca521d-9728-4de6-a709-1b75a828bfc3-2a9b1224-3d71-43b8-b52f-e7cdcdc9107b.png",
32935
+ AttributePanel_01: "https://easy-email-m-ryan.vercel.app/images/e22f78f2-aa76-408d-ba94-c95c7abe1908-image.png",
32936
+ AttributePanel_02: "https://easy-email-m-ryan.vercel.app/images/3e952a6e-2506-470e-b395-3e0d995157c5.png",
32937
+ AttributePanel_03: "https://easy-email-m-ryan.vercel.app/images/Fi_vI4vyLhTM-Tp6ivq4dR_ieGHk.png"
32938
+ };
32939
+ ImageManager.add(defaultImagesMap$1);
32940
+ function getImg$1(name2) {
32941
+ return ImageManager.get(name2);
32942
+ }
32943
+ var noop = function() {
32944
+ };
32945
+ var isBrowser = typeof window !== "undefined";
32946
+ var useLocalStorage = function(key, initialValue, options2) {
32947
+ if (!isBrowser) {
32948
+ return [initialValue, noop, noop];
32949
+ }
32950
+ if (!key) {
32951
+ throw new Error("useLocalStorage key may not be falsy");
32952
+ }
32953
+ var deserializer = options2 ? options2.raw ? function(value) {
32954
+ return value;
32955
+ } : options2.deserializer : JSON.parse;
32956
+ var initializer = useRef(function(key2) {
32957
+ try {
32958
+ var serializer = options2 ? options2.raw ? String : options2.serializer : JSON.stringify;
32959
+ var localStorageValue = localStorage.getItem(key2);
32960
+ if (localStorageValue !== null) {
32961
+ return deserializer(localStorageValue);
32962
+ } else {
32963
+ initialValue && localStorage.setItem(key2, serializer(initialValue));
32964
+ return initialValue;
32965
+ }
32966
+ } catch (_a2) {
32967
+ return initialValue;
32968
+ }
32969
+ });
32970
+ var _a = useState(function() {
32971
+ return initializer.current(key);
32972
+ }), state = _a[0], setState = _a[1];
32973
+ useLayoutEffect(function() {
32974
+ return setState(initializer.current(key));
32975
+ }, [key]);
32976
+ var set2 = useCallback(function(valOrFunc) {
32977
+ try {
32978
+ var newState = typeof valOrFunc === "function" ? valOrFunc(state) : valOrFunc;
32979
+ if (typeof newState === "undefined")
32980
+ return;
32981
+ var value = void 0;
32982
+ if (options2)
32983
+ if (options2.raw)
32984
+ if (typeof newState === "string")
32985
+ value = newState;
32986
+ else
32987
+ value = JSON.stringify(newState);
32988
+ else if (options2.serializer)
32989
+ value = options2.serializer(newState);
32990
+ else
32991
+ value = JSON.stringify(newState);
32992
+ else
32993
+ value = JSON.stringify(newState);
32994
+ localStorage.setItem(key, value);
32995
+ setState(deserializer(value));
32996
+ } catch (_a2) {
32997
+ }
32998
+ }, [key, setState]);
32999
+ var remove = useCallback(function() {
33000
+ try {
33001
+ localStorage.removeItem(key);
33002
+ setState(void 0);
33003
+ } catch (_a2) {
33004
+ }
33005
+ }, [key, setState]);
33006
+ return [state, set2, remove];
33007
+ };
33008
+ var useLocalStorage$1 = useLocalStorage;
33009
+ const defaultPresetColor = [
33010
+ "#000000",
33011
+ "#FFFFFF",
33012
+ "#9b9b9b",
33013
+ "#d0021b",
33014
+ "#4a90e2",
33015
+ "#7ed321",
33016
+ "#bd10e0",
33017
+ "#f8e71c"
33018
+ ];
33019
+ const CURRENT_COLORS_KEY = "CURRENT_COLORS_KEY";
33020
+ const MAX_RECORD_SIZE = 20;
33021
+ const PresetColorsContext = React__default.createContext({
33022
+ colors: [],
33023
+ addCurrentColor: () => {
33024
+ }
33025
+ });
33026
+ const PresetColorsProvider = (props) => {
33027
+ const [currentColors, setCurrentColors] = useLocalStorage$1(CURRENT_COLORS_KEY, defaultPresetColor);
33028
+ const currentColorsRef = useRefState(currentColors);
33029
+ const colorDivRef = useRef(document.createElement("div"));
33030
+ const addCurrentColor = useCallback(lodash.exports.debounce((newColor) => {
33031
+ colorDivRef.current.style.color = "";
33032
+ colorDivRef.current.style.color = newColor;
33033
+ if (colorDivRef.current.style.color) {
33034
+ if (currentColorsRef.current.includes(newColor))
33035
+ return;
33036
+ const newColors = [...new Set([...currentColorsRef.current, newColor])].filter(Boolean).slice(-MAX_RECORD_SIZE);
33037
+ setCurrentColors(newColors);
33038
+ }
33039
+ }, 500), [currentColorsRef, setCurrentColors]);
33040
+ const value = useMemo(() => {
33041
+ return {
33042
+ colors: currentColors,
33043
+ addCurrentColor
33044
+ };
33045
+ }, [addCurrentColor, currentColors]);
33046
+ return useMemo(() => {
33047
+ return /* @__PURE__ */ React__default.createElement(PresetColorsContext.Provider, {
33048
+ value
33049
+ }, props.children);
33050
+ }, [props.children, value]);
33051
+ };
32618
33052
  const transparentColor$1 = "rgba(0,0,0,0)";
32619
33053
  function ColorPickerContent(props) {
32620
33054
  const { colors: presetColors } = useContext(PresetColorsContext);
@@ -32706,6 +33140,21 @@ function ColorPicker(props) {
32706
33140
  const getPopupContainer = useCallback(() => {
32707
33141
  return getCollapseItemEle(refEle);
32708
33142
  }, [refEle]);
33143
+ const inputColor = useMemo(() => {
33144
+ var _a, _b, _c;
33145
+ if (((_a = props.value) == null ? void 0 : _a.startsWith("#")) && ((_b = props.value) == null ? void 0 : _b.length) === 7)
33146
+ return (_c = props.value) == null ? void 0 : _c.replace("#", "");
33147
+ return props.value;
33148
+ }, [props.value]);
33149
+ const adapterColor = useMemo(() => {
33150
+ try {
33151
+ if (value.length === 6 && Color$2(`#${value}`).hex())
33152
+ return `#${value}`;
33153
+ } catch (error2) {
33154
+ console.log("err", value);
33155
+ }
33156
+ return value;
33157
+ }, [value]);
32709
33158
  return /* @__PURE__ */ React__default.createElement("div", {
32710
33159
  style: { flex: 1, display: "flex" }
32711
33160
  }, /* @__PURE__ */ React__default.createElement(Popover$1, __spreadValues({
@@ -32713,7 +33162,7 @@ function ColorPicker(props) {
32713
33162
  trigger: "click",
32714
33163
  className: "color-picker-popup",
32715
33164
  content: /* @__PURE__ */ React__default.createElement(ColorPickerContent, {
32716
- value,
33165
+ value: adapterColor,
32717
33166
  onChange: onInputChange
32718
33167
  }),
32719
33168
  getPopupContainer
@@ -32741,7 +33190,7 @@ function ColorPicker(props) {
32741
33190
  width: "100%",
32742
33191
  height: "100%",
32743
33192
  textAlign: "center",
32744
- backgroundColor: value
33193
+ backgroundColor: adapterColor
32745
33194
  }
32746
33195
  }) : /* @__PURE__ */ React__default.createElement("img", {
32747
33196
  style: {
@@ -32756,374 +33205,19 @@ function ColorPicker(props) {
32756
33205
  }
32757
33206
 
32758
33207
  `))), showInput && /* @__PURE__ */ React__default.createElement(Input$4, {
32759
- value: props.value,
33208
+ value: inputColor,
32760
33209
  style: { outline: "none", flex: 1 },
32761
33210
  onChange: onInputChange
32762
33211
  }));
32763
33212
  }
32764
- function Select(props) {
32765
- return /* @__PURE__ */ React__default.createElement(Select$2, __spreadProps(__spreadValues({}, props), {
32766
- dropdownMenuClassName: "easy-email-overlay",
32767
- style: lodash.exports.merge({ width: "100%" }, props.style),
32768
- value: props.value,
32769
- onChange: props.onChange
32770
- }), props.options.map((item2, index2) => /* @__PURE__ */ React__default.createElement(Select$2.Option, {
32771
- key: index2,
32772
- value: item2.value
32773
- }, item2.label)));
32774
- }
32775
- function RadioGroup(props) {
32776
- const _a = props, { type, vertical } = _a, rest = __objRest(_a, ["type", "vertical"]);
32777
- return /* @__PURE__ */ React__default.createElement(Radio.Group, __spreadProps(__spreadValues({}, rest), {
32778
- style: lodash.exports.merge({ width: "100%" }, rest.style),
32779
- value: rest.value,
32780
- onChange: rest.onChange
32781
- }), /* @__PURE__ */ React__default.createElement(Stack$4, {
32782
- vertical,
32783
- spacing: "extraTight"
32784
- }, rest.options.map((item2, index2) => /* @__PURE__ */ React__default.createElement(Radio, {
32785
- key: index2,
32786
- value: item2.value
32787
- }, item2.label))));
32788
- }
32789
- const parse = (v) => v;
32790
- function enhancer(Component2, changeAdapter, option) {
32791
- return (props) => {
32792
- const _a = props, {
32793
- name: name2,
32794
- validate: validate3,
32795
- onChangeAdapter,
32796
- changeOnBlur,
32797
- inline,
32798
- equalSpacing,
32799
- formItem,
32800
- label,
32801
- required,
32802
- style,
32803
- helpText,
32804
- autoComplete,
32805
- labelHidden: labelHidden2
32806
- } = _a, rest = __objRest(_a, [
32807
- "name",
32808
- "validate",
32809
- "onChangeAdapter",
32810
- "changeOnBlur",
32811
- "inline",
32812
- "equalSpacing",
32813
- "formItem",
32814
- "label",
32815
- "required",
32816
- "style",
32817
- "helpText",
32818
- "autoComplete",
32819
- "labelHidden"
32820
- ]);
32821
- const debounceTime = props.debounceTime || (option == null ? void 0 : option.debounceTime) || 300;
32822
- const config2 = useMemo(() => {
32823
- var _a2;
32824
- return __spreadProps(__spreadValues({}, props.config), {
32825
- validate: validate3,
32826
- parse: ((_a2 = props.config) == null ? void 0 : _a2.parse) || parse
32827
- });
32828
- }, [props.config, validate3]);
32829
- const [currentValue, setCurrentValue] = useState("");
32830
- const currentValueRef = useRefState(currentValue);
32831
- const layoutStyle = useMemo(() => {
32832
- if (equalSpacing) {
32833
- return {
32834
- labelCol: {
32835
- span: 11,
32836
- style: {
32837
- textAlign: "left",
32838
- paddingRight: 0
32839
- }
32840
- },
32841
- wrapperCol: {
32842
- span: 11,
32843
- offset: 1,
32844
- style: {
32845
- textAlign: "right"
32846
- }
32847
- }
32848
- };
32849
- }
32850
- if (inline) {
32851
- return {
32852
- labelCol: {
32853
- span: 7,
32854
- style: {
32855
- textAlign: "right",
32856
- paddingRight: 0
32857
- }
32858
- },
32859
- wrapperCol: {
32860
- span: 16,
32861
- offset: 1,
32862
- style: {}
32863
- }
32864
- };
32865
- }
32866
- return {
32867
- labelCol: {
32868
- span: 24,
32869
- style: {
32870
- paddingRight: 0
32871
- }
32872
- },
32873
- wrapperCol: {
32874
- span: 24
32875
- }
32876
- };
32877
- }, [equalSpacing, inline]);
32878
- return useMemo(() => {
32879
- return /* @__PURE__ */ React__default.createElement(Field, __spreadValues({
32880
- name: name2
32881
- }, config2), ({ input: { onBlur: onBlur3, onChange, value }, meta }) => {
32882
- const debounceCallbackChange = useCallback(lodash.exports.debounce((val) => {
32883
- onChange(val);
32884
- onBlur3();
32885
- }, debounceTime, {}), [onChange, onBlur3]);
32886
- const onFieldChange = useCallback((e) => {
32887
- const newVal = onChangeAdapter ? onChangeAdapter(changeAdapter(e)) : changeAdapter(e);
32888
- setCurrentValue(newVal);
32889
- if (!changeOnBlur) {
32890
- debounceCallbackChange(newVal);
32891
- }
32892
- }, [debounceCallbackChange]);
32893
- const onFieldBlur = useCallback(() => {
32894
- if (changeOnBlur) {
32895
- onChange(currentValueRef.current);
32896
- onBlur3();
32897
- }
32898
- }, [onBlur3, onChange]);
32899
- useEffect(() => {
32900
- setCurrentValue(value);
32901
- }, [value]);
32902
- return /* @__PURE__ */ React__default.createElement(Form.Item, __spreadProps(__spreadValues(__spreadValues({
32903
- style: __spreadProps(__spreadValues({}, style), {
32904
- margin: "0px"
32905
- }),
32906
- rules: required ? [{ required: true }] : void 0
32907
- }, layoutStyle), formItem), {
32908
- label: labelHidden2 ? void 0 : label || (formItem == null ? void 0 : formItem.label),
32909
- labelAlign: "left",
32910
- validateStatus: meta.touched && meta.error ? "error" : void 0,
32911
- help: meta.touched && meta.error ? meta.error : helpText
32912
- }), /* @__PURE__ */ React__default.createElement(Component2, __spreadProps(__spreadValues({
32913
- autoComplete
32914
- }, rest), {
32915
- name: name2,
32916
- checked: currentValue,
32917
- value: currentValue,
32918
- onChange: onFieldChange,
32919
- onBlur: onFieldBlur
32920
- })));
32921
- });
32922
- }, [
32923
- autoComplete,
32924
- changeOnBlur,
32925
- config2,
32926
- currentValue,
32927
- currentValueRef,
32928
- debounceTime,
32929
- formItem,
32930
- helpText,
32931
- label,
32932
- labelHidden2,
32933
- layoutStyle,
32934
- name2,
32935
- onChangeAdapter,
32936
- required,
32937
- rest,
32938
- style
32939
- ]);
32940
- };
32941
- }
32942
- function Input(props) {
32943
- const {
32944
- quickchange,
32945
- value = "",
32946
- onKeyDown: onPropsKeyDown,
32947
- onChange: propsOnChange
32948
- } = props;
32949
- const onChange = useCallback((val) => {
32950
- propsOnChange(val);
32951
- }, [propsOnChange]);
32952
- const onKeyDown = useCallback((ev) => {
32953
- if (onPropsKeyDown) {
32954
- onPropsKeyDown == null ? void 0 : onPropsKeyDown(ev);
32955
- }
32956
- if (quickchange) {
32957
- let step = 0;
32958
- if (ev.key === "ArrowUp") {
32959
- step = 1;
32960
- }
32961
- if (ev.key === "ArrowDown") {
32962
- step = -1;
32963
- }
32964
- if (step) {
32965
- if (/^\d+/.test(value)) {
32966
- ev.preventDefault();
32967
- onChange(String(value).replace(/^(\d+)/, (_, match) => {
32968
- return (Number(match) + step).toString();
32969
- }));
32970
- }
32971
- }
32972
- }
32973
- }, [onPropsKeyDown, quickchange, value, onChange]);
32974
- return /* @__PURE__ */ React__default.createElement(Input$4, __spreadProps(__spreadValues({}, __spreadProps(__spreadValues({}, props), { quickchange: void 0 })), {
32975
- onChange: (value2) => onChange(value2),
32976
- onKeyDown
32977
- }));
32978
- }
32979
- function InputWithUnit(props) {
32980
- const _a = props, {
32981
- value = "",
32982
- onKeyDown: onPropsKeyDown,
32983
- unitOptions: propsUnitOptions
32984
- } = _a, restProps = __objRest(_a, [
32985
- "value",
32986
- "onKeyDown",
32987
- "unitOptions"
32988
- ]);
32989
- return /* @__PURE__ */ React__default.createElement(Input, __spreadProps(__spreadValues({
32990
- value
32991
- }, restProps), {
32992
- quickchange: true
32993
- }));
32994
- }
32995
- function CheckBoxGroup(props) {
32996
- const _a = props, { vertical = false } = _a, rest = __objRest(_a, ["vertical"]);
32997
- return /* @__PURE__ */ React__default.createElement(Checkbox$1.Group, {
32998
- style: lodash.exports.merge({ width: "100%" }, rest.style),
32999
- value: rest.value,
33000
- onChange: rest.onChange
33001
- }, /* @__PURE__ */ React__default.createElement(Stack$4, {
33002
- vertical,
33003
- spacing: "extraTight"
33004
- }, rest.options.map((item2, index2) => /* @__PURE__ */ React__default.createElement(Checkbox$1, {
33005
- style: rest.checkboxStyle,
33006
- key: index2,
33007
- value: item2.value
33008
- }, item2.label))));
33009
- }
33010
- function classnames(...rest) {
33011
- return rest.filter((item2) => typeof item2 === "string").join(" ");
33012
- }
33013
- const { TabPane: TabPane$1 } = Tabs$1;
33014
- function EditTab(props) {
33015
- const { value, additionItem } = props;
33016
- const [activeTab, setActiveTab] = useState("0");
33017
- const onAddTab = () => {
33018
- setActiveTab(value.length.toString());
33019
- props.onChange([...value, additionItem]);
33020
- };
33021
- const onDeleteTab = (index2) => {
33022
- if (index2 < activeTab) {
33023
- setActiveTab((Number(activeTab) - 1).toString());
33024
- }
33025
- if (index2 === activeTab) {
33026
- setActiveTab(Number(index2) > 0 ? `${Number(index2) - 1}` : "0");
33027
- }
33028
- props.onChange(value.filter((_, vIndex) => Number(index2) !== vIndex));
33029
- };
33030
- return /* @__PURE__ */ React__default.createElement(Tabs$1, {
33031
- destroyOnHide: true,
33032
- className: classnames(styles$7.editTab),
33033
- style: { border: "none" },
33034
- type: "card",
33035
- activeTab,
33036
- tabPosition: props.tabPosition,
33037
- editable: true,
33038
- onAddTab,
33039
- onDeleteTab,
33040
- onChange: setActiveTab
33041
- }, (Array.isArray(value) ? value : []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(TabPane$1, {
33042
- style: { paddingLeft: 12 },
33043
- title: `${props.label || "Tab"} ${index2 + 1}`,
33044
- key: index2
33045
- }, props.renderItem(item2, index2))));
33046
- }
33047
- function EditGridTab(props) {
33048
- const { value, additionItem } = props;
33049
- const onAdd = (index2) => {
33050
- let newItem = additionItem || lodash.exports.cloneDeep(value[index2]);
33051
- value.splice(index2 + 1, 0, newItem);
33052
- props.onChange([...value]);
33053
- };
33054
- const onDelete = (index2) => {
33055
- props.onChange(value.filter((_, vIndex) => Number(index2) !== vIndex));
33056
- };
33057
- return /* @__PURE__ */ React__default.createElement(Card$1, {
33058
- bordered: false
33059
- }, (Array.isArray(value) ? value : []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(Card$1.Grid, {
33060
- style: { width: "100%" },
33061
- key: index2
33062
- }, /* @__PURE__ */ React__default.createElement(Card$1, {
33063
- title: /* @__PURE__ */ React__default.createElement(Space$1, null, /* @__PURE__ */ React__default.createElement(Typography$1.Text, null, "Item ", index2 + 1)),
33064
- extra: /* @__PURE__ */ React__default.createElement(Space$1, {
33065
- size: "large"
33066
- }, /* @__PURE__ */ React__default.createElement(IconPlus$1, {
33067
- style: { color: "#000", cursor: "pointer" },
33068
- onClick: () => onAdd(index2)
33069
- }), /* @__PURE__ */ React__default.createElement(IconClose$1, {
33070
- style: { color: "#000", cursor: "pointer" },
33071
- onClick: () => onDelete(index2)
33072
- }))
33073
- }, props.renderItem(item2, index2)))));
33074
- }
33075
- function InlineText({ idx, onChange, children }) {
33076
- const {
33077
- mutators: { setFieldTouched }
33078
- } = useForm$1();
33079
- useField(idx);
33080
- useEffect(() => {
33081
- const shadowRoot = getShadowRoot();
33082
- const onPaste = (e) => {
33083
- var _a, _b;
33084
- if (!(e.target instanceof Element) || !e.target.getAttribute("contenteditable"))
33085
- return;
33086
- e.preventDefault();
33087
- const text = ((_a = e.clipboardData) == null ? void 0 : _a.getData("text/plain")) || "";
33088
- document.execCommand("insertHTML", false, text);
33089
- const contentEditableType = e.target.getAttribute(DATA_CONTENT_EDITABLE_TYPE);
33090
- if (contentEditableType === ContentEditableType.RichText) {
33091
- onChange(e.target.innerHTML || "");
33092
- } else if (contentEditableType === ContentEditableType.Text) {
33093
- onChange(((_b = e.target.textContent) == null ? void 0 : _b.trim()) || "");
33094
- }
33095
- };
33096
- const onInput = (e) => {
33097
- var _a;
33098
- if (e.target instanceof Element && e.target.getAttribute("contenteditable")) {
33099
- const contentEditableType = e.target.getAttribute(DATA_CONTENT_EDITABLE_TYPE);
33100
- if (contentEditableType === ContentEditableType.RichText) {
33101
- onChange(e.target.innerHTML || "");
33102
- } else if (contentEditableType === ContentEditableType.Text) {
33103
- onChange(((_a = e.target.textContent) == null ? void 0 : _a.trim()) || "");
33104
- }
33105
- }
33106
- };
33107
- shadowRoot.addEventListener("paste", onPaste, true);
33108
- shadowRoot.addEventListener("input", onInput);
33109
- return () => {
33110
- shadowRoot.removeEventListener("paste", onPaste, true);
33111
- shadowRoot.removeEventListener("input", onInput);
33112
- };
33113
- }, [onChange, setFieldTouched]);
33114
- return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
33115
- }
33116
- function AutoComplete(props) {
33117
- const options2 = useMemo(() => {
33118
- const selectedValue = (props.value || "").toLowerCase();
33119
- return props.options.filter((item2) => {
33120
- return lodash.exports.isString(item2.value) && item2.value.toLowerCase().startsWith(selectedValue) || lodash.exports.isString(item2.label) && item2.label.toLowerCase().startsWith(selectedValue);
33121
- }).map((item2) => __spreadProps(__spreadValues({}, item2), { name: item2.label }));
33122
- }, [props.options, props.value]);
33123
- return /* @__PURE__ */ React__default.createElement(ArcoAutoComplete, __spreadProps(__spreadValues({}, props), {
33124
- data: options2
33125
- }));
33126
- }
33213
+ const ColorPickerFieldSource = enhancer(ColorPicker, (e) => e, {
33214
+ debounceTime: 1
33215
+ });
33216
+ const ColorPickerField = (props) => {
33217
+ return /* @__PURE__ */ React__default.createElement(ColorPickerFieldSource, __spreadValues({
33218
+ config: colorAdapter
33219
+ }, props));
33220
+ };
33127
33221
  const ToolItem$1 = (props) => {
33128
33222
  if (!props.title) {
33129
33223
  return /* @__PURE__ */ React__default.createElement("button", {
@@ -33617,9 +33711,11 @@ function Page() {
33617
33711
  })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
33618
33712
  offset: 1,
33619
33713
  span: 11
33620
- }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
33621
- label: t("Font size"),
33622
- name: `${focusIdx2}.data.value.font-size`
33714
+ }, /* @__PURE__ */ React__default.createElement(NumberField, {
33715
+ label: "Font size (px)",
33716
+ name: `${focusIdx2}.data.value.font-size`,
33717
+ config: pixelAdapter,
33718
+ autoComplete: "off"
33623
33719
  }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
33624
33720
  span: 11
33625
33721
  }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
@@ -33654,7 +33750,7 @@ function Page() {
33654
33750
  }), /* @__PURE__ */ React__default.createElement(Stack$4.Item, null), /* @__PURE__ */ React__default.createElement(Stack$4.Item, null), /* @__PURE__ */ React__default.createElement(AddFont, null), /* @__PURE__ */ React__default.createElement(Stack$4.Item, null), /* @__PURE__ */ React__default.createElement(Stack$4.Item, null))))));
33655
33751
  }
33656
33752
  function Padding(props = {}) {
33657
- const { title: title2 = t("Padding"), attributeName = "padding", name: name2 } = props;
33753
+ const { title: title2 = t("Padding"), attributeName = "padding", name: name2, showResetAll } = props;
33658
33754
  const { focusBlock: focusBlock2, change, values: values2 } = useBlock();
33659
33755
  const { focusIdx: focusIdx2 } = useFocusIdx();
33660
33756
  const type = focusBlock2 && focusBlock2.type;
@@ -33692,6 +33788,13 @@ function Padding(props = {}) {
33692
33788
  change(focusIdx2 + `.attributes[${attributeName}]`, val);
33693
33789
  }
33694
33790
  }, [name2, change, focusIdx2, attributeName]);
33791
+ const onResetPadding = useCallback(() => {
33792
+ if (name2) {
33793
+ change(name2, "0px 0px 0px 0px");
33794
+ } else {
33795
+ change(focusIdx2 + `.attributes[${attributeName}]`, "0px 0px 0px 0px");
33796
+ }
33797
+ }, [name2, change, focusIdx2, attributeName]);
33695
33798
  return /* @__PURE__ */ React__default.createElement(Form$3, {
33696
33799
  initialValues: paddingFormValues,
33697
33800
  subscription: { submitting: true, pristine: true },
@@ -33702,30 +33805,49 @@ function Padding(props = {}) {
33702
33805
  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Stack$4, {
33703
33806
  vertical: true,
33704
33807
  spacing: "extraTight"
33808
+ }, /* @__PURE__ */ React__default.createElement(Space$1, {
33809
+ align: "center"
33705
33810
  }, /* @__PURE__ */ React__default.createElement(TextStyle, {
33706
33811
  variation: "strong"
33707
- }, title2), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
33812
+ }, title2), showResetAll && /* @__PURE__ */ React__default.createElement(Tooltip$1, {
33813
+ content: "Remove all padding"
33814
+ }, /* @__PURE__ */ React__default.createElement(Button$4, {
33815
+ onClick: onResetPadding,
33816
+ size: "mini",
33817
+ icon: /* @__PURE__ */ React__default.createElement(IconFont, {
33818
+ iconName: "icon-remove",
33819
+ size: 12
33820
+ })
33821
+ }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
33708
33822
  span: 11
33709
- }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
33710
- label: "Top",
33711
- name: "top"
33823
+ }, /* @__PURE__ */ React__default.createElement(NumberField, {
33824
+ label: "Top (px)",
33825
+ name: "top",
33826
+ autoComplete: "off",
33827
+ config: pixelAdapter
33712
33828
  })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
33713
33829
  offset: 1,
33714
33830
  span: 11
33715
- }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
33716
- label: "Left",
33717
- name: "left"
33831
+ }, /* @__PURE__ */ React__default.createElement(NumberField, {
33832
+ label: "Left (px)",
33833
+ name: "left",
33834
+ autoComplete: "off",
33835
+ config: pixelAdapter
33718
33836
  }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
33719
33837
  span: 11
33720
- }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
33721
- label: "Bottom",
33722
- name: "bottom"
33838
+ }, /* @__PURE__ */ React__default.createElement(NumberField, {
33839
+ label: "Bottom (px)",
33840
+ name: "bottom",
33841
+ config: pixelAdapter,
33842
+ autoComplete: "off"
33723
33843
  })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
33724
33844
  offset: 1,
33725
33845
  span: 11
33726
- }, /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
33727
- label: "Right",
33728
- name: "right"
33846
+ }, /* @__PURE__ */ React__default.createElement(NumberField, {
33847
+ label: "Right (px)",
33848
+ name: "right",
33849
+ autoComplete: "off",
33850
+ config: pixelAdapter
33729
33851
  })))), /* @__PURE__ */ React__default.createElement(PaddingChangeWrapper, {
33730
33852
  onChange: onChancePadding
33731
33853
  }));
@@ -34179,7 +34301,8 @@ function Section() {
34179
34301
  }
34180
34302
  function Width({
34181
34303
  inline = false,
34182
- unitOptions
34304
+ unitOptions,
34305
+ config: config2
34183
34306
  }) {
34184
34307
  var _a;
34185
34308
  const { focusIdx: focusIdx2 } = useFocusIdx();
@@ -34196,7 +34319,8 @@ function Width({
34196
34319
  label: "Width",
34197
34320
  inline,
34198
34321
  name: `${focusIdx2}.attributes.width`,
34199
- unitOptions
34322
+ unitOptions,
34323
+ config: config2
34200
34324
  });
34201
34325
  }
34202
34326
  const options$a = [
@@ -34362,7 +34486,10 @@ function FontStyle({ name: name2 }) {
34362
34486
  options: options$7
34363
34487
  });
34364
34488
  }
34365
- function Height({ inline }) {
34489
+ function Height({
34490
+ inline,
34491
+ config: config2
34492
+ }) {
34366
34493
  const { focusIdx: focusIdx2 } = useFocusIdx();
34367
34494
  return useMemo(() => {
34368
34495
  return /* @__PURE__ */ React__default.createElement(Stack$4, {
@@ -34373,7 +34500,8 @@ function Height({ inline }) {
34373
34500
  label: "Height",
34374
34501
  name: `${focusIdx2}.attributes.height`,
34375
34502
  quickchange: true,
34376
- inline
34503
+ inline,
34504
+ config: config2
34377
34505
  })));
34378
34506
  }, [focusIdx2, inline]);
34379
34507
  }
@@ -34390,9 +34518,11 @@ function ContainerBackgroundColor({
34390
34518
  }
34391
34519
  function FontSize$1() {
34392
34520
  const { focusIdx: focusIdx2 } = useFocusIdx();
34393
- return /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
34394
- label: "Font size",
34395
- name: `${focusIdx2}.attributes.font-size`
34521
+ return /* @__PURE__ */ React__default.createElement(NumberField, {
34522
+ label: "Font size (px)",
34523
+ name: `${focusIdx2}.attributes.font-size`,
34524
+ config: pixelAdapter,
34525
+ autoComplete: "off"
34396
34526
  });
34397
34527
  }
34398
34528
  function Color({ title: title2 = "Color" }) {
@@ -34562,7 +34692,9 @@ function Text() {
34562
34692
  header: "Dimension"
34563
34693
  }, /* @__PURE__ */ React__default.createElement(Space$1, {
34564
34694
  direction: "vertical"
34565
- }, /* @__PURE__ */ React__default.createElement(Height, null), /* @__PURE__ */ React__default.createElement(Padding, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
34695
+ }, /* @__PURE__ */ React__default.createElement(Height, null), /* @__PURE__ */ React__default.createElement(Padding, {
34696
+ showResetAll: true
34697
+ }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
34566
34698
  name: "1",
34567
34699
  header: "Color"
34568
34700
  }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
@@ -34665,10 +34797,16 @@ function Image$1() {
34665
34797
  direction: "vertical"
34666
34798
  }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
34667
34799
  span: 11
34668
- }, /* @__PURE__ */ React__default.createElement(Width, null)), /* @__PURE__ */ React__default.createElement(Grid.Col, {
34800
+ }, /* @__PURE__ */ React__default.createElement(Width, {
34801
+ config: pixelAdapter
34802
+ })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
34669
34803
  offset: 1,
34670
34804
  span: 11
34671
- }, /* @__PURE__ */ React__default.createElement(Height, null))), /* @__PURE__ */ React__default.createElement(Padding, null), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
34805
+ }, /* @__PURE__ */ React__default.createElement(Height, {
34806
+ config: imageHeightAdapter
34807
+ }))), /* @__PURE__ */ React__default.createElement(Padding, {
34808
+ showResetAll: true
34809
+ }), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
34672
34810
  span: 24
34673
34811
  }, /* @__PURE__ */ React__default.createElement(Align, null))))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
34674
34812
  name: "2",
@@ -35092,7 +35230,8 @@ function Button() {
35092
35230
  span: 11
35093
35231
  }, /* @__PURE__ */ React__default.createElement(FontWeight, null))), /* @__PURE__ */ React__default.createElement(Padding, {
35094
35232
  title: "Padding",
35095
- attributeName: "padding"
35233
+ attributeName: "padding",
35234
+ showResetAll: true
35096
35235
  }), /* @__PURE__ */ React__default.createElement(Padding, {
35097
35236
  title: "Inner padding",
35098
35237
  attributeName: "inner-padding"
@@ -35721,10 +35860,11 @@ function NavbarLink({
35721
35860
  })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
35722
35861
  offset: 1,
35723
35862
  span: 11
35724
- }, /* @__PURE__ */ React__default.createElement(TextField, {
35725
- label: "Font size",
35726
- quickchange: true,
35727
- name: `${focusIdx2}.data.value.links.[${index2}].font-size`
35863
+ }, /* @__PURE__ */ React__default.createElement(NumberField, {
35864
+ label: "Font size (px)",
35865
+ name: `${focusIdx2}.data.value.links.[${index2}].font-size`,
35866
+ config: pixelAdapter,
35867
+ autoComplete: "off"
35728
35868
  }))), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
35729
35869
  span: 11
35730
35870
  }, /* @__PURE__ */ React__default.createElement(LineHeight, {
@@ -36792,7 +36932,6 @@ const SearchField = enhancer(Input$4.Search, (val) => val);
36792
36932
  const TextAreaField = enhancer(Input$4.TextArea, (val) => val);
36793
36933
  const NumberField = enhancer(InputNumber$1, (e) => e);
36794
36934
  const SliderField = enhancer(Slider$1, (e) => e);
36795
- const ColorPickerField = enhancer(ColorPicker, (e) => e);
36796
36935
  const UploadField = enhancer(UploadField$1, (val) => val);
36797
36936
  const ImageUploaderField = enhancer(ImageUploader, (url) => url);
36798
36937
  const SelectField = enhancer(Select, (e) => e);
@@ -45845,5 +45984,5 @@ const StandardLayout = (props) => {
45845
45984
  style: { width: 0, overflow: "hidden" }
45846
45985
  }))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null), /* @__PURE__ */ React__default.createElement(MergeTagBadgePrompt, null)));
45847
45986
  };
45848
- export { TextAreaField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, BlockMaskWrapper as E, FontFamily as F, SourceCodePanel as G, Height as H, InteractivePrompt as I, SimpleLayout as J, StandardLayout as K, LetterSpacing as L, Margin as M, NavbarLinkPadding as N, MergeTagBadgePrompt as O, Padding as P, ExtensionContext as Q, ExtensionProvider as R, ShortcutToolbar as S, TextAlign as T, useExtensionProps as U, VerticalAlign as V, Width as W, RICH_TEXT_TOOL_BAR as X, TextField as Y, InputWithUnitField as Z, SearchField as _, getIconNameByBlockType as a, NumberField as a0, SliderField as a1, ColorPickerField as a2, UploadField as a3, ImageUploaderField as a4, SelectField as a5, TreeSelectField as a6, AutoCompleteField as a7, RadioGroupField as a8, SwitchField as a9, CheckboxField as aa, EditTabField as ab, EditGridTabField as ac, InlineTextField as ad, enhancer as ae, RichTextField as af, getBlockTitle as b, commonjsGlobal as c, BlockAttributeConfigurationManager as d, Align as e, AttributesPanelWrapper as f, getContextMergeTags as g, CollapseWrapper as h, ContainerBackgroundColor as i, TextDecoration as j, Background as k, LineHeight as l, TextTransform as m, BackgroundColor as n, Direction as o, Link as p, Border as q, BorderColor as r, FontSize$1 as s, MergeTags$1 as t, BorderStyle as u, FontStyle as v, BorderWidth as w, FontWeight as x, ClassName as y, BlockMarketManager as z };
45987
+ export { TextAreaField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, BlockMaskWrapper as E, FontFamily as F, SourceCodePanel as G, Height as H, InteractivePrompt as I, SimpleLayout as J, StandardLayout as K, LetterSpacing as L, Margin as M, NavbarLinkPadding as N, MergeTagBadgePrompt as O, Padding as P, ExtensionContext as Q, ExtensionProvider as R, ShortcutToolbar as S, TextAlign as T, useExtensionProps as U, VerticalAlign as V, Width as W, RICH_TEXT_TOOL_BAR as X, TextField as Y, InputWithUnitField as Z, SearchField as _, getIconNameByBlockType as a, NumberField as a0, SliderField as a1, UploadField as a2, ImageUploaderField as a3, SelectField as a4, TreeSelectField as a5, AutoCompleteField as a6, RadioGroupField as a7, SwitchField as a8, CheckboxField as a9, EditTabField as aa, EditGridTabField as ab, InlineTextField as ac, ColorPickerField as ad, enhancer as ae, RichTextField as af, getBlockTitle as b, commonjsGlobal as c, BlockAttributeConfigurationManager as d, Align as e, AttributesPanelWrapper as f, getContextMergeTags as g, CollapseWrapper as h, ContainerBackgroundColor as i, TextDecoration as j, Background as k, LineHeight as l, TextTransform as m, BackgroundColor as n, Direction as o, Link as p, Border as q, BorderColor as r, FontSize$1 as s, MergeTags$1 as t, BorderStyle as u, FontStyle as v, BorderWidth as w, FontWeight as x, ClassName as y, BlockMarketManager as z };
45849
45988
  //# sourceMappingURL=index2.js.map