@feathery/react 2.12.3-pr-1522.4bcc507.0 → 2.14.0

package/dist/fthry_index.DEU7NBKU.js

@@ -0,0 +1,1159 @@
+import { _ as __read, j as jsxs$1, a as __assign, b as jsx$1, k as FORM_Z_INDEX } from './fthry_index.CdIRvNp8.js';
+import React__default, { useRef, useEffect, useCallback, useState, useMemo, Fragment } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react-dom/client';
+import 'jszip';
+import 'react-dom';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+var RGB_MAX = 255;
+var SV_MAX = 100;
+/**
+ * ```js
+ * rgbaToHsva({ r: 255, g: 255, b: 255, a: 1 }) //=> { h: 0, s: 0, v: 100, a: 1 }
+ * ```
+ */
+var rgbaToHsva = _ref => {
+  var {
+    r,
+    g,
+    b,
+    a
+  } = _ref;
+  var max = Math.max(r, g, b);
+  var delta = max - Math.min(r, g, b);
+
+  // prettier-ignore
+  var hh = delta ? max === r ? (g - b) / delta : max === g ? 2 + (b - r) / delta : 4 + (r - g) / delta : 0;
+  return {
+    h: 60 * (hh < 0 ? hh + 6 : hh),
+    s: max ? delta / max * SV_MAX : 0,
+    v: max / RGB_MAX * SV_MAX,
+    a
+  };
+};
+var hsvaToHslaString = hsva => {
+  var {
+    h,
+    s,
+    l,
+    a
+  } = hsvaToHsla(hsva);
+  return "hsla(" + h + ", " + s + "%, " + l + "%, " + a + ")";
+};
+var hsvaToHsla = _ref5 => {
+  var {
+    h,
+    s,
+    v,
+    a
+  } = _ref5;
+  var hh = (200 - s) * v / SV_MAX;
+  return {
+    h,
+    s: hh > 0 && hh < 200 ? s * v / SV_MAX / (hh <= SV_MAX ? hh : 200 - hh) * SV_MAX : 0,
+    l: hh / 2,
+    a
+  };
+};
+var rgbToHex = _ref7 => {
+  var {
+    r,
+    g,
+    b
+  } = _ref7;
+  var bin = r << 16 | g << 8 | b;
+  return "#" + (h => new Array(7 - h.length).join('0') + h)(bin.toString(16));
+};
+var rgbaToHexa = _ref8 => {
+  var {
+    r,
+    g,
+    b,
+    a
+  } = _ref8;
+  var alpha = typeof a === 'number' && (a * 255 | 1 << 8).toString(16).slice(1);
+  return "" + rgbToHex({
+    r,
+    g,
+    b
+  }) + (alpha ? alpha : '');
+};
+var hexToHsva = hex => rgbaToHsva(hexToRgba(hex));
+var hexToRgba = hex => {
+  var htemp = hex.replace('#', '');
+  if (/^#?/.test(hex) && htemp.length === 3) {
+    hex = "#" + htemp.charAt(0) + htemp.charAt(0) + htemp.charAt(1) + htemp.charAt(1) + htemp.charAt(2) + htemp.charAt(2);
+  }
+  var reg = new RegExp("[A-Za-z0-9]{2}", 'g');
+  var [r, g, b = 0, a] = hex.match(reg).map(v => parseInt(v, 16));
+  return {
+    r,
+    g,
+    b,
+    a: (a != null ? a : 255) / RGB_MAX
+  };
+};
+
+/**
+ * Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV
+ * @param color HSVA color as an array [0-360, 0-1, 0-1, 0-1]
+ */
+var hsvaToRgba = _ref9 => {
+  var {
+    h,
+    s,
+    v,
+    a
+  } = _ref9;
+  var _h = h / 60,
+    _s = s / SV_MAX,
+    _v = v / SV_MAX,
+    hi = Math.floor(_h) % 6;
+  var f = _h - Math.floor(_h),
+    _p = RGB_MAX * _v * (1 - _s),
+    _q = RGB_MAX * _v * (1 - _s * f),
+    _t = RGB_MAX * _v * (1 - _s * (1 - f));
+  _v *= RGB_MAX;
+  var rgba = {};
+  switch (hi) {
+    case 0:
+      rgba.r = _v;
+      rgba.g = _t;
+      rgba.b = _p;
+      break;
+    case 1:
+      rgba.r = _q;
+      rgba.g = _v;
+      rgba.b = _p;
+      break;
+    case 2:
+      rgba.r = _p;
+      rgba.g = _v;
+      rgba.b = _t;
+      break;
+    case 3:
+      rgba.r = _p;
+      rgba.g = _q;
+      rgba.b = _v;
+      break;
+    case 4:
+      rgba.r = _t;
+      rgba.g = _p;
+      rgba.b = _v;
+      break;
+    case 5:
+      rgba.r = _v;
+      rgba.g = _p;
+      rgba.b = _q;
+      break;
+  }
+  rgba.r = Math.round(rgba.r);
+  rgba.g = Math.round(rgba.g);
+  rgba.b = Math.round(rgba.b);
+  return _extends({}, rgba, {
+    a
+  });
+};
+var hsvaToRgbaString = hsva => {
+  var {
+    r,
+    g,
+    b,
+    a
+  } = hsvaToRgba(hsva);
+  return "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
+};
+var rgbaToRgb = _ref0 => {
+  var {
+    r,
+    g,
+    b
+  } = _ref0;
+  return {
+    r,
+    g,
+    b
+  };
+};
+var hslaToHsl = _ref1 => {
+  var {
+    h,
+    s,
+    l
+  } = _ref1;
+  return {
+    h,
+    s,
+    l
+  };
+};
+var hsvaToHex = hsva => rgbToHex(hsvaToRgba(hsva));
+var hsvaToHsv = _ref10 => {
+  var {
+    h,
+    s,
+    v
+  } = _ref10;
+  return {
+    h,
+    s,
+    v
+  };
+};
+
+/**
+ * Converts RGB to XY. Based on formula from https://developers.meethue.com/develop/application-design-guidance/color-conversion-formulas-rgb-to-xy-and-back/
+ * @param color RGB color as an array [0-255, 0-255, 0-255]
+ */
+var rgbToXY = _ref12 => {
+  var {
+    r,
+    g,
+    b
+  } = _ref12;
+  var translateColor = function translateColor(color) {
+    return color <= 0.04045 ? color / 12.92 : Math.pow((color + 0.055) / 1.055, 2.4);
+  };
+  var red = translateColor(r / 255);
+  var green = translateColor(g / 255);
+  var blue = translateColor(b / 255);
+  var xyz = {};
+  xyz.x = red * 0.4124 + green * 0.3576 + blue * 0.1805;
+  xyz.y = red * 0.2126 + green * 0.7152 + blue * 0.0722;
+  xyz.bri = red * 0.0193 + green * 0.1192 + blue * 0.9505;
+  return xyz;
+};
+var color = str => {
+  var rgb;
+  var hsl;
+  var hsv;
+  var rgba;
+  var hsla;
+  var hsva;
+  var xy;
+  var hex;
+  var hexa;
+  if (typeof str === 'string' && validHex$1(str)) {
+    hsva = hexToHsva(str);
+    hex = str;
+  } else if (typeof str !== 'string') {
+    hsva = str;
+  }
+  if (hsva) {
+    hsv = hsvaToHsv(hsva);
+    hsla = hsvaToHsla(hsva);
+    rgba = hsvaToRgba(hsva);
+    hexa = rgbaToHexa(rgba);
+    hex = hsvaToHex(hsva);
+    hsl = hslaToHsl(hsla);
+    rgb = rgbaToRgb(rgba);
+    xy = rgbToXY(rgb);
+  }
+  return {
+    rgb,
+    hsl,
+    hsv,
+    rgba,
+    hsla,
+    hsva,
+    hex,
+    hexa,
+    xy
+  };
+};
+var validHex$1 = hex => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
+
+// Saves incoming handler to the ref in order to avoid "useCallback hell"
+function useEventCallback(handler) {
+  var callbackRef = useRef(handler);
+  useEffect(() => {
+    callbackRef.current = handler;
+  });
+  return useCallback((value, event) => callbackRef.current && callbackRef.current(value, event), []);
+}
+
+// Check if an event was triggered by touch
+var isTouch = event => 'touches' in event;
+
+// Browsers introduced an intervention, making touch events passive by default.
+// This workaround removes `preventDefault` call from the touch handlers.
+// https://github.com/facebook/react/issues/19651
+var preventDefaultMove = event => {
+  !isTouch(event) && event.preventDefault && event.preventDefault();
+};
+// Clamps a value between an upper and lower bound.
+// We use ternary operators because it makes the minified code
+// 2 times shorter then `Math.min(Math.max(a,b),c)`
+var clamp = function clamp(number, min, max) {
+  if (min === void 0) {
+    min = 0;
+  }
+  if (max === void 0) {
+    max = 1;
+  }
+  return number > max ? max : number < min ? min : number;
+};
+// Returns a relative position of the pointer inside the node's bounding box
+var getRelativePosition = (node, event) => {
+  var rect = node.getBoundingClientRect();
+
+  // Get user's pointer position from `touches` array if it's a `TouchEvent`
+  var pointer = isTouch(event) ? event.touches[0] : event;
+  return {
+    left: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),
+    top: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height),
+    width: rect.width,
+    height: rect.height,
+    x: pointer.pageX - (rect.left + window.pageXOffset),
+    y: pointer.pageY - (rect.top + window.pageYOffset)
+  };
+};
+
+var _excluded$8 = ["prefixCls", "className", "onMove", "onDown"];
+var Interactive = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var {
+      prefixCls = 'w-color-interactive',
+      className,
+      onMove,
+      onDown
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded$8);
+  var container = useRef(null);
+  var hasTouched = useRef(false);
+  var [isDragging, setDragging] = useState(false);
+  var onMoveCallback = useEventCallback(onMove);
+  var onKeyCallback = useEventCallback(onDown);
+
+  // Prevent mobile browsers from handling mouse events (conflicting with touch ones).
+  // If we detected a touch interaction before, we prefer reacting to touch events only.
+  var isValid = event => {
+    if (hasTouched.current && !isTouch(event)) return false;
+    hasTouched.current = isTouch(event);
+    return true;
+  };
+  var handleMove = useCallback(event => {
+    preventDefaultMove(event);
+    if (!container.current) return;
+    var isDown = isTouch(event) ? event.touches.length > 0 : event.buttons > 0;
+    if (!isDown) {
+      setDragging(false);
+      return;
+    }
+    onMoveCallback == null || onMoveCallback(getRelativePosition(container.current, event), event);
+  }, [onMoveCallback]);
+  var handleMoveEnd = useCallback(() => setDragging(false), []);
+  var toggleDocumentEvents = useCallback(state => {
+    if (state) {
+      window.addEventListener(hasTouched.current ? 'touchmove' : 'mousemove', handleMove);
+      window.addEventListener(hasTouched.current ? 'touchend' : 'mouseup', handleMoveEnd);
+    } else {
+      window.removeEventListener('mousemove', handleMove);
+      window.removeEventListener('mouseup', handleMoveEnd);
+      window.removeEventListener('touchmove', handleMove);
+      window.removeEventListener('touchend', handleMoveEnd);
+    }
+  }, [handleMove, handleMoveEnd]);
+  useEffect(() => {
+    toggleDocumentEvents(isDragging);
+    return () => {
+      toggleDocumentEvents(false);
+    };
+  }, [isDragging, handleMove, handleMoveEnd, toggleDocumentEvents]);
+  var handleMoveStart = useCallback(event => {
+    preventDefaultMove(event.nativeEvent);
+    if (!isValid(event.nativeEvent)) return;
+    if (!container.current) return;
+    onKeyCallback == null || onKeyCallback(getRelativePosition(container.current, event.nativeEvent), event.nativeEvent);
+    setDragging(true);
+  }, [onKeyCallback]);
+  return /*#__PURE__*/jsx("div", _extends({}, reset, {
+    className: [prefixCls, className || ''].filter(Boolean).join(' '),
+    style: _extends({}, reset.style, {
+      touchAction: 'none'
+    }),
+    ref: container,
+    tabIndex: 0,
+    onMouseDown: handleMoveStart,
+    onTouchStart: handleMoveStart
+  }));
+});
+Interactive.displayName = 'Interactive';
+
+var Pointer$1 = _ref => {
+  var {
+    className,
+    color,
+    left,
+    top,
+    prefixCls
+  } = _ref;
+  var style = {
+    position: 'absolute',
+    top,
+    left
+  };
+  var stylePointer = {
+    '--saturation-pointer-box-shadow': 'rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px',
+    width: 6,
+    height: 6,
+    transform: 'translate(-3px, -3px)',
+    boxShadow: 'var(--saturation-pointer-box-shadow)',
+    borderRadius: '50%',
+    backgroundColor: color
+  };
+  return useMemo(() => /*#__PURE__*/jsx("div", {
+    className: prefixCls + "-pointer " + (className || ''),
+    style: style,
+    children: /*#__PURE__*/jsx("div", {
+      className: prefixCls + "-fill",
+      style: stylePointer
+    })
+  }), [top, left, color, className, prefixCls]);
+};
+
+var _excluded$7 = ["prefixCls", "radius", "pointer", "className", "hue", "style", "hsva", "onChange"];
+var Saturation = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var _hsva$h;
+  var {
+      prefixCls = 'w-color-saturation',
+      radius = 0,
+      pointer,
+      className,
+      hue = 0,
+      style,
+      hsva,
+      onChange
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$7);
+  var containerStyle = _extends({
+    width: 200,
+    height: 200,
+    borderRadius: radius
+  }, style, {
+    position: 'relative'
+  });
+  var handleChange = (interaction, event) => {
+    onChange && hsva && onChange({
+      h: hsva.h,
+      s: interaction.left * 100,
+      v: (1 - interaction.top) * 100,
+      a: hsva.a
+      // source: 'hsv',
+    });
+  };
+  var pointerElement = useMemo(() => {
+    if (!hsva) return null;
+    var comProps = {
+      top: 100 - hsva.v + "%",
+      left: hsva.s + "%",
+      color: hsvaToHslaString(hsva)
+    };
+    if (pointer && typeof pointer === 'function') {
+      return pointer(_extends({
+        prefixCls
+      }, comProps));
+    }
+    return /*#__PURE__*/jsx(Pointer$1, _extends({
+      prefixCls: prefixCls
+    }, comProps));
+  }, [hsva, pointer, prefixCls]);
+  return /*#__PURE__*/jsx(Interactive, _extends({
+    className: [prefixCls, className || ''].filter(Boolean).join(' ')
+  }, other, {
+    style: _extends({
+      position: 'absolute',
+      inset: 0,
+      cursor: 'crosshair',
+      backgroundImage: "linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsl(" + ((_hsva$h = hsva == null ? void 0 : hsva.h) != null ? _hsva$h : hue) + ", 100%, 50%))"
+    }, containerStyle),
+    ref: ref,
+    onMove: handleChange,
+    onDown: handleChange,
+    children: pointerElement
+  }));
+});
+Saturation.displayName = 'Saturation';
+
+var _excluded$6 = ["className", "prefixCls", "left", "top", "style", "fillProps"];
+var Pointer = _ref => {
+  var {
+      className,
+      prefixCls,
+      left,
+      top,
+      style,
+      fillProps
+    } = _ref,
+    reset = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  var styleWrapper = _extends({}, style, {
+    position: 'absolute',
+    left,
+    top
+  });
+  var stylePointer = _extends({
+    width: 18,
+    height: 18,
+    boxShadow: 'var(--alpha-pointer-box-shadow)',
+    borderRadius: '50%',
+    backgroundColor: 'var(--alpha-pointer-background-color)'
+  }, fillProps == null ? void 0 : fillProps.style, {
+    transform: left ? 'translate(-9px, -1px)' : 'translate(-1px, -9px)'
+  });
+  return /*#__PURE__*/jsx("div", _extends({
+    className: prefixCls + "-pointer " + (className || ''),
+    style: styleWrapper
+  }, reset, {
+    children: /*#__PURE__*/jsx("div", _extends({
+      className: prefixCls + "-fill"
+    }, fillProps, {
+      style: stylePointer
+    }))
+  }));
+};
+
+var _excluded$5 = ["prefixCls", "className", "hsva", "background", "bgProps", "innerProps", "pointerProps", "radius", "width", "height", "direction", "style", "onChange", "pointer"];
+var BACKGROUND_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==';
+var Alpha = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var {
+      prefixCls = 'w-color-alpha',
+      className,
+      hsva,
+      background,
+      bgProps = {},
+      innerProps = {},
+      pointerProps = {},
+      radius = 0,
+      width,
+      height = 16,
+      direction = 'horizontal',
+      style,
+      onChange,
+      pointer
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$5);
+  var handleChange = offset => {
+    onChange && onChange(_extends({}, hsva, {
+      a: direction === 'horizontal' ? offset.left : offset.top
+    }), offset);
+  };
+  var colorTo = hsvaToHslaString(Object.assign({}, hsva, {
+    a: 1
+  }));
+  var innerBackground = "linear-gradient(to " + (direction === 'horizontal' ? 'right' : 'bottom') + ", rgba(244, 67, 54, 0) 0%, " + colorTo + " 100%)";
+  var comProps = {};
+  if (direction === 'horizontal') {
+    comProps.left = hsva.a * 100 + "%";
+  } else {
+    comProps.top = hsva.a * 100 + "%";
+  }
+  var styleWrapper = _extends({
+    '--alpha-background-color': '#fff',
+    '--alpha-pointer-background-color': 'rgb(248, 248, 248)',
+    '--alpha-pointer-box-shadow': 'rgb(0 0 0 / 37%) 0px 1px 4px 0px',
+    borderRadius: radius,
+    background: "url(" + BACKGROUND_IMG + ") left center",
+    backgroundColor: 'var(--alpha-background-color)'
+  }, {
+    width,
+    height
+  }, style, {
+    position: 'relative'
+  });
+  var pointerElement = pointer && typeof pointer === 'function' ? pointer(_extends({
+    prefixCls
+  }, pointerProps, comProps)) : /*#__PURE__*/jsx(Pointer, _extends({}, pointerProps, {
+    prefixCls: prefixCls
+  }, comProps));
+  return /*#__PURE__*/jsxs("div", _extends({}, other, {
+    className: [prefixCls, prefixCls + "-" + direction, className || ''].filter(Boolean).join(' '),
+    style: styleWrapper,
+    ref: ref,
+    children: [/*#__PURE__*/jsx("div", _extends({}, bgProps, {
+      style: _extends({
+        inset: 0,
+        position: 'absolute',
+        background: background || innerBackground,
+        borderRadius: radius
+      }, bgProps.style)
+    })), /*#__PURE__*/jsx(Interactive, _extends({}, innerProps, {
+      style: _extends({}, innerProps.style, {
+        inset: 0,
+        zIndex: 1,
+        position: 'absolute'
+      }),
+      onMove: handleChange,
+      onDown: handleChange,
+      children: pointerElement
+    }))]
+  }));
+});
+Alpha.displayName = 'Alpha';
+
+var _excluded$4 = ["prefixCls", "placement", "label", "value", "className", "style", "labelStyle", "inputStyle", "onChange", "onBlur", "renderInput"];
+var validHex = hex => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
+var getNumberValue = value => Number(String(value).replace(/%/g, ''));
+var EditableInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var {
+      prefixCls = 'w-color-editable-input',
+      placement = 'bottom',
+      label,
+      value: initValue,
+      className,
+      style,
+      labelStyle,
+      inputStyle,
+      onChange,
+      onBlur,
+      renderInput
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$4);
+  var [value, setValue] = useState(initValue);
+  var isFocus = useRef(false);
+  useEffect(() => {
+    if (props.value !== value) {
+      if (!isFocus.current) {
+        setValue(props.value);
+      }
+    }
+  }, [props.value]);
+  function handleChange(evn, valInit) {
+    var value = (valInit || evn.target.value).trim().replace(/^#/, '');
+    if (validHex(value)) {
+      onChange && onChange(evn, value);
+    }
+    var val = getNumberValue(value);
+    if (!isNaN(val)) {
+      onChange && onChange(evn, val);
+    }
+    setValue(value);
+  }
+  function handleBlur(evn) {
+    isFocus.current = false;
+    setValue(props.value);
+    onBlur && onBlur(evn);
+  }
+  var placementStyle = {};
+  if (placement === 'bottom') {
+    placementStyle['flexDirection'] = 'column';
+  }
+  if (placement === 'top') {
+    placementStyle['flexDirection'] = 'column-reverse';
+  }
+  if (placement === 'left') {
+    placementStyle['flexDirection'] = 'row-reverse';
+  }
+  var wrapperStyle = _extends({
+    '--editable-input-label-color': 'rgb(153, 153, 153)',
+    '--editable-input-box-shadow': 'rgb(204 204 204) 0px 0px 0px 1px inset',
+    '--editable-input-color': '#666',
+    position: 'relative',
+    alignItems: 'center',
+    display: 'flex',
+    fontSize: 11
+  }, placementStyle, style);
+  var editableStyle = _extends({
+    width: '100%',
+    paddingTop: 2,
+    paddingBottom: 2,
+    paddingLeft: 3,
+    paddingRight: 3,
+    fontSize: 11,
+    background: 'transparent',
+    boxSizing: 'border-box',
+    border: 'none',
+    color: 'var(--editable-input-color)',
+    boxShadow: 'var(--editable-input-box-shadow)'
+  }, inputStyle);
+  var inputProps = _extends({
+    value,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    autoComplete: 'off',
+    onFocus: () => isFocus.current = true
+  }, other, {
+    style: editableStyle
+  });
+  return /*#__PURE__*/jsxs("div", {
+    className: [prefixCls, className || ''].filter(Boolean).join(' '),
+    style: wrapperStyle,
+    children: [renderInput ? renderInput(inputProps, ref) : /*#__PURE__*/jsx("input", _extends({
+      ref: ref
+    }, inputProps)), label && /*#__PURE__*/jsx("span", {
+      style: _extends({
+        color: 'var(--editable-input-label-color)',
+        textTransform: 'capitalize'
+      }, labelStyle),
+      children: label
+    })]
+  });
+});
+EditableInput.displayName = 'EditableInput';
+
+var _excluded$3 = ["prefixCls", "hsva", "placement", "rProps", "gProps", "bProps", "aProps", "className", "style", "onChange"];
+var EditableInputRGBA = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var {
+      prefixCls = 'w-color-editable-input-rgba',
+      hsva,
+      placement = 'bottom',
+      rProps = {},
+      gProps = {},
+      bProps = {},
+      aProps = {},
+      className,
+      style,
+      onChange
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$3);
+  var rgba = hsva ? hsvaToRgba(hsva) : {};
+  function handleBlur(evn) {
+    var value = Number(evn.target.value);
+    if (value && value > 255) {
+      evn.target.value = '255';
+    }
+    if (value && value < 0) {
+      evn.target.value = '0';
+    }
+  }
+  var handleChange = (value, type, evn) => {
+    if (typeof value === 'number') {
+      if (type === 'a') {
+        if (value < 0) value = 0;
+        if (value > 100) value = 100;
+        onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
+          a: value / 100
+        }))));
+      }
+      if (value > 255) {
+        value = 255;
+        evn.target.value = '255';
+      }
+      if (value < 0) {
+        value = 0;
+        evn.target.value = '0';
+      }
+      if (type === 'r') {
+        onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
+          r: value
+        }))));
+      }
+      if (type === 'g') {
+        onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
+          g: value
+        }))));
+      }
+      if (type === 'b') {
+        onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
+          b: value
+        }))));
+      }
+    }
+  };
+  return /*#__PURE__*/jsxs("div", _extends({
+    ref: ref,
+    className: [prefixCls, className || ''].filter(Boolean).join(' ')
+  }, other, {
+    style: _extends({
+      fontSize: 11,
+      display: 'flex'
+    }, style),
+    children: [/*#__PURE__*/jsx(EditableInput, _extends({
+      label: "R",
+      value: rgba.r || 0,
+      onBlur: handleBlur,
+      placement: placement,
+      onChange: (evn, val) => handleChange(val, 'r', evn)
+    }, rProps, {
+      style: _extends({}, rProps.style)
+    })), /*#__PURE__*/jsx(EditableInput, _extends({
+      label: "G",
+      value: rgba.g || 0,
+      onBlur: handleBlur,
+      placement: placement,
+      onChange: (evn, val) => handleChange(val, 'g', evn)
+    }, gProps, {
+      style: _extends({
+        marginLeft: 5
+      }, rProps.style)
+    })), /*#__PURE__*/jsx(EditableInput, _extends({
+      label: "B",
+      value: rgba.b || 0,
+      onBlur: handleBlur,
+      placement: placement,
+      onChange: (evn, val) => handleChange(val, 'b', evn)
+    }, bProps, {
+      style: _extends({
+        marginLeft: 5
+      }, bProps.style)
+    })), aProps && /*#__PURE__*/jsx(EditableInput, _extends({
+      label: "A",
+      value: rgba.a ? parseInt(String(rgba.a * 100), 10) : 0,
+      onBlur: handleBlur,
+      placement: placement,
+      onChange: (evn, val) => handleChange(val, 'a', evn)
+    }, aProps, {
+      style: _extends({
+        marginLeft: 5
+      }, aProps.style)
+    }))]
+  }));
+});
+EditableInputRGBA.displayName = 'EditableInputRGBA';
+
+var _excluded$2 = ["prefixCls", "className", "hue", "onChange", "direction"];
+var Hue = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var {
+      prefixCls = 'w-color-hue',
+      className,
+      hue = 0,
+      onChange: _onChange,
+      direction = 'horizontal'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$2);
+  return /*#__PURE__*/jsx(Alpha, _extends({
+    ref: ref,
+    className: prefixCls + " " + (className || '')
+  }, other, {
+    direction: direction,
+    background: "linear-gradient(to " + (direction === 'horizontal' ? 'right' : 'bottom') + ", rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",
+    hsva: {
+      h: hue,
+      s: 100,
+      v: 100,
+      a: hue / 360
+    },
+    onChange: (_, interaction) => {
+      _onChange && _onChange({
+        h: direction === 'horizontal' ? 360 * interaction.left : 360 * interaction.top
+      });
+    }
+  }));
+});
+Hue.displayName = 'Hue';
+
+var _excluded$1 = ["prefixCls", "className", "color", "colors", "style", "rectProps", "onChange", "addonAfter", "addonBefore", "rectRender"];
+var Swatch = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var {
+      prefixCls = 'w-color-swatch',
+      className,
+      color: color$1,
+      colors = [],
+      style,
+      rectProps = {},
+      onChange,
+      addonAfter,
+      addonBefore,
+      rectRender
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$1);
+  var rectStyle = _extends({
+    '--swatch-background-color': 'rgb(144, 19, 254)',
+    background: 'var(--swatch-background-color)',
+    height: 15,
+    width: 15,
+    marginRight: 5,
+    marginBottom: 5,
+    cursor: 'pointer',
+    position: 'relative',
+    outline: 'none',
+    borderRadius: 2
+  }, rectProps.style);
+  var handleClick = (hex, evn) => {
+    onChange && onChange(hexToHsva(hex), color(hexToHsva(hex)), evn);
+  };
+  return /*#__PURE__*/jsxs("div", _extends({
+    ref: ref
+  }, other, {
+    className: [prefixCls, className || ''].filter(Boolean).join(' '),
+    style: _extends({
+      display: 'flex',
+      flexWrap: 'wrap',
+      position: 'relative'
+    }, style),
+    children: [addonBefore && /*#__PURE__*/React__default.isValidElement(addonBefore) && addonBefore, colors && Array.isArray(colors) && colors.map((item, idx) => {
+      var title = '';
+      var background = '';
+      if (typeof item === 'string') {
+        title = item;
+        background = item;
+      }
+      if (typeof item === 'object' && item.color) {
+        title = item.title || item.color;
+        background = item.color;
+      }
+      var checked = color$1 && color$1.toLocaleLowerCase() === background.toLocaleLowerCase();
+      var render = rectRender && rectRender({
+        title,
+        color: background,
+        checked: !!checked,
+        style: _extends({}, rectStyle, {
+          background
+        }),
+        onClick: evn => handleClick(background, evn)
+      });
+      if (render) {
+        return /*#__PURE__*/jsx(Fragment, {
+          children: render
+        }, idx);
+      }
+      var child = rectProps.children && /*#__PURE__*/React__default.isValidElement(rectProps.children) ? /*#__PURE__*/React__default.cloneElement(rectProps.children, {
+        color: background,
+        checked
+      }) : null;
+      return /*#__PURE__*/jsx("div", _extends({
+        tabIndex: 0,
+        title: title,
+        onClick: evn => handleClick(background, evn)
+      }, rectProps, {
+        children: child,
+        style: _extends({}, rectStyle, {
+          background
+        })
+      }), idx);
+    }), addonAfter && /*#__PURE__*/React__default.isValidElement(addonAfter) && addonAfter]
+  }));
+});
+Swatch.displayName = 'Swatch';
+
+var _excluded = ["prefixCls", "className", "onChange", "width", "presetColors", "color", "editableDisable", "disableAlpha", "style"];
+var PRESET_COLORS = ['#D0021B', '#F5A623', '#f8e61b', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'];
+var Bar = props => /*#__PURE__*/jsx("div", {
+  style: {
+    boxShadow: 'rgb(0 0 0 / 60%) 0px 0px 2px',
+    width: 4,
+    top: 1,
+    bottom: 1,
+    left: props.left,
+    borderRadius: 1,
+    position: 'absolute',
+    backgroundColor: '#fff'
+  }
+});
+var Sketch = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var {
+      prefixCls = 'w-color-sketch',
+      className,
+      onChange,
+      width = 218,
+      presetColors = PRESET_COLORS,
+      color: color$1,
+      editableDisable = true,
+      disableAlpha = false,
+      style
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  var [hsva, setHsva] = useState({
+    h: 209,
+    s: 36,
+    v: 90,
+    a: 1
+  });
+  useEffect(() => {
+    if (typeof color$1 === 'string' && validHex$1(color$1)) {
+      setHsva(hexToHsva(color$1));
+    }
+    if (typeof color$1 === 'object') {
+      setHsva(color$1);
+    }
+  }, [color$1]);
+  var handleChange = hsv => {
+    setHsva(hsv);
+    onChange && onChange(color(hsv));
+  };
+  var handleHex = (value, evn) => {
+    if (typeof value === 'string' && validHex$1(value) && /(3|6)/.test(String(value.length))) {
+      handleChange(hexToHsva(value));
+    }
+  };
+  var handleAlphaChange = newAlpha => handleChange(_extends({}, hsva, {
+    a: newAlpha.a
+  }));
+  var handleSaturationChange = newColor => handleChange(_extends({}, hsva, newColor, {
+    a: hsva.a
+  }));
+  var styleMain = _extends({
+    '--sketch-background': 'rgb(255, 255, 255)',
+    '--sketch-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px',
+    '--sketch-swatch-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px inset',
+    '--sketch-alpha-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px inset, rgb(0 0 0 / 25%) 0px 0px 4px inset',
+    '--sketch-swatch-border-top': '1px solid rgb(238, 238, 238)',
+    background: 'var(--sketch-background)',
+    borderRadius: 4,
+    boxShadow: 'var(--sketch-box-shadow)',
+    width
+  }, style);
+  var styleAlpha = {
+    borderRadius: 2,
+    background: hsvaToRgbaString(hsva),
+    boxShadow: 'var(--sketch-alpha-box-shadow)'
+  };
+  var styleSwatch = {
+    borderTop: 'var(--sketch-swatch-border-top)',
+    paddingTop: 10,
+    paddingLeft: 10
+  };
+  var styleSwatchRect = {
+    marginRight: 10,
+    marginBottom: 10,
+    borderRadius: 3,
+    boxShadow: 'var(--sketch-swatch-box-shadow)'
+  };
+  return /*#__PURE__*/jsxs("div", _extends({}, other, {
+    className: prefixCls + " " + (className || ''),
+    ref: ref,
+    style: styleMain,
+    children: [/*#__PURE__*/jsxs("div", {
+      style: {
+        padding: '10px 10px 8px'
+      },
+      children: [/*#__PURE__*/jsx(Saturation, {
+        hsva: hsva,
+        style: {
+          width: 'auto',
+          height: 150
+        },
+        onChange: handleSaturationChange
+      }), /*#__PURE__*/jsxs("div", {
+        style: {
+          display: 'flex',
+          marginTop: 4
+        },
+        children: [/*#__PURE__*/jsxs("div", {
+          style: {
+            flex: 1
+          },
+          children: [/*#__PURE__*/jsx(Hue, {
+            width: "auto",
+            height: 10,
+            hue: hsva.h,
+            pointer: Bar,
+            innerProps: {
+              style: {
+                marginLeft: 1,
+                marginRight: 5
+              }
+            },
+            onChange: newHue => handleChange(_extends({}, hsva, newHue))
+          }), !disableAlpha && /*#__PURE__*/jsx(Alpha, {
+            width: "auto",
+            height: 10,
+            hsva: hsva,
+            pointer: Bar,
+            style: {
+              marginTop: 4
+            },
+            innerProps: {
+              style: {
+                marginLeft: 1,
+                marginRight: 5
+              }
+            },
+            onChange: handleAlphaChange
+          })]
+        }), !disableAlpha && /*#__PURE__*/jsx(Alpha, {
+          width: 24,
+          height: 24,
+          hsva: hsva,
+          radius: 2,
+          style: {
+            marginLeft: 4
+          },
+          bgProps: {
+            style: {
+              background: 'transparent'
+            }
+          },
+          innerProps: {
+            style: styleAlpha
+          },
+          pointer: () => /*#__PURE__*/jsx(Fragment, {})
+        })]
+      })]
+    }), editableDisable && /*#__PURE__*/jsxs("div", {
+      style: {
+        display: 'flex',
+        margin: '0 10px 3px 10px'
+      },
+      children: [/*#__PURE__*/jsx(EditableInput, {
+        label: "Hex",
+        value: hsvaToHex(hsva).replace(/^#/, '').toLocaleUpperCase(),
+        onChange: (evn, val) => handleHex(val),
+        style: {
+          minWidth: 58
+        }
+      }), /*#__PURE__*/jsx(EditableInputRGBA, {
+        hsva: hsva,
+        style: {
+          marginLeft: 6
+        },
+        aProps: !disableAlpha ? {} : false,
+        onChange: result => handleChange(result.hsva)
+      })]
+    }), presetColors && presetColors.length > 0 && /*#__PURE__*/jsx(Swatch, {
+      style: styleSwatch,
+      colors: presetColors,
+      color: hsvaToHex(hsva),
+      onChange: hsvColor => handleChange(hsvColor),
+      rectProps: {
+        style: styleSwatchRect
+      }
+    })]
+  }));
+});
+Sketch.displayName = 'Sketch';
+
+function alphaToHex(alpha) {
+    var clampedAlpha = Math.max(0, Math.min(1, alpha));
+    var hexVal = Math.round(clampedAlpha * 255);
+    return hexVal.toString(16).toUpperCase().padStart(2, '0');
+}
+function ColorPickerField(_a) {
+    var element = _a.element, fieldLabel = _a.fieldLabel, responsiveStyles = _a.responsiveStyles, _b = _a.fieldVal, fieldVal = _b === void 0 ? 'FFFFFFFF' : _b, editMode = _a.editMode, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, _d = _a.elementProps, elementProps = _d === void 0 ? {} : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, children = _a.children;
+    var _f = __read(useState(false), 2), showPicker = _f[0], setShowPicker = _f[1];
+    return (jsxs$1("div", __assign({ css: __assign({ maxWidth: '100%', width: '100%', position: 'relative', pointerEvents: editMode || disabled ? 'none' : 'auto' }, responsiveStyles.getTarget('fc')) }, elementProps, { children: [children, fieldLabel, jsx$1("div", { css: __assign({ width: '100%', background: "#".concat(fieldVal), cursor: 'pointer' }, responsiveStyles.getTarget('field')), onClick: function () {
+                    if (!editMode && !disabled)
+                        setShowPicker(function (showPicker) { return !showPicker; });
+                } }), showPicker ? (jsxs$1("div", __assign({ css: {
+                    position: 'absolute',
+                    zIndex: FORM_Z_INDEX + 1
+                } }, { children: [jsx$1("div", { css: {
+                            position: 'fixed',
+                            top: '0px',
+                            right: '0px',
+                            bottom: '0px',
+                            left: '0px'
+                        }, onClick: function () { return setShowPicker(false); } }), jsx$1(Sketch, { "aria-label": element.properties.aria_label, color: "#".concat(fieldVal), onChange: function (color) {
+                            var hex = color.hex.substring(1, 7);
+                            var alpha = alphaToHex(color.rgba.a);
+                            onChange("".concat(hex).concat(alpha));
+                        } })] }))) : null] })));
+}
+
+export { ColorPickerField as default };